---
title: Simple Statistics
date: 2023-12-17T12:38:00-08:00
author: Josh Magness
canonical_url: "https://designsystem.umd.edu/components/simple-stats"
section: Components
---
# Simple Statistics

Simple Statistics display statistics, rankings, or other numerical data in a simple layout. 
Use in groups of 2 or more
## 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

[View component playground: Simple Statistics](https://playground.designsystem.umd.edu/?path=/story/components-stats-simple-stats--default)

## Accessibility

### Built in 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

### Requirements for use

**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.

[View Figma design: Stats - Simple](https://www.figma.com/file/YqgNlOMETaJbcI67sv8HUp/Downloadable-Components-File?type=design&node-id=190%3A71546&mode=design&t=P21nxkNUofHOgeBu-1)

## Guidelines

Maximum 3 rows recommendedMinimum 2 statistics total recommended