vuepress-theme-plume/docs/en/guide/markdown/card.md

title, createTime, icon, permalink

title	createTime	icon	permalink
Card	2025/10/08 14:37:40	solar:card-broken	/en/guide/markdown/card/

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

:::: field-group ::: field name="title" type="string" optional default="''" Card title :::

::: field name="icon" type="string" optional 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="Card Title" icon="twemoji:astonished-face"

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