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.