9f99ae3ca7
* docs: add markdown-basic en * docs: add markdown-extensions en * docs: add markdown-icons en * docs: add markdown-mark en , change file structure * docs: update usage * docs: add to markdown-caniuse en * docs: add en docs markdown - import files * docs: add en docs markdown - collapse * chore: fix package lock file --------- Co-authored-by: pengzhanbo <volodymyr@foxmail.com>
1.5 KiB
1.5 KiB
title, createTime, icon, permalink
| title | createTime | icon | permalink |
|---|---|---|---|
| Card | 2025/03/24 19:46:13 | solar:card-broken | /en/guide/markdown/card/ |
Overview
To highlight content, place it in a card container ::: card.
To display multiple cards side by side when space allows, use the card-grid container around multiple cards.
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.
:::
::::
Cards support optional title and icon. The icon can be an image URL or an Iconify icon name.
Example
Input:
::: card title="Card Title" icon="twemoji:astonished-face"
This is the card content.
:::
Output:
::: card title="Card Title" icon="twemoji:astonished-face"
This is the card content. :::
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:
:::: 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. ::: ::::
::: info If you prefer to use cards via components, you can check out the Card Component. :::