Components

Stat card

A dashboard KPI tile: a flat bordered surface carrying an uppercase faint label, a large title-voiced figure with tabular numerals, an optional up/down delta, and a slot for an inline chart (e.g. a sparkline) under the value.

Label & value

The minimal tile: a __label over a __value set in the title face.

.ds-stat

Monthly revenue

€48,290

<div class="ds-stat">
  <div class="ds-stat__label">Monthly revenue</div>
  <div class="ds-stat__value">€48,290</div>
</div>

With delta

A __delta with .is-up reads success and prepends a ▲; .is-down reads danger and prepends a ▼.

__delta is-up / is-down

Active users

12,840

8.2% vs last week

Churn

3.1%

0.4 pts

<div class="ds-stat">
  <div class="ds-stat__label">Active users</div>
  <div class="ds-stat__value">12,840</div>
  <div class="ds-stat__delta is-up">8.2% vs last week</div>
</div>

With sparkline

The __spark slot under the value holds an inline chart — here a .ds-sparkline.

__spark slot

Sessions

9,201

12%

<div class="ds-stat">
  <div class="ds-stat__label">Sessions</div>
  <div class="ds-stat__value">9,201</div>
  <div class="ds-stat__delta is-up">12%</div>
  <div class="ds-stat__spark">
    <span class="ds-sparkline">…</span>
  </div>
</div>

React

The <StatCard> component takes label, value, delta + deltaDir; children render in the spark slot.

import { StatCard, Sparkline } from "@diametral/design-system/react";

<StatCard label="Monthly revenue" value="€48,290" />

<StatCard label="Active users" value="12,840" delta="8.2% vs last week" deltaDir="up" />

<StatCard label="Sessions" value="9,201" delta="12%" deltaDir="up">
  <Sparkline data={[13, 17, 15, 22, 26, 30]} fill showDot width={160} />
</StatCard>