Header

The header shows users they are on parliament.uk.

When to use the header

Every page should have a header at the top.

Types of header

There are two types of header:

Product header
Basic header

Product header

The product header contains the UK Parliament logo that acts as a link to parliament.uk.

It also has a space to display the product name to show users which section of the website they are on. This also acts as a link to the homepage for that section.

Example Open in a new tab

Website title

<header>
  <div class="container">
    <a
      href="https://www.parliament.uk"
      class="parliament-home"
      aria-label="UK Parliament"
    >
      <svg
        aria-hidden="true"
        width="159"
        height="40"
        viewBox="0 0 159 40"
        fill="#fff"
        xmlns="http://www.w3.org/2000/svg"
      >
        <use href="#p-icon__uk-parliament" />
      </svg>
    </a>
  </div>
  <div class="product-header">
    <div class="container">
      <a class="title" href="#">Website title</a>
    </div>
  </div>
</header>

Basic header

The basic header only contains the UK Parliament logo that acts as a link to parliament.uk.

Use it when there is no need to show the product name or when using a product banner.

Example Open in a new tab

<header>
  <div class="container">
    <a
      href="https://www.parliament.uk"
      class="parliament-home"
      aria-label="UK Parliament"
    >
      <svg
        aria-hidden="true"
        width="159"
        height="40"
        viewBox="0 0 159 40"
        fill="#fff"
        xmlns="http://www.w3.org/2000/svg"
      >
        <use href="#p-icon__uk-parliament" />
      </svg>
    </a>
  </div>
</header>

Have a question, suggestion or feedback?

The Improving User Experience cluster manages the design system.

If you work in Parliament, contact us on the #design-system Slack channel.