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>

<Card title="Image Card" img="/images/card-with-image.png">
  Here is an example of a card with an image
</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 JSX compatible SVG code in icon={}.

To generate JSX compatible SVG code:

1. Use the SVGR converter.
2. Copy the code inside the <svg/> tag.
3. Paste the code into your card. Make sure to only copy and paste the code inside the <svg/> tag.
4. You may need to decrease the height and width to make the image fit.

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