This is the card content.
Card
Overview
Content that needs to be highlighted can be placed within a card container ::: card.
When multiple cards need to be displayed side-by-side when space permits, use the card-grid container to wrap multiple cards.
This page covers the Markdown container syntax (::: card). If you want to use cards as render functions inside Vue components, see the Card component.
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.
:::
::::Props
Card title
Card icon. Supports image URLs and iconify icon names.
Examples
Input:
::: card title="Card Title" icon="twemoji:astonished-face"
This is the card content.
:::Output:
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:
This is the card content.
This is the card content.
Info
If you prefer using cards via components, you can check out the Card Component.
