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 displays content which is globally applicable across the whole system / application. For example, links to accessibility statements, privacy policies, and Freedom of Information.

This information is usually important to the organisation, but not the user.

It usually also contains copyright details and may contain contact information.

Preview
HTML
JSON
Nunjucks
Twig
Razor
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; 2026 Avon and Somerset Police. All Rights Reserved.</p>
  </div>
</footer>

{
  "type": "footer",
  "params": {
    "year": 2026,
    "title": "Avon and Somerset Police",
    "rows": [
      {
        "text": "Accessibility statement",
        "href": "#"
      },
      {
        "text": "Privacy",
        "href": "#"
      },
      {
        "text": "Terms and conditions",
        "href": "#"
      }
    ]
  }
}

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.
content	array or false (boolean)	Optional contextual content displayed above the footer link list. See content.

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.

Options for content

Name	Type	Description
html	string	Required. HTML for the contextual content. If 'html' is provided, the 'text' parameter will be ignored.
text	string	Required. Text for the contextual content. If 'text' is provided, the content will be wrapped in a `<p>` element.

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

{{ aspFooter({
  year: 2026,
  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.
content	array or false (boolean)	Optional contextual content displayed above the footer link list. See content.

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.

Options for content

Name	Type	Description
html	string	Required. HTML for the contextual content. If 'html' is provided, the 'text' parameter will be ignored.
text	string	Required. Text for the contextual content. If 'text' is provided, the content will be wrapped in a `<p>` element.

{% from "@asp-frontend/components/footer/macro.twig" import aspFooter %}

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

Tag helper attributes

Use attributes to customise the appearance, content and behaviour of a component when using a tag helper, for example, changing the text.

Some attributes are required for the tag helper to work; these are marked as "Required" in the attribute description.

If you're using tag helpers in production with content-html or other HTML attributes, you must sanitise the HTML to protect against cross-site scripting exploits.

Attribute	Type	Description
year	number	Required. The current year. HTML attribute on `<asp-footer>`.
title	string	Required. The site name. HTML attribute on `<asp-footer>`.
rows	array or false (boolean)	Non default footer links. Default values are false (boolean) or null. Use child elements `<asp-footer-row />`. See rows.
content	array or false (boolean)	Optional contextual content displayed above the footer link list. On `<asp-footer>`, use `content-html` or `content-text` attributes. See content.

Child element: asp-footer-row

Attribute	Type	Description
href	string	Required. The URL for the non default footer link. HTML attribute on `<asp-footer-row />`.
text	string	Required. Text that displays in the non default footer link. HTML attribute on `<asp-footer-row />`.

content attributes

Attribute	Type	Description
content-html	string	Required. HTML for the contextual content. If 'html' is provided, the 'text' parameter will be ignored.
content-text	string	Required. Text for the contextual content. If 'text' is provided, the content will be wrapped in a `<p>` element.

<asp-footer year='2026' title='Avon and Somerset Police'>
  <asp-footer-row href='#' text='Accessibility statement' />
  <asp-footer-row href='#' text='Privacy' />
  <asp-footer-row href='#' text='Terms and conditions' />
</asp-footer>

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.

Preview
HTML
JSON
Nunjucks
Twig
Razor
365

Open this example in a new tab: footer

<footer class="asp-footer">
  <div class="asp-container">
        <p>For help, contact us via our support service.</p>
    <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; 2026 Avon and Somerset Police. All Rights Reserved.</p>
  </div>
</footer>

{
  "type": "footer",
  "params": {
    "year": 2026,
    "title": "Avon and Somerset Police",
    "content": {
      "text": "For help, contact us via our support service."
    },
    "rows": [
      {
        "text": "Accessibility statement",
        "href": "#"
      },
      {
        "text": "Privacy",
        "href": "#"
      },
      {
        "text": "Terms and conditions",
        "href": "#"
      }
    ]
  }
}

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.
content	array or false (boolean)	Optional contextual content displayed above the footer link list. See content.

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.

Options for content

Name	Type	Description
html	string	Required. HTML for the contextual content. If 'html' is provided, the 'text' parameter will be ignored.
text	string	Required. Text for the contextual content. If 'text' is provided, the content will be wrapped in a `<p>` element.

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

{{ aspFooter({
  year: 2026,
  title: "Avon and Somerset Police",
  content: {
    text: "For help, contact us via our support service."
  },
  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.
content	array or false (boolean)	Optional contextual content displayed above the footer link list. See content.

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.

Options for content

Name	Type	Description
html	string	Required. HTML for the contextual content. If 'html' is provided, the 'text' parameter will be ignored.
text	string	Required. Text for the contextual content. If 'text' is provided, the content will be wrapped in a `<p>` element.

{% from "@asp-frontend/components/footer/macro.twig" import aspFooter %}

{{ aspFooter({
  year: 2026,
  title: "Avon and Somerset Police",
  content: {
    text: "For help, contact us via our support service."
  },
  rows: [
    {
      text: "Accessibility statement",
      href: "#"
    },
    {
      text: "Privacy",
      href: "#"
    },
    {
      text: "Terms and conditions",
      href: "#"
    }
  ]
}) }}

Tag helper attributes

Use attributes to customise the appearance, content and behaviour of a component when using a tag helper, for example, changing the text.

Some attributes are required for the tag helper to work; these are marked as "Required" in the attribute description.

If you're using tag helpers in production with content-html or other HTML attributes, you must sanitise the HTML to protect against cross-site scripting exploits.

Attribute	Type	Description
year	number	Required. The current year. HTML attribute on `<asp-footer>`.
title	string	Required. The site name. HTML attribute on `<asp-footer>`.
rows	array or false (boolean)	Non default footer links. Default values are false (boolean) or null. Use child elements `<asp-footer-row />`. See rows.
content	array or false (boolean)	Optional contextual content displayed above the footer link list. On `<asp-footer>`, use `content-html` or `content-text` attributes. See content.

Child element: asp-footer-row

Attribute	Type	Description
href	string	Required. The URL for the non default footer link. HTML attribute on `<asp-footer-row />`.
text	string	Required. Text that displays in the non default footer link. HTML attribute on `<asp-footer-row />`.

content attributes

Attribute	Type	Description
content-html	string	Required. HTML for the contextual content. If 'html' is provided, the 'text' parameter will be ignored.
content-text	string	Required. Text for the contextual content. If 'text' is provided, the content will be wrapped in a `<p>` element.

<asp-footer year='2026' title='Avon and Somerset Police' content-text='For help, contact us via our support service.'>
  <asp-footer-row href='#' text='Accessibility statement' />
  <asp-footer-row href='#' text='Privacy' />
  <asp-footer-row href='#' text='Terms and conditions' />
</asp-footer>

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.

Preview
HTML
JSON
Nunjucks
Twig
Razor
365

Open this example in a new tab: footer

<footer class="asp-footer">
  <div class="asp-container">
    <p>Copyright &copy; 2026 Avon and Somerset Police. All Rights Reserved.</p>
  </div>
</footer>

{
  "type": "footer",
  "params": {
    "year": 2026,
    "title": "Avon and Somerset Police",
    "rows": false
  }
}

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.
content	array or false (boolean)	Optional contextual content displayed above the footer link list. See content.

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.

Options for content

Name	Type	Description
html	string	Required. HTML for the contextual content. If 'html' is provided, the 'text' parameter will be ignored.
text	string	Required. Text for the contextual content. If 'text' is provided, the content will be wrapped in a `<p>` element.

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

{{ aspFooter({
  year: 2026,
  title: "Avon and Somerset Police",
  rows: false
}) }}

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.
content	array or false (boolean)	Optional contextual content displayed above the footer link list. See content.

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.

Options for content

Name	Type	Description
html	string	Required. HTML for the contextual content. If 'html' is provided, the 'text' parameter will be ignored.
text	string	Required. Text for the contextual content. If 'text' is provided, the content will be wrapped in a `<p>` element.

{% from "@asp-frontend/components/footer/macro.twig" import aspFooter %}

{{ aspFooter({
  year: 2026,
  title: "Avon and Somerset Police",
  rows: false
}) }}

Tag helper attributes

Use attributes to customise the appearance, content and behaviour of a component when using a tag helper, for example, changing the text.

Some attributes are required for the tag helper to work; these are marked as "Required" in the attribute description.

If you're using tag helpers in production with content-html or other HTML attributes, you must sanitise the HTML to protect against cross-site scripting exploits.

Attribute	Type	Description
year	number	Required. The current year. HTML attribute on `<asp-footer>`.
title	string	Required. The site name. HTML attribute on `<asp-footer>`.
rows	array or false (boolean)	Non default footer links. Default values are false (boolean) or null. Use child elements `<asp-footer-row />`. See rows.
content	array or false (boolean)	Optional contextual content displayed above the footer link list. On `<asp-footer>`, use `content-html` or `content-text` attributes. See content.

Child element: asp-footer-row

Attribute	Type	Description
href	string	Required. The URL for the non default footer link. HTML attribute on `<asp-footer-row />`.
text	string	Required. Text that displays in the non default footer link. HTML attribute on `<asp-footer-row />`.

content attributes

Attribute	Type	Description
content-html	string	Required. HTML for the contextual content. If 'html' is provided, the 'text' parameter will be ignored.
content-text	string	Required. Text for the contextual content. If 'text' is provided, the content will be wrapped in a `<p>` element.

<asp-footer year='2026' title='Avon and Somerset Police' />

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

The footer component should be used on all applications and systems.

The details displayed in the footer may vary dependent on the audience.

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 18 August 2026