Stats & Data

Interpolate number

Widget that provides animation between a starting number and an ending number. Includes settings like number of decimals to animate, animation duration, animation delay, etc.

Total opens


Successful deliveries


By default the widget animates from 0 to the number in the widget DOM element.

Pass widget settings via data-dojo-props

Some of the settings include: startVal, numDecimals, animDuration, animDelay, easing

Meter blocks

Meter blocks are composed of two main blocks. The top part is where the labels and stats are located, and the bottom part is the meter.

638 Opens 81.0%

The two main blocks should be wrapped around some kind of unit. In this example they're wrapped in a size1of2 unit.

The width of the bar is fed by the controller to make it dynamic, but it can be hard coded as well.

Large meter

Simply a larger version of our meter with labels and a width animation.

If not including type:'spectrum', adding meterClass:'className' to data-dojo-props allows the large meter to adopt any default meter colors.

No-data block

No-data blocks are used to show empty states.

We use different illustrations to associate the type of missing data with the no-data message.

Generally the block headers use sentence-case.

Standard stat block

Regular stat blocks work in grid units. Just add stat-block class to the unit element.







You can have any type of content inside the stat blocks, but usually they follow a pattern of title and data.

Use heading tags for the titles and paragraph tags for the content of the stats.

In this example we are also using some utility classes to hide and show content at different break points.

hide-phone will hide content if in phone break point (640px). show-phone Will show content if viewport is within the phone break point (640px).

Borderless stat block

Since stat blocks formatting can vary inside the single blocks, here's an example with different content from the above example.

Stat no block is achieved by adding the no-border class to the stat-block element.

Total opens




Successful deliveries

37 92.5%

Forward opens


This example uses paragraphs and headings aligned to the left to show a different kind of content.

Vertical spacing between blocks can be achieved by using utility classes like .!margin-bottom--lv3, .!margin-bottom--lv4, .!margin-bottom--lv5