Text + Image Overlap

See below for more variants.

When to use

Use this component to create an engaging photography-rich experience for our audiences, without adding too many images to a page or distracting from the text content.

How to use

Main considerations when using this component

Selecting images

• Following our photographic style, you should aim for imagery that helps to tell the story of the accompanying text.
• Aim for variety in the types of photography. For example: Lifestyle with people + Product closeup + Raw material.
• Avoid similar style images. For example, avoid: Lifestyle with people + Lifestyle with people + Lifestyle with people.

Writing content

• When thinking of content for this section, we should aim for the text length recommendations below. If there is more text than this, consider adding an additional Text + Image Overlap component to the page and splitting the text.

Variants

• This component has multiple variants to allow flexible use cases:
  • Number of images: 2 or 3
  • Image position: Left or Right
  • Optional CTA field

Page layout

• When applying multiple Text + Image Overlap components in succession, consider alternating the image position between Left and Right.

Additional considerations

• Recommended optional heading length: 20 - 50 characters (max. 80)
• Recommended body length (2-image variant): 300 - 600 characters (max. 750)
• Recommended body length (3-image variant): 600 - 900 characters (max. 1000)
• Recommended image sizes for 2 image variant:
  • Image 1: 480 x 270 pixels (16:9 ratio)
  • Image 2: 480 x 270 pixels (16:9 ratio)
• Recommended image sizes for 3 image variant:
  • Image 1: 512 x 512 pixels (1:1 ratio)
  • Image 2: 480 x 270 pixels (16:9 ratio)
  • Image 3: 250 x 250 pixels (1:1 ratio)

Variants