Masthead
Introduce users to a major section or topic area, product or service
Contents
<div class="x-govuk-masthead">
<div class="govuk-width-container">
<nav class="govuk-breadcrumbs" aria-label="Breadcrumb">
<ol class="govuk-breadcrumbs__list">
<li class="govuk-breadcrumbs__list-item">
<a class="govuk-breadcrumbs__link" href="#">Home</a>
</li>
<li class="govuk-breadcrumbs__list-item">
<a class="govuk-breadcrumbs__link" href="#">Education and learning</a>
</li>
</ol>
</nav>
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds-from-desktop">
<h1 class="x-govuk-masthead__title">
Apprenticeships, 14 to 19 education and training for work
</h1>
<p class="x-govuk-masthead__description">
Includes finding a course, finding an apprenticeship, information for employers
</p>
</div>
</div>
</div>
</div>
{{ xGovukMasthead({
breadcrumbs: {
items: [{
href: "#",
text: "Home"
}, {
href: "#",
text: "Education and learning"
}]
},
title: {
text: "Apprenticeships, 14 to 19 education and training for work"
},
description: {
text: "Includes finding a course, finding an apprenticeship, information for employers"
}
}) }}
When to use this component
Use the masthead to
- introduce a major section or topic area
- give greater emphasis to page headings
- guide users into specific areas of functionality
- create visual hierarchy for key landing pages within your service
For example, use it on topic overview pages, category or collection pages, or to introduce a key workflow in your service.
When not to use this component
Do not use the masthead:
- on every page of your service – reserve it for key landing pages and section introductions
- as a replacement for standard page headings
- when a simple page title would be more appropriate
- on transactional pages where users are completing tasks
How it works
The masthead uses a lighter tint of your service’s brand colour for its background. It works well for internal pages and section introductions, giving clear hierarchy without overwhelming the page content. It can include:
- a phase banner
- breadcrumbs
- a title
- a short description
- a call to action button
- a representative illustration
The masthead should appear directly below the header and take up the full width of the page.
You can use HTML or, if you are using Nunjucks or the GOV.UK Prototype Kit, you can use the Nunjucks macro.
Masthead with a dark background
If you need greater visual impact and brand presence, use the masthead with a dark background.
Contents
<div class="x-govuk-masthead x-govuk-masthead--inverse">
<div class="govuk-width-container">
<div class="govuk-phase-banner">
<p class="govuk-phase-banner__content">
<strong class="govuk-tag govuk-phase-banner__content__tag">
Beta
</strong>
<span class="govuk-phase-banner__text">
This is a new service – your <a href='#'>feedback (opens in a new tab)</a> will help us to improve it.
</span>
</p>
</div>
<nav class="govuk-breadcrumbs govuk-breadcrumbs--inverse" aria-label="Breadcrumb">
<ol class="govuk-breadcrumbs__list">
<li class="govuk-breadcrumbs__list-item">
<a class="govuk-breadcrumbs__link" href="#">GOV.UK Services</a>
</li>
<li class="govuk-breadcrumbs__list-item" aria-current="page">GOV.UK Pay</li>
</ol>
</nav>
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds-from-desktop">
<h1 class="x-govuk-masthead__title">
The best way to take payments for public services
</h1>
<p class="x-govuk-masthead__description">
GOV.UK Pay has contracts with payment providers so you can take payments quickly and easily. It’s used across central and local government, police and the NHS.
</p>
<a href="#" role="button" draggable="false" class="govuk-button govuk-button--inverse govuk-button--start" data-module="govuk-button">
Find out if you can use GOV.UK Pay
<svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" aria-hidden="true" focusable="false">
<path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z" />
</svg>
</a>
</div>
<div class="govuk-grid-column-one-third-from-desktop">
<div class="x-govuk-masthead__image">
<img src="/assets/example-homepage-illustration.png" alt="Payment screen on mobile and dashboard with refund function.">
</div>
</div>
</div>
</div>
</div>
{{ xGovukMasthead({
inverse: true,
phaseBanner: {
tag: {
text: "Beta"
},
html: "This is a new service – your <a href='#'>feedback (opens in a new tab)</a> will help us to improve it."
},
breadcrumbs: {
items: [{
href: "#",
text: "GOV.UK Services"
}, {
text: "GOV.UK Pay"
}]
},
title: {
text: "The best way to take payments for public services"
},
description: {
text: "GOV.UK Pay has contracts with payment providers so you can take payments quickly and easily. It’s used across central and local government, police and the NHS."
},
startButton: {
text: "Find out if you can use GOV.UK Pay",
href: "#"
},
image: {
src: "/assets/example-homepage-illustration.png",
alt: "Payment screen on mobile and dashboard with refund function."
}
}) }}
Use a masthead with a dark background to:
- introduce users to your service for the first time
- highlight your service’s core value proposition
- create visual impact for your product homepage
You can optionally provide a link to the primary call to action such as signing up or reading the instructions on how to get started.
Make sure all users can see content in the masthead – the background colour must have a contrast ratio of at least 4.5:1 with white to meet WCAG 2.2 success criterion 1.4.3 Contrast (minimum), level AA.
Showing white links and buttons
To configure the component to use a dark background with white text and links:
- add a
x-govuk-masthead--inversemodifier class to the outer<div>element of the component HTML - add the
govuk-breadcrumbs--inversemodifier class to the breadcrumb (if you are using one inside the component) - add the
govuk-button--inversemodifier class to the start button (if you are using one inside the component)
Or if you’re using Nunjucks, add inverse: true to the Nunjucks macro.
Using alongside the service navigation component
If your service uses the service navigation component, place it directly above the masthead and add the govuk-service-navigation--inverse modifier class. This creates a unified header area with the service navigation and masthead appearing as one section.
Hiding the image on mobile devices
If you have an image that is decorative and may not add value on smaller screens, you can configure the component to hide it on mobile devices.
To do this, add the x-govuk-masthead__image--hide-on-mobile modifier class to the outer <div> element that surrounds the image. Or if you’re using Nunjucks, add hideOnMobile: true to the Nunjucks macro as shown in this example.
Contents
<div class="x-govuk-masthead x-govuk-masthead--inverse">
<div class="govuk-width-container">
<div class="govuk-phase-banner">
<p class="govuk-phase-banner__content">
<strong class="govuk-tag govuk-phase-banner__content__tag">
Beta
</strong>
<span class="govuk-phase-banner__text">
This is a new service – your <a href='#'>feedback (opens in a new tab)</a> will help us to improve it.
</span>
</p>
</div>
<nav class="govuk-breadcrumbs govuk-breadcrumbs--inverse" aria-label="Breadcrumb">
<ol class="govuk-breadcrumbs__list">
<li class="govuk-breadcrumbs__list-item">
<a class="govuk-breadcrumbs__link" href="#">GOV.UK Services</a>
</li>
<li class="govuk-breadcrumbs__list-item" aria-current="page">GOV.UK Pay</li>
</ol>
</nav>
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds-from-desktop">
<h1 class="x-govuk-masthead__title">
The best way to take payments for public services
</h1>
<p class="x-govuk-masthead__description">
GOV.UK Pay has contracts with payment providers so you can take payments quickly and easily. It’s used across central and local government, police and the NHS.
</p>
<a href="#" role="button" draggable="false" class="govuk-button govuk-button--inverse govuk-button--start" data-module="govuk-button">
Find out if you can use GOV.UK Pay
<svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" aria-hidden="true" focusable="false">
<path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z" />
</svg>
</a>
</div>
<div class="govuk-grid-column-one-third-from-desktop">
<div class="x-govuk-masthead__image x-govuk-masthead__image--hide-on-mobile">
<img src="/assets/example-homepage-illustration.png" alt="" role="presentation">
</div>
</div>
</div>
</div>
</div>
{{ xGovukMasthead({
inverse: true,
phaseBanner: {
tag: {
text: "Beta"
},
html: "This is a new service – your <a href='#'>feedback (opens in a new tab)</a> will help us to improve it."
},
breadcrumbs: {
items: [{
href: "#",
text: "GOV.UK Services"
}, {
text: "GOV.UK Pay"
}]
},
title: {
text: "The best way to take payments for public services"
},
description: {
text: "GOV.UK Pay has contracts with payment providers so you can take payments quickly and easily. It’s used across central and local government, police and the NHS."
},
startButton: {
text: "Find out if you can use GOV.UK Pay",
href: "#"
},
image: {
src: "/assets/example-homepage-illustration.png",
hideOnMobile: true
}
}) }}
Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as “Required” in the option description.
If you’re using Nunjucks macros in production with html options, or ones ending with html, you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Description |
|---|---|---|
| inverse | boolean | Use the masthead with a dark background. Defaults to |
| title | object | Title text shown in the masthead. See title. |
| description | object | Short description text shown below the title. See description. |
| startButton | object | Options for start button. See startButton. |
| image | object | Options for image displayed on the right of the masthead on desktop layouts. See image. |
| phaseBanner | object | Options for the phase banner component. See phase banner component in the GOV.UK Design System. |
| breadcrumbs | object | Options for the breadcrumbs component. See breadcrumbs component in the GOV.UK Design System. |
| caller | nunjucks-block | Not strictly a parameter but Nunjucks code convention. Using a |
| classes | string | Classes to add to the masthead container. |
| attributes | object | HTML attributes (for example data attributes) to add to the navigation container. |
| Name | Type | Description |
|---|---|---|
| text | string | The title text that displays in the masthead. You can use any string with this option. If you set |
| html | string | The title HTML that displays in the masthead. You can use any string with this option. Use this option to set text that contains HTML. If you set |
| Name | Type | Description |
|---|---|---|
| text | string | The description text that displays in the masthead. You can use any string with this option. If you set |
| html | string | The description HTML that displays in the masthead. You can use any string with this option. Use this option to set text that contains HTML. If you set |
| Name | Type | Description |
|---|---|---|
| text | string | Required. If |
| html | string | Required. If |
| name | string | Name for the |
| type | string | Type of |
| href | string | The URL that the button should link to. If this is set, element will be automatically set to |
| classes | string | Classes to add to the button component. |
| attributes | object | HTML attributes (for example data attributes) to add to the button component. |
| Name | Type | Description |
|---|---|---|
| src | string | Required. URL for the masthead image. |
| alt | string | Alternative text for masthead image. |
| hideOnMobile | boolean | When true, the image is hidden on tablet breakpoint and below. |
Research on this component
This component is based on the Masthead component used in the Product Page Example. This in turn was based on the product pages for:
Versions of this component are currently being used on these services:
- Ethnicity facts and figures
- Find a Learning Aim
- Find planning and housing data in England
- Gender pay gap service
- HMRC Developer Hub
- Register trainee teachers
Known issues
It’s currently not possible to place this component within the main element when using the default Nunjucks template. If you are able to update your application’s layout, you should adjust it so that the main element encapsulates this component.