Cookies on ons.gov.uk

Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.

We would like to set additional cookies to remember your settings and understand how you use the site. This helps us to improve our services.

View cookies

You have accepted all additional cookies. You have rejected all additional cookies. You can change your cookie preferences at any time.

Skip to main content

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

Open this example in a new tab (Example Hero 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

NameTypeRequiredDescription
variantsarray or stringfalseAn array of values or single value (string) to adjust the component using available variant, “dark”
widebooleanfalseSet to “true” when using the wide page layout container
titlestringtrueText for the hero title
subtitlestringfalseText for the hero subtitle
textstringfalseText to follow the hero title and subtitle
buttonObject<Button>falseSettings for the hero call to action button
htmlstringfalseAllows arbitrary HTML for additional content to be added to the component
detailsColumnsintegerfalseNumber of grid columns for the hero to span on screens larger than the medium breakpoint, defaults to 8
Button
NameTypeRequiredDescription
textstringtrueText for the button label
urlstringtrueURL for the button
classesstringfalseClasses to add to the button

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 ons-col-10@s@m">
      <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>
      <a href="#0" role="button" class="ons-btn 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

Open this example in a new tab (Example Hero 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

NameTypeRequiredDescription
variantsarray or stringfalseAn array of values or single value (string) to adjust the component using available variant, “dark”
widebooleanfalseSet to “true” when using the wide page layout container
titlestringtrueText for the hero title
subtitlestringfalseText for the hero subtitle
textstringfalseText to follow the hero title and subtitle
buttonObject<Button>falseSettings for the hero call to action button
htmlstringfalseAllows arbitrary HTML for additional content to be added to the component
detailsColumnsintegerfalseNumber of grid columns for the hero to span on screens larger than the medium breakpoint, defaults to 8
Button
NameTypeRequiredDescription
textstringtrueText for the button label
urlstringtrueURL for the button
classesstringfalseClasses to add to the button

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 ons-col-10@s@m">
      <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>
      <a href="#0" role="button" class="ons-btn  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) 

Back to top