yuany3721/vuepress-theme-plume
1
0
Fork 0
forked from gitea-yuany3721/vuepress-theme-plume
Code Pull Requests Activity
vuepress-theme-plume/docs/en/guide/components/card.md
pengzhanbo 385059f214
docs: update en docs (#708) 
* docs: update en docs

* chore: tweak

* chore: tweak

* chore: tweak
2025-10-09 15:46:05 +08:00

1.4 KiB
Raw Blame History

title, icon, createTime, permalink
title icon createTime permalink
Card solar:card-broken 2025/10/08 23:09:07 /en/guide/components/card/

Overview

Use the <Card> component to display cards within a page.

Alternatively, the markdown card container syntax can be used as a substitute for the <Card> component.

Props

:::: field-group

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

::: field name="icon" type="string | { svg: string }" default="''" optional Icon displayed to the left of the title. Supports all icons from iconify, or an image URL can be used. :::

::::

Slots

Name Description
default Card content.
title Custom title content.

Examples

Input:

<Card title="Card Title" icon="twemoji:astonished-face">
  This is the card content.
</Card>

<Card>
  <template #title>
    <p style="color: red">Card Title</p>
  </template>
  This is the card content.
</Card>

Output:

This is the card content.

Card Title

This is the card content.

:::info Markdown syntax can also be used inside slots. However, please note that an empty line is required between the markdown syntax and the tags. Otherwise, it will be interpreted as plain text. :::