Statistic

Usage

Layout

The minimum width of a stat is three columns and the maximum number of cards that can be used in a row is four.

Pairing statistics with footnotes

Include a footnote on the same page if you're making a claim, especially if the statistic comes from an external source. This can increase the credibility of the statistic and can better integrate the data with the page content.

Behavior

Vertical height

If there are multiple stats in a row, the height of the row will be determined by the tallest stat.

Best practices

Including additional elements

Don't use inconsistent amounts of content in stats that are grouped together.

Choosing icons

Don't use an icon that is unrelated to the body text.

Title

Avoid character counts that cause the title to break into two lines at any screen size.

If a title is used for one stat in a group, write a title for each stat. Ensure the title appears in the same slot for each grouped stat to keep formatting consistent.

Number

Avoid character counts that cause the number to break into two lines at any screen size. If the number is a percentage, round up to avoid using decimals that would increase the character count.

Avoid using 100% for more than one statistic in a group or on a page, unless you are able to cite a source and include footnotes.

Body text

Keep the body text as short and consumable as possible. Be mindful of lengthy character counts, especially when stats are grouped. In general, it is not recommended to have the stat's body text span more than 5 lines on small screens.