阶梯卡 <TierLadder />

3–5 张卡片排成向右下方走的台阶，颜色从强调色渐变到灰；每按一次 → 放下一级。

Template and style descriptions are currently available in Chinese only.

See it in the demo deck →

Group: 分级 · 从热到冷 3–5 档
Component: TierLadder · #tier-ladder
Interaction: build: reveal 时每步放下一级

Good for

存储层级、服务档位、价格档这类有序分级
每档 2–3 个相同的参数

Avoid when

档位之间没有顺序：用 PanelCards
要买哪一档：用 PricingTiers

Content limits

1	steps 3–5 级
2	name ≤ 14 个拉丁字符或 ≤ 8 字；tag ≤ 6 字
3	specs 2–3 项：label ≤ 4 字，value ≤ 8 字
4	ends 各 ≤ 6 字

Fields

Field	Type
`kicker` · required	`string`	标题上方的小节名，2–8 字
`title` · required	`string \| string[]`	页面标题；传数组可手动断行，每项一行
`lead`	`string`	一到两句导语，≤ 60 字
`source`	`string`	事实出处；页面上有任何数据或事实时必填
`hint`	`ReactNode`	页眉中间的操作提示，可用 <kbd>
`steps` · required	`{ name, tag?, specs: { label, value }[] }[]`	从上到下
`ends`	`[string, string]`	两端标签

Example

<TierLadder kicker="存储类" title="…" ends={['常用', '归档']} steps={[{ name: 'Standard', tag: '默认', specs: [{ label: '取回', value: '毫秒级' }] }, …]} source="…" />