Main hero banner
PATTERN OVERVIEW
Use this pattern for the main hero banner that appears on the top of the page directly below the primary navigation. The banner spans the full-width of the page and includes a stylized H1 heading (page title) that is broken on-to two lines and an optional CTA button.
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 also present an video in a overlay modal that opens over top the hero banner.
Guidelines
- Typically used on the home page or a landing page.
- An image for desktop and mobile are required.
AEM component: Use the "Banner - main hero" 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): Heading is split on-to two lines.
- First line: Up to 48 characters max (including spaces)
- Second line: Up to 34 characters (including spaces)
Image size: Two images are prepared:
- Desktop: 1400 (w) x 460 (h) px jpeg
- Mobile: 750 (w) x TBD (h) px jpeg
Video: Follow the guidelines and specifications for videos.
Type: Top line appears in all-caps but is entered into AEM using sentence case, no punctuation (unless necessary, such as a question mark).
Type alignment: Left aligned