Use up and down keys to navigate results once you've typed more than two characters. Use the enter key to select a result. Touch device users, explore by touch or with swipe gestures.
Hero
Overview
A hero banner is a prominent visual element, usually appearing at the top of the page that introduces the page's primary purpose or highlights key content. It often includes a heading, secondary text and sometimes a call to action.
Important information:
This component requires documentation
When to use this component
Use the hero banner component to create immediate impact and communicate the main purpose or action on the page. use on landing pages, main topic pages or key article pages.
When not to use this component
Avoid using hero banners when user need to access content quickly such as on a dashboard page or search results or if the page doesn't have a single clear message or action to highlight.
How to use this component
The Hero Banner uses an H1 styled with the ons-u-fs-2xl utility class. For full heading guidance, see Headings in the Base page template
{% from "components/hero/_macro.njk" import onsHero %}
{{
onsHero({
"title": 'Design and build digital services for the ONS',
"text": 'Everything you need to make accessible, consistent digital products',
"button": {
"url": '#0',
"text": 'Get started'
}
})
}}
Nunjucks macro options
Name
Type
Required
Description
variants
array or string
false
An array of values or single value (string) to adjust the component using available variant, “dark, navy-blue, grey and pale-blue”
wide
boolean
false
Set to “true” when using the wide page layout container
{% from "components/hero/_macro.njk" import onsHero %}
{{
onsHero({
"title": 'Design and build digital services for the ONS',
"text": 'Everything you need to make accessible, consistent digital products',
"button": {
"url": '#0',
"text": 'Get started'
},
"variants": ['dark']
})
}}
Nunjucks macro options
Name
Type
Required
Description
variants
array or string
false
An array of values or single value (string) to adjust the component using available variant, “dark, navy-blue, grey and pale-blue”
wide
boolean
false
Set to “true” when using the wide page layout container
{% from "components/hero/_macro.njk" import onsHero %}
{{
onsHero({
"title": 'Welcome to the ONS Beta',
"text": 'Thank you for participating in our beta test. This limited preview of the ONS website focuses on our
new design and navigation for the retail insutry section. Please be aware that greyed-out links indicate sections still under development.
The active links will take you through the journey to test the new design features.',
"variants": 'navy-blue'
})
}}
Nunjucks macro options
Name
Type
Required
Description
variants
array or string
false
An array of values or single value (string) to adjust the component using available variant, “dark, navy-blue, grey and pale-blue”
wide
boolean
false
Set to “true” when using the wide page layout container
Settings to set the Breadcrumbs component within the HTML <hero> element
censusLogo
boolean
false
Set to “true” display the census 2021 logo (only available for the "grey" hero variant)
informationPanel
Object<InformationPanel>
false
Settings for the information panel (only available for the "grey" hero variant)
Button
Name
Type
Required
Description
text
string
true
Text for the button label
url
string
true
URL for the button
classes
string
false
Classes to add to the button
InformationPanel
Name
Type
Required
Description
panelText
string
false
Text for the panel
panelType
string
false
A single value to the colour of the information panel. Available colours: "ons-red", "ons-orange" or "ons-green"
PanelLink
Object<PanelLink>
false
Settings for the panel link
PanelLink
Name
Type
Required
Description
text
string
false
Text for the panel link
url
string
false
URL for the panel link
HTML
<section class="ons-hero ons-grid--gutterless ons-hero--navy-blue">
<div class="ons-hero__circles" aria-hidden="true">
<div class="ons-hero__circle-1"></div>
<div class="ons-hero__circle-2"></div>
<div class="ons-hero__circle-3"></div>
<div class="ons-hero__circle-4"></div>
<div class="ons-hero__circle-5"></div>
<div class="ons-hero__circle-6"></div>
<div class="ons-hero__circle-7"></div>
<div class="ons-hero__circle-8"></div>
<div class="ons-hero__circle-9"></div>
<div class="ons-hero__circle-10"></div>
<div class="ons-hero__circle-11"></div>
<div class="ons-hero__circle-12"></div>
</div>
<div class="ons-hero__container ons-container">
<div class="ons-hero__details ons-grid__col ons-col-8@m col-10@s@m">
<div class="ons-hero__content">
<div class="ons-hero__title-container">
<header>
<h1 class="ons-hero__title ons-u-fs-3xl">Welcome to the ONS Beta</h1>
</header>
<p class="ons-hero__text">Thank you for participating in our beta test. This limited preview of the ONS
website focuses on our new design and navigation for the retail insutry section. Please be aware that
greyed-out links indicate sections still under development. The active links will take you through the
journey to test the new design features.</p>
</div>
</div>
</div>
</div>
</section>
Pale blue
The pale blue hero component is used on the Topic page on the ONS website
{% from "components/hero/_macro.njk" import onsHero %}
{{
onsHero({
"topic": 'Topic',
"title": 'Retail Industry',
"text": 'Sales by retailers in Great Britain directly to end consumers, including spending on goods (in store and online)
(Retail Sales Index) and spending on services (Index of Services). The industry as a whole is used as an indicator
of how the wider economy is performing and the strength of consumer spending.',
"breadcrumbs": {
"ariaLabel": 'Breadcrumbs',
"itemsList": [
{
"url": '/',
"text": 'Home'
}
]
},
"variants": 'pale-blue'
})
}}
Nunjucks macro options
Name
Type
Required
Description
variants
array or string
false
An array of values or single value (string) to adjust the component using available variant, “dark, navy-blue, grey and pale-blue”
wide
boolean
false
Set to “true” when using the wide page layout container
Settings to set the Breadcrumbs component within the HTML <hero> element
censusLogo
boolean
false
Set to “true” display the census 2021 logo (only available for the "grey" hero variant)
informationPanel
Object<InformationPanel>
false
Settings for the information panel (only available for the "grey" hero variant)
Button
Name
Type
Required
Description
text
string
true
Text for the button label
url
string
true
URL for the button
classes
string
false
Classes to add to the button
InformationPanel
Name
Type
Required
Description
panelText
string
false
Text for the panel
panelType
string
false
A single value to the colour of the information panel. Available colours: "ons-red", "ons-orange" or "ons-green"
PanelLink
Object<PanelLink>
false
Settings for the panel link
PanelLink
Name
Type
Required
Description
text
string
false
Text for the panel link
url
string
false
URL for the panel link
HTML
<section class="ons-hero ons-grid--gutterless ons-hero--pale-blue">
<div class="ons-hero__circles" aria-hidden="true">
<div class="ons-hero__circle-1"></div>
<div class="ons-hero__circle-2"></div>
<div class="ons-hero__circle-3"></div>
</div>
<div class="ons-hero__container ons-container">
<div class="ons-hero__details ons-grid__col ons-col-8@m col-10@s@m">
<nav class="ons-breadcrumbs ons-u-pt-no" aria-label="Breadcrumbs">
<ol class="ons-breadcrumbs__items ons-u-fs-s">
<li class="ons-breadcrumbs__item" id="breadcrumb-1">
<a class="ons-breadcrumbs__link" href="/">Home</a><svg class="ons-icon" viewBox="0 0 8 13"
xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img"
title="ons-icon-chevron">
<path
d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
transform="translate(-5.02 -1.59)" />
</svg>
</li>
</ol>
</nav>
<h2 class="ons-hero--topic">Topic</h2>
<div class="ons-hero__content">
<div class="ons-hero__title-container">
<header>
<h1 class="ons-hero__title ons-u-fs-3xl">Retail Industry</h1>
</header>
<p class="ons-hero__text">Sales by retailers in Great Britain directly to end consumers, including spending on
goods (in store and online) (Retail Sales Index) and spending on services (Index of Services). The industry
as a whole is used as an indicator of how the wider economy is performing and the strength of consumer
spending.</p>
</div>
</div>
</div>
</div>
</section>
Grey
The grey hero component is used on the statistical article on the ONS website. The Census logo & Statistical logo is optional and can be toggled on or off. With the status toggle, the user can select which one they present from 3 different options.