Statistic

Style

A statistic is a stacked combination of elements used to visualize a data point. By default, a statistic includes data text and body text at a minimum. Optional elements include an icon, title text, and a call to action for additional emphasis or context.

Anatomy

1. Optional icon
2. Optional title text
3. Data text
4. Body text
5. Optional call to action

Sizes

There are two available sizes and the only difference is the size of some elements.

Size	Element	Current Value
Default	Icon size	40px
Default	Data text size	36px 2.25rem
Large	Icon size	64px
Large	Data text size	48px 3.0rem

Theme

A statistic is available in both light and dark themes. The icon, title text, and data text for light theme are red whereas elements and text for dark theme (not including the call to action) are white to meet accessibility contrast requirements.

Light theme

Dark theme

Configuration

Container

By default, all elements in a statistic, no matter how many, are all stacked and vertically aligned. In some situations, it is acceptable to align elements to the left, for example if grouped statistics are used in several rows or if surrounding content is all left aligned.

Order

A statistic was designed to be read from top to bottom. If certain optional elements are included, the order will change.

1. Icon (always ordered first if included)
2. Title text and data text (ordered first if there is no icon)
3. Body text (ordered last if there is no call to action)
4. Call to action (always ordered last if included)

Space

Space values are the same for both Default and Large sizes and on all breakpoints. To see space values when statistics are used in a layout, go to the Guidelines page.

Interaction states

The optional call to action is the only interactive element. Go to the Call to action page to view the interaction states.