Skip to main content
  1. Home
  2. Footer

Footer

The footer provides copyright, licensing and other information about your service and department.

When no arguments are provided, a bare footer is generated.

Input

= govuk_footer
<%= govuk_footer %>

Output

<footer class="govuk-footer" role="contentinfo">
  <div class="govuk-width-container">
    <div class="govuk-footer__meta">
      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
        <svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 483.2 195.7" height="17" width="41">
          <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" />
        </svg>
        <span class="govuk-footer__licence-description">
          All content is available under the <a class="govuk-footer__link" href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/">
            Open Government Licence v3.0
          </a>
          , except where otherwise stated
        </span>
      </div>
      <div class="govuk-footer__meta-item">
        <a class="govuk-footer__link govuk-footer__copyright-logo" href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">
          © Crown copyright
        </a>
      </div>
    </div>
  </div>
</footer>

You can also include links to meta information about a site, such as cookies and contact details in the footer:

Input

= govuk_footer(meta_items_title: "Helpful links", meta_items: meta_items)
<%= govuk_footer(meta_items_title: "Helpful links", meta_items: meta_items) %>
{ meta_items: { "One" => "#", "Two" => "#", "Three" => "#", "Four" => "#" } }

Output

<footer class="govuk-footer" role="contentinfo">
  <div class="govuk-width-container">
    <div class="govuk-footer__meta">
      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
        <h2 class="govuk-visually-hidden">
          Helpful links
        </h2>
        <ul class="govuk-footer__inline-list">
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" href="#">
              One
            </a>
          </li>
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" href="#">
              Two
            </a>
          </li>
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" href="#">
              Three
            </a>
          </li>
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" href="#">
              Four
            </a>
          </li>
        </ul>
        <svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 483.2 195.7" height="17" width="41">
          <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" />
        </svg>
        <span class="govuk-footer__licence-description">
          All content is available under the <a class="govuk-footer__link" href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/">
            Open Government Licence v3.0
          </a>
          , except where otherwise stated
        </span>
      </div>
      <div class="govuk-footer__meta-item">
        <a class="govuk-footer__link govuk-footer__copyright-logo" href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">
          © Crown copyright
        </a>
      </div>
    </div>
  </div>
</footer>

Footer with custom content beneath the licence information

The meta_html slot allows any custom HTML to be placed under the licence information.

Input

= render GovukComponent::FooterComponent.new do |footer|
  - footer.meta_html do
    .govuk-footer__meta-custom class="govuk-!-margin-top-1"
      | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
        a porta purus. Fusce faucibus aliquam massa sed eleifend.
<%= render GovukComponent::FooterComponent.new do |footer|
footer.meta_html do %>
  <div class="govuk-footer__meta-custom govuk-!-margin-top-1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
    a porta purus. Fusce faucibus aliquam massa sed eleifend.
  </div>
<% end; end %>

Output

<footer class="govuk-footer" role="contentinfo">
  <div class="govuk-width-container">
    <div class="govuk-footer__meta">
      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
        <svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 483.2 195.7" height="17" width="41">
          <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" />
        </svg>
        <span class="govuk-footer__licence-description">
          All content is available under the <a class="govuk-footer__link" href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/">
            Open Government Licence v3.0
          </a>
          , except where otherwise stated
        </span>
        <div class="govuk-footer__meta-custom">
          <div class="govuk-footer__meta-custom govuk-!-margin-top-1">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
            a porta purus. Fusce faucibus aliquam massa sed eleifend.
          </div>
        </div>
      </div>
      <div class="govuk-footer__meta-item">
        <a class="govuk-footer__link govuk-footer__copyright-logo" href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">
          © Crown copyright
        </a>
      </div>
    </div>
  </div>
</footer>

Footer with entirely custom content

The meta slot overwrites the entire meta area of the footer.

Input

= render GovukComponent::FooterComponent.new do |footer|
  - footer.meta do
    .govuk-footer__meta-item
      p.govuk-footer__meta-custom
        | Any custom HTML can go here, all other content will be
          replaced.
<%= render GovukComponent::FooterComponent.new do |footer|
footer.meta do %>
  <div class="govuk-footer__meta-item">
    <p class="govuk-footer__meta-custom">
      Any custom HTML can go here, all other content will be
      replaced.
    </p>
  </div>
<% end; end %>

Output

Any custom HTML can go here, all other content will be replaced. 

<footer class="govuk-footer" role="contentinfo">
  <div class="govuk-width-container">
    <div class="govuk-footer__meta">
      <div class="govuk-footer__meta-item">
        <p class="govuk-footer__meta-custom">
          Any custom HTML can go here, all other content will be
          replaced.
        </p>
      </div>
    </div>
  </div>
</footer>

Input

= govuk_footer(copyright_text: copyright_text, meta_licence: meta_licence)
<%= govuk_footer(copyright_text: copyright_text, meta_licence: meta_licence) %>
{
  copyright_text: "© Creative Commons",
  meta_licence: "This license allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, so long as attribution is given to the creator."
}

Output

This license allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, so long as attribution is given to the creator. 
<footer class="govuk-footer" role="contentinfo">
  <div class="govuk-width-container">
    <div class="govuk-footer__meta">
      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
        <span class="govuk-footer__licence-description">
          This license allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, so long as attribution is given to the creator.
        </span>
      </div>
      <div class="govuk-footer__meta-item">
        <a class="govuk-footer__link govuk-footer__copyright-logo" href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">
          © Creative Commons
        </a>
      </div>
    </div>
  </div>
</footer>

Input

= govuk_footer do |footer|
  - footer.navigation do
    .govuk-footer__section.govuk-grid-column-one-third
      h2.govuk-footer__heading.govuk-heading-m Section one

      ul.govuk-footer__list.govuk-footer__list--columns-2
        li: a.govuk-footer__link href="#"
          | First
        li: a.govuk-footer__link href="#"
          | Second
        li: a.govuk-footer__link href="#"
          | Third
        li: a.govuk-footer__link href="#"
          | Fourth
        li: a.govuk-footer__link href="#"
          | Fifth
        li: a.govuk-footer__link href="#"
          | Sixth

    .govuk-footer__section.govuk-grid-column-two-thirds
      h2.govuk-footer__heading.govuk-heading-m Section two

      ul.govuk-footer__list.govuk-footer__list--columns-3
        li: a.govuk-footer__link href="#"
          | First
        li: a.govuk-footer__link href="#"
          | Second
        li: a.govuk-footer__link href="#"
          | Third
        li: a.govuk-footer__link href="#"
          | Fourth
        li: a.govuk-footer__link href="#"
          | Fifth
        li: a.govuk-footer__link href="#"
          | Sixth
        li: a.govuk-footer__link href="#"
          | Seventh
        li: a.govuk-footer__link href="#"
          | Eighth
        li: a.govuk-footer__link href="#"
          | Nineth
        li: a.govuk-footer__link href="#"
          | Tenth
<%= govuk_footer do |footer|
footer.navigation do %>
  <div class="govuk-footer__section govuk-grid-column-one-third">
    <h2 class="govuk-footer__heading govuk-heading-m">Section one
    </h2>
    <ul class="govuk-footer__list govuk-footer__list--columns-2">
      <li><a class="govuk-footer__link" href="#">
          First
        </a></li>
      <li><a class="govuk-footer__link" href="#">
          Second
        </a></li>
      <li><a class="govuk-footer__link" href="#">
          Third
        </a></li>
      <li><a class="govuk-footer__link" href="#">
          Fourth
        </a></li>
      <li><a class="govuk-footer__link" href="#">
          Fifth
        </a></li>
      <li><a class="govuk-footer__link" href="#">
          Sixth
        </a></li>
    </ul>
  </div>
  <div class="govuk-footer__section govuk-grid-column-two-thirds">
    <h2 class="govuk-footer__heading govuk-heading-m">Section two
    </h2>
    <ul class="govuk-footer__list govuk-footer__list--columns-3">
      <li><a class="govuk-footer__link" href="#">
          First
        </a></li>
      <li><a class="govuk-footer__link" href="#">
          Second
        </a></li>
      <li><a class="govuk-footer__link" href="#">
          Third
        </a></li>
      <li><a class="govuk-footer__link" href="#">
          Fourth
        </a></li>
      <li><a class="govuk-footer__link" href="#">
          Fifth
        </a></li>
      <li><a class="govuk-footer__link" href="#">
          Sixth
        </a></li>
      <li><a class="govuk-footer__link" href="#">
          Seventh
        </a></li>
      <li><a class="govuk-footer__link" href="#">
          Eighth
        </a></li>
      <li><a class="govuk-footer__link" href="#">
          Nineth
        </a></li>
      <li><a class="govuk-footer__link" href="#">
          Tenth
        </a></li>
    </ul>
  </div>
<% end; end %>

Output

<footer class="govuk-footer" role="contentinfo">
  <div class="govuk-width-container">
    <div class="govuk-footer__navigation">
      <div class="govuk-footer__section govuk-grid-column-one-third">
        <h2 class="govuk-footer__heading govuk-heading-m">
          Section one
        </h2>
        <ul class="govuk-footer__list govuk-footer__list--columns-2">
          <li>
            <a class="govuk-footer__link" href="#">
              First
            </a>
          </li>
          <li>
            <a class="govuk-footer__link" href="#">
              Second
            </a>
          </li>
          <li>
            <a class="govuk-footer__link" href="#">
              Third
            </a>
          </li>
          <li>
            <a class="govuk-footer__link" href="#">
              Fourth
            </a>
          </li>
          <li>
            <a class="govuk-footer__link" href="#">
              Fifth
            </a>
          </li>
          <li>
            <a class="govuk-footer__link" href="#">
              Sixth
            </a>
          </li>
        </ul>
      </div>
      <div class="govuk-footer__section govuk-grid-column-two-thirds">
        <h2 class="govuk-footer__heading govuk-heading-m">
          Section two
        </h2>
        <ul class="govuk-footer__list govuk-footer__list--columns-3">
          <li>
            <a class="govuk-footer__link" href="#">
              First
            </a>
          </li>
          <li>
            <a class="govuk-footer__link" href="#">
              Second
            </a>
          </li>
          <li>
            <a class="govuk-footer__link" href="#">
              Third
            </a>
          </li>
          <li>
            <a class="govuk-footer__link" href="#">
              Fourth
            </a>
          </li>
          <li>
            <a class="govuk-footer__link" href="#">
              Fifth
            </a>
          </li>
          <li>
            <a class="govuk-footer__link" href="#">
              Sixth
            </a>
          </li>
          <li>
            <a class="govuk-footer__link" href="#">
              Seventh
            </a>
          </li>
          <li>
            <a class="govuk-footer__link" href="#">
              Eighth
            </a>
          </li>
          <li>
            <a class="govuk-footer__link" href="#">
              Nineth
            </a>
          </li>
          <li>
            <a class="govuk-footer__link" href="#">
              Tenth
            </a>
          </li>
        </ul>
      </div>
    </div>
    <hr class="govuk-footer__section-break">
    <div class="govuk-footer__meta">
      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
        <svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 483.2 195.7" height="17" width="41">
          <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" />
        </svg>
        <span class="govuk-footer__licence-description">
          All content is available under the <a class="govuk-footer__link" href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/">
            Open Government Licence v3.0
          </a>
          , except where otherwise stated
        </span>
      </div>
      <div class="govuk-footer__meta-item">
        <a class="govuk-footer__link govuk-footer__copyright-logo" href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">
          © Crown copyright
        </a>
      </div>
    </div>
  </div>
</footer>

Related information