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.

Card Example

<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.

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