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.
Tips
This page covers the Vue component usage (<Card />). If you only need to place a few cards in Markdown, the card container syntax is simpler and requires no component.
Props
Card title.
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
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.
