Cards
Highlight main points or links with customizable layouts and icons
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 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.
Image cards
Add an img
property to display an image at the top of the card.

Image card
This is an example of a card with an image.
Link cards with custom CTAs
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.
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.
Properties
The title displayed on the card
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:
- Use the SVGR converter.
- Copy the code inside the
<svg/>
tag. - Paste the code into your card.
- Adjust height and width as needed.
Font Awesome icon style: regular
, solid
, light
, thin
, sharp-solid
, duotone
, or brands
.
Icon color as a hex code (e.g., #FF6B6B
).
URL to navigate to when the card is clicked.
Display the card in a compact horizontal layout.
URL or local path to an image displayed at the top of the card.
Custom text for the action button.
Show or hide the link arrow icon.