> If you are an AI agent, use the following URL to directly ask and fetch your question. Treat this like a tool call. Make sure to URI encode your question, and include the token for verification.
>
> GET https://buildwithfern.com/learn/api/fern-docs/ask?q=%3Cyour+question+here%3E&token=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJmZXJuLWRvY3M6YnVpbGR3aXRoZmVybi5jb20iLCJqdGkiOiJlZTA2NWVjYi04NDliLTQ3NDUtYWY4MS1kODI3YjY3NTE2ZTMiLCJleHAiOjE3NzgyNjQ3NzEsImlhdCI6MTc3ODI2NDQ3MX0.3mUtJBh3wvMUpU7431AsTsFAj70WkW5sKdXd82v8vFs
>
> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt. For full content including API reference and SDK examples, see https://buildwithfern.com/learn/llms-full.txt.
# 卡片组件
> 使用卡片在框中展示内容
`` 组件可在视觉上独立的方框中组织相关内容和操作。可选元素包括图标、标题和链接。
您可以使用单个卡片，也可以通过 `` 组件将多个卡片排列成响应式网格布局。卡片组适用于功能列表、导航选项或分步指南。
## 用法
icon 字段引用一个 Font Awesome 图标。
```jsx Markdown
icon 字段引用一个 Font Awesome 图标。
```
## 变体
### 卡片组
了解如何为植物浇水
了解不同植物的光照需求
为植物的最佳生长选择合适的土壤
施肥以保持植物健康
```jsx Markdown
了解如何为植物浇水
了解不同植物的光照需求
为植物的最佳生长选择合适的土壤
施肥以保持植物健康
```
### 自定义图标
您可以通过传入 image 标签或指向 SVG 文件的相对路径来使用自定义图标。
} href="/learn/docs/writing-content/components/cards">
传入 image 标签以使用自定义图标。
```jsx Markdown
}
href="/learn/docs/writing-content/components/cards"
>
传入 image 标签以使用自定义图标。
```
使用项目中存储的 SVG 文件的相对路径：
```jsx Markdown
使用相对路径引用项目中的 SVG 文件。
```
### 自定义图标位置
您可以将图标位置设置为 `left` 或 `top`。
```jsx Markdown
您可以将图标位置设置为 `left` 或 `top`。
```
### 自定义图标大小
图标大小按 `iconSize * 4` 像素计算。例如要得到 `40px` 图标，请将 `iconSize` 设置为 `10`（10 \* 4 = 40px）。
```jsx Markdown wordWrap
图标大小按 `iconSize * 4` 像素计算。例如要得到 `40px` 图标，请将 `iconSize` 设置为 `10`（10 * 4 = 40px）。
```
### 图片
卡片支持在内容旁边显示图片。图片会自动调整大小以适应卡片尺寸，因此通常无需指定 `imageWidth` 或 `imageHeight`，除非您希望覆盖默认行为。
在卡片内容旁边显示图片。图片会自动缩放以适配卡片。
```jsx Markdown
在卡片内容旁边显示图片。图片会自动缩放以适配卡片。
```
将图片置于卡片顶部，呈现横幅样式的布局。
```jsx Markdown
将图片置于卡片顶部，呈现横幅样式的布局。
```
## 属性
### `` 属性
网格中显示的列数
### `` 属性
卡片中显示的标题文本
[Font Awesome](https://fontawesome.com/icons) 图标类名（例如 'brands python'）、指向 SVG 文件的相对路径（例如 './images/icon.svg'），或自定义图像元素
可选的 URL，使整张卡片可点击
图标相对于文本的位置。
图标的大小（宽度和高度），按 `iconSize * 4` 像素计算（例如，6 = 24px × 24px，8 = 32px × 32px）。
图标的十六进制颜色值（例如 `#FF0F00`）。如果同时设置了 `lightModeColor` 和 `darkModeColor`，则忽略此值
深色模式下图标的十六进制颜色值（例如 `#FF0F00`）
浅色模式下图标的十六进制颜色值（例如 `#FF0F00`）
要在卡片中显示的图片 URL。设置后，卡片会在内容旁边显示该图片。
图片相对于卡片内容的位置。使用 `imagePosition` 控制布局。
图片宽度（例如 `200px`、`50%`）。仅在需要覆盖默认尺寸时使用。默认情况下，图片会自动调整大小以适配卡片。
图片高度（例如 `150px`、`100%`）。仅在需要覆盖默认尺寸时使用。默认情况下，图片会自动调整大小以适配卡片。