Product Card
The selling card: product image, name, price, and sales or rating — tap through to the detail page.
Basic Card
基础卡片
One piece of content per card: media on top, title and summary below, one or two actions.
All platformsContentContent areaComponent
大白话说明
基础卡片是最通用的内容容器：媒体区、标题、摘要、元信息、操作区自上而下，用边框或阴影从背景里浮出来。网格里等高对齐、列表里通栏排，都成立。
什么时候用
内容条目需要图文混排且条目间地位平等时——Feed、课程列表、作品集的第一选择。
什么时候不用
纯文字短条目用列表行更省空间；数据字段多的条目用表格，卡片装不下比较。
细节与变体
- 标题最多两行、摘要最多两行，超出省略——卡片的整齐靠截断纪律
- 整卡可点时，卡内不要再放第二个可点元素（嵌套点击是事故源）
- 阴影和边框二选一，描边 + 大阴影会显脏
配套效果见下方「可用效果」。
Matching prompt (fill in & copy)
Effects you can apply
Reference implementations (open source)
- Ant Design ↗ MIT · 免费（MIT）
The de-facto standard for admin interfaces in China — tables, forms, lists.
- Mantine ↗ MIT · 免费（MIT）
A batteries-included React library: 100+ components and hooks, even date pickers.
- Magic UI ↗ MIT · 免费（MIT）
Animated components for React + Tailwind — marquees, glows, counters; a key reference ecosystem for this site's effects.