Image Overlap Banner
The Image Overlap Banner component is an overlapping collection of images which animate on page load. It adds great visual interest to a page for our users.
See below for more variants.
When to use
We know that photography creates an emotional connection with our audiences. You should use the Image Overlap Banner component in contexts where you want to create this connection, and have a variety of images to do so, for example on individual brand pages.
This component has two variants: 3 images (recommended) or 2 images (for when images are difficult to source).
How to use
The Image Overlap Banner component is best used after a large heading. The heading should be an impactful statement, and the image banner should support the context. It should be used to create visual impact for our audiences, normally near the top of a page.
Additional considerations
- Recommended image size: 480 x 270 pixels (16:9 ratio). Images with other ratios will automatically fit within the 16:9 size. If you do use an image with a different ratio, remember to set the focal point.
- Use photographs that feel appropriate for the context of the page. Watch the photography tutorial video and refer to Brand Identity & Communication Standard for more details.
Variants
Image Overlap Banner with 3 images (recommended)
Image Overlap Banner with 2 images (when images are difficult to source)
