Component

Layout footer

The footer provides copyright, licensing and other information

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

How to call this component

<%= render "govuk_publishing_components/components/layout_footer", {} %>

GOV.UK Design System

This component incorporates components from the GOV.UK Design System:

Accessibility acceptance criteria

Text and links in the Footer must:

  • have a text contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA

Images in the Footer must:

  • be presentational when linked to from accompanying text “Open Government Licence (OGL) icon”.

Landmarks and Roles in the Footer should:

  • avoid navigation landmarks or roles

    The footer element alone is sufficient for such cases; while a nav element can be used, it is usually unnecessary.

    Note: This decision has been made based on prior experience seeing removal of overuse of <nav> elements from www.GOV.UK, which made it confusing for users of assistive technologies to know what were the most important navigation aspects of GOV.UK. Should be challenged if user research indicates this is an issue.

  • have a role of contentinfo at the root of the component (<footer>)

    Note: This decision has been made given that most uses of this role tend to be used directly on a <footer> element. Assumption made is that is most predictable for users of assistive technologies. The spec indicates that contentinfo is useful for “Examples of information included in this region of the page are copyrights and links to privacy statements.”, which may indicate that it might be better placed around the ‘meta’ section of this component. Should be challenged if user research indicates this is an issue.

Links in the component must:

  • accept focus
  • be focusable with a keyboard
  • be usable with a keyboard
  • indicate when they have focus
  • change in appearance when touched (in the touch-down state)
  • change in appearance when hovered
  • be usable with touch
  • be usable with voice commands
  • have visible text
  • have meaningful text

Other examples

Standard options

This component uses the component wrapper helper. It accepts the following options and applies them to the parent element of the component. See the component wrapper helper documentation for more detail.

  • id - accepts a string for the element ID attribute
  • data_attributes - accepts a hash of data attributes
  • aria - accepts a hash of aria attributes
  • classes - accepts a space separated string of classes, these should not be used for styling and must be prefixed with js-
  • margin_bottom - accepts a number from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale (defaults to no margin)
  • role - accepts a space separated string of roles
  • lang - accepts a language attribute value
  • open - accepts an open attribute value (true or false)
  • hidden - accepts an empty string, ‘hidden’, or ‘until-found’
  • tabindex - accepts an integer. The integer can also be passed as a string.
  • dir - accepts ‘rtl’, ‘ltr’, or ‘auto’.

With meta (preview) 

<%= render "govuk_publishing_components/components/layout_footer", {
  meta: {
    items: [
      {
        href: "/help",
        text: "Help"
      },
      {
        href: "/help/privacy-notice",
        text: "Privacy"
      },
      {
        href: "/help/cookies",
        text: "Cookies"
      },
      {
        href: "/contact",
        text: "Contact"
      },
      {
        href: "/help/accessibility-statement",
        text: "Accessibility statement"
      },
      {
        href: "/help/terms-conditions",
        text: "Terms and conditions"
      },
      {
        href: "/cymraeg",
        text: "Rhestr o Wasanaethau Cymraeg"
      },
      {
        href: "/government/organisations/government-digital-service",
        text: "Government Digital Service"
      }
    ]
  }
} %>

With navigation (preview) 

<%= render "govuk_publishing_components/components/layout_footer", {
  navigation: [
    {
      title: "Services and information",
      columns: 2,
      items: [
        {
          href: "/browse/benefits",
          text: "Benefits"
        },
        {
          href: "/browse/births-deaths-marriages",
          text: "Births, deaths, marriages and care"
        },
        {
          href: "/browse/business",
          text: "Business and self-employed"
        },
        {
          href: "/browse/childcare-parenting",
          text: "Childcare and parenting"
        },
        {
          href: "/browse/citizenship",
          text: "Citizenship and living in the UK"
        },
        {
          href: "/browse/justice",
          text: "Crime, justice and the law"
        },
        {
          href: "/browse/disabilities",
          text: "Disabled people"
        },
        {
          href: "/browse/driving",
          text: "Driving and transport"
        },
        {
          href: "/browse/education",
          text: "Education and learning"
        },
        {
          href: "/browse/employing-people",
          text: "Employing people"
        },
        {
          href: "/browse/environment-countryside",
          text: "Environment and countryside"
        },
        {
          href: "/browse/housing-local-services",
          text: "Housing and local services"
        },
        {
          href: "/browse/tax",
          text: "Money and tax"
        },
        {
          href: "/browse/abroad",
          text: "Passports, travel and living abroad"
        },
        {
          href: "/browse/visas-immigration",
          text: "Visas and immigration"
        },
        {
          href: "/browse/working",
          text: "Working, jobs and pensions"
        }
      ]
    },
    {
      title: "Departments and policy",
      items: [
        {
          href: "/government/how-government-works",
          text: "How government works"
        },
        {
          href: "/government/organisations",
          text: "Departments"
        },
        {
          href: "/world",
          text: "Worldwide"
        },
        {
          href: "/government/policies",
          text: "Policies"
        },
        {
          href: "/news-and-communications",
          text: "News and communications"
        }
      ]
    }
  ],
  meta: {
    items: [
      {
        href: "/help",
        text: "Help"
      },
      {
        href: "/help/privacy-notice",
        text: "Privacy"
      },
      {
        href: "/help/cookies",
        text: "Cookies"
      },
      {
        href: "/contact",
        text: "Contact"
      },
      {
        href: "/help/accessibility-statement",
        text: "Accessibility statement"
      },
      {
        href: "/help/terms-conditions",
        text: "Terms and conditions"
      },
      {
        href: "/cymraeg",
        text: "Rhestr o Wasanaethau Cymraeg"
      },
      {
        href: "/government/organisations/government-digital-service",
        text: "Government Digital Service"
      }
    ]
  }
} %>

With border (preview) 

<%= render "govuk_publishing_components/components/layout_footer", {
  with_border: true,
  meta: {
    items: [
      {
        href: "/help",
        text: "Help"
      },
      {
        href: "/help/privacy-notice",
        text: "Privacy"
      },
      {
        href: "/help/cookies",
        text: "Cookies"
      },
      {
        href: "/contact",
        text: "Contact"
      },
      {
        href: "/help/accessibility-statement",
        text: "Accessibility statement"
      },
      {
        href: "/help/terms-conditions",
        text: "Terms and conditions"
      },
      {
        href: "/cymraeg",
        text: "Rhestr o Wasanaethau Cymraeg"
      },
      {
        href: "/government/organisations/government-digital-service",
        text: "Government Digital Service"
      }
    ]
  }
} %>

Without licence details (preview)

In some limited circumstances (for example, in backend-facing admin systems) it doesn’t make sense to show the licence information. This can be hidden by setting hide_licence to true.

<%= render "govuk_publishing_components/components/layout_footer", {
  hide_licence: true
} %>