Hero
The top of a department home page or a service landing page. A title, a lead, one action, and optionally a photograph beside the text. Never behind it.
When to use
Once, at the top of a home page or a campaign page. Service start pages do not need one; a heading and a start button do more.
Clean water for every community
The agency that builds, inspects and regulates public water supply.
Show HTML
<div class="ag-hero ag-hero--image">
<div class="ag-container ag-hero__inner">
<div>
<h2 class="ag-heading-xl ag-hero__title">Clean water for every community</h2>
<p class="ag-lead ag-hero__lead">The agency that builds, inspects and regulates public water supply.</p>
<div class="ag-button-group ag-hero__actions">
<a class="ag-button ag-button--start" href="#hero-example">Our programmes</a>
</div>
</div>
<figure class="ag-figure ag-hero__media">
<img
class="ag-figure__image"
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 3'%3E%3Crect width='4' height='3' fill='%23c7d6e3'/%3E%3Ccircle cx='2' cy='1.1' r='0.45' fill='%23ffbf47'/%3E%3Cpath d='M0.8 3 C0.8 2 1.3 1.8 2 1.8 C2.7 1.8 3.2 2 3.2 3 Z' fill='%231f4e79'/%3E%3C/svg%3E"
alt=""
width="800"
height="600"
/>
</figure>
</div>
</div>A placeholder drawing stands in for the photograph. The markup is the same.
Variant: primary panel
Renew a passport online
Apply, pay, and collect from the office you choose. Takes about 10 minutes.
Show HTML
<div class="ag-hero ag-hero--primary">
<div class="ag-container ag-hero__inner">
<div>
<h2 class="ag-heading-xl ag-hero__title">Renew a passport online</h2>
<p class="ag-lead ag-hero__lead">Apply, pay, and collect from the office you choose. Takes about 10 minutes.</p>
<div class="ag-button-group ag-hero__actions">
<a class="ag-button ag-button--start" href="#hero-example">Start now</a>
</div>
</div>
</div>
</div>Variant: tall
ag-hero--tall gives a hero with more to say more room: a longer lead, a short list, or a line under the
actions. On a tablet or desktop it is at least 28rem high with the text centred in it. On a phone it keeps its natural
height. It works with every variant, including the panel over a photograph.
Your water account
See your bills, report a fault and manage your connection online. To create an account you need your customer number, which is on every bill.
Moving house? Transfer your connection.
Show HTML
<div class="ag-hero ag-hero--primary ag-hero--tall">
<div class="ag-container ag-hero__inner">
<div>
<h2 class="ag-heading-xl ag-hero__title">Your water account</h2>
<p class="ag-lead ag-hero__lead">
See your bills, report a fault and manage your connection online. To create an account you need your customer
number, which is on every bill.
</p>
<div class="ag-button-group ag-hero__actions">
<a class="ag-button ag-button--start" href="#hero-example">Create an account</a>
<a class="ag-button ag-button--secondary" href="#hero-example">Sign in</a>
</div>
<p class="ag-mb-0">Moving house? <a href="#hero-example">Transfer your connection</a>.</p>
</div>
</div>
</div>Variant: centred
For a campaign or a single-purpose landing page with no image. Title, lead and one action, centred.
Register to vote by 30 November
Ten minutes online, or at any registration centre.
Show HTML
<div class="ag-hero ag-hero--centred">
<div class="ag-container ag-hero__inner">
<div>
<h2 class="ag-heading-xl ag-hero__title">Register to vote by 30 November</h2>
<p class="ag-lead ag-hero__lead">Ten minutes online, or at any registration centre.</p>
<div class="ag-button-group ag-hero__actions">
<a class="ag-button ag-button--start" href="#hero-example">Register now</a>
</div>
</div>
</div>
</div>Variant: image first
The photograph on the reading side and the text after it. Use it when the image is the point, such as a place or a product.
The new Kano treatment works
Clean water for 40,000 households from March.
Show HTML
<div class="ag-hero ag-hero--image ag-hero--image-first">
<div class="ag-container ag-hero__inner">
<div>
<h2 class="ag-heading-xl ag-hero__title">The new Kano treatment works</h2>
<p class="ag-lead ag-hero__lead">Clean water for 40,000 households from March.</p>
<div class="ag-button-group ag-hero__actions">
<a class="ag-button ag-button--start" href="#hero-example">About the works</a>
</div>
</div>
<figure class="ag-figure ag-hero__media">
<img
class="ag-figure__image"
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 3'%3E%3Crect width='4' height='3' fill='%23c7d6e3'/%3E%3Ccircle cx='2' cy='1.1' r='0.45' fill='%23ffbf47'/%3E%3Cpath d='M0.8 3 C0.8 2 1.3 1.8 2 1.8 C2.7 1.8 3.2 2 3.2 3 Z' fill='%231f4e79'/%3E%3C/svg%3E"
alt=""
width="800"
height="600"
/>
</figure>
</div>
</div>With a video beside the text
Put a video where the image goes. It shows a still with a play button and loads only when pressed. Never a video that plays by itself behind the text; see the video page for why.
Clean water for every community
What the agency does, in two minutes.
Play video: What the agency does2 min
Show HTML
<div class="ag-hero ag-hero--image ag-mb-0">
<div class="ag-container ag-hero__inner">
<div>
<h2 class="ag-heading-xl ag-hero__title">Clean water for every community</h2>
<p class="ag-lead ag-hero__lead">What the agency does, in two minutes.</p>
<div class="ag-button-group ag-hero__actions">
<a class="ag-button ag-button--start" href="#hero-video">Our programmes</a>
</div>
</div>
<figure class="ag-video ag-hero__media">
<a
class="ag-video__poster"
href="https://www.youtube.com/watch?v=VIDEO_ID"
data-ag-video="https://www.youtube-nocookie.com/embed/VIDEO_ID"
data-ag-video-title="What the agency does"
>
<img
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Crect width='16' height='9' fill='%23c7d6e3'/%3E%3Crect x='9' y='2' width='5' height='5' fill='%231f4e79'/%3E%3Cpath d='M0 9 L0 6.5 C3 5 5 7 8 5.5 C11 4 13 6.5 16 5.5 L16 9 Z' fill='%23869fb5'/%3E%3C/svg%3E"
alt=""
width="1280"
height="720"
/>
<span class="ag-video__play" aria-hidden="true"></span>
<span class="ag-video__label"
>Play video: What the agency does<span class="ag-video__length">2 min</span></span
>
</a>
</figure>
</div>
</div>Variant: text in a panel over a photograph
The photograph fills the width, and the title, lead and action sit in a solid panel laid over it. The contrast is between the text and the panel, so it passes whatever the photograph is. On a phone the photograph sits above the panel, and the panel rests on the bottom strip of the photograph like a card, so no face is covered and no text is squeezed.
Clean water for every community
The agency that builds, inspects and regulates public water supply.
Show HTML
<div class="ag-hero ag-hero--cover ag-mb-0">
<img
class="ag-hero__cover"
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Crect width='16' height='9' fill='%23c7d6e3'/%3E%3Ccircle cx='12' cy='2.5' r='1' fill='%23ffbf47'/%3E%3Cpath d='M0 9 L0 6.5 C3 5 5 7 8 5.5 C11 4 13 6.5 16 5.5 L16 9 Z' fill='%231f4e79'/%3E%3C/svg%3E"
alt=""
width="1600"
height="900"
/>
<div class="ag-container ag-hero__inner">
<div class="ag-hero__panel">
<h2 class="ag-heading-xl ag-hero__title">Clean water for every community</h2>
<p class="ag-lead ag-hero__lead">The agency that builds, inspects and regulates public water supply.</p>
<div class="ag-button-group ag-hero__actions">
<a class="ag-button ag-button--start" href="#hero-cover">Our programmes</a>
<a class="ag-button ag-button--secondary" href="#hero-cover">Find your district</a>
</div>
</div>
</div>
</div>
ag-hero--cover-light makes the panel the page colour with dark text, for a quieter page. The line at the
panel's edge is the pack's accent colour. ag-hero--cover-end puts the panel on the right, and
ag-hero--cover-top at the top, for a photograph whose subject is elsewhere.
The panel is an ordinary container. A short list of the main points goes in it as a feature list, with the markers in the accent colour.
Panel on the right, with a list
Water quality week
- Free testing at every district office
- 12 to 18 October
- Bring a sample in a clean bottle
Show HTML
<div class="ag-hero ag-hero--cover ag-hero--cover-end ag-mb-0">
<img
class="ag-hero__cover"
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Crect width='16' height='9' fill='%23c7d6e3'/%3E%3Ccircle cx='4' cy='2.5' r='1' fill='%23ffbf47'/%3E%3Cpath d='M0 9 L0 6.5 C3 5 5 7 8 5.5 C11 4 13 6.5 16 5.5 L16 9 Z' fill='%231f4e79'/%3E%3C/svg%3E"
alt=""
width="1600"
height="900"
/>
<div class="ag-container ag-hero__inner">
<div class="ag-hero__panel">
<h2 class="ag-heading-xl ag-hero__title">Water quality week</h2>
<ul class="ag-feature__list">
<li>Free testing at every district office</li>
<li>12 to 18 October</li>
<li>Bring a sample in a clean bottle</li>
</ul>
<div class="ag-button-group ag-hero__actions">
<a class="ag-button ag-button--start" href="#hero-cover-end">Find your office</a>
</div>
</div>
</div>
</div>-
The photograph is decorative: its
altis empty, because everything it is there to say is in the panel. Give itwidthandheight, so the page does not jump while it loads. - No words inside the picture. The title is text in the panel, so it can be read, resized and translated.
- Choose a photograph with its subject on the right or in the middle, since the panel covers the lower left from tablet width up.
- One photograph, compressed, under 150 KB. A 2G connection will be waiting for it.
Inside a band
For a tinted, dark or coloured hero, put the hero inside a band. The band supplies the colour and spacing; the hero keeps its layout. With an image, that is the text on the colour, the actions under it, and the picture beside it: the hero most account and service sign-up pages use.
Primary colour, with an image
Your water account
See your bills, report a fault and manage your connection online.
Moving house? Transfer your connection.
Show HTML
<div class="ag-band ag-band--primary ag-mb-0">
<div class="ag-hero ag-hero--image">
<div class="ag-container ag-hero__inner">
<div>
<h2 class="ag-heading-xl ag-hero__title">Your water account</h2>
<p class="ag-lead ag-hero__lead">See your bills, report a fault and manage your connection online.</p>
<div class="ag-button-group ag-hero__actions">
<a class="ag-button ag-button--start" href="#hero-band">Create an account</a>
<a class="ag-button ag-button--secondary" href="#hero-band">Sign in</a>
</div>
<p class="ag-mb-0">Moving house? <a href="#hero-band">Transfer your connection</a>.</p>
</div>
<figure class="ag-figure ag-hero__media">
<img
class="ag-figure__image"
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 3'%3E%3Crect width='4' height='3' fill='%23c7d6e3'/%3E%3Ccircle cx='2' cy='1.1' r='0.45' fill='%23ffbf47'/%3E%3Cpath d='M0.8 3 C0.8 2 1.3 1.8 2 1.8 C2.7 1.8 3.2 2 3.2 3 Z' fill='%231f4e79'/%3E%3C/svg%3E"
alt=""
width="800"
height="600"
loading="lazy"
/>
</figure>
</div>
</div>
</div>- On the coloured band, the title, the text and any link take the band's text colour. The main action is a solid button in the page colour, and a secondary button is an outline, so the main one still stands out.
- The image sits beside the text and drops below it on a phone. It is never under the text.
-
The same markup in
ag-band--tint,ag-band--darkorag-band--accentgives the other colours.
Under a coloured header
With the primary header, do not use the primary hero or a primary band directly beneath it. The two join into one block of colour and the navigation loses its edge. Use the plain hero, or a hero in a tinted band, and let the flag stripe mark where the header ends.
Rules
- Text is never placed directly on a photograph. The image sits beside the text, or the text sits in a solid panel over it. On phones the two always stack.
- The hero image is the one image you do not lazy-load, and the one you keep smallest: under 150 KB, 800px wide is enough.
- One action. A second link at most. A hero with four buttons is a navigation, and the header already has one.
- Room around the text. Every hero has 3rem above and below its text from tablet width, and 2rem on a phone. The lead is a step smaller than a lead elsewhere, so it reads as text under the title. When there is more to say, use the tall variant rather than squeezing it in.
- The title is the page's h1 on a real page. The examples here use h2 because this page already has an h1.
- Not the place for the head of the organisation's portrait. That goes with their message, in the statement.