The Image + Text component is a side-by-side layout component consisting of an image and text area
Usage
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 description copy
Don’t link the image
Anatomy
Item | Component | Content type | Notes |
|---|---|---|---|
1 - Image | Image | JPG, PNG | MANDATORY |
2 - Overline | Text | Not yet released | |
3 - Heading | Text | MANDATORY | |
4 - Description | Text | OPTIONAL | |
5 - Links | n/a | OPTIONAL |
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
Horizontal on larger screens, stacked on smaller screens
Accessibility
The heading must come first in the DOM.