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

titleOptionalstring

Card title.

iconOptionalstring | { svg: string }

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:

Card Title

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.

Contributors

pengzhanbo

Changelog

10/9/25, 7:46 AM

View All Changelog

• 38505-docs: update en docs (#708)on 10/9/25