卡片

通过可自定义的布局和 icon 突出重点或链接

使用卡片为内容创建可视化容器。卡片是灵活的容器，可以包含文本、icon、图像和链接。

​

基础卡片

卡片标题

这是带有 icon 和链接的卡片用法。点击该卡片 将跳转到 Columns 页面。

Card example

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

​

卡片变体

卡片支持多种布局和样式选项，以适配不同的内容需求。

​

水平布局

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

水平卡片

这是一个水平卡片的示例。

Horizontal card example

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

​

图片卡片

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

图片卡片

这是一个带图片的卡片示例。

Image card example

<Card title="图片卡片" img="/images/card-with-image.png">
  这是一个带有图片的卡片示例。
</Card>

​

带有自定义号召性用语的链接卡片

你可以自定义号召性用语文本，并控制是否显示箭头。默认情况下，箭头只会用于外部链接。

Link card

这是一个带有 icon 和链接的卡片示例。点击此卡片将带你前往 Columns 页面。

Click here

Link card example

<Card
  title="链接卡片"
  icon="link"
  href="/components/columns"
  arrow="true"
  cta="点击这里"
>
  这是一个带有图标和链接的卡片示例。点击此卡片将带您前往列组件页面。
</Card>

​

分组卡片

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

First card

这是第一张卡片。

Second card

这是第二张卡片。

Columns example

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

​

属性

title · string · 必填

卡片上显示的标题

icon · string

要显示的 icon。

选项：

• Font Awesome icon 名称
• Lucide icon 名称
• 用花括号包裹的 JSX 兼容 SVG 代码
• 指向外部托管 icon 的 URL
• 项目中 icon 文件的路径

针对自定义 SVG icon：

1. 使用 SVGR 转换器将你的 SVG 转换为 JSX。
2. 将 SVG 代码粘贴到 SVG 输入框。
3. 从 JSX 输出框中复制完整的 <svg>...</svg> 元素。
4. 用花括号包裹 JSX 兼容的 SVG 代码：icon={<svg ...> ... </svg>}。
5. 按需调整 height 和 width。

iconType · string

Font Awesome icon 的样式。仅在使用 Font Awesome icon 时生效。

选项：regular、solid、light、thin、sharp-solid、duotone、brands。

color · string

icon 的颜色，使用十六进制色值（例如 #FF6B6B）。

href · string

点击卡片后跳转的 URL。

horizontal · boolean

以紧凑的水平布局显示卡片。

img · string

卡片顶部图片的 URL 或本地路径。

cta · string

操作按钮的自定义文案。

arrow · boolean

显示或隐藏链接箭头 icon。