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
rem
s 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 includesaria-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) |
- Last updated April 10, 2018
- Authorable - Yes
- Core - Display Numbers