Card
card卡片 · Header/Body/Footer 插槽
用法
基础用法
outline 描边卡片，由 CardHeader / CardBody / CardFooter 三段组成。
瑚琏卡片
宗庙玉器，至美又大用。颜值 + 好用是第一生产力。
footer 区
tsx
<Card variant="outline" className="w-64">
<CardHeader>瑚琏卡片</CardHeader>
<CardBody>宗庙玉器，至美又大用。颜值 + 好用是第一生产力。</CardBody>
<CardFooter>footer 区</CardFooter>
</Card>浮起卡片
elevated 用阴影替代实线边框，hover 时阴影加深。
瑚琏卡片
宗庙玉器，至美又大用。颜值 + 好用是第一生产力。
footer 区
tsx
<Card variant="elevated" className="w-64">
<CardHeader>瑚琏卡片</CardHeader>
<CardBody>宗庙玉器，至美又大用。颜值 + 好用是第一生产力。</CardBody>
<CardFooter>footer 区</CardFooter>
</Card>高亮卡片
featured 用 primary 双线描边突出推荐项，网格内对齐不偏移。
瑚琏卡片
宗庙玉器，至美又大用。颜值 + 好用是第一生产力。
footer 区
tsx
<Card variant="featured" className="w-64">
<CardHeader>瑚琏卡片</CardHeader>
<CardBody>宗庙玉器，至美又大用。颜值 + 好用是第一生产力。</CardBody>
<CardFooter>footer 区</CardFooter>
</Card>无 footer
三段皆可选，仅 Header + Body 也成立。
瑚琏卡片
宗庙玉器，至美又大用。颜值 + 好用是第一生产力。
tsx
<Card variant="outline" className="w-64">
<CardHeader>瑚琏卡片</CardHeader>
<CardBody>宗庙玉器，至美又大用。颜值 + 好用是第一生产力。</CardBody>
</Card>何时用
把一组相关内容圈进带边框/阴影的容器——信息块、统计项、表单分区、列表卡片。需要条目流用 List(其 grid 态本身就是卡片栅格)；展示键值对详情用 Descriptions。本组件只是纯容器外壳 + 三段插槽，不含业务逻辑。
导入
ts
import { Card, CardHeader, CardBody, CardFooter } from "@hulianui/ui"Props
CardProps 继承原生 HTMLAttributes<HTMLDivElement>，外加 CVA 变体：
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| variant | "outline" | "elevated" | "featured" | "outline" | 外观：描边 / 投影抬升 / 强调 |
CardHeader / CardBody / CardFooter 均为插槽容器，接收原生 div 属性 + children。
禁忌 / 坑
- 别用 Card 包 loading 骨架屏——参见 [[loading-skeletons-are-chromeless-dont-wrap-in-card]]：骨架按惯例是无边框无阴影的纯 shimmer 块，套 Card 会显得过重。
- 列表/侧栏里 Card 末行(时间戳/meta 行)若设了外层
min-height又用 flex 撑高，meta 行可能漏到卡片背景外——参见 [[grid-card-button-tail-row-leaks-outside-when-outer-min-height]]。
相关
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable
Playground
瑚琏卡片
宗庙玉器，至美又大用。颜值 + 好用是第一生产力。
footer 区
<Card variant="outline">
<CardHeader>瑚琏卡片</CardHeader>
<CardBody>...</CardBody>
<CardFooter>footer 区</CardFooter>
</Card>