Cards

Highlight main points or links with customizable icons

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.

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