Skip to main content
Use cards to create visual containers for content. Cards are flexible containers that can include text, icons, images, and links.

​
Basic card

Card title

This is how you use a card with an icon and a link. Clicking on this card brings you to the Columns page.
Card example

​
Card variations

Cards support several layout and styling options to fit different content needs.

​
Horizontal layout

Add the horizontal property to display cards in a more compact, horizontal layout.

Horizontal card

This is an example of a horizontal card.
Horizontal card example

​
Image cards

Add an img property to display an image at the top of the card.
yosemite

Image card

This is an example of a card with an image.
Image card example
You can customize the call-to-action text and control whether an arrow appears. By default, arrows only show for external links.

Link card

This is an example of a card with an icon and a link. Clicking on this card brings you to the Columns page.
Link card example

​
Group cards

Use the Columns component to organize multiple cards side by side. The Columns component supports one to four columns and automatically adjusts for smaller screens.

First card

This is the first card.

Second card

This is the second card.
Columns example

​
Properties

​
string
required
The title displayed on the card
​
string
Optional icon name from the Lucide icon library
​
string
Icon color as a hex code (for example, #FF6B6B).
​
string
URL to navigate to when the card is clicked.
​
boolean
Display the card in a compact horizontal layout.
​
string
URL or local path to an image displayed at the top of the card.
​
string
Custom text for the action button.
​
boolean
Show or hide the link arrow icon.