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" 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" 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>

​
Grouping cards

Use the Columns component to organize multiple cards side by side.

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 or svg

Icon to display on the card. Use a Font Awesome icon name, Lucide icon name, or JSX-compatible SVG code wrapped in icon={}.

For custom SVG icons:

  1. Use the SVGR converter.
  2. Copy the code inside the <svg/> tag.
  3. Paste the code into your card.
  4. Adjust height and width as needed.
​
iconType
string

Font Awesome icon style: regular, solid, light, thin, sharp-solid, duotone, or brands.

​
color
string

Icon color as a hex code (e.g., #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.