Components Internal service footer

The internal service footer is based on the standard GOV.UK footer component but with the copyright notice and Royal Coat of Arms removed.

You may also want to read our step-by-step guidance on adapting the GOV.UK Prototype Kit for use with internal services, including changing the default font and removing other branding elements.

When to use this component

Use this footer for internal services not hosted on service.gov.uk domains. Users of these services will normally be DWP staff but may also include staff of other organisations such as local authorities.

When not to use this component

If your service is hosted on a service.gov.uk domain it should use the GOV.UK Design System footer component.

How it works

Like the GOV.UK footer, the internal service footer can be adapted to the needs of your service. When deciding what information to place in the footer, remember that:

  • information placed in the footer is sometimes skipped or not noticed
  • the grey background lowers the contrast ratio which will limit readability for some people

As a minimum the footer should include links to your service’s accessibility statement and privacy notice. Services aimed at DWP staff should use the DWP Employee Privacy Notice.

Open this component example in a new tab 
<footer class="govuk-footer">
<div class="govuk-width-container">
<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="">Privacy</a>
  </li>
</ul>
</div>
</footer>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as “Required” in the option description.

If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against cross-site scripting exploits.

Name Type Description
meta object Object containing options for the meta navigation., see meta
navigation array Array of items for use in the navigation section of the footer., see navigation
containerClasses string Classes that can be added to the inner container, useful if you want to make the footer full width.
classes string Classes to add to the footer component container.
attributes object HTML attributes (for example data attributes) to add to the footer component container.
Name Type Description
visuallyHiddenTitle string Title for a meta item section.
html string HTML to add to the meta section of the footer, which will appear below any links specified using meta.items.
text string Text to add to the meta section of the footer, which will appear below any links specified using meta.items. If meta.html is specified, this option is ignored.
items array Array of items for use in the meta section of the footer., see meta items
Name Type Description
text string Required. List item text in the meta section of the footer.
href string Required. List item href attribute in the meta section of the footer.
attributes object HTML attributes (for example data attributes) to add to the anchor in the footer navigation section.
Name Type Description
title string Required. Title for a section.
columns integer Amount of columns to display items in navigation section of the footer.
width string Width of each navigation section in the footer. Defaults to full width. You can pass any design system grid width here, for example, 'one-third'; 'two-thirds'; 'one-half'.
items array Array of items to display in the list in navigation section of the footer., see navigation items
Name Type Description
text string Required. List item text in the navigation section of the footer.
href string Required. List item href attribute in the navigation section of the footer. Both `text` and `href` attributes need to be present to create a link.
attributes object HTML attributes (for example data attributes) to add to the anchor in the footer navigation section. 
{% from "internal-service-footer/macro.njk" import dwpFooter %}

{{
    dwpFooter({
        meta: {
            visuallyHiddenTitle: "About this website",
            items: [
            {
                href: "",
                text: "Accessibility statement"
            },
            {
                href: "",
                text: "Privacy"
            }
            ]
        }
    }) 
}}
Open this component example in a new tab 
<footer class="govuk-footer">
<div class="govuk-width-container">
<div class="govuk-footer__navigation">
  <div class="govuk-footer__section govuk-grid-column-two-thirds">
    <h2 class="govuk-footer__heading govuk-heading-m">Two column list</h2>
    <ul class="govuk-footer__list govuk-footer__list--columns-2">
      <li class="govuk-footer__list-item">
        <a class="govuk-footer__link" href="#">
          Item 1
        </a>
      </li>
      <li class="govuk-footer__list-item">
        <a class="govuk-footer__link" href="#">
          Item 2
        </a>
      </li>
      <li class="govuk-footer__list-item">
        <a class="govuk-footer__link" href="#">
          Item 3
        </a>
      </li>
      <li class="govuk-footer__list-item">
        <a class="govuk-footer__link" href="#">
          Item 4
        </a>
      </li>
      <li class="govuk-footer__list-item">
        <a class="govuk-footer__link" href="#">
          Item 5
        </a>
      </li>
      <li class="govuk-footer__list-item">
        <a class="govuk-footer__link" href="#">
          Item 6
        </a>
      </li>
    </ul>
  </div>
  <div class="govuk-footer__section govuk-grid-column-one-third">
    <h2 class="govuk-footer__heading govuk-heading-m">One column list</h2>
    <ul class="govuk-footer__list ">
      <li class="govuk-footer__list-item">
        <a class="govuk-footer__link" href="#">
          Item 1
        </a>
      </li>
      <li class="govuk-footer__list-item">
        <a class="govuk-footer__link" href="#">
          Item 2
        </a>
      </li>
      <li class="govuk-footer__list-item">
        <a class="govuk-footer__link" href="#">
          Item 3
        </a>
      </li>
    </ul>
  </div>
</div>
</div>
</footer>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as “Required” in the option description.

If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against cross-site scripting exploits.

Name Type Description
meta object Object containing options for the meta navigation., see meta
navigation array Array of items for use in the navigation section of the footer., see navigation
containerClasses string Classes that can be added to the inner container, useful if you want to make the footer full width.
classes string Classes to add to the footer component container.
attributes object HTML attributes (for example data attributes) to add to the footer component container.

Options for meta object

Name Type Description
visuallyHiddenTitle string Title for a meta item section.
html string HTML to add to the meta section of the footer, which will appear below any links specified using meta.items.
text string Text to add to the meta section of the footer, which will appear below any links specified using meta.items. If meta.html is specified, this option is ignored.
items array Array of items for use in the meta section of the footer., see meta items

Options for meta items array object

Name Type Description
text string Required. List item text in the meta section of the footer.
href string Required. List item href attribute in the meta section of the footer.
attributes object HTML attributes (for example data attributes) to add to the anchor in the footer navigation section.

Options for navigation array object

Name Type Description
title string Required. Title for a section.
columns integer Amount of columns to display items in navigation section of the footer.
width string Width of each navigation section in the footer. Defaults to full width. You can pass any design system grid width here, for example, 'one-third'; 'two-thirds'; 'one-half'.
items array Array of items to display in the list in navigation section of the footer., see navigation items

Options for navigation items array object

Name Type Description
text string Required. List item text in the navigation section of the footer.
href string Required. List item href attribute in the navigation section of the footer. Both `text` and `href` attributes need to be present to create a link.
attributes object HTML attributes (for example data attributes) to add to the anchor in the footer navigation section. 
{% from "internal-service-footer/macro.njk" import dwpFooter %}

{{
    dwpFooter({
        navigation: [
            {
                title: "Two column list",
                width: "two-thirds",
                columns: 2,
                items: [
                    {
                        text: "Item 1",
                        href: "#"
                    },
                    {
                        text: "Item 2",
                        href: "#"
                    },
                    {
                        text: "Item 3",
                        href: "#"
                    },
                    {
                        text: "Item 4",
                        href: "#"
                    },
                    {
                        text: "Item 5",
                        href: "#"
                    },
                    {
                        text: "Item 6",
                        href: "#"
                    }
                ]
            },
            {
                title: "One column list",
                width: "one-third",
                items: [
                    {
                        text: "Item 1",
                        href: "#"
                    },
                    {
                        text: "Item 2",
                        href: "#"
                    },
                    {
                        text: "Item 3",
                        href: "#"
                    }
                ]
            }
        ]
    }) 
}}

Footer with links, secondary navigation and plain text

Open this component example in a new tab 
<footer class="govuk-footer">
<div class="govuk-width-container">
<div class="govuk-footer__navigation">
  <div class="govuk-footer__section govuk-grid-column-two-thirds">
    <h2 class="govuk-footer__heading govuk-heading-m">Two column list</h2>
    <ul class="govuk-footer__list govuk-footer__list--columns-2">
      <li class="govuk-footer__list-item">
        <a class="govuk-footer__link" href="#">
          Item 1
        </a>
      </li>
      <li class="govuk-footer__list-item">
        <a class="govuk-footer__link" href="#">
          Item 2
        </a>
      </li>
      <li class="govuk-footer__list-item">
        <a class="govuk-footer__link" href="#">
          Item 3
        </a>
      </li>
      <li class="govuk-footer__list-item">
        <a class="govuk-footer__link" href="#">
          Item 4
        </a>
      </li>
      <li class="govuk-footer__list-item">
        <a class="govuk-footer__link" href="#">
          Item 5
        </a>
      </li>
      <li class="govuk-footer__list-item">
        <a class="govuk-footer__link" href="#">
          Item 6
        </a>
      </li>
    </ul>
  </div>
  <div class="govuk-footer__section govuk-grid-column-one-third">
    <h2 class="govuk-footer__heading govuk-heading-m">One column list</h2>
    <ul class="govuk-footer__list ">
      <li class="govuk-footer__list-item">
        <a class="govuk-footer__link" href="#">
          Item 1
        </a>
      </li>
      <li class="govuk-footer__list-item">
        <a class="govuk-footer__link" href="#">
          Item 2
        </a>
      </li>
      <li class="govuk-footer__list-item">
        <a class="govuk-footer__link" href="#">
          Item 3
        </a>
      </li>
    </ul>
  </div>
</div>
<hr class="govuk-footer__section-break">
<h2 class="govuk-visually-hidden">Meta links</h2>
<ul class="govuk-footer__inline-list">
  <li class="govuk-footer__inline-list-item">
    <a class="govuk-footer__link" href="#">Item 1</a>
  </li>
  <li class="govuk-footer__inline-list-item">
    <a class="govuk-footer__link" href="#">Item 2</a>
  </li>
  <li class="govuk-footer__inline-list-item">
    <a class="govuk-footer__link" href="#">Item 3</a>
  </li>
</ul>
<p class="govuk-body">Plain text item</p>
</div>
</footer>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as “Required” in the option description.

If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against cross-site scripting exploits.

Name Type Description
meta object Object containing options for the meta navigation., see meta
navigation array Array of items for use in the navigation section of the footer., see navigation
containerClasses string Classes that can be added to the inner container, useful if you want to make the footer full width.
classes string Classes to add to the footer component container.
attributes object HTML attributes (for example data attributes) to add to the footer component container.
Name Type Description
visuallyHiddenTitle string Title for a meta item section.
html string HTML to add to the meta section of the footer, which will appear below any links specified using meta.items.
text string Text to add to the meta section of the footer, which will appear below any links specified using meta.items. If meta.html is specified, this option is ignored.
items array Array of items for use in the meta section of the footer., see meta items
Name Type Description
text string Required. List item text in the meta section of the footer.
href string Required. List item href attribute in the meta section of the footer.
attributes object HTML attributes (for example data attributes) to add to the anchor in the footer navigation section.
Name Type Description
title string Required. Title for a section.
columns integer Amount of columns to display items in navigation section of the footer.
width string Width of each navigation section in the footer. Defaults to full width. You can pass any design system grid width here, for example, 'one-third'; 'two-thirds'; 'one-half'.
items array Array of items to display in the list in navigation section of the footer., see navigation items
Name Type Description
text string Required. List item text in the navigation section of the footer.
href string Required. List item href attribute in the navigation section of the footer. Both `text` and `href` attributes need to be present to create a link.
attributes object HTML attributes (for example data attributes) to add to the anchor in the footer navigation section. 
{% from "internal-service-footer/macro.njk" import dwpFooter %}

{{
    dwpFooter({
        navigation: [
        {
            title: "Two column list",
            width: "two-thirds",
            columns: 2,
            items: [
                {
                    text: "Item 1",
                    href: "#"
                },
                {
                    text: "Item 2",
                    href: "#"
                },
                {
                    text: "Item 3",
                    href: "#"
                },
                {
                    text: "Item 4",
                    href: "#"
                },
                {
                    text: "Item 5",
                    href: "#"
                },
                {
                    text: "Item 6",
                    href: "#"
                }
            ]
        },
        {
            title: "One column list",
            width: "one-third",
            items: [
                {
                    text: "Item 1",
                    href: "#"
                },
                {
                    text: "Item 2",
                    href: "#"
                },
                {
                    text: "Item 3",
                    href: "#"
                }
            ]
        }
    ],
    meta: {
            visuallyHiddenTitle: "Meta links",
            items: [
                {
                    href: "#",
                    text: "Item 1"
                },
                {
                    href: "#",
                    text: "Item 2"
                },
                {
                    href: "#",
                    text: "Item 3"
                }
            ],
            text: "Plain text item"
        }
    })
}}

Research

Have you used this component?

Please let us know what you found so we can make it better for everyone. There is an open discussion for this component on GitHub where you can share anything you think might be useful.

Discuss Internal 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