PATTERN OVERVIEW

Feature images from a campaign in a banner to help drive consistency across digital ads and email. The banner copy is flattened into the image. This pattern can be used as the hero banner or added to elsewhere on the page.

Guidelines

• When the image contains the H1 heading, the required H1 heading is manualy added as alt text. H2-H5 headings can also be added if the banner is used lower on the page.
• Three images optimized for desktop, tablet and mobile viewports are uploaded to ensure the text and image are tailored to each device. 
  
• The banner can be configured to link to another page.
• Text that is flattened into the image must meet contrast requirements: 
  • The text should contrast greatly from the background. For large text (18px or larger) maintain a contrast ratio of at least 3:1 and normal text (less than 18px) 4.5:1. 
  • To check contrast use the contrast checker tool: https://webaim.org/resources/contrastchecker.
• Any text in the image must be found elsewhere as HTML text.

AEM component: Use the Image-Responsive Rendition Support component to build this pattern.

specifications

H1 heading/image alt text: Up to 100 characters (including spaces)

Desktop and landscape iPad image: 1500 (w) x 270 (h)* px

Portrait iPad, landscape mobile and portrait mobile image: 960 (w) x 700 (h)* px

Small mobile image: 700 (w) x 510 (h)* px

*The height is flexible and can be increased as needed.

Image size note: The image (w) and (h) can be doubled. However, doubling is not necessary and will just double the page load time.