Overview
When content requires promotion, an image may be inserted into the page header as a Hero Banner for aesthetic appeal. Its location at top of the page gives it unique prominence and sets the tone for the page.
Design
Hero banner
Here is the lead for the hero banner.
Usage guidelines
Accessibility
The hero banner has a gradient overlay with white text that is vertically aligned to the bottom. This gradient is critical to meeting the required accessibility guidelines set by the Web Content Accessibility Guidelines (WCAG AA 2.0). Large-scale text and images have a contrast ratio of at least 3:1.
Size and positioning
The Hero Banner area is a section of the page that exists between the navigation elements in the header and the start of our content.
Since there are already text constraints, on all 3 screen types, the maximum container height is 600 pixels. On desktop, the maximum container width is 1920 pixels, 768 pixels on tablet, and 320 pixels on mobile.
Container requirements
The Hero Banner crops a high-resolution image with a responsive container. The container is adjusted based on screen size and the content it contains, which means the image should be large enough to accommodate the height and width constraints.
Image requirements
See Images for hero banner image specifications.
Content guidelines
Image selection
Images must put the subject matter or desired focal point in the center. All images are approved for publishing by the Visual Identity Team.
Container text
At minimum, a header is required. There may be optional body text. A hero banner with a call-to-action link may only be used on the home page.
Include header text that is appropriate to the image and page subject.