Hero

These examples are used for automated tests and may not follow service manual best practice.

Hero default

Open this example in a new tab: Hero default

We're here for you

Helping you take control of your health and wellbeing.

Code

Markup

<section class="nhsuk-hero">
  <div class="nhsuk-width-container nhsuk-hero--border">
    <div class="nhsuk-grid-row">
      <div class="nhsuk-grid-column-two-thirds">
        <div class="nhsuk-hero__wrapper">
          <h1 class="nhsuk-hero__heading">We&#39;re here for you</h1>
          <p class="nhsuk-body-l nhsuk-u-margin-bottom-0">Helping you take control of your health and wellbeing.</p>
        </div>
      </div>
    </div>
  </div>
</section>

Macro

{% from "hero/macro.njk" import hero -%}

{{ hero({
  heading: "We're here for you",
  text: "Helping you take control of your health and wellbeing."
}) }}

Hero with html content

Open this example in a new tab: Hero with html content

This is a header for the product or service

This is some more content which explains the product or service.

Code

Markup

<section class="nhsuk-hero">
  <div class="nhsuk-width-container nhsuk-hero--border">
    <div class="nhsuk-grid-row">
      <div class="nhsuk-grid-column-two-thirds">
        <div class="nhsuk-hero__wrapper">
          <h1 class="nhsuk-hero__heading nhsuk-heading-l nhsuk-u-margin-top-5">This is a header for the product or service</h1>
          <p class="nhsuk-body-l">This is some more content which explains the product or service.</p>
          <a class="nhsuk-button nhsuk-button--reverse" data-module="nhsuk-button" href="#" role="button" draggable="false">
            Sign up
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

Macro

{% from "hero/macro.njk" import hero -%}

{{ hero({
  heading: "This is a header for the product or service",
  headingSize: "l",
  headingClasses: "nhsuk-u-margin-top-5",
  html: '<p class="nhsuk-body-l">This is some more content which explains the product or service.</p>\n<a class="nhsuk-button nhsuk-button--reverse" data-module="nhsuk-button" href="#" role="button" draggable="false">\n  Sign up\n</a>\n'
}) }}

Hero with image

Open this example in a new tab: Hero with image

Code

Markup

<section class="nhsuk-hero nhsuk-hero--image" style="background-image: url('https://assets.nhs.uk/prod/images/S_0818_homepage_hero_1_F0147446.width-1000.jpg');">
  <div class="nhsuk-hero__overlay"></div>
</section>

Macro

{% from "hero/macro.njk" import hero -%}

{{ hero({
  image: {
    src: "https://assets.nhs.uk/prod/images/S_0818_homepage_hero_1_F0147446.width-1000.jpg"
  }
}) }}

Hero with image, content

Open this example in a new tab: Hero with image, content

We're here for you

Helping you take control of your health and wellbeing.

Code

Markup

<section class="nhsuk-hero nhsuk-hero--image nhsuk-hero--image-description" style="background-image: url('https://assets.nhs.uk/prod/images/S_0818_homepage_hero_1_F0147446.width-1000.jpg');">
  <div class="nhsuk-hero__overlay">
    <div class="nhsuk-width-container">
      <div class="nhsuk-grid-row">
        <div class="nhsuk-grid-column-two-thirds">
          <div class="nhsuk-hero-content">
            <h1 class="nhsuk-hero__heading">We&#39;re here for you</h1>
            <p class="nhsuk-body-l nhsuk-u-margin-bottom-0">Helping you take control of your health and wellbeing.</p>
            <span class="nhsuk-hero__arrow" aria-hidden="true"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Macro

{% from "hero/macro.njk" import hero -%}

{{ hero({
  heading: "We're here for you",
  text: "Helping you take control of your health and wellbeing.",
  image: {
    src: "https://assets.nhs.uk/prod/images/S_0818_homepage_hero_1_F0147446.width-1000.jpg"
  }
}) }}