导航搜索
搜索并跳转到页面
Loading dashboard...
卡片 / Card
常见产品场景的可复用卡片布局。
项目概览
团队与任务信息的复合卡片。
项目概览
新工作区的季度发布计划。
进行中设计48 个任务
Av
进行中Avery Morgan
设计
Ka
进行中Kai Lin
前端
Ju
进行中Jules Smith
产品
示例代码
<Card>
<CardHeader>
<CardTitle>项目概览</CardTitle>
</CardHeader>
<CardContent>...</CardContent>
</Card>定价方案
突出价值与特性列表。
入门计划
发布首个产品所需的一切。
热门
￥29 / 月
- 5 名团队成员
- 无限项目
- 邮件支持
示例代码
<Card>
<CardHeader>
<CardTitle>入门计划</CardTitle>
</CardHeader>
<CardContent>...</CardContent>
</Card>安全状态
强调保护与最近提醒。
安全状态
账号防护与近期提醒。
双重验证
已在 3 台设备启用
最近密码更新3 天前
异常登录无
示例代码
<Card>
<CardHeader>
<CardTitle>安全状态</CardTitle>
</CardHeader>
<CardContent>...</CardContent>
</Card>内容卡片
包含图片与摘要信息。
内容精选
来自设计手记的精选内容。
可扩展的设计系统
跨团队保持视觉一致性的实践清单。
示例代码
<Card>
<CardHeader>
<CardTitle>内容精选</CardTitle>
</CardHeader>
<CardContent>...</CardContent>
</Card>指标汇总
统计数据列表与动作。
关键指标
最近 7 天的表现摘要。
注册
1,204
活跃用户
3,912
流失率
2.3%
2 小时前更新
示例代码
<Card>
<CardHeader>
<CardTitle>关键指标</CardTitle>
</CardHeader>
<CardContent>...</CardContent>
</Card>任务清单
快速查看待办与状态。
任务清单
产品团队的每日重点。
6 项
完成引导文案
今天到期 - 负责人：Kai
订单流程 QA
明天到期 - 负责人：Jules
准备上线清单
周五到期 - 负责人：Avery
示例代码
<Card>
<CardHeader>
<CardTitle>任务清单</CardTitle>
</CardHeader>
<CardContent>...</CardContent>
</Card>设置表单
表单与状态提示组合。
账号设置
管理个人资料与通知。
每周更新
产品动态与提示
示例代码
<Card>
<CardHeader>
<CardTitle>账号设置</CardTitle>
</CardHeader>
<CardContent>...</CardContent>
</Card>数据进度
指标与进度条组合。
每周表现
流量与转化摘要。
最近 7 天
访问
18.2k
注册
1,486
转化率
3.2%
周一
60%
周二
42%
周三
75%
周四
58%
周五
90%
示例代码
<Card>
<CardHeader>
<CardTitle>每周表现</CardTitle>
</CardHeader>
<CardContent>...</CardContent>
</Card>商品卡片
电商场景示例。
高端耳机
无线 - 降噪 - 2 年保修
有货
￥249
4.8 (124)
午夜蓝银色森林绿
示例代码
<Card>
<CardHeader>
<CardTitle>高端耳机</CardTitle>
</CardHeader>
<CardContent>...</CardContent>
</Card>内容切换
分组按钮与内容摘要。
内容切换
在相关内容块之间切换。
概览
跟踪里程碑进度、暴露阻塞点并保持团队优先级一致。
示例代码
<Card>
<CardHeader>
<CardTitle>内容切换</CardTitle>
</CardHeader>
<CardContent>...</CardContent>
</Card>