# CardContainer

## <mark style="color:green;">class</mark> **CardContainer**

{% hint style="warning" %}
Do not create **CardContainer** instances directly. Instead, use the `create_container()` method of the [Tab](https://docs.nighty.one/ui-scripting/api-reference/tab) class to genereate them.
{% endhint %}

{% hint style="info" %}
**At least one `CardContainer` is required within a `Tab` element.**

A `Tab` can hold multiple `CardContainer` objects. Nesting `CardContainer` objects inside each other is allowed, meaning you can create complex layouts with nested containers. However, we **do not recommend** nesting more than 3 `CardContainer` objects, as it may result in a poorly structured UI that looks disorganized or cluttered.
{% endhint %}

#### Constructor

```python
# Basic example
container = tab.create_container() # Default type of "columns" and variants of {"height": "full","width": "full"} will be used

# Custom parameters
container = tab.create_container(
    type="columns",
    height="full",
    width="auto",
    gap=8
)

# Rows example
container = tab.create_container(
    type="rows",
    height="full",
    width="auto",
    gap=8
)
```

<table><thead><tr><th width="216">Parameter</th><th>Description</th></tr></thead><tbody><tr><td>type</td><td>Allowed: <code>"columns"</code> | <code>"rows"</code><br>Default: <code>"columns"</code></td></tr><tr><td>width</td><td>Allowed: <code>"auto"</code> | <code>"full"</code><br>Default: <code>"full"</code></td></tr><tr><td>height</td><td>Allowed: <code>"auto"</code> | <code>"full"</code><br>Default: <code>"full"</code></td></tr><tr><td>gap</td><td>See <a href="..#gap">Gap</a><br>Default: <code>6</code></td></tr></tbody></table>

#### Methods

<table><thead><tr><th width="279">Method</th><th>Description</th></tr></thead><tbody><tr><td>create_container(type, **kwargs)</td><td>Creates a nested CardContainer.</td></tr><tr><td>create_card(**kwargs)</td><td>Creates and adds the <a href="card">Card </a>to the CardContainer.</td></tr></tbody></table>

### Examples

The following examples demonstrate how to create layouts using CardContainers and [Cards](https://docs.nighty.one/ui-scripting/api-reference/card).

<figure><img src="https://3836407116-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaFce5BqRsGvQObqcfG7q%2Fuploads%2FcZMTAwZDuvemGXrjYxwD%2Fex3.png?alt=media&#x26;token=e8856ec5-4f65-43ad-8776-e6541d9c3a55" alt=""><figcaption><p>Simple example with just one card</p></figcaption></figure>

```python
tab = Tab(name='My Custom Tab')

# this container holds only one card, type does not matter
container = tab.create_container(type="columns")
card = container.create_card()

tab.render()
```

***

<figure><img src="https://3836407116-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaFce5BqRsGvQObqcfG7q%2Fuploads%2F6ASDzzDKPcCtHQSlq1zX%2Fex4.png?alt=media&#x26;token=9b8203b8-1ac7-4d84-9695-aeab3a4ea43e" alt=""><figcaption></figcaption></figure>

```python
tab = Tab(name='My Custom Tab')

container = tab.create_container(type="columns")

left_card = container.create_card()
right_card = container.create_card()

tab.render()
```

***

<figure><img src="https://3836407116-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaFce5BqRsGvQObqcfG7q%2Fuploads%2FWTubZL12loIRU1dARtPG%2Fex1.png?alt=media&#x26;token=862d79d4-0aca-40c1-939e-539ef9617c61" alt=""><figcaption></figcaption></figure>

```python
tab = Tab(name='My Custom Tab')

top_container = tab.create_container(type="columns")

top_left_card = top_container.create_card()
top_right_card = top_container.create_card()

# this container holds only one card, type does not matter
bottom_container = tab.create_container(type="columns") 

bottom_card = bottom_container.create_card()


tab.render()
```

***

<figure><img src="https://3836407116-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaFce5BqRsGvQObqcfG7q%2Fuploads%2F2BBDegsyehpzASi6A8mW%2Fex2.png?alt=media&#x26;token=23aa5608-ba03-4681-9050-6b1d315048fb" alt=""><figcaption></figcaption></figure>

```python
tab = Tab(name='My Custom Tab')

top_container = tab.create_container(type="columns")

top_left_card = top_container.create_card()
top_right_card = top_container.create_card()

bottom_container = tab.create_container(type="columns")

bottom_left_card = bottom_container.create_card()
bottom_right_card = bottom_container.create_card()


tab.render()
```

***

<figure><img src="https://3836407116-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaFce5BqRsGvQObqcfG7q%2Fuploads%2FaZ4Bq4iufsaIthg4kfn8%2Fex5.png?alt=media&#x26;token=74436862-d471-4069-922b-fc6e52eac2c5" alt=""><figcaption></figcaption></figure>

```python
tab = Tab(name='My Custom Tab')

wrapper_container = tab.create_container(type="columns")

left_container = wrapper_container.create_container(type="rows")
top_card = left_container.create_card()
bottom_card = left_container.create_card()

# this container holds only one card, type does not matter
right_container = wrapper_container.create_container(type="columns")
right_card = right_container.create_card()

tab.render()
```