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
The icon to display.Options:
  • Font Awesome icon name
  • Lucide icon name
  • JSX-compatible SVG code wrapped in curly braces
  • URL to an externally hosted icon
  • Path to an icon file in your project
For custom SVG icons:
  1. Convert your SVG using the SVGR converter.
  2. Paste your SVG code into the SVG input field.
  3. Copy the complete <svg>...</svg> element from the JSX output field.
  4. Wrap the JSX-compatible SVG code in curly braces: icon={<svg ...> ... </svg>}.
  5. Adjust height and width as needed.
​
iconType
string
The Font Awesome icon style. Only used with Font Awesome icons.Options: regular, solid, light, thin, sharp-solid, duotone, 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.