Components
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
requiredThe 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?