Cards

Use the Mintlify Card component to display links, icons, images, and grouped content as visual containers, including horizontal layouts and CardGroup grids.

Use cards to create visual containers for content. Cards are flexible containers that can include text, icons, images, and links.

Card title

This is how you use a card with an icon and a link. Clicking on this card brings you to the Columns page.

Card example

<Card title="Card title" icon="text-align-start" href="/components/columns">
  This is how you use a card with an icon and a link. Clicking on this card
  brings you to the Columns page.
</Card>

Card variations

Cards support several layout and styling options to fit different content needs.

Horizontal layout

Add the horizontal property to display cards in a more compact, horizontal layout.

Horizontal card

This is an example of a horizontal card.

Horizontal card example

<Card title="Horizontal card" icon="text-align-start" horizontal>
  This is an example of a horizontal card.
</Card>

Image cards

Add an img property to display an image at the top of the card.

Image card

This is an example of a card with an image.

Image card example

<Card title="Image card" img="/images/card-with-image.png">
  This is an example of a card with an image.
</Card>

Link cards with custom CTAs

You can customize the call-to-action text and control whether an arrow appears. By default, arrows only show for external links.

Link card

This is an example of a card with an icon and a link. Clicking on this card brings you to the Columns page.

Click here

Link card example

<Card
  title="Link card"
  icon="link"
  href="/components/columns"
  arrow="true"
  cta="Click here"
>
  This is an example of a card with an icon and a link. Clicking on this card brings you to the Columns page.
</Card>

Add a type property to style a card with the same theme as a callout. Typed cards apply a colored background, border, and default icon that match the selected type. Use them to draw attention to grouped content like notes, warnings, or success states.

Supported types: info, warning, note, tip, check, and danger. Optionally, override the default icon with the icon property.

Note card

Use note to highlight supporting information.

Warning card

Use warning to flag potential issues.

Tip card

Use tip to share helpful suggestions.

Danger card

Use danger for destructive or risky actions.

Typed card example

<Card title="Note card" type="note">
  Use `note` to highlight supporting information.
</Card>

<Card title="Warning card" type="warning">
  Use `warning` to flag potential issues.
</Card>

Group cards

Use the Columns component to organize multiple cards side by side. The Columns component supports one to four columns and automatically adjusts for smaller screens.

First card

This is the first card.

Second card

This is the second card.

Columns example

<Columns cols={2}>
  <Card title="First card" icon="panel-left-close">
    This is the first card.
  </Card>
  <Card title="Second card" icon="panel-right-close">
    This is the second card.
  </Card>
</Columns>

Properties

titlestring

The title displayed on the card.

iconstring

The icon to display.

Options:

Font Awesome icon name, if you have the icons.library property set to fontawesome in your docs.json
Lucide icon name, if you have the icons.library property set to lucide in your docs.json
Tabler icon name, if you have the icons.library property set to tabler in your docs.json
URL to an externally hosted icon
Path to an icon file in your project
SVG code wrapped in curly braces

For custom SVG icons:

Convert your SVG using the SVGR converter.
Paste your SVG code into the SVG input field.
Copy the complete <svg>...</svg> element from the JSX output field.
Wrap the JSX-compatible SVG code in curly braces: icon={<svg ...> ... </svg>}.
Adjust height and width as needed.

iconTypestring

The Font Awesome icon style. Only used with Font Awesome icons.

Options: regular, solid, light, thin, sharp-solid, duotone, brands.

colorstring

Icon color as a hex code (for example, #FF6B6B).

hrefstring

URL to navigate to when the card is clicked.

horizontalboolean

Display the card in a compact horizontal layout.

imgstring

URL or local path to an image displayed at the top of the card.

ctastring

Custom text for the action button.

arrowboolean

Show or hide the link arrow icon.

typestring

Apply a callout-style theme to the card. One of info, warning, note, tip, check, or danger. Sets the card’s background, border, and default icon to match the selected type.

Basic card