Design System

Hero

Heroes are coloured sections used to highlight important pieces of content. They are often, though not always, the first thing a user sees on a page.

Intended behaviour

All content placed inside a hero must respect the layout rules for the design system.

When to use this component

Heroes should be used to highlight and draw attention to related content that is important to a user.

Where possible heroes should be placed above the fold, or high up on a page.

When not to use this component

  • Do not use a hero if the content is not related
  • Do not use more than two cards inside a hero section
  • Do not use more than two heroes on a page

Variations

Coral hero

open this example in its own window 

<section class="hero hero--coral" aria-description="hero section">
  <div class="container"></div>
</section>

Options to the hero() macro

heroBackground: string|null = null

The supported background colour class of the hero, lower-case.

body: string|null = null

The hero's main body content, if any. 

{% from 'macros/component/hero.html' import hero %}

{{ hero({
    'heroBackground': 'hero--coral'
}) }}

Blue hero

open this example in its own window 

<section class="hero hero--blue" aria-description="hero section">
  <div class="container"></div>
</section>

Options to the hero() macro

heroBackground: string|null = null

The supported background colour class of the hero, lower-case.

body: string|null = null

The hero's main body content, if any. 

{% from 'macros/component/hero.html' import hero %}

{{ hero({
    'heroBackground': 'hero--blue'
}) }}

Blue hero with text

open this example in its own window

NIHR Research Funding

This is some text to add context to the page title and provide more information.

<section class="hero hero--blue" aria-description="hero section">
  <div class="container">
    <div class="row justify-content-center">
      <div class="text-center col-xl-7">
        <h1 class="text-white">NIHR Research Funding</h1>
        <p class="text-white">
          This is some text to add context to the page title and provide more
          information.
        </p>
      </div>
    </div>
  </div>
</section>

Options to the hero() macro

heroBackground: string|null = null

The supported background colour class of the hero, lower-case.

body: string|null = null

The hero's main body content, if any. 

{% from 'macros/component/hero.html' import hero %}

{{ hero({
    'heroBackground': 'hero--blue',
    'body': '
        <div class="row justify-content-center">
            <div class="text-center col-xl-7">
                <h1 class="text-white">NIHR Research Funding</h1>
                <p class="text-white">This is some text to add context to the page title and provide more information.</p>
            </div>
        </div>
    ' | safe
}) }}

Coral hero with blue card and image

open this example in its own window

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce gravida odio enim, eget congue neque dignissim nec.

<section class="hero hero--coral" aria-description="hero section">
  <div class="container">
    <div class="row">
      <div class="col-md">
        <div class="card h-100 card--navy">
          <div class="card-body d-flex flex-column">
            <h2 class="card-title h3 heading-underline">Lorem ipsum</h2>

            <div class="card-text">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
                gravida odio enim, eget congue neque dignissim nec.
              </p>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md">
        <div class="card h-100">
          <img
            src="https://www.nihr.ac.uk/images/800-600/covid-nurses-hospital.jpg"
            class="card-img"
            alt=""
          />
        </div>
      </div>
    </div>
  </div>
</section>

Options to the hero() macro

heroBackground: string|null = null

The supported background colour class of the hero, lower-case.

body: string|null = null

The hero's main body content, if any. 

{% from 'macros/component/hero.html' import hero %}

{% from 'macros/component/card.html' import card %}
{% set textCard = card({
    'heading': 'Lorem ipsum',
    'body': '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce gravida odio enim, eget congue neque dignissim nec.</p>' | safe,
    'backgroundColor': 'navy'
}) %}
{% set imageCard = card({
    'image': 'https://www.nihr.ac.uk/images/800-600/covid-nurses-hospital.jpg'
}) %}
{{ hero({
    'heroBackground': 'hero--coral',
    'body': ('<div class="row">' ~ textCard ~ imageCard ~ '</div>') | safe
}) }}

Coral hero with two white text cards

open this example in its own window

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce gravida odio enim, eget congue neque dignissim nec.

Donec lacinia

Donec lacinia faucibus sapien, in varius metus iaculis eget. Sed pellentesque libero in imperdiet elementum.

<section class="hero hero--coral" aria-description="hero section">
  <div class="container">
    <div class="row">
      <div class="col-md">
        <div class="card h-100 card--navy">
          <div class="card-body d-flex flex-column">
            <h2 class="card-title h3 heading-underline">Lorem ipsum</h2>

            <div class="card-text">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
                gravida odio enim, eget congue neque dignissim nec.
              </p>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md">
        <div class="card h-100 card--navy">
          <div class="card-body d-flex flex-column">
            <h2 class="card-title h3 heading-underline">Donec lacinia</h2>

            <div class="card-text">
              <p>
                Donec lacinia faucibus sapien, in varius metus iaculis eget. Sed
                pellentesque libero in imperdiet elementum.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Options to the hero() macro

heroBackground: string|null = null

The supported background colour class of the hero, lower-case.

body: string|null = null

The hero's main body content, if any. 

{% from 'macros/component/hero.html' import hero %}

{% from 'macros/component/card.html' import card %}
{% set firstTextCard = card({
    'heading': 'Lorem ipsum',
    'body': '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce gravida odio enim, eget congue neque dignissim nec.</p>' | safe,
    'backgroundColor': 'navy'
}) %}
{% set secondTextCard = card({
    'heading': 'Donec lacinia',
    'body': '<p>Donec lacinia faucibus sapien, in varius metus iaculis eget. Sed pellentesque libero in imperdiet elementum.</p>' | safe,
    'backgroundColor': 'navy'
}) %}
{{ hero({
    'heroBackground': 'hero--coral',
    'body': ('<div class="row">' ~ firstTextCard ~ secondTextCard ~ '</div>') | safe
}) }}

Blue hero with two white text cards

open this example in its own window

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce gravida odio enim, eget congue neque dignissim nec.

Donec lacinia

Donec lacinia faucibus sapien, in varius metus iaculis eget. Sed pellentesque libero in imperdiet elementum.

<section class="hero hero--blue" aria-description="hero section">
  <div class="container">
    <div class="row">
      <div class="col-md">
        <div class="card h-100">
          <div class="card-body d-flex flex-column">
            <h2 class="card-title h3 heading-underline">Lorem ipsum</h2>

            <div class="card-text">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
                gravida odio enim, eget congue neque dignissim nec.
              </p>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md">
        <div class="card h-100">
          <div class="card-body d-flex flex-column">
            <h2 class="card-title h3 heading-underline">Donec lacinia</h2>

            <div class="card-text">
              <p>
                Donec lacinia faucibus sapien, in varius metus iaculis eget. Sed
                pellentesque libero in imperdiet elementum.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Options to the hero() macro

heroBackground: string|null = null

The supported background colour class of the hero, lower-case.

body: string|null = null

The hero's main body content, if any. 

{% from 'macros/component/hero.html' import hero %}

{% from 'macros/component/card.html' import card %}
{% set firstTextCard = card({
    'heading': 'Lorem ipsum',
    'body': '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce gravida odio enim, eget congue neque dignissim nec.</p>' | safe
}) %}
{% set secondTextCard = card({
    'heading': 'Donec lacinia',
    'body': '<p>Donec lacinia faucibus sapien, in varius metus iaculis eget. Sed pellentesque libero in imperdiet elementum.</p>' | safe
}) %}
{{ hero({
    'heroBackground': 'hero--blue',
    'body': ('<div class="row">' ~ firstTextCard ~ secondTextCard ~ '</div>') | safe
}) }}

Coral hero with image

open this example in its own window 

<section class="hero hero--coral" aria-description="hero section">
  <div class="container">
    <div class="row">
      <div class="col-md">
        <div class="card h-100">
          <img
            src="https://www.nihr.ac.uk/images/news/head-up-collar.png"
            class="card-img"
            alt=""
          />
        </div>
      </div>
    </div>
  </div>
</section>

Options to the hero() macro

heroBackground: string|null = null

The supported background colour class of the hero, lower-case.

body: string|null = null

The hero's main body content, if any. 

{% from 'macros/component/hero.html' import hero %}

{% from 'macros/component/card.html' import card %}
{% set imageCard = card({
    'image': 'https://www.nihr.ac.uk/images/news/head-up-collar.png'
}) %}
{{ hero({
    'heroBackground': 'hero--coral',
    'body': ('<div class="row">' ~ imageCard ~ '</div>') | safe
}) }}

Blue hero with two images

open this example in its own window 

<section class="hero hero--blue" aria-description="hero section">
  <div class="container">
    <div class="row">
      <div class="col-md">
        <div class="card h-100">
          <img
            src="https://www.nihr.ac.uk/images/800-600/covid-nurses-hospital.jpg"
            class="card-img"
            alt=""
          />
        </div>
      </div>

      <div class="col-md">
        <div class="card h-100">
          <img
            src="https://www.nihr.ac.uk/images/800-600/covid-nurses-hospital.jpg"
            class="card-img"
            alt=""
          />
        </div>
      </div>
    </div>
  </div>
</section>

Options to the hero() macro

heroBackground: string|null = null

The supported background colour class of the hero, lower-case.

body: string|null = null

The hero's main body content, if any. 

{% from 'macros/component/hero.html' import hero %}

{% from 'macros/component/card.html' import card %}
{% set firstImageCard = card({
    'image': 'https://www.nihr.ac.uk/images/800-600/covid-nurses-hospital.jpg'
}) %}
{% set secondImageCard = card({
    'image': 'https://www.nihr.ac.uk/images/800-600/covid-nurses-hospital.jpg'
}) %}
{{ hero({
    'heroBackground': 'hero--blue',
    'body': ('<div class="row">' ~ firstImageCard ~ secondImageCard ~ '</div>') | safe
}) }}