← 所有版型

分档定价 <PricingTiers />

3–4 张价格卡,推荐档是深色卡片并略微抬高,带角标;每档有价格、适用对象和 3–5 条功能,底部一行说明价值指标。

版型與風格的說明目前僅提供簡體中文。

分組
定价 · 好 / 更好 / 最好
元件
PricingTiers · #pricing-tiers
互動
卡片依次上浮;悬停时抬起。

適合

  • 产品分档与定价方案
  • 想把大多数客户引到某一档

不適合

  • 在比较竞品价格:用 Matrix
  • 只有一档:用 BigStat

內容上限

1tiers 3 或 4 档,从便宜到贵
2name ≤ 6 个字符;price ≤ 6 个字符;unit ≤ 10 个字符
3for ≤ 16 字
4features 3–5 条,每条 ≤ 16 字;后一档第一条写“包含上一档全部功能”
5focus 恰好 1 档;badge ≤ 6 字
6footnote ≤ 50 字

欄位

欄位型別
kicker · 必填string标题上方的小节名,2–8 字
title · 必填string | string[]页面标题;传数组可手动断行,每项一行
leadstring一到两句导语,≤ 60 字
sourcestring事实出处;页面上有任何数据或事实时必填
hintReactNode页眉中间的操作提示,可用 <kbd>
tiers · 必填{ name, price, unit?, for, features, focus?, badge? }[]各档
footnotestring底部说明:价值指标与升档规则

範例程式碼

<PricingTiers
  kicker="分档定价"
  title="三档定价,把人引到中间那档"
  tiers={[
    { name: '入门', price: '¥0', unit: '/ 3 席位', for: '个人和小团队试用', features: ['3 个数据源', '标准看板模板'] },
    { name: '专业', price: '¥399', unit: '/ 席位 / 月', for: '中型企业', features: ['包含入门档全部功能', '多触点归因'], focus: true, badge: '推荐' },
    { name: '企业', price: '询价', for: '大型组织', features: ['包含专业档全部功能', '单点登录'] },
  ]}
  source="示意"
/>