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

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

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

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

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.

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

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

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

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

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.

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

• title (string) — The title displayed on the card. Supports inline Markdown formatting, such as **bold**, _italic_, and `code`.

• icon (string) — 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
• A single emoji (for example, 💡 or 🚀)
• URL to an externally hosted icon
• Path to an icon file in your project
• SVG code wrapped in curly braces

For custom SVG icons:

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

• iconType (string) — The Font Awesome icon style. Only used with Font Awesome icons.

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

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

• href (string) — URL to navigate to when the card is clicked.

• horizontal (boolean) — Display the card in a compact horizontal layout.

• img (string) — URL or local path to an image displayed at the top of the card.

• cta (string) — Custom text for the action button.

• arrow (boolean) — Show or hide the link arrow icon.

• type (string) — 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.

• className (string) — Additional CSS classes to apply to the card.

• Style the icon inside a Card component
• skill.md
• GitHub