---
url: /components/basic/FaCard.md
---
# FaCard 卡片

基础卡片容器组件，支持标题、描述、内容和页脚区域。

## 使用场景

* 信息展示卡片
* 表单容器
* 数据统计卡片
* 列表项容器
* 对话框内容区

## Props

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `title` | `string` | - | 卡片标题 |
| `description` | `string` | - | 卡片描述 |
| `class` | `HTMLAttributes['class']` | - | 卡片容器 CSS 类 |
| `headerClass` | `HTMLAttributes['class']` | - | 卡片头部 CSS 类 |
| `contentClass` | `HTMLAttributes['class']` | - | 卡片内容 CSS 类 |
| `footerClass` | `HTMLAttributes['class']` | - | 卡片页脚 CSS 类 |

## Slots

| 名称 | 说明 |
|------|------|
| `header` | 卡片头部（会覆盖 `title` 和 `description`） |
| `default` | 卡片内容 |
| `footer` | 卡片页脚 |

## 注意事项

1. **区域显示**：只有提供对应内容（props 或 slots）的区域才会显示
2. **slot 优先**：如果提供了 `header` slot，会覆盖 `title` 和 `description` props
3. **结构组成**：卡片由 CardHeader、CardContent、CardFooter 三部分组成
4. **响应式**：卡片宽度自适应父容器，可通过 `class` 设置固定宽度