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.

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

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