PATTERN OVERVIEW

A sub hero banner appears on the top of the page directly below the primary navigation. The banner spans the full-width of the page and includes an H1 heading (page title), optional sub heading and or body copy and an optional CTA button. The share bar is typically added at the bottom of the banner.

The pattern is adaptive, serving up an image that is sized and cropped for a mobile device and placing the copy below the image.

Options: This banner can be configured to present a video in an overlay modal that opens over top the banner.

Guidelines

• The left side of the image should allow the heading and copy to appear without impacting the readability. 
• Typically used on interior pages of a site rather than a home page. 
• A desktop and mobile image should be uploaded. This allows the mobile image to be cropped and sized appropriately for the smaller viewport.

AEM component: Use the "Banner - sub hero" and "Share bar" component to build this pattern.

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

Requirements

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

Subheading*: Up to 60 characters (including spaces)

Body copy*: Up to 270 characters (including spaces)

Image size: Best practice is to use the specs listed below. 

• Desktop: 1400 (w) x 330 (h)
• Mobile: 750 (w) x 520 (h)

Image size note: The image (w) and (h) can be doubled using the same width-to-height ratio as noted. Generally, doubling the image size is not necessary and will could double the page load time.

Alt text: Character count (including spaces) should not exceed 100.

Video: Follow the guidelines and specifications for videos.

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

* Not mandatory