The full width text + image module presents longer texts together with visual content like images or illustrations. This module is used for a more in-depth reading experience, e.g. article, case study and white paper content. The module can be used after one another or in between other modules.
The same component can be used with a video component instead of the image - please see the video module.
Desktop
Mobile
Layout options
The Full width Text + Image module consists of the following elements:
- Headline*
- Body text*
- Bulleted List (Optional - part of paragraph element)
- Single image (optional)
- Image gallery (optional)
* required element
Headline
Character limit: 53
Do not exceed two lines of text on 360px screens
Body text
Character limit: None
Best practice is to keep the text to a maximum of 12 lines of text on 360px screens.
When using a bulleted list it is recommended to use no more than 5 bullets in a row and to avoid using too much text, as this will compromise the users ability to scan the list effectively.
The text is always left justified.
For more copywriting guidelines, please refer to the Writing rules.
Image
Image is optional, when an image is used there are multiple layouts to choose from; single image or image gallery, which can be placed either at the top of the module or the bottom of the module. It can also be used for video content.
The aspect ratio is 16:9 for all images (including the video preview image) on all screen sizes.
Image position
Image(s) can be used on the top or the bottom depending on content. This logic work the same on desktop and mobile.
Image top (left) and Image bottom (right)
Colorways
This module can't have a background color since it's mainly used in article pages.
Likewise headline and paragraph text colors cannot be changed.
Use this module for a more in-depth reading experience such as for articles, case studies and white papers. Use the optional bullet list for summaries or highlights.
Images can be used to capture attention, to illustrate reasoning and to visualise processes or results.
Examples of use
DO: Stack images if there are more than 8 on desktop and tablet views.
DON’T: Use other image layout or position, then what is recommended.
DON’T: Use canter-aligned paragraphs, only use left-alignment