Digital Design System

Statistics: Multiple

Statistic modules are available as visually appealing, accessible snippets to convey information that may have previously existed in the form of an image or inline graphic.

There are multiple ways to implement the module depending on the content you have.

It’s easiest for a reader to scan down the left side of the stats - so our statistics are left-aligned and stacked.

With our refreshed brand, there is a streamlined statistic view.

statistics detailed design

<div class="wtw-stat-module">
    <p class="stat-item"><span class="stat-number">20m</span>
        <span class="stat-text heading-6">Lorem ipsum dolor sit amet fact lordolor amet fact lorem ipsum dolor</span>
    </p>
</div>
<div class="wtw-stat-module">
    <p class="stat-item"><span class="stat-number">76%</span>
        <span class="stat-text heading-6">Lorem ipsum dolor sit amet fact lordolor amet fact lorem ipsum dolor</span>
    </p>
</div>

No more than 5 stats per page; rule of thumb is 2 paragraphs of text for every stat used.

The color of the typography within statistics modules has been calibrated to achieve WCAG 2.1 AA compliance.

The statistic itself displays in Dark Ultraviolet and the supporting text displays in Onyx.

Statistics do not receive any background colors.

Key specs

  • Stat number and stat description required
  • Stat number – max 4 characters including number and additional characters (e.g. 20%, 450k, 2.49)
  • One sentence/phrase per statistic; max 140 characters for whole statistic
  • No more than 5 stats per page; rule of thumb is 2 paragraphs of text for every stat used.
    • More than 5 stats? Use an unordered list.
  • Stats should reinforce content already on the page
  • Imagery / icons not allowed in stat modules; use icon + text module instead
  • Do not mix statistics and icons and graphics within the same module