mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
Ethan Palm
132 lines
3.6 KiB
Plaintext
132 lines
3.6 KiB
Plaintext
---
|
|
title: "Cards"
|
|
description: "Highlight main points or links with customizable layouts and icons."
|
|
keywords: ["cards", "visual containers"]
|
|
---
|
|
|
|
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>
|
|
```
|
|
|
|
## 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" required>
|
|
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>
|