Components

Footer

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

HTML
React

<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 class="hods-footer__navigation">
        <ul
          id="navigation"
          class="hods-footer__navigation-list"
        >
          <li class="hods-footer__navigation-item">
            <a
              class="hods-footer__link"
              href="/feedback"
            >
              Feedback
            </a>
          </li>
          <li class="hods-footer__navigation-item">
            <a class="hods-footer__link" href="/help">
              Help
            </a>
          </li>
          <li class="hods-footer__navigation-item">
            <a
              class="hods-footer__link hods-footer__link--active"
              href="https://gov.uk/"
            >
              Gov.UK home
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</footer>

<Footer
  navigation={[
    {
      href: "/feedback",
      text: "Feedback",
    },
    {
      href: "/help",
      text: "Help",
    },
    {
      href: "https://gov.uk/",
      text: "Gov.UK home",
    },
  ]}
/>

Props

Name	Type	Description
id	other	'id' attribute to place on the base HTML element
classBlock	other	Block name override in BEM style classes applied to all elements
classModifiers	other	BEM style modifiers to apply to the base HTML element
className	other	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

<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

HTML
React

<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 class="hods-footer__navigation">
        <ul
          id="navigation"
          class="hods-footer__navigation-list"
        >
          <li class="hods-footer__navigation-item">
            <a
              class="hods-footer__link"
              href="/feedback"
            >
              Feedback
            </a>
          </li>
          <li class="hods-footer__navigation-item">
            <a class="hods-footer__link" href="/help">
              Help
            </a>
          </li>
          <li class="hods-footer__navigation-item">
            <a
              class="hods-footer__link hods-footer__link--active"
              href="https://gov.uk/"
            >
              Gov.UK home
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</footer>

<Footer
  navigation={[
    {
      href: "/feedback",
      text: "Feedback",
    },
    {
      href: "/help",
      text: "Help",
    },
    {
      href: "https://gov.uk/",
      text: "Gov.UK home",
    },
  ]}
/>

Footer with customised content

HTML
React

<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.