Usage
The Image + Text component is a non-interactive content layout used to emphasise key points within the context of a larger story. Image + Text can consist of of an Image, Heading Block (Overline, heading, body), and a CTA Block.
Image + Text comes in two sizes, large and small, which are controlled by the viewport width.
Do’s
Use to highlight, key points of a story or product benefit.
Use an Image that is relevant to the point you are making.
Use a CTA Block to direct users to additional relevant information, rather than substituting a link for lots of content.
Dont’s
Don’t be overly verbose with your headings and body copy
Anatomy
Item | Component / type | Notes |
|---|---|---|
1 - Image | Image | MANDATORY |
2 - Overline | Typography | OPTIONAL |
3 - Heading | Typography | OPTIONAL |
4 - Body | Typography | MANDATORY |
5 - Links | CTA Block | OPTIONAL |
See Figma for full list of variants.
Related/Similar Components
Asset Item
Picto item
Text list
Key Content
Item | Content type | Notes |
|---|---|---|
1 - Image | Image | |
2 - Overline | Text | |
3 - Heading | Text | |
4 - Body | Tex | |
5 - Links | Text, Aria label |
Editorial
Style
Image + Text comes in two modes - Not to be confused with light and dark theme:
Default - to be used on the default brand background
Inverse - To be used on the inverse brand background
Variations
Image left
Image right
Size - controlled by the viewport
Large
Small
Orientation
Vertical
Accessibility
The heading must come first in the DOM.
Analytics & Data
N/A
Future Expansion
N/A
Wider Conversations that may impact this
Asset item, Picto item, Text + Image, Text list - Are there all the same component?
Examples
Useful links
n/a