Display numbers are for visually enhancing numeric lockups. Examples would be numbers that include superscript characters like $ and %, or decimal values like cents and units that provide context for the value.

Examples

79%, $79.00, $79.00 per month, $79.50, $79.50 per month

79%, $79.00, $79.00 per month, $79.50, $79.50 per month

Save up to 50%

Membership starting at $79.00 per month

Try Alpha for $29.50 per class today.

Usage

Rules

  • Use display numbers to enhance numeric lockups when those lockups are for product tables or offers
  • Do not use display numbers in cart flows or cart summary tables
  • Use the correct markup to ensure the number is read as intended for screen readers (see Accessibility notes)

Constraints

  • This pattern is not intended to be used everywhere that price or percentage are. Rather, this is the exception to highlight those elements in limited and specific scenarios.
  • By default the formatting of the lockup is based on the parent element‘s text size. There are two additional sizes that are based on rems to maintain consistency regardless of where they‘re used (see Classes below). When used in normal body text the recommendation is to use one of the size classes.

Principle

  • Display numbers allow for a more tailored presentation of numeric lockups typically found in marketing content

Accessibility

  • If you look at the markup, you‘ll notice that the lockups are built by stringing together a series of <span>s. This prevents assisstive technology from reading units, like price, correctly. To fix this we‘ve included a <span class="sr-only"> before .display-number that includes the number without formatting, and with additional clarifying text when necessary. In like fashion, we don‘t want the contents of our lockup <span>s to be read by assisstive technology, so the parent .display-number also includes aria-hidden="true".
  • For VoiceOver to read price correctly, cents must be included in the decimal, e.g. <span class="sr-only">$79.00</span>

Class Names

display-number-sup
Modifier
Use on a <span> that contains any character that should appear as superscript
display-number-value
Modifier
Use on a <span> that contains the numeric value
display-number-units
Modifier
Use on a <span> that contains any trailing units
display-number-lg
Modifier
Increases the font size to `1.5rem` (24px)
display-number-xl
Modifier
Increases the font size to `3rem` (48px)