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

title, createTime, icon, permalink

title	createTime	icon	permalink
Card	2025/03/24 19:46:13	solar:card-broken	/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

<!-- 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="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 to use cards via components, you can check out the Card Component. :::