> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-card-builder.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Elements & Actions

> A reference of everything a card can contain — content, layout, and interactive elements, the actions a card can trigger, and the ready-made components you can add to a card.

A card is made up of **elements** arranged on the canvas. Interactive elements can trigger **actions**, and **components** give you ready-made groups of elements to start from. This page lists what's available.

## Elements

### Content

| Element        | Description                                                |
| -------------- | ---------------------------------------------------------- |
| **Text**       | A line or paragraph of text, with heading and body styles. |
| **Markdown**   | Rich text written in Markdown.                             |
| **Image**      | An image from a URL.                                       |
| **Icon**       | An icon from the built-in library or a custom image.       |
| **Avatar**     | A circular user or entity image.                           |
| **Badge**      | A small label, often for status or counts.                 |
| **Chip**       | A compact, tappable tag.                                   |
| **Code block** | Pre-formatted, monospaced text.                            |

### Layout

| Element       | Description                                       |
| ------------- | ------------------------------------------------- |
| **Row**       | Arranges elements side by side.                   |
| **Column**    | Groups elements vertically, usually inside a row. |
| **Grid**      | Arranges elements in a grid.                      |
| **Accordion** | Collapsible sections that expand on tap.          |
| **Tabs**      | Switch between sections of content.               |
| **Divider**   | A horizontal line to separate content.            |
| **Spacer**    | Empty space to control vertical rhythm.           |

Rows, columns, and grids can also have their own background color, corner radius, and border.

### Interactive

| Element         | Description                                  |
| --------------- | -------------------------------------------- |
| **Button**      | A labeled button that triggers an action.    |
| **Icon button** | An icon-only button that triggers an action. |
| **Link**        | Tappable text that triggers an action.       |

### Data

| Element          | Description                          |
| ---------------- | ------------------------------------ |
| **Table**        | Rows and columns of structured data. |
| **Progress bar** | A visual indicator of progress.      |

## Actions

Add an action to a button, icon button, link, or chip to make it interactive. When a user taps the element, the action runs.

| Action                | What it does                                  |
| --------------------- | --------------------------------------------- |
| **Open URL**          | Opens a web address.                          |
| **Chat with user**    | Starts a one-to-one conversation with a user. |
| **Chat with group**   | Opens a group conversation.                   |
| **Send message**      | Sends a message on the user's behalf.         |
| **Copy to clipboard** | Copies text to the clipboard.                 |
| **Download file**     | Downloads a file.                             |
| **Initiate call**     | Starts a voice or video call.                 |
| **API call**          | Makes a request to a configured endpoint.     |
| **Custom callback**   | Triggers custom handling in your app.         |

## Variables

Variables are placeholders you insert into text and URL fields, written as `{{name}}` (for example `{{user.name}}`). They're replaced with real values when the card is sent, letting one card adapt to each recipient. Insert them from the variable picker wherever you enter text.

## Components

Components are pre-built groups of elements you can add to a card and then edit. They're a fast way to start a common card:

| Component               | Use case                                             |
| ----------------------- | ---------------------------------------------------- |
| **Product Card**        | A product with image, details, and a call to action. |
| **Order Confirmation**  | Order summary with status.                           |
| **Order Tracking**      | A delivery timeline.                                 |
| **Event Card**          | Event details with date and location.                |
| **Announcement**        | News or an update.                                   |
| **Quick Reply Buttons** | Tappable response options.                           |
| **Feedback**            | A quick rating or response prompt.                   |
| **Data Table**          | Structured rows of data.                             |
| **Carousel**            | A horizontally scrollable set of cards.              |

## Fallback Text

Every card includes **fallback text** — what a CometChat UI Kit renders if it can't display the card itself (for example, if the card JSON is malformed or the client doesn't support cards). Always set it so the message still conveys its meaning.