Big number

Version 2.0.0

A big number is a table with one column and one row, displaying a metric value and a metric label. It is never used in isolation and relies on other elements in a view for context.

Example of a big number. Metric value 2,236. Metric label, visitors. Combined, they illustrate the data point of 2.236 visitors.

Date

Version

Spectrum

Apr 06, 2022

2.0.0

Download

Jan 12, 2021

1.0.0

Download

Table of contents#

Anatomy
Options
Behaviors
Usage guidelines
Changelog
Design checklist

Anatomy#

Image illustrating through labels the component parts of a big number, including its metric value and metric label.

Options#

Example of a big number. Metric, 2,236. Metric label, visitors.

Standard#

A standard big number shows a metric value and a metric label.

Behaviors#

Focus#

A big number has a single focus state.

Loading#

A big number can often require time to load, so include a loading state.

Null values#

Null (blank) values are most likely an error: something is not working as expected. A big number should display an empty state error when the value is null.

Empty state#

When there is no data available, indicate as such and give direction as to how to make data appear. Do not render an empty view.

Error state#

There are occasionally errors with fetching data. When this happens, give users a helpful, actionable explanation of what happened and what they can do to fix things. Do not render an empty view.

Usage guidelines#

Big numbers are not interactive#

Big numbers have a focus state, but they do not have a selection state or a hover state. They are not interactive.

Key example of incorrect usage of a implementing big number. Metric value 2,236. Metric label, visitors. A cursor appears over the big number, implying that it is interactive.

Combine big numbers with other visual elements#

Big numbers are usually combined with other visual elements. These can include but are not limited to sparklines, histograms, icons, and deltas. Be careful not to combine too many elements into a single container.

Key example of correct usage of a big number with only one other visual element in the same container. Big number with metric value 2,236. Metric label, visitors. Combined with a single sparkline.

Include symbols for clearer communication#

When appropriate, add symbols (e.g., currency, percentages, abbreviations) before or after a metric value. Abbreviate large numbers when precision isn’t necessary.

Key example of correct usage of adding symbols to big number. 3 big numbers. $6,870 Revenue, with a dollar sign for currency. 3.24% Conversion rate, with a percentage sign for percentage. 132 thousand visitors, with a K abbreviation for “thousands.”

Scale to fill the size of the container#

The size of a big number should be fluid. It changes automatically based on the size of the container.

Key example of correct usage of scale for a big number. 2 big numbers each in a small and a large container, both with metric value 2,236 and metric label, visitors. The size of the big number value and metric text grows to match the larger container.

Key example of incorrect usage of scale for a big number. 2 big numbers each in a small and a large container, both with metric value 2,236 and metric label, visitors. The size of the big number value and metric text are the same, even in the larger container.

Changelog#

Date

Number

Notes

Apr 06, 2022

2.0.0

Updated all colors to 6.0.0

Jan 12, 2021

1.0.0

This component has been added to the website

Design checklist#

N/A

All interactive states

Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).

All color themes

Works properly across all four color themes (lightest, light, dark, darkest).

All platform scales

Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).

N/A

Accessible use of color

Color is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).

Accessible contrast for text

Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).

N/A

Accessible contrast for UI components

Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).

Content design

UI language and information design considerations have been incorporated into component design.

Defined options

Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)

Defined behaviors

Includes guidelines for keyboard focus, layout (wrapping, truncation, overflow), animation, interactions, etc.

Usage guidelines

Includes a list of dos and don'ts that highlight best practices and common mistakes.

Writing guidelines

Includes content standards or usage guidelines for how to write or format in-product content for the component.

Internationalization guidelines

Works properly across various locales and includes guidelines for bi-directionality (RTL).

N/A

Keyboard interactions

Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.

Design tokens

All design attributes (color, typography, layout, animation, etc.) are available as design tokens.

UI kit

Includes a downloadable XD file that shows multiple options, states, color themes, and platform scales.

Generated UI kit

Includes a downloadable XD file, generated by code using design tokens defined in Spectrum DNA, and shows multiple options, states, color themes, and platform scales.

In Spectrum for Adobe XD plugin

Component is included in the Spectrum for Adobe XD plugin.