Navigation - Footer

Use the footer to show users they are on a HSE 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="contentinfo">
  <div class="hse-footer" id="hse-footer">
    <div class="hse-footer__top">
      <div class="hse-width-container">
        <div class="hse-grid-row">
          <div class="hse-grid-column-one-third">
          </div>
          <div class="hse-grid-column-one-third">
            <ul class="hse-footer__list hse-footer__content">
              <li class="hse-footer__list-item">
                <p><a class="hse-footer__list-item-link" href="#">Accessibility statement</a></p>
              </li>
              <li class="hse-footer__list-item">
                <p><a class="hse-footer__list-item-link" href="#">Contact us</a></p>
              </li>
              <li class="hse-footer__list-item">
                <p><a class="hse-footer__list-item-link" href="#">Cookies</a></p>
              </li>
              <li class="hse-footer__list-item">
                <p><a class="hse-footer__list-item-link" href="#">Privacy policy</a></p>
              </li>
              <li class="hse-footer__list-item">
                <p><a class="hse-footer__list-item-link" href="#">Terms and conditions</a></p>
              </li>
            </ul>

          </div>
        </div>
      </div>
    </div>

    <div class="hse-footer__bottom">
      <div class="hse-width-container">
        <p class="hse-footer__copyright">&copy; Health Service Executive</p>
      </div>
    </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"
    }
  ]
})}}
Close default footer code

Use the footer at the bottom of every page on a HSE website.

Add links to meta information about the HSE, such as:

  • accessibility
  • contact details, including social media
  • cookies
  • privacy statement
  • disclaimer

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

Updated: August 2023