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.

​
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

Was this page helpful?

Callout BoxesCard Groups