Cards

Highlight main points or links with customizable icons

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="Click on me" 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>

Horizontal card

Add a horizontal property to display cards horizontally.

Horizontal Card

Here is an example of a horizontal card

Image card

Add an img property to display an image on the top of the card.

Image Card

Here is an example of a card with an image

Link card

You can customize the CTA and whether or not to display the arrow on the card. By default, the arrow will only show for external links.

Link card

This is how you use a card with an icon and a link. Clicking on this card brings you to the Columns page.

Click here

Card Example

<Card
  title="Link card"
  icon="link"
  href="/components/columns"
  arrow="true"
  cta="Click here"
>
  This is how you use a card with an icon and a link. Clicking on this card
  brings you to the Columns page.
</Card>

Grouping cards

You can group cards in columns.

First Card

This is the first card.

Second Card

This is the second card.

Props

title · string · required

The title of the card

icon · string or svg

A Font Awesome icon, Lucide icon, or SVG code in icon={}

iconType · string

One of regular, solid, light, thin, sharp-solid, duotone, brands

color · string

The color of the icon as a hex code

href · string

The url that clicking on the card would navigate the user to

horizontal · boolean

Makes the card more compact and horizontal

img · string

The url or local path to an image to display on the top of the card

cta · string

Label for the action button

arrow · boolean

Enable or disable the link arrow icon