Hero banner

On this page

Guidelines for using a hero banner

Do

Should be placed at the top of full-width pages like landing pages.
Should always be included in an edge to edge layout.
Add an image to the banner only if it supports the page content.
- A hero banner image is mandatory for top-level landing pages, that is, those that sit directly under the homepage.
- An image is optional for lower-level landing pages.
A custom logo can be used in the hero banner for special campaigns. For example, COVID-19 campaign landing pages used the “Help us save lives” logo.
- Note: logos in hero banners are not standard and require brand exemption. Before using a logo in the banner you must discuss your requirements with the Brand Team.
The page title (maximum 50 characters) and summary (maximum 170 characters) should be easy to understand and provide a concise summary of the content for the audience and search engines.
Keep the message short and concise, and avoid using too much text that can be overwhelming and difficult to read.
The hero banner height is decreased when an image is not added.
- There is also more room for the title and summary when an image is not added.
For landing pages, navigational pages and campaign pages, the hero banner colour should default to brand dark blue.

Don't

Don't overload the hero banner with too much information, including text, links, buttons, or other actions. Your audience may abandon the content if they are overwhelmed.
Don't use the brand supplementary background colour – unless it is for an approved non-corporate campaign. To get approval to use alternative colours contact the Help Hub.

Importance of the page title and summary for SEO

The page title (also known as the meta title) and summary (also known as the meta description) are important page elements for SEO (Search Engine Optimisation).

Page title (meta title)

The page title is the text that appears in the browser tab and is also used as the main link text in search engine results pages (SERPs).
It is the first thing the audience see when they come across your web page in search results.
It is important to make sure that the page title accurately describes the content of the page and includes relevant keywords to help search engines understand what the page is about.

Summary (meta description)

The meta description is a brief summary of the content on the web page that appears below the page title in search results.
It can influence click-through rates (CTR) from search results to your web page.
A well-crafted meta description can entice users to click through to your page by providing a concise summary of the content, include relevant keywords, and highlighting the benefits of visiting your page.

How to add a hero banner

1. Go to Pre-published draft > Layout

2. Click on the edge to edge Add block on the page inside Section.

3. Select + Create Custom block > Hero banner

4. Add a Heading (mandatory) – maximum 50 characters. The heading of your hero banner should match the page title of your landing page. If you're unsure of where to find the page title see Mandatory page set up fields > Content tab in the Landing page template guide.

5. Add a Summary (mandatory) – maximum 170 characters. This is a plain text field. The summary of your hero banner should match the page summary of your landing page. If you're unsure of where to find the page summary see Mandatory page set up fields > Content tab in the Landing page template guide.

6. HTML field (optional) – this field is provided for limited use cases such as 3 or less feature links.

7. Countdown clock (optional) – add the date and time of your event and a countdown clock will appear to show users the amount of time left until the event.

8. Logo (optional) – select a logo from the media library. Used for branded campaigns / promotions or acknowledgements. The logo should only be used on Hero banners with an image to prevent the logo overlapping text elements such as Feature links. The logo overlays on the header image in the bottom right corner.

Note – logos in hero banners are not standard and require brand exemption. Before using a logo in the banner you must discuss your requirements with the Brand Team.

9. Image (optional) – select an image from media library. An image should only be included if it supports the page content.

10. Call to action (optional) – used if the page has one primary call to action the audience need to take. Displays as a primary button. Add a link and Link text (button label).

11. Feature links heading (mandatory if using feature links).

12. Feature links (optional) – this should only be used if you need to include more than 3 links in the banner. Limit of 6 links.

13. List position – if using Feature links, select if you want the links to display in the left column (Two column left) or in the middle of the banner (Three column centre).

If you are not using Feature links, the default list position is Two column left.

14. Banner style – choose the banner background colour. For landing pages, navigational pages and campaign pages, the hero banner colour should default to brand dark blue.

15. Add block.

16. Check the new Hero banner against the original Standard system header and if correct, hover over the original, select the pencil to Remove block > Remove.

17. Save layout to make sure the banner is correct and your changes are saved. You can then view the page with the Hero banner applied.

Examples of hero banner displays

Example #1

Heading, summary, image, two column left, brand dark.

Example #2

Heading, summary, Call to action, no image, two column left, brand dark.

Example #3

Heading, summary, 2 links, logo, image, two column left, brand dark.

Note – logos in hero banners are not standard and require brand exemption. Before using a logo in the banner you must discuss your requirements with the Brand Team.