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