<Card title="Click on me" icon="text" href="/content/components/card-group">
  This is how you use a card with an icon and a link. Clicking on this card
  brings you to the Card Group 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 Card Group page.
 
<Card title="Click on me" icon="text" href="/content/components/card-group">
  This is how you use a card with an icon and a link. Clicking on this card
  brings you to the Card Group page.
</Card>

​
Horizontal Card

Add a horizontal property to make it horizontally displayed.

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 Card Group page.
 
<Card
  title="Link card"
  icon="link"
  href="/content/components/card-groups"
  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 Card Group page.
</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