# Card

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

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

{% hint style="info" %}
Nesting multiple Cards is prohibited.

Cards must be a direct children of the [CardContainer](https://docs.nighty.one/ui-scripting/api-reference/cardcontainer).
{% endhint %}

#### Constructor

```python
# Basic example
card = container.create_card() # Default type of "columns"

# Custom properties
container = tab.create_container(
    type="columns",
    height: "auto",
    width: "auto",
    vertical_align: "center",
    horizontal_align: "center",
    gap: 4,
    disallow_shrink=True
)

# Rows example
container = tab.create_container(type="rows")
```

| Parameter         | Description                                                    |                                                                                                                                                                                                                                                                                                                                                                  |                                                                                                                                                                 |
| ----------------- | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| type              | <p>Allowed: <code>"columns"</code>                             | <code>"rows"</code><br>Default: <code>columns</code></p>                                                                                                                                                                                                                                                                                                         |                                                                                                                                                                 |
| height            | <p>Allowed: <code>"auto"</code>                                | <code>"full"</code><br>Default: <code>"full"</code></p>                                                                                                                                                                                                                                                                                                          |                                                                                                                                                                 |
| width             | <p>Allowed: <code>"auto"</code>                                | <code>"full"</code><br>Default: <code>"full"</code></p>                                                                                                                                                                                                                                                                                                          |                                                                                                                                                                 |
| vertical\_align   | <p>Allowed: <code>"start"</code>                               | <code>"center"                                                                                                                                                                                                                                                                                                                                                   | "end"</code><br>Default: <code>"start"</code><br><br>Defines the alignment of the card's child elements (UI elements and Groups) along the vertical axis.</p>   |
| horizontal\_align | <p>Allowed: <code>"start"</code>                               | <code>"center"                                                                                                                                                                                                                                                                                                                                                   | "end"</code><br>Default: <code>"start"</code><br><br>Defines the alignment of the card's child elements (UI elements and Groups) along the horizontal axis.</p> |
| gap               | <p>See <a href="..#gap">Gap</a><br>Default: <code>6</code></p> |                                                                                                                                                                                                                                                                                                                                                                  |                                                                                                                                                                 |
| disallow\_shrink  | <p>Allowed: <code>True                                         | False</code><br>Default: <code>False</code><br><br>Prevents the card from shrinking when its width or height is set to <code>auto</code>. Useful when cards adjust their size to fit other elements in the tab. Set to <code>True</code> to disable shrinking. Leave it as default if no issues occur, as forcing this may cause unexpected layout behavior.</p> |                                                                                                                                                                 |

#### Methods

| Method                                   | Description                                                                                             |
| ---------------------------------------- | ------------------------------------------------------------------------------------------------------- |
| create\_group(type, \*\*kwargs)          | Creates a Group instance within the card to organize and manage child elements as a single unit.        |
| create\_ui\_element(element, \*\*kwargs) | Creates a [UI Element](https://docs.nighty.one/ui-scripting/api-reference/ui-elements) within the card. |

### Examples

<figure><img src="https://3836407116-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaFce5BqRsGvQObqcfG7q%2Fuploads%2FJ2QCBoNnDWxkuIvY02Ku%2Fex6.png?alt=media&#x26;token=a73678e2-6dc8-4761-9012-dcea83df34bf" alt=""><figcaption></figcaption></figure>

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

container = tab.create_container(type="columns")
card = container.create_card(gap=2)

card.create_ui_element(UI.Text, content="Hello, World!", size="xl")
card.create_ui_element(UI.Text, content="Welcome from py.", size="base", color="#d5e0e6")

tab.render()
```

***

<figure><img src="https://3836407116-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaFce5BqRsGvQObqcfG7q%2Fuploads%2F9tGnAIKdSfDg4jGFS6j2%2Fex7.png?alt=media&#x26;token=c749b84a-b0c5-4787-adb6-83c280c197d9" alt=""><figcaption></figcaption></figure>

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

container = tab.create_container(type="columns")
card = container.create_card(vertical_align="start", horizontal_align="center", gap=2)

card.create_ui_element(UI.Text, content="Hello, World!", size="xl")
card.create_ui_element(UI.Text, content="Welcome from py.", size="base", color="#d5e0e6")

tab.render()
```

***

<figure><img src="https://3836407116-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaFce5BqRsGvQObqcfG7q%2Fuploads%2FL73pB4pnpwqQfLWt6sW2%2Fex8.png?alt=media&#x26;token=c17c0d90-962b-4902-822d-1f580cf7e80d" alt=""><figcaption></figcaption></figure>

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

container = tab.create_container(type="columns")
card = container.create_card(gap=2, vertical_align="center", horizontal_align="center")

card.create_ui_element(UI.Text, content="Input email", size="base")
email_input = card.create_ui_element(UI.Input, label="Email", margin="mb-4")
submit_button = card.create_ui_element(UI.Button, label="Submit", variant="cta")

def on_submit():
    print(f"{email_input.value} submitted")

submit_button.onClick = on_submit

tab.render()
```
