Menu
Components
Image block
Image blocks are a a way of presenting an initial journey decision, the steps for a process, or highlighting features.
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 blocks divisible by three or two with a maxium of eight blocks, anything over six starts to get a bit excessive
- Use the character guidelines provided, the number of characters includes spaces
- Each block’s copy should have the same number of lines
Variants
Two blocks
Two blocks
Useful for when you have two categories. As there is more width to each block the character guidance is higher than for three block and four block components.
- Copy length
Block copy should have the same number of lines for consistency
Character guidance
Component title - 35 characters
Subtext - 175 characters (265 max)
Block title - 35 characters
Block copy - 175 characters
Three blocks
How to compare
This component uses a three block layout. It explains the process of getting a quote with MoneySuperMarket.
Copy length
Block copy should have the same number of lines for consistencyCTA
This CTA is optional. In this example it makes sense to then link the user into the journeyTitles
Block titles can’t be links. Use in-line links or add a button to each block instead
Character guidance
Component title - 35 characters
Subtext - 175 characters (265 max)
Block title - 27 characters
Block copy - 110 characters
Step by step
Useful for when you want to explain how something works or the different levels of cover. This example uses a three block layout but if you had four steps it could flex to that as well.
Character guidance
Same as above
Four blocks
Four blocks
This example uses icons but you can use the numbers as per the example above. As the block’s width is smaller, make sure the block copy is slightly shorter than if you were to use a three block option.
- CTA
The CTAs are optional, you can add in-line links to the body copy as well as an alternative should you need
Character guidance
Component title - 35 characters
Subtext - 175 characters (265 max)
Block title - 20 characters
Block copy - 65 characters
Where to find this component
Documentation version history
Last updated Tuesday, 29th June 2021 22:24 by Gemma D.