01 · 140px
组件设计规范
间距、圆角与阴影的统一约定。
Cards / 04
瀑布流卡片
内容高度不一致时，等高栅格会留下大片空白。瀑布流用多列布局让卡片紧贴排布，横向滚动则把同一组卡片压缩进一行，适合「逛」的场景。
瀑布流 · .masonry
2 列（640+） / 3 列（1024+）自动切换横版 248px
城市天际线
黄昏时分的玻璃幕墙，适合作为品牌故事的开篇配图。
方形 148px
渐变光球
抽象渐变用于封面与占位。
竖版 196px
季度增长曲线
数据可视化配图，卡片高度随内容自然延展，不会挤压相邻卡片。
纯文字卡
没有封面图时，卡片只靠标题与正文撑起高度，在瀑布流里自然形成错落。
无图
超长 288px
海报比例封面
最长的封面占据一列的主视觉位置，其余卡片围绕它紧凑排布，形成疏密对比。
横版 164px
暖色光晕
用于活动页与促销区块。
竖版 224px
山海之间
自然风光类内容在瀑布流中观感最好，纵向层次不会被裁切。
带指标的卡
new卡片内也能放指标块，高度由内容决定。
进度62%
横向滚动卡片
flex + overflow-x-auto本周精选
横向滚动 →
02 · 140px
深浅色适配
同一套语义变量的两套取值。
03 · 140px
动效时长表
毫秒级参数与缓动曲线。
04 · 140px
无障碍检查
对比度与焦点顺序清单。
05 · 140px
命名与分层
组件、区块、页面三层结构。
瀑布流 vs 等高栅格
同一组内容，两种排布等高栅格
grid lg:grid-cols-2
卡片 A
两行描述文字
卡片 B
两行描述文字
卡片 C
两行描述文字
卡片 D
两行描述文字
每行高度由该行最高的卡片决定，短卡片底部会留下空白，但行与行之间严格对齐，适合需要横向比较的列表。
瀑布流
.masonry
卡片 A
两行描述文字
卡片 B
四行描述文字，高度更高
补充说明与标签
卡片 C
三行描述文字
卡片 D
一行描述
列内自上而下填充，卡片之间几乎不留空白；代价是行与行不再对齐，横向比较会变困难。
.masonry多列容器：窄屏 1 列，640px 起 2 列，1024px 起 3 列
.masonry-item列内单元：禁止内部断页、下间距 16px、宽度撑满当前列
选型建议图片墙、灵感流、商品瀑布用 masonry；需要逐行对齐的报表与对比列表用栅格