Footer

The footer contains copyright information and important links.

The Improving User Experience cluster want to make this component better.

If you work in Parliament and are using it or plan to use it, please contact us on the #design-system Slack channel.

When to use a footer

All pages must have a footer at the bottom.

Minimum requirements

Depending on which variant you use the footer can contain various elements. As a minimum it must contain:

copyright date
cookie settings, cookie policy, and privacy policy links
accessibility statement link

Copyright date

You should show the copyright date in this format: © UK Parliament [Year]

There are occasions where the format of the copyright date may vary. For example, Erskine May has specific copyright requirements, so it has a slightly different message.

Cookie settings, cookie policy, and privacy policy links

You must show these links to make sure the page is compliant with GDPR.

Accessibility statement link

You must add an accessibility statement link to meet accessibility guidelines.

Copyright policy link

You must add a copyright policy link to meet copyright guidelines.

Types of footer

There are two types of footer:

Simple
Expanded

Simple

Use the simple footer when you only need to show the copyright date and required links.

Example Open in a new tab

We can’t show an example of this component. To see it use the ‘Open in a new tab’ link above.

<footer>
  <div class="container">
    <div class="row">
      <div class="col-md-3 col-no-spacing primary">
        &copy; UK Parliament [Year]
      </div>
      <div class="col-md-9 secondary">
        <a href="#">Cookie policy</a>
        <a data-cookie-manager-open="" href="#">Cookie settings</a>
        <a href="#">Privacy notice</a>
        <a href="#">Accessibility statement</a>
        <a href="#">Copyright policy</a>
      </div>
    </div>
  </div>
</footer>

Expanded

The expanded footer provides a set of flexible options, including:

links list (where you can add one or more links)
search input (usually linked to site wide search functionality)
call to action (customisable based on your use case)
social links (links for standard Parliamentary social channels)
legal links (for example, cookie policy, accessibility statement)

Example Open in a new tab

We can’t show an example of this component. To see it use the ‘Open in a new tab’ link above.

<footer class="p-footer">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="p-footer__wrapper">
          <div class="p-footer__panel p-footer__panel-top">
            <div class="p-footer__panel-top-col">
              <h6 class="p-footer__heading">Column heading</h6>
              <ul class="p-footer__list">
                <li><a href="#">Footer link 1</a></li>
                <li><a href="#">Footer link 2</a></li>
              </ul>
            </div>
            <div class="p-footer__panel-top-col">
              <h6 class="p-footer__heading">Column heading</h6>
              <ul class="p-footer__list">
                <li><a href="#">Footer link 3</a></li>
                <li><a href="#">Footer link 4</a></li>
              </ul>
            </div>
          </div>
          <div class="p-footer__panel">
            <h6 class="p-footer__heading">Search</h6>
            <div class="p-footer__input-group">
              <input type="text" name="search" aria-label="Search the site" />
              <svg><use xlink:href="#p-icon__search" /></svg>
            </div>
            <h6 class="p-footer__heading">Call to action</h6>
            <button class="p-footer__button">Call to action</button>
            <h6 class="p-footer__heading">Follow Parliament</h6>
            <div class="p-footer__social">
              <a href="">
                <svg><use xlink:href="#p-icon__twitter" /></svg>
                Twitter
              </a>
              <a href="">
                <svg><use xlink:href="#p-icon__instagram" /></svg>
                Instagram
              </a>
              <a href="">
                <svg><use xlink:href="#p-icon__facebook" /></svg>
                Facebook
              </a>
              <a href="">
                <svg><use xlink:href="#p-icon__youtube" /></svg>
                YouTube
              </a>
            </div>
          </div>
          <div class="p-footer__panel">
            <h6 class="p-footer__heading">Legal</h6>
            <ul class="p-footer__list">
              <li><a href="#">Cookie Policy</a></li>
              <li>
                <a data-cookie-manager-open="" href="#">Cookie settings</a>
              </li>
              <li><a href="#">Privacy notice</a></li>
              <li><a href="#">Accessibility statement</a></li>
            </ul>
          </div>
          <div class="p-footer__panel p-footer__panel-bottom">
            <p>&copy; UK Parliament [Year]</p>
            <svg class="p-footer__logo">
              <use xlink:href="#p-icon__portcullis" />
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</footer>

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.