| Page Properties | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Component Description
Use When
X
X
Don’t Use When
...
X
...
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 |
| ||||||
2 - Overline | Typography |
| ||||||
3 - Heading | Typography |
| ||||||
4 - Body | Typography |
| ||||||
5 - Links | CTA Block |
|
See Figma for full list of variants.
Related/Similar Components
Asset Item
X Picto itemX
Text list
Key Content
...
X
...
Item |
|---|
Content type | Notes |
|---|
1 - Image |
*Notes
Visual Style
X
Anatomy
...
Item
...
Type
...
Notes
...
1.
...
2.
Behaviour
Progressive enhancement:
Non JS
JS
Editorial
X
X
X
Accessibility
...
Key
...
Interaction
Aria considerations
etc
Analytics & Data
X
X
Future Expansion
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
Item: Description
Item: Description
Inspiration from elsewhere
X
X
Examples
Insert here
...
Asset item, Picto item, Text + Image, Text list - Are there all the same component?
...
Examples
Useful links
n/a