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.
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.
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.
See Images for hero banner image specifications.
Images must put the subject matter or desired focal point in the center. All images are approved for publishing by the Visual Identity Team.
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?
Your submissions are monitored by our web team and are used to help improve the experience on Alberta.ca.