Your web browser is out of date

Your web browser (the software you use to access the internet) is out of date. You need to update it or use a different web browser to ensure you can complete this form.

Cookies disabled

Cookies are currently not enabled in your web browser. You need to enable cookies to ensure you can complete this form.

Footer

The footer provides essential service-level information at the bottom of every page. It typically includes copyright details, licensing information and links to policies such as privacy, terms and conditions and accessibility.

The footer helps users understand the ownership of the service and gives them quick access to key legal and support pages.

Preview
HTML
Nunjucks
Twig
365

Open this example in a new tab: footer

<footer class="asp-footer">
  <div class="asp-container">
    <ul class="asp-footer__list">
      <li class="asp-footer__item">
        <a class="asp-footer__link" href="#">Accessibility statement</a>
      </li>
      <li class="asp-footer__item">
        <a class="asp-footer__link" href="#">Privacy</a>
      </li>
      <li class="asp-footer__item">
        <a class="asp-footer__link" href="#">Terms and conditions</a>
      </li>
    </ul>
    <p>Copyright &copy; 2025 Avon and Somerset Police. All Rights Reserved.</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
year	number	Required. The current year.
title	string	Required. The site name.
rows	array or false (boolean)	Non default footer links. Default values are false (boolean) or null. See rows.

Options for rows

Name	Type	Description
href	string	Required. The URL for the non default footer link.
text	string	Required. Text that displays in the non default footer link.

{% from "components/footer/macro.njk" import aspFooter %}

{{ aspFooter({
  year: 2025,
  title: "Avon and Somerset Police",
  rows: [
    {
      text: "Accessibility statement",
      href: "#"
    },
    {
      text: "Privacy",
      href: "#"
    },
    {
      text: "Terms and conditions",
      href: "#"
    }
  ]
}) }}

Twig 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
year	number	Required. The current year.
title	string	Required. The site name.
rows	array or false (boolean)	Non default footer links. Default values are false (boolean) or null. See rows.

Options for rows

Name	Type	Description
href	string	Required. The URL for the non default footer link.
text	string	Required. Text that displays in the non default footer link.

{% from "components/footer/macro.njk" import aspFooter %}

{{ aspFooter({
  year: 2025,
  title: "Avon and Somerset Police",
  rows: [
    {
      text: "Accessibility statement",
      href: "#"
    },
    {
      text: "Privacy",
      href: "#"
    },
    {
      text: "Terms and conditions",
      href: "#"
    }
  ]
}) }}

Name	Type	Description
PaddingWidth	number	Required. This is used to determine the gaps to the left and right of this component. This should be set using varPaddingWidth which will dynamically update with the app size.
CopyrightText	string	Required. This is a text input to determine the text shown for the copyright statement.
PrivacyPolicyLink	string	Required. The URL for the privacy policy.
TermsAndConditionsLink	string	Required. The URL for Terms and Conditions.
AccessibilityStatementLink	string	Required. The URL for the accessibility statement.
ShowAccessibilityStatement	boolean	Required. Boolean to determine whether to show the accessibility statement.
ShowPrivacyPolicy	boolean	Required. Boolean to determine whether to show the privacy policy.
ShowTermsAndConditions	boolean	Required. Boolean to determine whether to show the terms and conditions.
Font	string	Required. This is the font that the text will be shown in. This will likely be Font.'Segoe UI'.
DarkMode	boolean	Required. Input to determine if the component should be dark mode or not. Set by named formula variable varDarkMode.
ShowEnableDark	boolean	Required. Boolean to determine whether to show the enable dark mode button.
UserPreference	string	Required. In progress.

When to use this component

Use the Footer on every page of your service.

It should be the final element on the page and should consistently include links that help users understand their rights, responsibilities and how their data is handled.

Common links include:

Privacy policy
Terms and conditions
Accessibility statement
Cookies information
Licensing or attribution details

You can add or remove links depending on your service’s needs, but keep the structure consistent throughout the service.

Example of where we have used this component

This component is used on:

Formation
Assure
Allocate
EBIT

This list is not exhaustive.

Status of development

The below criteria all need to be met for a component to be considered as fully developed for use within the ASP Digital Design System.

Development criteria	Status
WCAG 2.2 compliant	Not started
WCAG 2.1 compliant	Completed
HTML / Nunjucks version	Completed
Figma version	Not started
M365 versions	Not started
Documentation	In progress

Make a change to the Design System

Suggest an edit to this system, or any of the components in it, by submitting a Design System change request.

Published 14 January 2025
Last updated 13 November 2025