Image Full Width

Demo

Overview

Add visual variety to content 

The Image Full Width component presents media as a banner. You can use it to display:

• Images  
• Charts 
• Graphs  
• Infographics  

The Image Full Width works best as a change of pace. So you need to use a few other components first, like Body Text and Editorial Block with Sidebar.

How to use it

Step 1: Choose a suitable image

The Image Full Width displays images as an elongated rectangle. This means that the top and bottom of the image is often cropped out of frame. So make sure that your image still makes sense when elements are missing.

Take particular care when using images of people, as features are likely to be cropped out. Make sure that any people in the image are shown from the waist up and occupy the middle of the frame. Don’t use headshots.

It’s important to use a large, high-quality image. Otherwise, the image will stretch and distort to fit into the shape. To accommodate large screens, use images  that are 1600 - 2000 pixels wide. 

Step 2: Upload the image

Choose ‘select image’. You can choose an existing image or upload a new one. 

To upload a new image, select ‘import image', then ‘select file’.

Add a title and alternative text, then choose ‘select image’.

For more information about uploading images to the CMS, see the ‘Image Guidelines’ advice.

Recommended image specifications

For more information on how to use images in the CMS go to the Image Basics page.