渐变功能卡 <GradientCards />
三张毛玻璃大圆角卡,顶部各有一块不同色调的渐变面板和玻璃图标圆片,下面标签、标题、说明。
Template and style descriptions are currently available in Chinese only.
- Group
- 并列 · 3 个功能或选项
- Component
GradientCards·#gradient-cards
Good for
- 3 个并列的功能、开关、选项
- 每项一两句说明
Avoid when
- 有先后:用 StepTrack
- 超过 3 项:用 IconGrid
Content limits
| 1 | items 正好 3 个:title ≤ 10 字,body 24–48 字,tag ≤ 18 字符 |
| 2 | title ≤ 2 行 × 9 字 |
| 3 | lead ≤ 60 字 |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | 小节名,2–8 字 |
title · required | string | string[] | 标题;数组手动断行 |
lead | string | 一两句导语,≤ 60 字 |
source | string | 事实出处 |
items · required | { icon, tag?, title, body }[] | 三张卡 |
Example
<GradientCards kicker="三个开关" title="…" items={[{ icon: 'stars', tag: 'DeckDef.theme', title: '配色', body: '…' }, …]} />