Menu
Components
Marker list
Hey, this is an old version. View the latest
Note: This component doesn't yet exist in Storybook, preliminary image(s) shown.
On this page
Example
Best practices
- Aim to keep the number of markers divisible by three or two with a maxium of six markers
- Use the character guidelines provided, the number of characters includes spaces.
- Each marker’s copy should have the same number of lines
- Be wary of repeating this section too much on landing pages, never stack the same component directly on top of each other on the page
Variants
Two markers
Pros and cons (bulleted list)
Use this component when you have clear positives and negatives which can be summarised into bullet points. Ensure there’s an equal amount of copy for each marker.
Point count
There should be an equal number of points in each set of body copyMarket titles
You can’t rely on the markers alone to dictate the information to users, the title must clearly state whether it’s positive, negative or similar for accessibility
Character guidance
Component title - 40 characters (50 max)
Subtext - 175 characters (265 max)
Marker title - 30 characters (40 max)
Marker copy - 200 characters
Right aligned
Eyebrow (H1)
The H1 from an SEO perspective use this for the product in question i.e. car insurance, credit cards. Character limit 40Hero header (page title / H2)
Ability to be more playful with the copy here as the H1 is above. Character limit 30-45Card title (H2)
Header to accompany the bullet points. Character limit 30-45Bullet points
Main benefits of comparing with MSM. Character limit 70 per bullet point
Where to find this component
Documentation version history
Last updated Thursday, 17th June 2021 14:19 by Adrian T.