← All templates

双色方案卡 <DuoCards />

橙、紫两张实色大卡并排,各有一个大数字、一句说明和绿点清单。像两档价格,也适合两种用法。

Template and style descriptions are currently available in Chinese only.

See it in the demo deck →

Group
对比 · 两个方案或两种用法
Component
DuoCards · #duo-cards

Good for

  • 两个方案、两档套餐、两种用法
  • 每项有一个代表数字

Avoid when

  • 三档:用 PricingTiers
  • 要逐行对比属性:用 CompareTable

Content limits

1cards 正好 2 张:name ≤ 8 字,value ≤ 6 字符,note ≤ 24 字,items 3–5 条各 ≤ 16 字

Fields

FieldType
kicker · requiredstring小节名,2–8 字
title · requiredstring | string[]标题;数组手动断行
leadstring一两句导语,≤ 60 字
sourcestring事实出处
cards · required[DuoCard, DuoCard]两张卡
spots[Spot, Spot]卡片颜色,默认 3 和 4

Example

<DuoCards kicker="两种用法" title="…" cards={[{ name: '单文件', value: '6.0', unit: 'MB', note: '…', items: ['…'] }, { … }]} />