Skip to main content Skip to main content
Components

Numeric data

Status: Experimental

Added in November 2025. Contributed by Jen Thomson in ‘Sirius (OPG)’.

How to use ‘experimental’ components
Anyone can add an ‘experimental’ status component to the MOJ Design System. They’re early in development and can be used as a starting point. Read about all the Design System statuses.
Use the numeric data component to make numbers more prominent.

Contents

A row of three large numbers with a smaller item description underneath each number them. Examples: '1,062 active cases' or '32 overdue reports'.

Overview

Use the numeric data pattern to make pieces of information easier to scan, interpret and action where required.

How the component is currently used

The number can be written as an integer, a decimal, currency or a percentage.

It should not be presented as a word or a fraction.

The label should be short and succinct, ideally no more than 20 characters.

To make it accessible:

  • use black text on a white or gov-uk light-grey background
  • ensure that labels and text make sense when you read it visually or with a screenreader

If using multiple instances:

  • use a heading to provide context
  • check for responsiveness on multiple screen sizes

If using a link, check that it makes sense to a screen reader.

Contribute to this component

You can help develop this component by adding information to the ‘numeric data’ Github discussion. This helps other people to use it in their service.

Designs

A Figma link was not included when this component was added.

There may be more information in the ‘numeric data’ Github discussion. You can also view the component image in the overview.

If you have a Figma link for this component (or a component like it) you can add it to Github discussion. This helps other people to use it in their service.

Accessibility

No accessibility findings were included when this component was added. There may be more information in the ‘numeric data’ Github discussion.

Contribute accessibility findings

If you have accessibility findings that are relevant to this component you can add them to the Github discussion. This helps other people to use it in their service.

Code

No code was included when this contribution was added.

You can use the ‘numeric data’ Github discussion to:

  • view other code blocks
  • add relevant code