卡片Card
内容与数据展示把一组相关信息放进同一个区块
卡片通常包含同一对象的图片、标题、摘要和操作，适合浏览一组相似内容。整张卡片是否可以点击要表达清楚；如果只有局部操作，就让链接和按钮分别承担动作。
AI 图鉴：零基础组件入门
每个组件一张卡片，3 分钟看懂一个。
什么时候用
- 内容推荐流：文章卡、视频卡、商品卡
- 仪表盘上每个指标一块卡，方便扫读销售额¥ 86.4w订单数12,846
- 把长页面切成几个内容分组，比如设置页通知设置邮件通知短信通知
- 图片占比大的内容，封面放卡片顶部
什么时候不用
- 纯文字长文也切块装卡 → 直接用 排版 Typography 排版年度总结报告一整篇长文装进卡片，框纯属干扰
- 卡里套卡，两层边框谁也分不清边界外层卡片内层卡片
- 每条只有一行文字 → 用 列表 List 更紧凑账号与安全›消息通知›隐私设置›
- 整页就一块内容，再套卡片纯属多余整页唯一的内容也要套个框
组成结构 · Anatomy
AI 图鉴入门
每个组件一张卡片，3 分钟看懂一个。
1卡片Card内容容器，一块 = 一个整体
2封面Cover可选，图片放顶部最抓眼
3标题Title卡片里最重的一行字
4正文Content摘要、说明等补充信息
5操作区Actions可选，放和这张卡相关的按钮
常见变体 · Variants
基础卡片Basic
团队知识库
收录 47 篇文档，每周更新。
文字信息打包成组时的默认款
带封面With Cover
AI 图鉴入门
图片是主角,先用封面抓眼球
简洁无边框Flat
快捷入口
弱化边框，融进背景。
背景已分好区块,边框反而显乱时
带操作With Actions
官网改版 v2
用户要在卡片上直接预览或编辑
典型使用场景
内容推荐流
AI 图鉴入门
每个组件一张卡片，3 分钟看懂。
我的工位大公开
效率翻倍的桌面布置思路。
夏日城市漫游
周末两小时的拍照路线。
仪表盘指标卡
本月销售额
¥ 86.4w
↑ 12.5%
订单数
12,846
↑ 8.3%
退款率
2.1%
↓ 0.4%
设置页分组
通知设置
邮件通知
短信通知
隐私设置
公开我的主页
商品展示
无线耳机 Pro
¥ 299限时 8 折
猫爪机械键盘
¥ 199新品