Hero banner
The hero banner allows you to add a brief introduction to a landing page.
When to use a hero banner
Only use hero banners on the most significant pages on a website. Do not use them on every page or where a simple heading is enough.
When not to use a hero banner
You must not use hero banners with the product header or a product banner.
How hero banners work
The hero banner is made up of several fields.
You must include the title and summary text as a minimum. The subtitle and more information link are optional.
Title
The title field is for the name of the page.
Subtitle
The subtitle field gives you the option to add a secondary explanatory title.
Summary text
Use the summary text field to give a brief description of the page.
It should be concise and summarise what your page is about. It should help users quickly decide if it is relevant to their query. Aim for two or three sentences in length.
More information link
The more information link lets you signpost users to more information on the topic.
Heading hierarchy
You must set the hero banner title to h1. If you use the subtitle field this must be set to h2.
Any headings in the main page content should then follow the relevant hierarchy and either be a h2 or a h3.
Types of hero banner
There are two types of hero banner:
- General
- House specific
The HTML for both variants is the same. The styling change comes from the branding option that is set for the page.
General
<div class="hero-banner">
<div class="container">
<h1>Page title</h1>
<h2>Subtitle</h2>
<div class="reading-width">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
<a href="#">Find out more about this item</a>
</p>
</div>
</div>
</div>House of Commons
<div class="brand-commons">
<div class="hero-banner hero-banner-brand">
<div class="container">
<h1>Page title</h1>
<h2>Subtitle</h2>
<div class="reading-width">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
<a href="#">Find out more about this item</a>
</p>
</div>
</div>
</div>
</div>House of Lords
<div class="brand-lords">
<div class="hero-banner hero-banner-brand">
<div class="container">
<h1>Page title</h1>
<h2>Subtitle</h2>
<div class="reading-width">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
<a href="#">Find out more about this item</a>
</p>
</div>
</div>
</div>
</div>Bicameral or joint committee
<div class="brand-bicameral">
<div class="hero-banner hero-banner-brand">
<div class="container">
<h1>Page title</h1>
<h2>Subtitle</h2>
<div class="reading-width">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
<a href="#">Find out more about this item</a>
</p>
</div>
</div>
</div>
</div>Extending the hero banner
The hero banner is flexible and there are various website specific versions. For example, the Members website uses a Member hero banner.
You can also use the grid flexibly to lay out content.
Have a question, suggestion or feedback?
The Improving User Experience cluster manages the design system.
If you work in Parliament, contact us on the #design-system Slack channel.