Components External service footer

The external service footer is a standard page footer for external DWP services. It uses the GOV.UK footer component.

Open this component example in a new tab 
<footer class="govuk-footer">
<div class="govuk-width-container">
<div class="govuk-footer__meta">
  <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
    <h2 class="govuk-visually-hidden">About this website</h2>
    <ul class="govuk-footer__inline-list">
      <li class="govuk-footer__inline-list-item">
        <a class="govuk-footer__link" href="">
          Accessibility statement
        </a>
      </li>
      <li class="govuk-footer__inline-list-item">
        <a class="govuk-footer__link" href="">
          Cookies
        </a>
      </li>
      <li class="govuk-footer__inline-list-item">
        <a class="govuk-footer__link" href="">
          Privacy
        </a>
      </li>
    </ul>
    <svg
      aria-hidden="true"
      focusable="false"
      class="govuk-footer__licence-logo"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 483.2 195.7"
      height="17"
      width="41">
      <path
        fill="currentColor"
        d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145" />
    </svg>
    <span class="govuk-footer__licence-description">
      All content is available under the
      <a
        class="govuk-footer__link"
        href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
        rel="license">Open Government Licence v3.0</a>, except where otherwise stated
    </span>
  </div>
  <div class="govuk-footer__meta-item">
    <a
      class="govuk-footer__link govuk-footer__copyright-logo"
      href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">
      © Crown copyright
    </a>
  </div>
</div>
</div>
</footer>
{% from "govuk/components/footer/macro.njk" import govukFooter %}

{{
    govukFooter({
        meta: {
            visuallyHiddenTitle: "About this website",
            items: [
            {
                href: "",
                text: "Accessibility statement"
            },
            {
                href: "",
                text: "Cookies"
            },
            {
                href: "",
                text: "Privacy"
            }
            ]
        }
    }) 
}}

When to use this component

All citizen-facing DWP services should include at least the three footer links given here: Accessibility statment, Cookies and Privacy.

When not to use this component

Internal DWP services should use the internal service footer and its content instead.

How it works

Content

Footers for DWP services should include at least the following set of standard links. They should appear in this order, using this link text, and should be the first links in the last line of the footer.

  • Accessibility statement – links to your service’s accessibility statement
  • Cookies – links to your service’s cookie page, which should use the Consent to cookies pattern
  • Privacy – in most cases links to the DWP Personal Information Charter, but it is your responsibility to check that your service’s use of data is covered by the Charter

This set of links is a minimum, and you may need to include other elements and links in your service’s footer. The GOV.UK footer component includes several examples of how to do this.

If you include other links in a single-line footer, they should appear after these standard links.

If you use a footer with several elements (for example a multi-column footer with navigation links), these standard links should appear at the bottom of the footer.

For a Welsh language version of your service, use the Welsh language toggle instead. People cannot easily find the Welsh language link in the footer, so only place a link here if you also have another way to access your service in Welsh.

For contact details, use the Contact a service pattern.

Accessibility

If you include a Help link, always put it in the same place throughout your service. This is needed to comply with WCAG 2.2 success criterion 3.2.6 Consistent Help.

For more about building accessible services see the DWP Accessibility Manual.

Contribute

If you have used or researched this component, please let us know what you found so we can make it better for everyone. There is an open discussion on GitHub where you can share anything you think might be useful.

Discuss External service footer on GitHub

Get in touch

If you’ve got a question, idea or suggestion email the Design System team on dwp-design-system@engineering.digital.dwp.gov.uk