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

​
基本卡片

Card title

这是带有图标和链接的卡片用法。点击该卡片 将跳转到 Columns 页面。
Card example
<Card title="卡片标题" icon="text" href="/components/columns">
  这是如何使用带有图标和链接的卡片。点击此卡片
  将跳转到 Columns 页面。
</Card>

​
卡片样式变体

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

​
水平布局

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

水平卡片

这是一个水平卡片示例。
Horizontal card example
<Card title="水平卡片" icon="text" horizontal>
  这是水平卡片的示例。
</Card>

​
图片卡片

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

图片卡片

这是一个带图片的卡片示例。
Image card example
<Card title="图片卡片" img="/images/card-with-image.png">
  这是一个带图片的卡片示例。
</Card>
你可以自定义呼叫行动（CTA）文案，并控制是否显示箭头。默认情况下，箭头只会显示在外部链接上。

Link card

这是一个带有图标和链接的卡片示例。点击此卡片会进入 Columns 页面。
Link card example
<Card
  title="链接卡片"
  icon="link"
  href="/components/columns"
  arrow="true"
  cta="点击这里"
>
  这是一个带有图标和链接的卡片示例。点击此卡片将跳转到列组件页面。
</Card>

​
分组卡片

使用 Columns 组件 将多个卡片并排排列。

第一张卡片

这是第一张卡片。

第二张卡片

这是第二张卡片。
Columns example
<Columns cols={2}>
  <Card title="第一张卡片" icon="panel-left-close">
    这是第一张卡片。
  </Card>
  <Card title="第二张卡片" icon="panel-right-close">
    这是第二张卡片。
  </Card>
</Columns>

​
属性

​
title
string
required
卡片上显示的标题
​
icon
string
要显示的图标。选项：
  • Font Awesome 图标 名称
  • Lucide 图标 名称
  • 用花括号包裹的、与 JSX 兼容的 SVG 代码
  • 指向外部托管图标的 URL
  • 项目中图标文件的路径
关于自定义 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
显示或隐藏链接箭头图标。