卡片
使用卡片组件以可视化容器的形式展示链接、图标、图片和分组内容，从而组织导航。
使用卡片为内容创建可视化容器。卡片是一种灵活的容器，可以包含文本、图标、图片和链接。
卡片标题
这是带有图标和链接的卡片用法。点击此卡片 将跳转到 Columns 页面。
<Card title="卡片标题" icon="text-align-start" href="/zh/components/columns">
这是使用带有图标和链接的卡片的示例。点击此卡片会跳转到列组件页面。
</Card>卡片支持多种布局和样式选项，可满足不同的内容需求。
添加 horizontal 属性，以更紧凑的水平布局显示卡片。
水平卡片
这是一个水平卡片示例。
<Card title="横向卡片" icon="text-align-start" horizontal>
这是横向卡片的示例。
</Card>添加一个 img 属性即可在卡片顶部显示图片。
图片卡片
这是一个带图片的卡片示例。
<Card title="图片卡片" img="/images/card-with-image.png">
这是一个带图片的卡片示例。
</Card>你可以自定义号召性用语的文本，并控制是否显示箭头。默认情况下，箭头只会显示在外部链接上。
链接卡片
这是一个带有图标和链接的卡片示例。点击此卡片会将你带到 Columns 页面。
点击这里<Card
title="链接卡片"
icon="link"
href="/zh/components/columns"
arrow="true"
cta="点击这里"
>
这是一个带有图标和链接的卡片示例。点击此卡片可跳转到列组件页面。
</Card>添加 type 属性，可以让卡片应用与 callout 相同的主题样式。类型化卡片会带有与所选类型相匹配的彩色背景、边框和默认图标。使用它们来突出显示分组内容，例如说明、警告或成功状态。
支持的类型：info、warning、note、tip、check 和 danger。你也可以使用 icon 属性覆盖默认图标。
说明卡片
使用 note 来突出显示补充信息。
警告卡片
使用 warning 来标记潜在问题。
提示卡片
使用 tip 来分享有用的建议。
危险卡片
使用 danger 来表示破坏性或有风险的操作。
<Card title="说明卡片" type="note">
使用 `note` 来突出显示补充信息。
</Card>
<Card title="警告卡片" type="warning">
使用 `warning` 来标记潜在问题。
</Card>使用 Columns 组件 将多个卡片并排展示。Columns 组件支持 1 到 4 列，并会自动适配小屏幕。
第一张卡片
这是第一张卡片。
第二张卡片
这是第二张卡片。
<Columns cols={2}>
<Card title="第一张卡片" icon="panel-left-close">
这是第一张卡片。
</Card>
<Card title="第二张卡片" icon="panel-right-close">
这是第二张卡片。
</Card>
</Columns>titlestring显示在卡片上的标题。
iconstring要显示的图标。
可选值：
- Font Awesome 图标名称 (如果你在
docs.json中将icons.library属性 设置为fontawesome) - Lucide 图标名称 (如果你在
docs.json中将icons.library属性 设置为lucide) - Tabler 图标名称 (如果你在
docs.json中将icons.library属性 设置为tabler) - 指向外部托管图标的 URL
- 项目中图标文件的路径
- 用花括号包裹的 SVG 代码
对于自定义 SVG 图标：
- 使用 SVGR 转换器 转换你的 SVG。
- 将 SVG 代码粘贴到 SVG 输入框。
- 从 JSX 输出框中复制完整的
<svg>...</svg>元素。 - 用花括号包裹可用于 JSX 的 SVG 代码：
icon={<svg ...> ... </svg>}。 - 根据需要调整
height和width。
iconTypestringFont Awesome 的图标样式。仅在使用 Font Awesome 图标时生效。
可选值：regular、solid、light、thin、sharp-solid、duotone、brands。
colorstring图标颜色，使用十六进制色值 (例如 #FF6B6B) 。
hrefstring卡片被点击时跳转到的 URL。
horizontalboolean以紧凑的横向布局显示卡片。
imgstring在卡片顶部显示的图片 URL 或本地路径。
ctastring操作按钮的自定义文本。
arrowboolean是否显示链接箭头图标。
typestring为卡片应用 callout 风格的主题。可选值为 info、warning、note、tip、check 或 danger。会将卡片的背景、边框和默认图标设置为与所选类型相匹配。