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
<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="#1">
                    Item 1
                </a>
            </li>
            <li class="govuk-footer__list-item">
                <a class="govuk-footer__link" href="#2">
                    Item 2
                </a>
            </li>
            <li class="govuk-footer__list-item">
                <a class="govuk-footer__link" href="#3">
                    Item 3
                </a>
            </li>
            <li class="govuk-footer__list-item">
                <a class="govuk-footer__link" href="#4">
                    Item 4
                </a>
            </li>
            <li class="govuk-footer__list-item">
                <a class="govuk-footer__link" href="#5">
                    Item 5
                </a>
            </li>
            <li class="govuk-footer__list-item">
                <a class="govuk-footer__link" href="#6">
                    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="#1">
                    Item 1
                </a>
            </li>
            <li class="govuk-footer__list-item">
                <a class="govuk-footer__link" href="#2">
                    Item 2
                </a>
            </li>
            <li class="govuk-footer__list-item">
                <a class="govuk-footer__link" href="#3">
                    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.
navigation array Array of items for use in the navigation section of the footer.
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.
{% from "internal-service-footer/macro.njk" import dwpFooter %}

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

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