← All templates

发光指标卡 <GlowMetrics />

2–4 张深色卡片,大数字带强调色光晕并从 0 数上来,可加小折线和变化说明;适合深色风格。

Template and style descriptions are currently available in Chinese only.

See it in the demo deck →

Group
数据 · 开场的关键数字
Component
GlowMetrics · #glow-metrics

Good for

  • 整场演示依赖的 2–4 个数字
  • 深色风格(studio-dark 等)里的数据开场

Avoid when

  • 数字超过 4 个:用 KpiBoard
  • 浅色正式汇报:用 StatRow

Content limits

1metrics 2–4 个
2数值含单位 ≤ 8 个字符;unit ≤ 4 个字符
3label ≤ 10 字,delta ≤ 12 个字符,note ≤ 24 字
4trend 4–16 个数

Fields

FieldType
kicker · requiredstring标题上方的小节名,2–8 字
title · requiredstring | string[]页面标题;传数组可手动断行,每项一行
leadstring一到两句导语,≤ 60 字
sourcestring事实出处;页面上有任何数据或事实时必填
hintReactNode页眉中间的操作提示,可用 <kbd>
metrics · required{ value, decimals?, unit?, label, note?, delta?, trend? }[]指标,每张卡一步

Example

<GlowMetrics kicker="2025 年" title="先记住三个数" metrics={[{ value: 2779, unit: 'TWh', label: '全球太阳能发电量', delta: '+30%' }, …]} />