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.
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.
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?
You will NOT receive a reply on your feedback. Do NOT include personal information. To get answers to questions, use Alberta Connects.
Your submissions are monitored by our web team and are used to help improve the experience on Alberta.ca.