Skip to main content

This is an internal development app.

To learn how to design and build digital services, visit the design system in the NHS digital service manual for guidance and examples.

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">
    <div class="nhsuk-grid-row">
      <div class="nhsuk-grid-column-two-thirds">
        <div class="nhsuk-hero__content">
          <h1 class="nhsuk-heading-xl nhsuk-hero__heading">
            We&#39;re here for you
          </h1>
          <p class="nhsuk-body-l">Helping you take control of your health and wellbeing.</p>
        </div>
      </div>
    </div>
  </div>
</section>

Macro

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

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

Hero with size L heading

Open this example in a new tab: Hero with size L heading

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">
    <div class="nhsuk-grid-row">
      <div class="nhsuk-grid-column-two-thirds">
        <div class="nhsuk-hero__content">
          <h1 class="nhsuk-heading-l nhsuk-hero__heading">
            We&#39;re here for you
          </h1>
          <p class="nhsuk-body-l">Helping you take control of your health and wellbeing.</p>
        </div>
      </div>
    </div>
  </div>
</section>

Macro

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

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

Hero with size XL heading

Open this example in a new tab: Hero with size XL heading

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">
    <div class="nhsuk-grid-row">
      <div class="nhsuk-grid-column-two-thirds">
        <div class="nhsuk-hero__content">
          <h1 class="nhsuk-heading-xl nhsuk-hero__heading">
            We&#39;re here for you
          </h1>
          <p class="nhsuk-body-l">Helping you take control of your health and wellbeing.</p>
        </div>
      </div>
    </div>
  </div>
</section>

Macro

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

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

Hero product page

Open this example in a new tab: Hero product page

This is a header for the product or service

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

Sign up
Code

Markup

<section class="nhsuk-hero">
  <div class="nhsuk-width-container">
    <div class="nhsuk-grid-row">
      <div class="nhsuk-grid-column-one-half">
        <div class="nhsuk-hero__content">
          <h1 class="nhsuk-heading-l nhsuk-hero__heading">
            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 class="nhsuk-grid-column-one-half">
        <div class="nhsuk-hero__content">
          <figure class="nhsuk-image nhsuk-image--no-border nhsuk-image--no-background">
            <img class="nhsuk-image__img" src="/nhsuk-frontend/assets/example-hero-image.svg" alt="">
          </figure>
        </div>
      </div>
    </div>
  </div>
</section>

Macro

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

{{ hero({
  content: [
    {
      heading: {
        text: "This is a header for the product or service",
        size: "l"
      },
      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'
    },
    {
      image: {
        src: "/nhsuk-frontend/assets/example-hero-image.svg",
        background: false,
        border: false
      }
    }
  ],
  border: false
}) }}

Hero with heading and caption

Open this example in a new tab: Hero with heading and caption

Setup Prototyping

Code

Markup

<section class="nhsuk-hero nhsuk-hero--border">
  <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-heading-xl nhsuk-hero__heading">
            <span class="nhsuk-caption-xl">
              Setup
            </span>
            Prototyping
          </h1>
        </div>
      </div>
    </div>
  </div>
</section>

Macro

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

{{ hero({
  heading: {
    text: "Prototyping",
    caption: "Setup"
  }
}) }}

Hero with heading only

Open this example in a new tab: Hero with heading only

Prototyping

Code

Markup

<section class="nhsuk-hero nhsuk-hero--border">
  <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-heading-xl nhsuk-hero__heading">
            Prototyping
          </h1>
        </div>
      </div>
    </div>
  </div>
</section>

Macro

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

{{ hero({
  heading: {
    text: "Prototyping"
  }
}) }}

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('/nhsuk-frontend/assets/example-hero-background.jpg');">
  <div class="nhsuk-hero__overlay"></div>
</section>

Macro

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

{{ hero({
  image: {
    src: "/nhsuk-frontend/assets/example-hero-background.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('/nhsuk-frontend/assets/example-hero-background.jpg');">
  <div class="nhsuk-width-container">
    <div class="nhsuk-grid-row">
      <div class="nhsuk-grid-column-two-thirds">
        <div class="nhsuk-hero__content">
          <span class="nhsuk-hero__arrow" aria-hidden="true"></span>
          <h1 class="nhsuk-heading-xl nhsuk-hero__heading">
            We&#39;re here for you
          </h1>
          <p class="nhsuk-body-l">Helping you take control of your health and wellbeing.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="nhsuk-hero__overlay"></div>
</section>

Macro

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

{{ hero({
  heading: {
    text: "We're here for you"
  },
  text: "Helping you take control of your health and wellbeing.",
  image: {
    src: "/nhsuk-frontend/assets/example-hero-background.jpg"
  }
}) }}

Hero with image, content and caption

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

NHS website for England Find information and services to help you manage your health

Code

Markup

<section class="nhsuk-hero nhsuk-hero--image nhsuk-hero--image-description" style="background-image: url('/nhsuk-frontend/assets/example-hero-background.jpg');">
  <div class="nhsuk-width-container">
    <div class="nhsuk-grid-row">
      <div class="nhsuk-grid-column-three-quarters">
        <div class="nhsuk-hero__content">
          <span class="nhsuk-hero__arrow" aria-hidden="true"></span>
          <h1 class="nhsuk-heading-l nhsuk-hero__heading">
            <span class="nhsuk-caption-xl">
              NHS website for England
            </span>
            Find information and services to help you manage your health
          </h1>
        </div>
      </div>
    </div>
  </div>
  <div class="nhsuk-hero__overlay"></div>
</section>

Macro

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

{{ hero({
  heading: {
    text: "Find information and services to help you manage your health",
    size: "l",
    caption: {
      text: "NHS website for England",
      size: "xl"
    }
  },
  width: "three-quarters",
  image: {
    src: "/nhsuk-frontend/assets/example-hero-background.jpg"
  }
}) }}