<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

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

 
<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.

yosemite

Image Card

Here is an example of a card with an image

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.

 
<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