卡片
Card
别名:卡片卡片容器信息卡内容卡片卡片式布局商品卡片一块一块的内容板
这是什么
用圆角边框或底色围出一块自包含内容的矩形容器，一块卡片聚合一组相关信息： 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。
交互实验室
试一试，再决定怎么用查看卡片中的标题、内容与操作，比较不同布局。
正在加载实验室…
使用时关注什么
- 01整个卡片可点时，内部操作应避免嵌套链接。
- 02标题、辅助信息与操作需要清楚的层级。
✓ 适用场景
- 封面图 + 标题 + 摘要的流式内容展示
- 仪表盘中并列的多块摘要指标
- 可点击跳转的聚合入口（商品、文章、项目）
✕ 不适用场景
- 需要逐行精确对齐比较（改用 table）
- 密度极高的数据展示（改用 table）
- 纯装饰性包裹会稀释信息，宁可用留白分隔
常见形式
基础
Basic
边框或浅底 + 内容，最通用
带封面
Media
顶部图片 + 内容区
可点击
Actionable
整卡可点，hover 抬升或边框强调
实现要点
border-radiusbox-shadowborderaspect-ratio卡片 = 容器（圆角、边框或阴影）+ 内边距 + 可选分区（媒体区、内容区、操作区）。 整卡可点时用 a 或 button 包裹，hover 给边框变色或轻微上浮反馈； 图片区固定宽高比（aspect-ratio）防止加载后布局跳动。
平台 API
<article>横向对比
查看完整对比 →相关概念
表格Table
用行与列精确对齐数据的二维表格：一行一条记录、一列一个字段，适合逐列比较、排序与大容量数据浏览。 行可悬停高亮、点击选中，列头通常带排序控制。
组件替代方案便当盒网格Bento Grid
把界面装进便当盒的布局语言：一组圆角矩形像分格便当一样拼合，各格跨度不同 ——大格承载主内容，小格陈列数据与点缀，格与格之间留窄缝对齐同一套网格。 它是卡片网格的升级：用面积差异直接表达信息优先级。
风格搭配使用悬浮上浮Hover Lift
鼠标悬停时卡片或按钮轻轻上浮（translateY -2～6px）并加深投影， 像被无形的手托起。最常见的"这个可以点"的桌面端暗示， 成本极低但立刻让页面有层次和呼吸感。
动效搭配使用徽标Badge
附着在元素角落或行内的小型状态标记：圆点、数字计数或短文字标签。用于表达未读数量、 状态（新、已废弃）或分类；不参与交互，视觉上从属于宿主元素。
组件相似概念