Design System

Header

The header shows the NIHR logo, and optionally shows navigation entrypoints. It is an essential part of each page's NIHR branding.

Intended behaviour

The header consists of the NIHR logo and an optional Search component. The logo is also a link back to the current site's front page. Entering a search query will return results.

When to use this component

Every site that uses the Design System must use the Header.

Variations

Default header

open this example in its own window 

<header class="pt-3 pb-3 bg-white main-header">
  <div class="container">
    <div class="row">
      <div class="col-md-8">
        <a
          href="/"
          title="National Institute for Health and Care Research (NIHR)"
          class="main-logo"
          ><img
            src="https://www.nihr.ac.uk/layout/4.0/assets/logos/nihr-master-logo-325px.png"
            alt="The NIHR logo"
          />
        </a>
      </div>
    </div>
  </div>
</header>

Options to the header() macro

search: object|null = null

The arguments to the Search component.

serviceTitle: string|null = null

The title of the service site. 

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

{{ header ({}) }}

Header with search

open this example in its own window 

<header class="pt-3 pb-3 bg-white main-header">
  <div class="container">
    <div class="row">
      <div class="col-md-8">
        <a
          href="/"
          title="National Institute for Health and Care Research (NIHR)"
          class="main-logo"
          ><img
            src="https://www.nihr.ac.uk/layout/4.0/assets/logos/nihr-master-logo-325px.png"
            alt="The NIHR logo"
          />
        </a>
      </div>

      <div class="col-md-4">
        <form class="search-component" action="#">
          <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
            <div class="input-group">
              <input
                type="text"
                class="form-control"
                placeholder="Search"
                value=""
                aria-label="Search"
              />
              <button
                type="button"
                class="btn-close"
                aria-label="Close"
                disabled
              >
                <span class="visually-hidden">Close</span>
              </button>
              <button type="submit" class="btn btn-btn-outline-secondary">
                <span class="visually-hidden">Search</span>
                <i class="fas fa-search" aria-hidden="true"></i>
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</header>

Options to the header() macro

search: object|null = null

The arguments to the Search component.

serviceTitle: string|null = null

The title of the service site. 

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

{{ header({
  'search': {
    'action': '#'
  }
}) }}

Service header

open this example in its own window

Funding and Awards 
<header class="pt-3 pb-3 bg-white main-header">
  <div class="container">
    <div class="row">
      <div class="col-md-8">
        <a
          href="/"
          title="National Institute for Health and Care Research (NIHR)"
          class="main-logo"
          ><img
            src="https://www.nihr.ac.uk/layout/4.0/assets/logos/nihr-master-logo-325px.png"
            alt="The NIHR logo"
          />
        </a>
      </div>

      <div class="col-md-4">
        <form class="search-component" action="#">
          <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
            <div class="input-group">
              <input
                type="text"
                class="form-control"
                placeholder="Search"
                value=""
                aria-label="Search"
              />
              <button
                type="button"
                class="btn-close"
                aria-label="Close"
                disabled
              >
                <span class="visually-hidden">Close</span>
              </button>
              <button type="submit" class="btn btn-btn-outline-secondary">
                <span class="visually-hidden">Search</span>
                <i class="fas fa-search" aria-hidden="true"></i>
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>

    <div class="row">
      <a href="/" class="text-decoration-none h4 mt-3 mb-0"
        >Funding and Awards</a
      >
    </div>
  </div>
</header>

Options to the header() macro

search: object|null = null

The arguments to the Search component.

serviceTitle: string|null = null

The title of the service site. 

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

{{ header({
  'serviceTitle': 'Funding and Awards',
  'search': {
    'action': '#'
  }
}) }}