Components

Footer

The Home Office footer provides information about your service and department.

Props
Name Type Default Description
id string - 'id' attribute to place on the base HTML element
classBlock string - Block name override in BEM style classes applied to all elements
classModifiers other - BEM style modifiers to apply to the base HTML element
className string - Extra classes to apply to the base HTML element
navigation other - Navigation links

When to use this component

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

How it works

Standard footer

<footer class="hods-footer" role="contentinfo">
  <div class="hods-footer__inner">
    <div
      class="
        hods-footer__container
        hods-width-container
      "
    >
      <div class="hods-footer__content">
        A Home Office Digital, Data and Technology
        service
      </div>
    </div>
  </div>
</footer>
<Footer />

Footer with navigation links

Footer with customised content

<footer class="hods-footer" role="contentinfo">
  <div class="hods-footer__inner">
    <div
      class="
        hods-footer__container
        hods-width-container
      "
    >
      <div class="hods-footer__content">
        Custom content
      </div>
    </div>
  </div>
</footer>
<Footer>Custom content</Footer>