LAYOUT
三栏特性卡Tri-column Feature Cards
一行三张等宽小卡：图标、标题、两行说明。独立站特性区最经典的组合。
效果预览
⚡极速冷启动 200ms，快到没有感知。
🛡安全端到端加密，数据只属于你。
◈简单三步接入，不需要读文档。
适合用在哪
产品特性区、服务承诺区、价值观展示；恰好三个卖点时。
容易踩的坑
- 三张卡说明文字长短不一，卡片高度参差，应设等高并限制在两行内。
- 整卡没有链接却加悬停浮起效果，用户以为可点，点了没反应。
- 图标用三种不同风格或线宽，视觉上明显不统一，像从三个图标库拼来的。
设计提示词 · Prompt
三栏特性卡（Tri-column Feature Cards）：grid-template-columns:repeat(3,1fr)、gap 24px。每张卡：44-48px 图标容器（品牌浅色底 + 品牌色图标、12px 圆角）→ 17-19px 650 字重标题 → 14-15px 灰色两行说明。卡片白底 + 1px 描边 + 16px 圆角，默认无投影，悬停时投影浮起 + 上移 4px。三个卡片图标用同一色系不同图形。区块上方放 Eyebrow + 居中标题。移动端改单列堆叠。
Tri-column Feature Cards: grid-template-columns:repeat(3,1fr), gap 24px. Each card: a 44-48px icon container (light brand background + brand-color icon, 12px radius) → a 17-19px heading at 650 weight → a 14-15px two-line gray description. Cards have a white background + 1px stroke + 16px radius, no shadow by default; on hover the shadow rises + the card moves up 4px. Use icons from the same color family with different shapes for the three cards. Place an eyebrow + centered heading above the block. On mobile, stack into a single column.
常见搭配
同一页面里经常和「三栏特性卡」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-tricol"> <div class="d-tricol__c"><span class="d-ico d-ico--gd" style="width:26px;height:26px">⚡</span><b>极速</b><span>冷启动 200ms，快到没有感知。</span></div> <div class="d-tricol__c"><span class="d-ico d-ico--g" style="width:26px;height:26px">🛡</span><b>安全</b><span>端到端加密，数据只属于你。</span></div> <div class="d-tricol__c"><span class="d-ico d-ico--b" style="width:26px;height:26px">◈</span><b>简单</b><span>三步接入，不需要读文档。</span></div> </div>