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

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

::: card title="Card Title" icon="twemoji:astonished-face"

This is the card content.
:::

Output:

Card Title

This is the card content.

Input:

:::: 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 Title 1

This is the card content.

Card Title 2

This is the card content.

Info

If you prefer to use cards via components, you can check out the Card Component.

Contributors

zhenghaoyang24pengzhanbo

Changelog

3/27/25, 1:06 PM

View All Changelog

• 9f99a-docs: add en markdown doc (#538)on 3/27/25