Card
承载一个独立主题或对象摘要。中文惯用名：卡片。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.card |
| 名称 | Card |
| 二级分类 | 数据展示（data-display） |
| 用途 | 承载一个独立主题或对象摘要 |
| 描述 | 中文惯用名：卡片。 |
预览
静态结构：Card 渲染为 data-slot="card" 容器（gap-4 py-4，rounded 缺省 lg，即 --radius 基准圆角）；有 title 时渲染 data-slot="card-header"（内 data-slot="card-title"）与 data-slot="card-content"，无 title 时仅渲染内容区，两者均带 px-4 水平内边距；bordered=false 时追加 border-transparent shadow-none 去边框与阴影。children 为 DSL 子树（可混排文案、按钮等）。
DSL 结构
{
"type": "Card",
"props": {
"title": "月度运营报告",
"rounded": "lg",
"bordered": true
},
"children": [
{
"type": "Text",
"props": {
"text": "2026-08 月报已生成，覆盖 12 项核心指标，较上月提升 8.4%。",
"type": "secondary"
}
}
]
}何时用
何时使用
- 承载一个独立主题或对象摘要：单条记录、一个模块、一张看板的入口。
- 需要在页面中划分出边界清晰的内容块（标题 + 内容 + 操作）。
- 卡片网格中的单元容器：每张卡片一个对象，卡片间并列浏览。
何时不用
- 展示同类对象的集合列表：单对象用 Card，同构集合用 List 或 Table。
- 仅需分组留白而无独立主题：使用 Space / Flex 或分割线，不必都套卡片。
- 页面级区块框架（含侧栏、头部）：使用布局类组件（Page / Layout / Container）。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| 带标题（缺省） | 标题行 + 内容区（header / content 分区） | 有明确主题的独立内容块 |
| 无标题纯容器 | 仅内容区，无 header | 内容自带标题或仅作留白分组 |
| bordered=false 无边框 | 去边框与阴影，仅保留圆角与背景 | 与页面背景同层、靠留白分隔的轻量卡片 |
| rounded 圆角档位 | none / sm / md / lg / xl / 2xl / 3xl 七档 | 按产品视觉规范调整圆角（缺省 lg） |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
title | string | — | 卡片标题；缺省不渲染标题区 |
bordered | boolean | true | 是否有边框；false 去边框与阴影 |
rounded | `CardRounded（'none' | 'sm' | 'md' |
children | ReactNode | — | 卡片内容（DSL 子树），渲染于 data-slot="card-content" 内 |
className / style | string / CSSProperties | — | 通用：根节点 class 合并 / 内联样式（style 常作布局逃逸口，如 { flex: 1 }） |
使用规范
- 一张卡片只表达一个主题或对象；同屏多卡片保持结构一致（都有标题或都无标题）。
- 卡片内主操作每张最多一个（primary 按钮），其余降级为文字按钮或链接。
- 嵌套卡片不超过一层，深层嵌套改用分割线与留白表达层级。
- 卡片网格中避免内容高度差异过大导致视觉参差；必要时约束内容行数或统一高度来源。
- 无边框卡片（bordered=false）需确保背景与页面有足够对比，否则容器边界会消失。
正例
- ✓ 看板卡片：title「月度运营报告」+ 摘要文案 + primary「查看详情」按钮。
- ✓ 卡片网格：每张卡片一个对象（rounded="lg" + bordered），网格内结构统一。
- ✓ 轻量分组：bordered=false 在设置页中作分组容器，靠留白区分区块。
反例
- ✕ 用 Card 展示同类对象的集合列表（应使用 List / Table，Card 表达单个对象）。
- ✕ 卡片内堆叠多个不同主题的内容块，标题无法概括内容。
- ✕ 给所有容器都套一层 Card，页面被边框切碎、层级反而模糊。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。