NETSCC 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 NETSCC 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

backgroundColor: 'navy'|'coral' = 'navy'

The hero's background color.

body: string|null = null

The hero's main body content, if any. 

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

{{ hero({
    'backgroundColor': 'coral'
}) }}

Blue hero

open this example in its own window 

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

Options to the hero() macro

backgroundColor: 'navy'|'coral' = 'navy'

The hero's background color.

body: string|null = null

The hero's main body content, if any. 

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

{{ hero({}) }}

Blue hero with text

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--navy" aria-description="hero section">
  <div class="container">
    <div class="row justify-content-center">
      <div class="text-center col-xl-7">
        <h1 class="text-white">Lorem ipsum</h1>
        <p class="text-white">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce gravida
          odio enim, eget congue neque dignissim nec.
        </p>
      </div>
    </div>
  </div>
</section>

Options to the hero() macro

backgroundColor: 'navy'|'coral' = 'navy'

The hero's background color.

body: string|null = null

The hero's main body content, if any. 

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

{{ hero({
    'body': '
        <div class="row justify-content-center">
            <div class="text-center col-xl-7">
                <h1 class="text-white">Lorem ipsum</h1>
                <p class="text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce gravida odio enim, eget congue neque dignissim nec.</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-fit"
            alt=""
          />
        </div>
      </div>
    </div>
  </div>
</section>

Options to the hero() macro

backgroundColor: 'navy'|'coral' = 'navy'

The hero's background color.

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({
    'backgroundColor': '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

backgroundColor: 'navy'|'coral' = 'navy'

The hero's background color.

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({
    'backgroundColor': '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--navy" 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

backgroundColor: 'navy'|'coral' = 'navy'

The hero's background color.

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({
    '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-fit"
            alt=""
          />
        </div>
      </div>
    </div>
  </div>
</section>

Options to the hero() macro

backgroundColor: 'navy'|'coral' = 'navy'

The hero's background color.

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({
    'backgroundColor': 'coral',
    'body': ('<div class="row">' ~ imageCard ~ '</div>') | safe
}) }}

Blue hero with two images

open this example in its own window 

<section class="hero hero--navy" 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-fit"
            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-fit"
            alt=""
          />
        </div>
      </div>
    </div>
  </div>
</section>

Options to the hero() macro

backgroundColor: 'navy'|'coral' = 'navy'

The hero's background color.

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({
    'body': ('<div class="row">' ~ firstImageCard ~ secondImageCard ~ '</div>') | safe
}) }}

Patterns

This component is used in the following design patterns: