Stats & Data
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.
The two main blocks should be wrapped around some kind of unit. In this example they're wrapped in a
The width of the bar is fed by the controller to make it dynamic, but it can be hard coded as well.
The meter color can be adjusted to provide additional context and feedback. Adding a
meter--error class can indicate a warning or problem the customer may want to address. Adding a
meter--neutral class can be used to communicate data with no positive or negative connotation like subscriber growth.
The meter should not be the sole indicator of information. It should accompany additional copy for accessibility.
A larger version of our meter with labels and a width animation.
spectrum type represents how we visualize reputation scores. Without
spectrum, the pattern will fall back to our default meter colors.
data-dojo-props allows the large meter to adopt other colors if necessary.
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.
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).
Add an animation between a two numbers to create delightful motion. Adjusting number of decimals to animate, animation duration, and animation delay all allow flexibility.
By default the widget animates from 0 to the number in the widget DOM element.
Pass widget settings via
Some of the settings include: