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.
Footer with links
<footer class="govuk-footer">
<div class="govuk-width-container">
<h2 class="govuk-visually-hidden">Support links</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 notice</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. |
| 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({
meta: {
visuallyHiddenTitle: "Support links",
items: [
{
href: "",
text: "Accessibility statement"
},
{
href: "",
text: "Privacy notice"
}
]
}
})
}}Footer with secondary navigation
<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. |
| 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: "#"
},
{
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
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