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.