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

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.

​
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

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

Was this page helpful?

Callout BoxesCard Groups