Numeric data component #290
jenthomson
started this conversation in
Components and patterns
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
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
-- use a heading to provide context
-- check for responsiveness on multiple screen sizes
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
Beta Was this translation helpful? Give feedback.
All reactions