mintlify__docs/components/cards.mdx

---
title: "Cards"
description: "Use the Mintlify Card component to display links, icons, images, and grouped content as visual containers, including horizontal layouts and CardGroup grids."
keywords: ["cards", "visual containers"]
boost: 3
---

import IconsOptional from "/snippets/icons-optional.mdx";

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

## Basic card

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

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

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

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

<Card title="Image card" img="https://mintlify-assets.b-cdn.net/yosemite.jpg">
  This is an example of a card with an image.
</Card>

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

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

```mdx 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 this card brings you to the Columns page.
</Card>
```

### Typed cards

Add a `type` property to style a card with the same theme as a [callout](/components/callouts). 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.

<Columns cols={2}>
  <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>
  <Card title="Tip card" type="tip">
    Use `tip` to share helpful suggestions.
  </Card>
  <Card title="Danger card" type="danger">
    Use `danger` for destructive or risky actions.
  </Card>
</Columns>

```mdx 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](/components/columns) 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>

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

<ResponseField name="title" type="string">
  The title displayed on the card. Supports inline Markdown formatting, such as `**bold**`, `_italic_`, and `` `code` ``.
</ResponseField>

<IconsOptional />

<ResponseField name="color" type="string">
  Icon color as a hex code (for example, `#FF6B6B`).
</ResponseField>

<ResponseField name="href" type="string">
  URL to navigate to when the card is clicked.
</ResponseField>

<ResponseField name="horizontal" type="boolean">
  Display the card in a compact horizontal layout.
</ResponseField>

<ResponseField name="img" type="string">
  URL or local path to an image displayed at the top of the card.
</ResponseField>

<ResponseField name="cta" type="string">
  Custom text for the action button.
</ResponseField>

<ResponseField name="arrow" type="boolean">
  Show or hide the link arrow icon.
</ResponseField>

<ResponseField name="type" 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.
</ResponseField>

<ResponseField name="className" type="string">
  Additional CSS classes to apply to the card.
</ResponseField>