<Card title="Click on me" icon="link" 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="link" 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

Was this page helpful?