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

Name:title

Optional

Type:string

Default:''

Card title

Name:icon

Optional

Type:string

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

9/12/26, 10:04 AM

View All Changelog

• 7a454-feat(plugin-md-power): drop optional tag in field container (#987)on 9/12/26
• 1d04d-feat: add builtin auto-import-components (#932)on 9/9/26
• 16c2d-docs: update field containeron 6/8/26
• 5930c-docs: improve docson 2/14/26
• 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

Edit this page

Previous pageGitHub Alerts

Next pageSteps