Single stat

The single stat component displays the title and value of a metric.

Usage

A single stat can be used by itself or side-by-side with other single stats to display a topical set of metrics. There are a number of variations to allow for additional context or representation of the metric.

When to use a single stat

  • To show an overview of how a metric is performing.
  • To show multiple metrics around a similar topic side-by-side.

When not to use single stat

  • To display standard text or labels.
  • To display the same metric over a period of time (use a chart instead).

Demo

Simple

The default pattern for displaying a metric.

Loading story...

Title icon

A single stat with a title icon to convey extra meaning to the metric.

With Title Icon
Loading story...

Meta icon

A single stat with an icon which can be used to convey status or trend.

With Meta Icon
Loading story...

Badge

A single stat with a badge which can be used to convey status or trend in more detail.

Loading story...

A single stat that navigates to detailed information about a metric.

TODO:
Add linked single stat example. Create an issue

Design specifications

Color, spacing, dimension, and layout information can be viewed in the Pajamas UI Kit →

Last updated at: