Content presentation - Hero

A large promotional section, usually at the very top of the page, featuring a headline and a call to action.

With Heading and Text

Open this default hero example in new window
Copy default hero code 
<section class="hs2-hero">

  <div class="hs2-width-container hs2-hero--border">
    <div class="hs2-grid-row">
      <div class="hs2-grid-column-two-thirds">
        <div class="hs2-hero__wrapper">
          <h1 class="hs2-u-margin-bottom-3">HS2 Project Update</h1>
          <p class="hs2-body-l hs2-u-margin-bottom-0">30,000 jobs supported. 2,500 British businesses delivering services. Over 1,100 apprentices.</p>

        </div>
      </div>
    </div>
  </div>

</section>
Close default hero code
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.

Nunjucks arguments for default hero
Name Type Required Description
Name heading Type string Required false Description Text heading of the hero component.
Name text Type string Required false Description Text content of the hero component
Name imageURL Type string Required false Description URL of the image of the hero component.
Name classes Type string Required false Description Optional additional classes to add to the hero container. Separate each class with a space.
Name attributes Type object Required false Description Any extra HTML attributes (for example data attributes) to add to the hero container.
Copy default hero code 
{% from 'hero/macro.njk' import hero %}

{{ hero({
"heading": "HS2 Project Update",
"text": "30,000 jobs supported. 2,500 British businesses delivering services. Over 1,100 apprentices."
}) }}
Close default hero code

With Heading, Text and Image

Open this with image hero example in new window
Copy with image hero code 
<section class="hs2-hero hs2-hero--image hs2-hero--image-description" style="background-image: url('https://assets.hs2.org.uk/wp-content/uploads/2023/02/HS2-launches-its-biggest-ever-apprenticeship-recruitment-drive-2800x1262.jpg');">
  <div class="hs2-hero__overlay">
    <div class="hs2-width-container">
      <div class="hs2-grid-row">
        <div class="hs2-grid-column-two-thirds">
          <div class="hs2-hero-content">
            <h1 class="hs2-u-margin-bottom-3">Career opportunities</h1>
            <p class="hs2-body-l hs2-u-margin-bottom-0">Hundreds of job opportunities at HS2 and our supply chain.</p>
            <span class="hs2-hero__arrow" aria-hidden="true"></span>

          </div>
        </div>
      </div>
    </div>
  </div>
</section>
Close with image hero code
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.

Nunjucks arguments for with image hero
Name Type Required Description
Name heading Type string Required false Description Text heading of the hero component.
Name text Type string Required false Description Text content of the hero component
Name imageURL Type string Required false Description URL of the image of the hero component.
Name classes Type string Required false Description Optional additional classes to add to the hero container. Separate each class with a space.
Name attributes Type object Required false Description Any extra HTML attributes (for example data attributes) to add to the hero container.
Copy with image hero code 
{% from 'hero/macro.njk' import hero %}

{{ hero({
"heading": "Career opportunities",
"text": "Hundreds of job opportunities at HS2 and our supply chain.",
"imageURL": "https://assets.hs2.org.uk/wp-content/uploads/2023/02/HS2-launches-its-biggest-ever-apprenticeship-recruitment-drive-2800x1262.jpg"
}) }}
Close with image hero code

With Heading, Text and Button

Open this with image and btn hero example in new window
Copy with image and btn hero code 
<section class="hs2-hero hs2-hero--image hs2-hero--image-description" style="background-image: url('https://assets.hs2.org.uk/wp-content/uploads/2023/02/HS2-launches-its-biggest-ever-apprenticeship-recruitment-drive-2800x1262.jpg');">
  <div class="hs2-hero__overlay">
    <div class="hs2-width-container">
      <div class="hs2-grid-row">
        <div class="hs2-grid-column-two-thirds">
          <div class="padding-with-btn hs2-hero-content">
            <h1 class="hs2-u-margin-bottom-3">Career opportunities</h1>
            <p class="hs2-body-l hs2-u-margin-bottom-0">Hundreds of job opportunities at HS2 and our supply chain.</p>
            <span class="hs2-hero__arrow" aria-hidden="true"></span>

            <div class="button-wrapper">

              <button class="hs2-button hs2-button--reverse undefined" type="submit">
                See our career opportunities
              </button>

            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</section>
Close with image and btn hero code
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.

Nunjucks arguments for with image and btn hero
Name Type Required Description
Name heading Type string Required false Description Text heading of the hero component.
Name text Type string Required false Description Text content of the hero component
Name imageURL Type string Required false Description URL of the image of the hero component.
Name classes Type string Required false Description Optional additional classes to add to the hero container. Separate each class with a space.
Name attributes Type object Required false Description Any extra HTML attributes (for example data attributes) to add to the hero container.
Copy with image and btn hero code 
{% from 'hero/macro.njk' import hero %}

{{ hero({
"heading": "Career opportunities",
"text": "Hundreds of job opportunities at HS2 and our supply chain.",
"imageURL": "https://assets.hs2.org.uk/wp-content/uploads/2023/02/HS2-launches-its-biggest-ever-apprenticeship-recruitment-drive-2800x1262.jpg",
"button": {
  "text": "See our career opportunities"
}
}) }}
Close with image and btn hero code