Card
卡片
WebMobileDesktop上手难度: 容易
一个带圆角和边框的容器，把一条相关内容装在一起。
Live Demo
真的可以点你刚才看到的这个：App 首页的一格格内容块、新闻网站的文章卡片、设置里每个功能一行的那种方块、搜索结果里的每一条。
它到底是什么
Card 是最通用的布局单元。它本身不规定里面有什么——图片、标题、描述、按钮都行。它的价值是把一堆散落的信息切成可点击、可独立理解的块。
卡片card内容卡片tile卡片容器
Anatomy · 它由什么组成
Surface卡片面
白底 + 1px 边框 + 极轻阴影
Media图片区
可选，16:9 或 1:1
Title标题
2 行截断
Description描述
1–2 行，次级色
Action操作区
底部或整卡可点
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 一组内容可以被独立点击或独立理解 | 用 |
| 需要明显的点击边界（整卡可点） | 用 |
| 网格布局中的重复单元 | 用 |
| 内容很短、只有一行文字 | 不用 |
| 把卡片再套卡片 | 不用 |
卡片里再放卡片、按钮里再放按钮，是层级混乱的典型信号。
如果只是分个组，Divider 就够了，不必每组都起一个盒子。
Similar Patterns
别搞混一句话区分：一个带圆角和边框的容器，把一条相关内容装在一起。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
加一个内容卡片列表：每张卡片有 16:9 封面、标题、描述和「查看详情」链接，整卡可点，悬停时轻微上移。
不要只对 AI 说
Bad → Better不要这样对 AI 说
加几个方块显示内容。
改成这样说
加卡片列表：白底 1px 边框圆角 10px，16:9 封面 + 标题(2 行截断) + 描述，整卡可点（内部不再嵌套链接），hover 上移 2px 并提升阴影。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。