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 title="Card title" icon="text-align-start" href="/components/columns">
  This is how you use a card with an icon and a link. Clicking on this card
  brings you to the Columns page.
</Card>

​
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
<Card title="Horizontal card" icon="text-align-start" horizontal>
  This is an example of a horizontal card.
</Card>

​
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
<Card title="Image card" img="/images/card-with-image.png">
  This is an example of a card with an image.
</Card>
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
<Card
  title="Link card"
  icon="link"
  href="/components/columns"
  arrow="true"
  cta="Click here"
>
  This is an example of a card with an icon and a link. Clicking on this card brings you to the Columns page.
</Card>

​
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
<Columns cols={2}>
  <Card title="First card" icon="panel-left-close">
    This is the first card.
  </Card>
  <Card title="Second card" icon="panel-right-close">
    This is the second card.
  </Card>
</Columns>

​
Properties

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

Build docs developers (and LLMs) love

Get started for freeTalk to us