Footer

The footer provides copyright, licensing and other information about your service.

Preview
HTML
Nunjucks
Twig
365

<footer class="asp-footer">
  <div class="container">
    <ul class="asp-footer__list">
      <li class="asp-footer__item">
        <a href="#">Accessibility statement</a>
      </li>
      <li class="asp-footer__item">
        <a href="#">Privacy</a>
      </li>
      <li class="asp-footer__item">
        <a href="#">Terms and conditions</a>
      </li>
    </ul>
    <p class="asp-footer__copyright">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.
googleAnalytics	string or false (boolean)	Google Analytics tracking ID.
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.
googleAnalytics	string or false (boolean)	Google Analytics tracking ID.
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 "asp-frontend/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.

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	Completed
Documentation	In progress

Published 14 January 2025
Last updated 4 March 2025