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>

​
Typed cards

Add a type property to style a card with the same theme as a callout. Typed cards apply a colored background, border, and default icon that match the selected type, so you can use them to draw attention to grouped content like notes, warnings, or success states. Supported types: info, warning, note, tip, check, and danger. Optionally, override the default icon with the icon property.

Note card

Use note to highlight supporting information.

Warning card

Use warning to flag potential issues.

Tip card

Use tip to share helpful suggestions.

Danger card

Use danger for destructive or risky actions.
Typed card example
<Card title="Note card" type="note">
  Use `note` to highlight supporting information.
</Card>

<Card title="Warning card" type="warning">
  Use `warning` to flag potential issues.
</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
The title displayed on the card.
​
icon
string
The icon to display.Options:
  • Font Awesome icon name, if you have the icons.library property set to fontawesome in your docs.json
  • Lucide icon name, if you have the icons.library property set to lucide in your docs.json
  • Tabler icon name, if you have the icons.library property set to tabler in your docs.json
  • URL to an externally hosted icon
  • Path to an icon file in your project
  • SVG code wrapped in curly braces
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 (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.
​
type
string
Apply a callout-style theme to the card. One of info, warning, note, tip, check, or danger. Sets the card’s background, border, and default icon to match the selected type.

Related topics

Build custom page layoutsColumnsRedirects