Checkmark box is used to highlight parts of content in a list. You can see this on Case study pages used to sum up a paragraph.
Desktop
Mobile
Layout options
This module contains the following elements:
- Headline*
- Icon*
- Text*
* required element
As a default, this module have 5 list items, and we recommend using a maximum of 5 items however you can both increase and reduce the number of items on the list.
Headline
Character limit: 42
Do not exceed two lines of text on 360px screens
Text
When using a Checkmark list we recommend the following to ensure optimal ‘scan-ability’ and legibility:
- Number of bullets: Use no more than 5 list items in a row
- Length (text): Avoid using more than 54 characters (or 2 lines of text on 360 px screens)
When text is longer than a single line, then the text box expands and the icon should be aligned to the top left. See the example under do’s and don’ts.
Colorways
The checkmark box is used to highlight parts of content in a list. You can see this on Case study pages used to sum up a paragraph.
In the examples below you can see the checkmark box being used to highlight the key results of the case study.
Examples of use
DO: Keep the list short and precise in order to ensure the users ability to quickly scan the text.
DON’T: Use too much text, as this will compromise the users ability to quickly scan the text in the list. We recommend 1 line per checkmark.