双色方案卡 <DuoCards />
橙、紫两张实色大卡并排,各有一个大数字、一句说明和绿点清单。像两档价格,也适合两种用法。
Template and style descriptions are currently available in Chinese only.
- Group
- 对比 · 两个方案或两种用法
- Component
DuoCards·#duo-cards
Good for
- 两个方案、两档套餐、两种用法
- 每项有一个代表数字
Avoid when
- 三档:用 PricingTiers
- 要逐行对比属性:用 CompareTable
Content limits
| 1 | cards 正好 2 张:name ≤ 8 字,value ≤ 6 字符,note ≤ 24 字,items 3–5 条各 ≤ 16 字 |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | 小节名,2–8 字 |
title · required | string | string[] | 标题;数组手动断行 |
lead | string | 一两句导语,≤ 60 字 |
source | string | 事实出处 |
cards · required | [DuoCard, DuoCard] | 两张卡 |
spots | [Spot, Spot] | 卡片颜色,默认 3 和 4 |
Example
<DuoCards kicker="两种用法" title="…" cards={[{ name: '单文件', value: '6.0', unit: 'MB', note: '…', items: ['…'] }, { … }]} />