Menu
Components
Text and image
There are various options for positioning text alongside an image - either an illustration or photograph.
Note: This component doesn't yet exist in Storybook, preliminary image(s) shown.
Example
Best practices
- Use the character guidelines provided, the number of characters includes spaces
- For accessibility reasons you can’t have more than 80 characters per line and so the width of the body copy is restricted to 576px, meaning body copy can’t go full width
- Don’t stack two of the same component design on top of each other in the page
Variants
Illustration
Illustration
You can use this component for a range of things but works best when you have a couple of paragraphs of copy. This example uses an illustration which is relative to the copy.
CTA
This example uses a primary CTA but you can use secondary, tertiary or neitherIllustration position
Illustration on the left is also an option
Character guidance for all text and image variations
Component title - 45 characters
Body copy - 350 characters (425 max)
Photography
Within the brandmark
Same as above except this uses photography in the brandmark.
Don’t use this image directly underneath the hero though as it clashes with the hero brandmark.
Bullets
You can also use bullet points for these sections but aim for two or three pointsBrandmark position
Brandmark image on the left is also an optionCTA
This example uses a secondary CTA but you can use primary, tertiary or neither
As a square
A different approach to using photography, useful when you’ve already used the brandmark option and need another means of presenting the image.
CTA
This example uses a tertiary CTA but you can use primary, secondary or none at allImage position
Square image on the left is also an option
Where to find this component
Documentation version history
Last updated Thursday, 17th June 2021 14:47 by Adrian T.