概述

对于想要突出显示的内容，可以将其放在 卡片容器 ::: card 中。

当需要在空间足够时并排显示多个卡片，可以使用 card-grid 容器，包裹 多个卡片。

语法

<!-- 单个卡片 -->
::: card title="标题" icon="twemoji:astonished-face"

这里是卡片内容。
:::

<!-- 多个卡片 -->
:::: card-grid

::: card title="卡片标题 1" icon="twemoji:astonished-face"

这里是卡片内容。
:::

::: card title="卡片标题 2" icon="twemoji:astonished-face"

这里是卡片内容。
:::

::::

Props

titleOptionalstring

卡片标题

iconOptionalstring

卡片图标 支持传入图片链接，还可以传入 iconify 图标名。

示例

输入：

::: card title="卡片标题" icon="twemoji:astonished-face"

这里是卡片内容。
:::

输出：

卡片标题

这里是卡片内容。

输入：

:::: card-grid
::: card title="卡片标题 1" icon="twemoji:astonished-face"

这里是卡片内容。
:::

::: card title="卡片标题 2" icon="twemoji:astonished-face"

这里是卡片内容。
:::
::::

输出：

卡片标题 1

这里是卡片内容。

卡片标题 2

这里是卡片内容。

相关信息

如果你更喜欢通过组件的方式使用 卡片，你可以查看 卡片组件 。

贡献者

pengzhanbo

更新日志

2025/4/30 14:34

查看所有更新日志

• d1496-docs: update docs于 2025/4/30
• 0fd6c-refactor(theme): improve types and flat config (#524)于 2025/3/15
• c177f-docs: improve docs (#240)于 2024/9/30