# Card

## Introduction

**`Card`** widget in Supervisely is a simple widget that can be used to display information or content in a compact format. It can be controlled by setting `loading`/`lock` properties and can be collapsed to save space. It provides a straightforward and easy-to-use solution for displaying information clearly and concisely.

## Function signature

```python
card = Card(
    title="Title",
    description="Description text",
    collapsable=False,
    content=Text("some text"),
    content_top_right=None,
    lock_message="Card content is locked",
    widget_id=None,
)
```

<figure><img src="https://user-images.githubusercontent.com/79905215/223941574-16a3903a-b8a4-46a1-bb38-a885dccf32b6.png" alt=""><figcaption></figcaption></figure>

## Parameters

|      Parameters     |   Type   |                         Description                         |
| :-----------------: | :------: | :---------------------------------------------------------: |
|       `title`       |   `str`  |                      Card widget title                      |
|    `description`    |   `str`  |               Description text for card widget              |
|    `collapsable`    |  `bool`  | Enable `collapsable` property to allow minimize card widget |
|      `content`      | `Widget` |                Widget to place in Card widget               |
| `content_top_right` | `Widget` |      Widget to place in top right corner of Card widget     |
|    `lock_message`   |   `str`  |         Message to display when card will be locked         |
|     `widget_id`     |   `str`  |                          Widget ID                          |

### title

Card widget title

**type:** `str`

**default** `None`

```python
card = Card(title="Card title")
```

<figure><img src="https://user-images.githubusercontent.com/79905215/220181030-f2da22e8-0fa5-4383-ae38-7977a4969750.png" alt=""><figcaption></figcaption></figure>

### description

Description text for card widget

**type:** `str`

**default** `None`

```python
card = Card(description="card description")
```

<figure><img src="https://user-images.githubusercontent.com/79905215/220180856-0640f01f-71ef-422e-a864-76f7abbbe98e.png" alt=""><figcaption></figcaption></figure>

### collapsable

Enable `collapsable` property to allow minimize card widget

**type:** `bool`

**default** `False`

```python
card = Card(
    title="Card title",
    description="card description",
    content=Text("some text"),
    collapsable=True
)
```

<figure><img src="https://user-images.githubusercontent.com/79905215/223941697-a3a68d59-194a-45f4-98d9-589bf015b155.gif" alt=""><figcaption></figcaption></figure>

### content

Widget to place in Card widget

**type:** `Widget`

**default** `None`

```python
card = Card(
    title="Card title",
    description="card description",
    content=Container(widgets=[Text("some text"), Button("Button")])
)
```

<figure><img src="https://user-images.githubusercontent.com/79905215/220179379-df3e2b0c-a85f-4e7f-b9c2-ee1c52c5a7ab.png" alt=""><figcaption></figcaption></figure>

### content\_top\_right

Widget to place in top right corner of Card widget

**type:** `Widget`

**default** `None`

```python
card = Card(
    title="Card title",
    description="card description",
    content=Text("some text"),
    content_top_right=Button("Button"),
)
```

<figure><img src="https://user-images.githubusercontent.com/79905215/220179093-c6f870f6-8c5f-4cb2-ac08-28a0d51efd63.png" alt=""><figcaption></figcaption></figure>

### lock\_message

Message to display when card will be locked

**type:** `str`

**default** `"Card content is locked"`

```python
card = Card(
    content=Text("some text"),
    lock_message='Press "UNLOCK" button to unlock the card.',
)
```

<figure><img src="https://user-images.githubusercontent.com/79905215/220178542-f589a5f4-5ffc-437d-b0ed-5863a6d8d64b.png" alt=""><figcaption></figcaption></figure>

### widget\_id

Widget ID

**type:** `str`

**default** `None`

## Methods and attributes

| Attributes and Methods | Description                                |
| :--------------------: | ------------------------------------------ |
|        `loading`       | Get or set `loading` property.             |
|      `collapse()`      | Minimize card widget.                      |
|     `uncollapse()`     | Expand card widget.                        |
|    `is_collapsed()`    | Checks if card widget is collapsed or not. |
|        `lock()`        | Lock card widget and show message.         |
|       `unlock()`       | Unlock card widget and hide lock message.  |
|      `is_locked()`     | Check if card widget is locked.            |

## Mini App Example

You can find this example in our Github repository:

[ui-widgets-demos/layouts and containers/001\_card/src/main.py](https://github.com/supervisely-ecosystem/ui-widgets-demos/blob/master/layouts%20and%20containers/001_card/src/main.py)

### Import libraries

```python
import os
import random

import supervisely as sly
from dotenv import load_dotenv
from supervisely.app.widgets import Button, Card, Container, Image
```

### Init API client

First, we load environment variables with credentials and init API for communicating with Supervisely Instance:

```python
load_dotenv("local.env")
load_dotenv(os.path.expanduser("~/supervisely.env"))

api = sly.Api()
```

### Prepare widgets we will use in `Card` widget

Buttons to enable loading property, lock and collapse `Card` widget:

```python
loading_btn = Button("Loading True")
lock_btn = Button("Lock")
collapse_btn = Button("Collapse")
```

Buttons to unlock, uncollapse and disable loading property of `Card` widget:

```python
unlock_btn = Button("Unlock", button_type="success")
uncollapse_btn = Button("Uncollapse", button_type="success")
refresh_btn = Button("Loading False", button_type="success")
```

Use `Container` widget to join `Button` widgets in groups.

```python
btn_container_1 = Container(widgets=[loading_btn, refresh_btn])
btn_container_2 = Container(widgets=[lock_btn, unlock_btn])
btn_container_3 = Container(widgets=[collapse_btn, uncollapse_btn])

containers = Container(
    widgets=[btn_container_1, btn_container_2, btn_container_3],
    direction="horizontal",
)
```

Prepare widgets to display some image.

```python
preview_btn = Button("Preview")
image = Image()
```

### Initialize `Card` widgets

Initialize one `Card` widget for buttons

```
buttons_card = Card(content=containers)
```

Initialize second `Card` widget for previewing images.

```python
image_card = Card(
    title="Card",
    description="Card Description",
    content=image,
    collapsable=True,
    content_top_right=preview_btn,
)
```

### Create app layout

Prepare a layout for app using `Card` widget with the `content` parameter.

```python
layout = Container(
    widgets=[buttons_card, image_card],
    direction="horizontal",
    fractions=[1, 1],
)
```

### Create app using layout

Create an app object with layout parameter.

```python
app = sly.Application(layout=card)
```

#### Add functions to control widgets from python code

```python
@unlock_btn.click
def lock_card():
    image_card.unlock()


@uncollapse_btn.click
def lock_card():
    image_card.uncollapse()


@refresh_btn.click
def lock_card():
    image_card.loading = False


@lock_btn.click
def lock_card():
    image_card.lock()


@collapse_btn.click
def lock_card():
    image_card.collapse()


@loading_btn.click
def lock_card():
    image_card.loading = True


@preview_btn.click
def load_preview_image():
    image_card.loading = True
    image.set(image_info.full_storage_url)
    image_card.loading = False
```

<figure><img src="https://user-images.githubusercontent.com/79905215/220270565-861b5a71-238e-4a30-8152-1df5811d8e6c.gif" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developer.supervisely.com/app-development/widgets/layouts-and-containers/card.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.