# Card Block

## Structured and Interactive Content

Cards are structured content elements that combine images, text, and interactive buttons to present information in a clear and engaging format.

{% embed url="<https://screen.studio/share/O9NU1xQQ?_loop=1&autoplay=1>" %}
Cards displayed in a chat conversation
{% endembed %}

When you create multiple cards (up to 10), they are displayed in a **carousel** format, allowing users to scroll through them horizontally. You can easily reorder cards using the drag-and-drop functionality, making it simple to customize the presentation order.

<figure><img src="/files/SyU6vU3o47u3tSJQtGGs" alt=""><figcaption><p>Card Block</p></figcaption></figure>

#### Card Configuration Options

* **Image** (Optional): The maximum height for an image in a Card Block is 244px per card. When multiple cards are displayed in a carousel view, the image will be automatically adjusted to a 16:9 aspect ratio to maintain visual consistency.
  * Image ALT text (Optional): Descriptive text for accessibility (not visible in web chat).
* **Title** (Mandatory): Up to 55 characters, concise and engaging.
* **Description** (Mandatory): Up to 85 characters (maximum 3 lines of text).
* **Buttons** (Optional): Up to 2 buttons per card (label max: 20 characters). Buttons can **link to internal workflows or agents or external pages**. All cards in a carousel must have the same number of buttons.

#### Common Use Cases

* Product Highlights: Showcase key services or items with images, descriptions, and purchase buttons.
* Interactive Menus: Guide users through conversation options.
* Promotional Offers: Feature discounts with links to dedicated landing pages.
* Guided User Journeys: Help users explore topics while maintaining conversation flow.


---

# 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://guide.indigo.ai/getting-started/agents-workflows-and-triggers/blocks/message-blocks/card-block.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.
