Cards
Pricing Card
A single pricing tier with a feature list, price and call to action.
#pricing#card#saas
6 frameworksBeginner
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 | Type | Default | Description |
|---|---|---|---|
labelrequired | string | - | Name of the metric shown above the value. |
valuerequired | string | - | The metric's current value, pre-formatted. |
deltarequired | string | - | Change since the comparison period, pre-formatted. |
trend | 'up' | 'down' | 'up' | Direction of the change. Sets the delta's colour and arrow. |
period | string | 'vs last month' | Comparison window shown beside the delta. |
icon | ReactNode | - | Icon element rendered alongside the content. |
className | string | - | Additional classes merged onto the root element. |
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.