返回
UI · №02 · SPECIMEN
卡片Card
一块一块的内容格子圆角小方块商品/文章那种一格一格的
LIVE SPECIMEN真的能玩，点点看
卡片解剖图
悬停每个部位，看它的名字。
悬停部位 → ?
先看结论
承载一条完整内容的独立容器：图、题、文、底部信息各就各位，整卡可点。
- 适合
- 同构内容的集合展示——文章列表、商品网格、项目面板。
- 不适合
- 单条长文的正文排版——卡片是集合的单元，不是文章容器。
直接发给 agent
Wrap each article in a card: contained surface with media on top, then title, excerpt, and a footer row with meta info; subtle border, hover lift effect, the whole card clickable with proper link semantics.已于 2026-07-17 实测通过
技术标注2 项
- web
- article/section + 边框容器
- react
- <Card>（shadcn 等，含 Header/Content/Footer 子件）
详细说明
卡片可能是被叫得最随意的组件——什么都叫“卡片”。让它精准的方式是叫出部位名：media、header、body、footer。你正在看的这个词条页里，首页每个词条就是一张标准结构的卡片。