Layout footer
The footer provides copyright, licensing and other information
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
contentinfoat 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 thatcontentinfois 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
With meta (preview)
<%= render "govuk_publishing_components/components/layout_footer", {
meta: {
items: [
{
href: "/help",
text: "Help"
},
{
href: "/help/cookies",
text: "Cookies"
},
{
href: "/contact",
text: "Contact"
},
{
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/cookies",
text: "Cookies"
},
{
href: "/contact",
text: "Contact"
},
{
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 attributes links (preview)
<%= render "govuk_publishing_components/components/layout_footer", {
navigation: [
{
title: "Test Links",
columns: 1,
items: [
{
href: "https://www.gov.uk/government/collections/organisation",
text: "Shows a page in a new window",
attributes: {
target: "_blank",
rel: "noopener"
}
},
{
href: "https://www.gov.uk/corporation-tax",
text: "Shows page in the same window",
attributes: {
data: {
tracking: "GTM-123AB"
}
}
}
]
}
],
meta: {
items: [
{
href: "/cymraeg",
text: "Rhestr o Wasanaethau Cymraeg",
attributes: {
lang: "en",
hreflang: "en"
}
}
]
}
} %>With border (preview)
<%= render "govuk_publishing_components/components/layout_footer", {
with_border: true,
meta: {
items: [
{
href: "/help",
text: "Help"
},
{
href: "/help/cookies",
text: "Cookies"
},
{
href: "/contact",
text: "Contact"
},
{
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"
}
]
}
} %>