Mintlify home pagelight logo
  1. Organization Components
  2. Cards

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