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>

Accessibility

If your service uses this component, let us know of any insights you have on accessibility considerations.

Research

The footer is used by:

  • Central Operations Platform

If your service uses this component, let us know of any insights you have on research.

Help improve this component

This component needs improving. We need evidence about:

  • how to write for this component
  • which services are using this component

To contribute, add your thoughts and research findings to our GitHub discussion, or follow our contribute guidance.