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

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.