PATTERN OVERVIEW

This main hero banner appears on the top of the page directly below the primary navigation. This pattern includes a headline, intro copy and an optional CTA button. A single image is used across devices and crops to show only the right 1/3 of the image on mobile.

Options: A semi-transparent gradient blend is applied over-top the image via the AEM component.  

Guidelines

• The contrast between image and copy must be great enough to ensure that the copy will meet contrast requirements.
• A single image must work for both desktop, tablet and mobile.
• The image is used to set the tone and provide personality to a page.

AEM component: Use the "Forum mega hero banner" component to build this pattern and add the semi-transparent gradient blend. 

Note: The font and button styles are built into the component and cannot be alterted within AEM.

Requirements

H1 heading (page title): Up to 88 characters max (including spaces)

Second line: Up to 210 characters max (including spaces)

Image: 1500 (w) x 460* (h) px jpeg (height can be increased)

Type: For headings, use sentence case, no punctuation (unless necessary, such as a question mark). For subheadings and body copy, use sentence case with complete and punctuated sentences. 

Type alignment: Left aligned