卡片
Pricing Card
A single pricing tier with a feature list, price and call to action.
#pricing#card#saas
6 个框架初级
Loading…
A KPI tile with a large metric, a label and a coloured trend delta.
<article class="stat-card">
<div class="stat-card__head">
<p class="stat-card__label">Monthly recurring revenue</p>
<span class="stat-card__icon" aria-hidden="true">
<svg viewBox="0 0 20 20" fill="currentColor">
<path d="M10 2a1 1 0 0 1 1 1v1.1c1.7.3 3 1.5 3 3.1a1 1 0 1 1-2 0c0-.6-.8-1.2-2-1.2s-2 .6-2 1.2.8 1.2 2 1.2c2.2 0 4 1.4 4 3.2 0 1.6-1.3 2.8-3 3.1V16a1 1 0 1 1-2 0v-1.3c-1.7-.3-3-1.5-3-3.1a1 1 0 1 1 2 0c0 .6.8 1.2 2 1.2s2-.6 2-1.2-.8-1.2-2-1.2c-2.2 0-4-1.4-4-3.2 0-1.6 1.3-2.8 3-3.1V3a1 1 0 0 1 1-1Z" />
</svg>
</span>
</div>
<p class="stat-card__value">$48,120</p>
<p class="stat-card__trend">
<span class="stat-card__delta stat-card__delta--up">
<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M10 4a1 1 0 0 1 .7.3l4 4a1 1 0 0 1-1.4 1.4L11 7.4V15a1 1 0 1 1-2 0V7.4L6.7 9.7a1 1 0 0 1-1.4-1.4l4-4A1 1 0 0 1 10 4Z" />
</svg>
<span class="stat-card__sr">Up</span>
12.5%
</span>
<span class="stat-card__period">vs last month</span>
</p>
</article>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
label必填 | string | - | 显示在数值上方的指标名称。 |
value必填 | string | - | 指标的当前值，需预先格式化。 |
delta必填 | string | - | 相对于对比周期的变化值，需预先格式化。 |
trend | 'up' | 'down' | 'up' | 变化的方向，决定 delta 的颜色和箭头。 |
period | string | 'vs last month' | 显示在 delta 旁边的对比周期。 |
icon | ReactNode | - | 与内容并排渲染的图标元素。 |
className | string | - | 合并到根元素上的额外类名。 |
Colour alone never carries the trend: the arrow is `aria-hidden` and an `sr-only` "Up" or "Down" sits beside the number, so the direction survives both greyscale and screen readers. Green and red are conventional but not universal - if your domain reads a falling number as good (churn, latency), pass `trend` from the interpretation rather than the arithmetic sign.