Overview

When a page requires promotion or is featured, an image may be inserted into the page header as a hero banner for aesthetic appeal. 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.

Design

Hero banner

Here is the lead for the hero banner.

Usage guidelines

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.

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.

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.

Was this page helpful?

All fields are required unless otherwise indicated.

You will not receive a reply. Do not enter any personal information such as telephone numbers, addresses, or emails.

Your submissions are monitored by our web team and are used to help improve the experience on Alberta.ca. If you require a response, please go to our Contact page.