> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify-mintlify-add-hello-world-quickstart-48843.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# 卡片
> 通过可自定义的布局与图标突出关键信息或链接
使用卡片为内容创建可视容器。卡片是一种灵活的容器，可包含文本、图标、图片和链接。
## 基本卡片
这是带有图标和链接的卡片用法。点击该卡片
将跳转到 Columns 页面。
```mdx Card example
这是如何使用带有图标和链接的卡片。点击此卡片
将跳转到 Columns 页面。
```
## 卡片样式变体
卡片支持多种布局和样式选项，可满足不同内容的需求。
### 水平布局
添加 `horizontal` 属性，可将卡片显示为更紧凑的水平布局。
这是一个水平卡片示例。
```mdx Horizontal card example
这是水平卡片的示例。
```
### 图片卡片
添加 `img` 属性即可在卡片顶部显示图片。
这是一个带图片的卡片示例。
```mdx Image card example
这是一个带图片的卡片示例。
```
### 带自定义 CTA 的链接卡片
你可以自定义呼叫行动（CTA）文案，并控制是否显示箭头。默认情况下，箭头只会显示在外部链接上。
这是一个带有图标和链接的卡片示例。点击此卡片会进入 Columns 页面。
```mdx Link card example
这是一个带有图标和链接的卡片示例。点击此卡片将跳转到列组件页面。
```
## 分组卡片
使用 [Columns 组件](/zh/components/columns) 将多个卡片并排排列。
这是第一张卡片。
这是第二张卡片。
```mdx Columns example
这是第一张卡片。
这是第二张卡片。
```
## 属性
卡片上显示的标题
要显示的图标。
选项：
* [Font Awesome 图标](https://fontawesome.com/icons) 名称
* [Lucide 图标](https://lucide.dev/icons) 名称
* 用花括号包裹的、与 JSX 兼容的 SVG 代码
* 指向外部托管图标的 URL
* 项目中图标文件的路径
关于自定义 SVG 图标：
1. 使用 [SVGR 转换器](https://react-svgr.com/playground/) 转换你的 SVG。
2. 将 SVG 代码粘贴到 SVG 输入框。
3. 从 JSX 输出框中复制完整的 `... ` 元素。
4. 用花括号包裹与 JSX 兼容的 SVG 代码：`icon={ ... }`。
5. 按需调整 `height` 和 `width`。
[Font Awesome](https://fontawesome.com/icons) 图标样式。仅在使用 Font Awesome 图标时生效。
选项：`regular`、`solid`、`light`、`thin`、`sharp-solid`、`duotone`、`brands`。
图标颜色（十六进制代码，例如 `#FF6B6B`）。
点击卡片时跳转到的 URL。
以紧凑的横向布局显示卡片。
显示在卡片顶部的图片 URL 或本地路径。
操作按钮的自定义文本。
显示或隐藏链接箭头图标。