Adobe Logo

Spectrum

Version 1.0.0

Big number

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.

Table of contents#

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#

Example of a big number in focus state. A blue rectangular border with rounded corners encompasses metric 2,236 and metric label, visitors.

Focus#

A big number has a single focus state.

Example of a loading state for a big number. 3 grey bars in a bar chart, which is the standard loading state for data visualization in Spectrum.

Loading#

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

Example of an empty state error showing null values. Error icon paired with text, Unable to load. One or more values are null. A link, label Reload.

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.

Example of an empty state for a big number. A chart icon paired with text, No data available. Link, label Link dataset.

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.

Example of an error state for a big number. An error icon paired with text, Unable to load. Link, label Reload.

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.
Key example of incorrect usage of a big number with too many other visual elements in the same container. Big number with metric value 2,236. Metric label, visitors. Combined with an icon of a person in profile, an up arrow icon with the label 22% day-over-day, a single sparkline, and a tag labeled January 2019 to October 2019.

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#

DateNumberNotes
Jan 12, 20211.0.0
  • This component was added to the website.

Design checklist#

N/A

All interactive states

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

Multiple options

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

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).

Defined behaviors

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

Usage guidelines

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

Accessible contrast

Follows WCAG 2.0 standards for contrast (AA).

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 included in Spectrum DNA.

Generated UI kit

Includes a downloadable XD file that has been generated by code and shows multiple variations, states, color themes, and scales.

In Spectrum for Adobe XD plugin

Component is included in the Spectrum for Adobe XD plugin.