Basic Card
One piece of content per card: media on top, title and summary below, one or two actions.
Product Card
商品卡
The selling card: product image, name, price, and sales or rating — tap through to the detail page.
All platformsCommerceContent areaComponent
大白话说明
商品卡为「快速比较后下单」优化：图占一半以上建立欲望，名字两行讲清是什么，价格用最大字重抢视线，原价划线造锚点，销量/评分给信任。促销角标只贴一个，多了互相抵消。
什么时候用
电商列表、推荐位、搜索结果——一切陈列商品的地方。
什么时候不用
只有三五个商品的精品陈列可以放大图做编辑式排版，别用统一卡片把气质磨平。
细节与变体
- 价格的小数位、货币符号字号要小于整数部分，这是行业惯例
- 图加载前用同色块占位，防止卡片高度跳动
- 「已售罄」状态直接压在图上置灰，不要等点进去才发现
配套效果见下方「可用效果」。
Matching prompt (fill in & copy)
Effects you can apply
Reference implementations (open source)
- Gestalt ↗ Apache-2.0 · 免费（Apache-2.0）
Pinterest's design system — the home of the Masonry layout and image-first patterns.
- Magic UI ↗ MIT · 免费（MIT）
Animated components for React + Tailwind — marquees, glows, counters; a key reference ecosystem for this site's effects.