Numeric data component

[jenthomson]

Existing

Similar published components or patterns
https://digital-land-design.herokuapp.com/component/data-item

GitHub discussions on similar topics
#210

When to use

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

How to use

Writing content

The number part of the component can be written as an integer, a decimal, an amount of currency or a percentage.

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

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

Making sure it’s accessible

• Recommended use is black text, on white, or gov-uk light-grey, background.
• Labels and text should make sense when you read it visually or with 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

Implementing the code

Use spans to wrap the elements
The numeric part should be maximum 48px (govuk-heading-xl) or minimum 36px (govuk-heading-l)
The label should be normal weight, maximum 24px (govuk-body-l) or minimum 19px (govuk-body)
For the first iteration, labels should sit underneath the number
Text should be aligned left
Links can be used to take a user to the detail, but preferably link the label.

Using it in context with other components and as part of a service?
Use flex-box to display multiple instances in one row

When to use variations? (if applicable)

First iteration will have only one variation: Data stacked on top of label, aligned left.

Things we don’t know enough about

• Linking to the detail or filtering data
• Different layout, size or colour combinations