Simple Statistics
Simple Statistics display statistics, rankings, or other numerical data in a simple layout.
Dos
Show 2 or more statistics together
Don'ts
Avoid stacking in more than 3 rows
Don’t use with large amounts of text
Variations
For use (2 or more) on an interior or article style page. Can be used in groups of 3 or 4 (or more) on a landing page.
Accessibility
Color Contrast
A contrast ratio of at least 4:5:1 between text and background color is ensured to enhance readability. WCAG 1.4.3: Contrast (minimum)
Responsive Design
The component scales in relation to the to the screen size to prevent truncating content and reflows properly when zoomed up to 200% without horizontal scrolling WCAG 1.4.10: Reflow
Consistent
Styles are applied consistently including line height, font style, weight, spacing and color of text. WCAG 1.4.12: Text Spacing
Text Resize
Text can be resized without loss of content or functionality WCAG 1.4.4: Resize Text
Reading Order
A logical focus order preserves meaning and operability. WCAG 1.3.2: Meaningful Sequence
Title
Use a clear and concise title that describes the pathway content WCAG 2.4.6: Headings and Labels
Required Supporting Text
Write supporting text in clear and simple language. WCAG: 3.1.5: Reading Level
Content
Recommended character limits
Statistic
4 characters (6 max)
Subtext
80 characters (160 max)
Source
60 characters (120 max)
Layout
Layout depends on the width of the content well of the page. On interior pages, statistic will layout in groups of 2, although one statistic and odd numbers of statistics can be used. On home and landing pages, if no left or right rail exist, 3 statistics across can be used.
Guidelines
- Maximum 3 rows recommended
- Minimum 2 statistics total recommended
