Hero Banner
Last updated
Last updated
The hero banner is the main banner on the home page. It includes a background, a call to action button or dropdown, as well as up to 4 key highlights (optional) that you can use to highlight pages and sites of importance.
Background photo
The background photo should only contain scenery, people, or a pattern. It should not contain any text as the image will automatically be resized to fit different devices, and text included may end up being cut off or blocked by other components on the page, drastically affecting the user experience on your site.
Furthermore, text in images cannot be read by screen readers used by people with visual impairments, affecting the accessibility of your site.
The hero banner must be the first section in the page. Only 1 hero banner is allowed on the home page.
Configuration options
title: the title that will be displayed in large font in the middle of the banner
subtitle: the subtitle that will be displayed in smaller font in the middle of the banner. Optional
background: the path to the background image in the hero banner. We recommend a resolution of 1920x720 pixels
button: the text in the central call-to-action button in the hero banner. Optional if dropdown menu is present
url: the URL linked to by the call-to-action button. Optional if dropdown menu is present
dropdown: a dropdown menu with sublinks that replaces the call-to-action button. Optional. The options available for the dropdown menu are:
title: the title of the dropdown menu, visible when the menu has not been clicked
options: a list of title and url that form the options under the dropdown menu
key_highlights: a list of up to 4 links placed at the bottom of the hero banner that you can use to highlight pages of importance. Optional. The options available for each key highlight are:
title: the title of the key highlight
description: the subtitle/description of the key highlight. Optional
url: the URL the key highlight links to Optional
Sample configuration that includes a button without key highlights:
Sample configuration that uses a dropdown menu instead of a button, and also includes 3 key highlights:
