Navigation - Footer

Use the footer to show users they are on an HS2 service and to help them find links they expect at the bottom of our pages.

Open this default footer example in new window
Copy default footer code 
<footer role="copyright info" class="">
  <div class="hs2-copyright-footer" id="hs2-copyright-footer">
    <div class="hs2-width-container app-width-container">
      <h2 class="hs2-u-visually-hidden">Support links</h2>
      <ul class="hs2-copyright-footer__list app-footer__list">
        <li class="hs2-copyright-footer__list-item"><a class="hs2-copyright-footer__list-item-link" href="#">Accessibility statement</a></li>
        <li class="hs2-copyright-footer__list-item"><a class="hs2-copyright-footer__list-item-link" href="#">Contact us</a></li>
        <li class="hs2-copyright-footer__list-item"><a class="hs2-copyright-footer__list-item-link" href="#">Cookies</a></li>
        <li class="hs2-copyright-footer__list-item"><a class="hs2-copyright-footer__list-item-link" href="#">Privacy policy</a></li>
        <li class="hs2-copyright-footer__list-item"><a class="hs2-copyright-footer__list-item-link" href="#">Terms and conditions</a></li>
        <li class="hs2-copyright-footer__list-item"><a class="hs2-copyright-footer__list-item-link" href="#">Test</a></li>
      </ul>

      <p class="hs2-copyright-footer__copyright">&copy; HS2 Limited</p>
    </div>
  </div>
  <div class="app-ogl-footer">
    <div class="hs2-width-container app-width-container">
      <p class="app-ogl-footer--text">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 483.2 195.7" height="17" width="41" focusable="false">
          <path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"></path>
        </svg>
        All content is available under the <a class="hs2-copyright-footer__list-item-link" href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence v3.0</a>, except where otherwise stated.
      </p>
    </div>
  </div>
</footer>
Close default footer code
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.

Nunjucks arguments for default footer
Name Type Required Description
Name links Type array Required false Description Contains an array of footer link items.
Name links[].url Type string Required false Description Href attribute for the footer link item.
Name links[].label Type string Required true Description The label of for the footer link item.
Name copyright Type string Required false Description Optional text for the copyright notice in the footer.
Name classes Type string Required false Description Classes to add to the footer container.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the footer container.
Copy default footer code 
{% from 'footer/macro.njk' import footer %}

{{ footer({
  "links": [
    {
      "URL": "#",
      "label": "Accessibility statement"
    },
    {
      "URL": "#",
      "label": "Contact us"
    },
    {
      "URL": "#",
      "label": "Cookies"
    },
    {
      "URL": "#",
      "label": "Privacy policy"
    },
    {
      "URL": "#",
      "label": "Terms and conditions"
    },
    {
      "URL": "#",
      "label": "Test"
    }
    
  ]
})}}
Close default footer code

Use the footer at the bottom of every page of your service.

Add links to meta information about your service, such as:

  • accessibility
  • contact details
  • cookies
  • privacy policy
  • terms and conditions

Avoid adding lots of links. Keep them to a minimum.