92 lines
1.5 KiB
Markdown
92 lines
1.5 KiB
Markdown
---
|
|
title: Card
|
|
createTime: 2025/03/24 19:46:13
|
|
icon: solar:card-broken
|
|
permalink: /en/guide/markdown/card/
|
|
---
|
|
|
|
## Overview
|
|
|
|
To highlight content, place it in a card container `::: card`.
|
|
|
|
To display multiple cards side by side when space allows, use the `card-grid` container around multiple cards.
|
|
|
|
## Syntax
|
|
|
|
```md
|
|
<!-- Single card -->
|
|
::: card title="Title" icon="twemoji:astonished-face"
|
|
|
|
This is the card content.
|
|
:::
|
|
|
|
<!-- Multiple cards -->
|
|
:::: card-grid
|
|
|
|
::: card title="Card Title 1" icon="twemoji:astonished-face"
|
|
|
|
This is the card content.
|
|
:::
|
|
|
|
::: card title="Card Title 2" icon="twemoji:astonished-face"
|
|
|
|
This is the card content.
|
|
:::
|
|
|
|
::::
|
|
```
|
|
|
|
Cards support optional `title` and `icon`. The icon can be an image URL or an Iconify icon name.
|
|
|
|
## Example
|
|
|
|
**Input:**
|
|
|
|
```md
|
|
::: card title="Card Title" icon="twemoji:astonished-face"
|
|
|
|
This is the card content.
|
|
:::
|
|
```
|
|
|
|
**Output:**
|
|
|
|
::: card title="Card Title" icon="twemoji:astonished-face"
|
|
|
|
This is the card content.
|
|
:::
|
|
|
|
**Input:**
|
|
|
|
```md
|
|
:::: card-grid
|
|
::: card title="Card Title 1" icon="twemoji:astonished-face"
|
|
|
|
This is the card content.
|
|
:::
|
|
|
|
::: card title="Card Title 2" icon="twemoji:astonished-face"
|
|
|
|
This is the card content.
|
|
:::
|
|
::::
|
|
```
|
|
|
|
**Output:**
|
|
|
|
:::: card-grid
|
|
::: card title="Card Title 1" icon="twemoji:astonished-face"
|
|
|
|
This is the card content.
|
|
:::
|
|
|
|
::: card title="Card Title 2" icon="twemoji:astonished-face"
|
|
|
|
This is the card content.
|
|
:::
|
|
::::
|
|
|
|
::: info
|
|
If you prefer to use cards via components, you can check out the [Card Component](/en/guide/features/component/#card).
|
|
:::
|