跳转到主要内容
使用卡片为内容创建可视化容器。卡片是一种灵活的容器，可以包含文本、图标、图片和链接。

​
基础卡片

卡片标题

这是带有图标和链接的卡片用法。点击此卡片 将跳转到 Columns 页面。
Card example

​
卡片样式变体

卡片支持多种布局和样式选项，可满足不同的内容需求。

​
水平布局

添加 horizontal 属性，以更紧凑的水平布局显示卡片。

水平卡片

这是一个水平卡片示例。
Horizontal card example

​
图片卡片

添加一个 img 属性即可在卡片顶部显示图片。
yosemite

图片卡片

这是一个带图片的卡片示例。
Image card example
你可以自定义号召性用语的文本，并控制是否显示箭头。默认情况下，箭头只会显示在外部链接上。

链接卡片

这是一个带有图标和链接的卡片示例。点击此卡片会将你带到 Columns 页面。
Link card example

​
类型化卡片

添加 type 属性，可以让卡片应用与 callout 相同的主题样式。类型化卡片会带有与所选类型相匹配的彩色背景、边框和默认图标，因此你可以用它们来突出显示分组内容，例如说明、警告或成功状态。 支持的类型：info、warning、note、tip、check 和 danger。你也可以使用 icon 属性覆盖默认图标。

说明卡片

使用 note 来突出显示补充信息。

警告卡片

使用 warning 来标记潜在问题。

提示卡片

使用 tip 来分享有用的建议。

危险卡片

使用 danger 来表示破坏性或有风险的操作。
Typed card example

​
分组卡片

使用 Columns 组件 将多个卡片并排展示。Columns 组件支持 1 到 4 列，并会自动适配小屏幕。

第一张卡片

这是第一张卡片。

第二张卡片

这是第二张卡片。
Columns example

​
属性

​
title
string
显示在卡片上的标题。
​
icon
string
要显示的图标。可选值：
  • Font Awesome 图标名称 (如果你在 docs.json 中将 icons.library 属性 设置为 fontawesome)
  • Lucide 图标名称 (如果你在 docs.json 中将 icons.library 属性 设置为 lucide)
  • Tabler 图标名称 (如果你在 docs.json 中将 icons.library 属性 设置为 tabler)
  • 指向外部托管图标的 URL
  • 项目中图标文件的路径
  • 用花括号包裹的 SVG 代码
对于自定义 SVG 图标：
  1. 使用 SVGR 转换器 转换你的 SVG。
  2. 将 SVG 代码粘贴到 SVG 输入框。
  3. 从 JSX 输出框中复制完整的 <svg>...</svg> 元素。
  4. 用花括号包裹可用于 JSX 的 SVG 代码：icon={<svg ...> ... </svg>}。
  5. 根据需要调整 height 和 width。
​
iconType
string
Font Awesome 的图标样式。仅在使用 Font Awesome 图标时生效。可选值：regular、solid、light、thin、sharp-solid、duotone、brands。
​
color
string
图标颜色，使用十六进制色值 (例如 #FF6B6B) 。
​
href
string
卡片被点击时跳转到的 URL。
​
horizontal
boolean
以紧凑的横向布局显示卡片。
​
img
string
在卡片顶部显示的图片 URL 或本地路径。
​
cta
string
操作按钮的自定义文本。
​
arrow
boolean
是否显示链接箭头图标。
​
type
string
为卡片应用 callout 风格的主题。可选值为 info、warning、note、tip、check 或 danger。会将卡片的背景、边框和默认图标设置为与所选类型相匹配。