Hero
Overview
A large promotional section, usually at the very top of the page, featuring a headline and a call to action.
Important information:
This component requires documentation
Default
Example Hero Default contents
Nunjucks
{% 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 |
| title | string | true | Text for the hero title |
| subtitle | string | false | Text for the hero subtitle |
| text | string | false | Text to follow the hero title and subtitle |
| button | Object<Button> | false | Settings for the hero call to action button |
| html | string | false | Allows arbitrary HTML for additional content to be added to the component |
| detailsColumns | integer | false | Number of grid columns for the hero to span on screens larger than the medium breakpoint, defaults to 8 |
| descriptionList | DescriptionList (ref) | false | Settings to set the DescriptionList component within the HTML <hero> element |
| officialStatisticsBadge | boolean | false | Set to “true” display the official statistics badge (only available for the "grey" hero variant) |
| officialStatisticsBadgeUrl | string | false | URL for the Statistics Badge |
| topic | string | false | Topic for the hero |
| breadcrumbs | Breadcrumbs (ref) | false | 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) |
| 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 |
| 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 |
| 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--">
<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">Design and build digital services for the ONS</h1>
</header>
<p class="ons-hero__text">Everything you need to make accessible, consistent digital products</p>
</div>
</div>
<a href="#0" role="button" class="ons-btn ons-u-mt-s ons-btn--link ons-js-submit-btn">
<span class="ons-btn__inner"><span class="ons-btn__text">Get started</span><svg class="ons-icon ons-u-ml-2xs"
viewBox="0 0 17 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img"
title="ons-icon-arrow-next">
<path
d="m10 .2-.9.9c-.1.1-.1.4 0 .5l4 4H.6c-.2 0-.4.2-.4.4v1.2c0 .2.2.4.4.4h12.5l-3.9 3.7c-.2.2-.2.4 0 .6l.8.9c.2.2.4.2.6 0L16.8 7c.2-.2.2-.4 0-.6L10.7.3c-.3-.2-.5-.2-.7-.1z" />
</svg></span>
</a>
</div>
</div>
</section>Dark
Example Hero Dark contents
Nunjucks
{% 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 |
| title | string | true | Text for the hero title |
| subtitle | string | false | Text for the hero subtitle |
| text | string | false | Text to follow the hero title and subtitle |
| button | Object<Button> | false | Settings for the hero call to action button |
| html | string | false | Allows arbitrary HTML for additional content to be added to the component |
| detailsColumns | integer | false | Number of grid columns for the hero to span on screens larger than the medium breakpoint, defaults to 8 |
| descriptionList | DescriptionList (ref) | false | Settings to set the DescriptionList component within the HTML <hero> element |
| officialStatisticsBadge | boolean | false | Set to “true” display the official statistics badge (only available for the "grey" hero variant) |
| officialStatisticsBadgeUrl | string | false | URL for the Statistics Badge |
| topic | string | false | Topic for the hero |
| breadcrumbs | Breadcrumbs (ref) | false | 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) |
| 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 |
| 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 |
| 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--dark">
<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">Design and build digital services for the ONS</h1>
</header>
<p class="ons-hero__text">Everything you need to make accessible, consistent digital products</p>
</div>
</div>
<a href="#0" role="button" class="ons-btn ons-u-mt-s ons-btn--ghost ons-btn--link ons-js-submit-btn">
<span class="ons-btn__inner"><span class="ons-btn__text">Get started</span><svg class="ons-icon ons-u-ml-2xs"
viewBox="0 0 17 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img"
title="ons-icon-arrow-next">
<path
d="m10 .2-.9.9c-.1.1-.1.4 0 .5l4 4H.6c-.2 0-.4.2-.4.4v1.2c0 .2.2.4.4.4h12.5l-3.9 3.7c-.2.2-.2.4 0 .6l.8.9c.2.2.4.2.6 0L16.8 7c.2-.2.2-.4 0-.6L10.7.3c-.3-.2-.5-.2-.7-.1z" />
</svg></span>
</a>
</div>
</div>
</section>Help improve this page
Let us know how we could improve this page, or share your user research findings. Discuss the ‘Hero’ component on GitHub (opens in a new tab)