Overview

Content that needs to be highlighted can be placed within a card container ::: card.

When multiple cards need to be displayed side-by-side when space permits, use the card-grid container to wrap 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.
:::

::::

Props

titleOptionalstring

Card title

iconOptionalstring

Card icon. Supports image URLs and iconify icon names.

Examples

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 using cards via components, you can check out the Card Component.

Contributors

zhenghaoyang24pengzhanbo

Changelog

10/9/25, 7:46 AM

View All Changelog

• 38505-docs: update en docs (#708)on 10/9/25
• 4d236-feat(theme)!: add collections support (#704)on 10/7/25
• 9f99a-docs: add en markdown doc (#538)on 3/27/25