- Organization Components
- Cards
Organization 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.
<Card title="Click on me" icon="link" href="/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>
Icon Settings
Adjust the icon type using the iconType
property color by using the color
property.
Colored Card
Here is a card with a duotone yellow icon
Card Icon Example
<Card title="Colored Card" icon="lightbulb" iconType="duotone" color="#ca8b04">
Here is a card with a duotone yellow icon
</Card>
Props
titleRequired
string
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
image
string
Path to the image to display at the top of the card
<Card title="Click on me" icon="link" href="/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>