Day 19 · Card 卡片：一块内容，一个对象

Card 不是随手画个圆角框。它是把同一主题下的内容和操作装进一个容器：Material Design 把 Card 定义为展示「单个主题」内容与操作的表面，MUI 也延续了这个定义；Ant Design 则把 Card 称为可承载文字、列表、图片、段落的通用卡片容器，常见于后台概览页。123

Card 适合承载一个能独立理解、独立点击或独立操作的对象。

Card、List、Modal 最容易混在一起：Card 讲一个独立对象，List 讲一组连续条目；Modal/Dialog 用来让用户在当前页面处理事务或确认，不是普通内容容器。Ant Design 对 Modal 的使用说明也提到，当需要用户处理事务、又不希望跳转页面以致打断工作流程时，可以在当前页面打开浮层承载操作。4

判断口诀：对象独立，才用 Card。

Material Design 3 把 Card 分为 Elevated、Filled、Outlined 三种官方变体：Elevated 用层级分离，Filled 用浅色面弱化强调，Outlined 用边框表达容器边界；在实际产品里，Media Card 又常把图片、标题、描述和操作组合在同一张卡里。1

样式会变，Card 的核心不变：把同一个对象的内容和操作收在一起。

该用 Card 的时候，内容本身通常能成块，比如项目、文章、商品、课程、用户资料；它还常常需要一个入口，让用户点进详情或触发主操作。别把 Card 用成万能盒子：只是长清单就用 List，需要强确认就用 Modal，信息太碎就先整理层级。

今天记住一句：一块内容，一个对象。