<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 a card to make it horizontally displayed.

Horizontal Card

Here is an example of a horizontal card

​
Image Card

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

Image Card

Here is an example of a card with an image

​
Props

​
title
string
required
The title of the card
​
icon
string or svg
A Font Awesome 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