WritedocsWritedocs

Card and CardGroup

View as MarkdownView this page as plain textOpen in ChatGPTAsk questions about this pageOpen in ClaudeAsk questions about this pageOpen in PerplexityAsk questions about this page
Connect to CursorUse these docs in CursorConnect to VS CodeUse these docs in VS Code

Three variants, chosen by which optional prop is set - icon (or no icon at all), img, or method:

Single card

A Card links to a page (via href) and shows an icon, title, and description.

No icon

Just omit icon entirely - the title and description still lay out normally with no gap left behind.

<CardGroup cols={2}>
  <Card title="Single card" icon="star" href="/some-page/">
    A short description under the title.
  </Card>
  <Card title="No icon" href="/some-page/">
    icon is entirely optional.
  </Card>
</CardGroup>

Set img instead of icon for a full-width image above the title - useful for a more visual card, like a screenshot or illustration:

Image card

Set img to any image path or URL - it renders full-width above the title instead of icon’s small glyph.

<Card title="Image card" img="/images/card-demo.svg">
  Renders full-width above the title.
</Card>

Set method for an API-reference style card - a solid, colored badge (GET/POST/PUT/PATCH/DELETE, any other value renders gray) next to the title instead of an icon:

Get pets

GET

List every pet in the store.

Add a pet

POST

Register a new pet.

<Card title="Get pets" method="GET" href="/api/pets/get-pets/">
  List every pet in the store.
</Card>

Card props

titlestringrequired
iconstring

Icon name or literal emoji — see Icons.

imgstring

Image path or URL — renders full-width above the title instead of icon.

methodstring

"GET"/"POST"/"PUT"/"PATCH"/"DELETE" render as a colored badge next to the title; any other value renders gray.

hrefstring

Renders as a <div> instead of a link if omitted.

colorstring

Any CSS color, applied to the icon.

horizontalboolean

Puts the icon beside the title and description instead of above them.

ctastring

Call-to-action text shown at the bottom of the card, followed by an arrow.

arrowboolean

Shows an arrow in the card’s top-right corner. Only on a card with href.

CardGroup props

colsnumberdefault: 2

<Columns cols={n}> is the same grid under Mintlify’s name. Like CardGroup, it lays out any children, not only cards. To put other content side by side - text, a code block - wrap each cell in <Column>:

<Columns cols={2}>
  <Column>
    **Install**
  </Column>
  <Column>
    **Use**
  </Column>
</Columns>