mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
skeptrune
9200586a3a
* docs: boost search ranking for single-word title pages Apply `boost: 3` to English pages whose H1 / frontmatter title is a single word (e.g. "Assistant", "Quickstart", "Cards"). Short titles tend to be canonical landing pages for a topic, so users searching the exact term should land on them first. * docs: drop boost on websocket-playground stub to keep canonical Playground ranking `api-playground/websocket-playground.mdx` is an auto-generated AsyncAPI stub with no body content but shares the title "Playground" with `api-playground/overview.mdx`. Boosting both equally diluted the canonical overview page in search for the query "playground". Drop the boost on the stub.
168 lines
5.0 KiB
Plaintext
168 lines
5.0 KiB
Plaintext
---
|
|
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 on 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 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.
|
|
|
|
<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 on 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 on 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, so you can 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.
|
|
</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>
|