Metrics

One number and its change: ten exports — MetricsSimple, four icon and four chart cards, and the shared MetricChangeIndicator — on the same ringed chrome.

Specimen

Guidelines

Code

Demo

hero

Active users

4,209

9.2%

Component

subtitle

title

Indicator type

trend

change

Footer actions

import { MetricsSimple } from "@/components/application/metrics/metrics"; <MetricsSimple subtitle="Active users" title="4,209" type="simple" trend="positive" change="9.2%" />

In context

in-context

View in a page

Family

family

7.4%

MetricChangeIndicator

MetricsSimple

MetricsIcon01

MetricsIcon02

MetricsIcon03

MetricsIcon04

MetricsChart01

MetricsChart02

MetricsChart03

MetricsChart04

Types

cells

The nine cards, in the sheet’s Type order.

Active users

4,209

9.2%

MetricsSimple, indicator type simple

Sessions

12,940

100%

MetricsIcon01, success icon, fixed positive chip

New sign-ups

318

100%

vs last month

MetricsIcon02, brand icon beside the heading

Monthly recurring revenue

$42,580

7.4%

vs last month

MetricsIcon03, gray icon, trend indicator

Churn

1.9%

0.3%

MetricsIcon04, compact, modern chip, a fall

Page views

48,290

12%

vs last month

MetricsChart01, sparkline with the highlight marker

Active users

4,209

9.2%

MetricsChart02, fixed two-series sparkline

Monthly recurring revenue

$42,580

7.4%

vs last month

MetricsChart03, full-width chart on chartData

Conversion rate

3.6%

0.4%

vs last month

MetricsChart04, titled gray frame, chartColor passed

Tones

matrix

The change indicator: three types across both trends.

Variants by type across the columns and trend down the rows
	simple	trend	modern
positive	Up 7.4%	Up 7.4%	Up 7.4%
negative	Down 2.1%	Down 2.1%	Down 2.1%

Layouts

cells

In a grid

Active users

4,209

9.2%

Sessions

12,940

3.1%

Churn

1.9%

0.3%

a KPI row of MetricsSimple

Monthly recurring revenue

$42,580

7.4%

vs last month

Conversion rate

3.6%

0.4%

vs last month

Page views

48,290

12%

a row of MetricsChart03, equal heights

Below md

MetricsIcon04 at phone width: icon above the copy

MetricsChart01 at phone width: the smaller mini chart

From md

Churn

1.9%

0.3%

MetricsIcon04: icon beside the copy

Page views

48,290

12%

vs last month

MetricsChart01: the larger mini chart

Content

cells

The footer slot

Active users

4,209

9.2%

one action, MetricsSimple: the button at the end

Monthly recurring revenue

$42,580

7.4%

vs last month

two actions, MetricsIcon03: icon starts, text ends

Conversion rate

3.6%

0.4%

vs last month

two actions, MetricsChart04: outside the inner card

Change copy

Monthly recurring revenue

$42,580

7.4%

vs last month

MetricsChart03 with changeDescription

Monthly recurring revenue

$42,580

7.4%

vs last month

MetricsChart03 without changeDescription

Active users

4,209

9.2%

MetricsSimple, no change: the glyph alone

Average monthly recurring revenue per paying workspace

4,209

9.2%

MetricsSimple, a long subtitle wraps

Behaviour

cells

Narrow cells

Monthly recurring revenue

$42,580

7.4%

vs last month

MetricsIcon03: the number row on one line

Monthly recurring revenue

$42,580

7.4%

vs last month

MetricsIcon03 narrow: the number row wraps

Monthly recurring revenue

$42,580

7.4%

vs last month

MetricsChart03 narrow: the number row wraps

Churn

1.9%

0.3%

MetricsIcon04 narrower than its floor: the floor holds

Chart 02’s number

Active users

4,209

9.2%

MetricsChart02, no footer: display-md from lg

Active users

4,209

9.2%

MetricsChart02 with a footer: display-sm

Loading

cells

Cards

type plain, heading real

type icon, heading and icon real

type chart, heading real

States

cells

No state of their own: the dots button and footer buttons respond.

Active users

4,209

9.2%

dots menu: hover and focus the button, open it

Monthly recurring revenue

$42,580

7.4%

vs last month

actions false: no dots menu

Monthly recurring revenue

$42,580

7.4%

vs last month

footer buttons: hover and focus each