GOV.UK footer
The footer provides copyright, licensing and other information about your service and department.
Default footer
When no arguments are provided, a bare footer is generated.
Output
<footer role="contentinfo" class="govuk-footer">
<div class="govuk-width-container">
<svg class="govuk-footer__crown" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 60" height="30" width="32" fill="currentColor">
<g>
<circle cx="20" cy="17.6" r="3.7"/>
<circle cx="10.2" cy="23.5" r="3.7"/>
<circle cx="3.7" cy="33.2" r="3.7"/>
<circle cx="31.7" cy="30.6" r="3.7"/>
<circle cx="43.3" cy="17.6" r="3.7"/>
<circle cx="53.2" cy="23.5" r="3.7"/>
<circle cx="59.7" cy="33.2" r="3.7"/>
<circle cx="31.7" cy="30.6" r="3.7"/>
<path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z"/>
</g>
</svg>
<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>Footer with meta links
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 role="contentinfo" class="govuk-footer">
<div class="govuk-width-container">
<svg class="govuk-footer__crown" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 60" height="30" width="32" fill="currentColor">
<g>
<circle cx="20" cy="17.6" r="3.7"/>
<circle cx="10.2" cy="23.5" r="3.7"/>
<circle cx="3.7" cy="33.2" r="3.7"/>
<circle cx="31.7" cy="30.6" r="3.7"/>
<circle cx="43.3" cy="17.6" r="3.7"/>
<circle cx="53.2" cy="23.5" r="3.7"/>
<circle cx="59.7" cy="33.2" r="3.7"/>
<circle cx="31.7" cy="30.6" r="3.7"/>
<path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z"/>
</g>
</svg>
<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 meta links that have custom HTML attributes
If you need greater control of the meta links you can provide them as an
array of hashes with the keys text:, href: and attr: where attr is a
hash of HTML attributes.
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: [
{ text: "Apricot", href: "#apr", attr: { data: { controller: "item-a" } } },
{ text: "Blackberry", href: "#blb", attr: { data: { controller: "item-b" } } },
{ text: "Cherry", href: "#chy", attr: { rel: "noopener" } },
{ text: "Damson", href: "#dsn", attr: { aria: { description: "An edible subspecies of plum" } } },
]
}Output
<footer role="contentinfo" class="govuk-footer">
<div class="govuk-width-container">
<svg class="govuk-footer__crown" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 60" height="30" width="32" fill="currentColor">
<g>
<circle cx="20" cy="17.6" r="3.7"/>
<circle cx="10.2" cy="23.5" r="3.7"/>
<circle cx="3.7" cy="33.2" r="3.7"/>
<circle cx="31.7" cy="30.6" r="3.7"/>
<circle cx="43.3" cy="17.6" r="3.7"/>
<circle cx="53.2" cy="23.5" r="3.7"/>
<circle cx="59.7" cy="33.2" r="3.7"/>
<circle cx="31.7" cy="30.6" r="3.7"/>
<path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z"/>
</g>
</svg>
<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" data-controller="item-a" href="#apr">
Apricot
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" data-controller="item-b" href="#blb">
Blackberry
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" rel="noopener" href="#chy">
Cherry
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" aria-description="An edible subspecies of plum" href="#dsn">
Damson
</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 above the licence information
The meta_html slot allows any custom HTML to be placed above the licence information. Use
the govuk_footer_link_to helper to build footer links.
Input
= render GovukComponent::FooterComponent.new do |footer|
- footer.with_meta_html do
| Built with love by
= govuk_footer_link_to("X-GOVUK", "https://x-govuk.github.io/")<%= render GovukComponent::FooterComponent.new do |footer|
footer.with_meta_html do %>Built with love by
<%= govuk_footer_link_to("X-GOVUK", "https://x-govuk.github.io/") %>
<% end; end %>Output
<footer role="contentinfo" class="govuk-footer">
<div class="govuk-width-container">
<svg class="govuk-footer__crown" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 60" height="30" width="32" fill="currentColor">
<g>
<circle cx="20" cy="17.6" r="3.7"/>
<circle cx="10.2" cy="23.5" r="3.7"/>
<circle cx="3.7" cy="33.2" r="3.7"/>
<circle cx="31.7" cy="30.6" r="3.7"/>
<circle cx="43.3" cy="17.6" r="3.7"/>
<circle cx="53.2" cy="23.5" r="3.7"/>
<circle cx="59.7" cy="33.2" r="3.7"/>
<circle cx="31.7" cy="30.6" r="3.7"/>
<path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z"/>
</g>
</svg>
<div class="govuk-footer__meta">
<div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
<div class="govuk-footer__meta-custom">
Built with love by<a class="govuk-footer__link" href="https://x-govuk.github.io/">
X-GOVUK
</a>
</div>
<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 entirely custom content
The meta slot overwrites the entire meta area of the footer.
Input
= render GovukComponent::FooterComponent.new do |footer|
- footer.with_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.with_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
<footer role="contentinfo" class="govuk-footer">
<div class="govuk-width-container">
<svg class="govuk-footer__crown" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 60" height="30" width="32" fill="currentColor">
<g>
<circle cx="20" cy="17.6" r="3.7"/>
<circle cx="10.2" cy="23.5" r="3.7"/>
<circle cx="3.7" cy="33.2" r="3.7"/>
<circle cx="31.7" cy="30.6" r="3.7"/>
<circle cx="43.3" cy="17.6" r="3.7"/>
<circle cx="53.2" cy="23.5" r="3.7"/>
<circle cx="59.7" cy="33.2" r="3.7"/>
<circle cx="31.7" cy="30.6" r="3.7"/>
<path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z"/>
</g>
</svg>
<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>Footer with custom copyright and licence
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 licence 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
<footer role="contentinfo" class="govuk-footer">
<div class="govuk-width-container">
<svg class="govuk-footer__crown" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 60" height="30" width="32" fill="currentColor">
<g>
<circle cx="20" cy="17.6" r="3.7"/>
<circle cx="10.2" cy="23.5" r="3.7"/>
<circle cx="3.7" cy="33.2" r="3.7"/>
<circle cx="31.7" cy="30.6" r="3.7"/>
<circle cx="43.3" cy="17.6" r="3.7"/>
<circle cx="53.2" cy="23.5" r="3.7"/>
<circle cx="59.7" cy="33.2" r="3.7"/>
<circle cx="31.7" cy="30.6" r="3.7"/>
<path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z"/>
</g>
</svg>
<div class="govuk-footer__meta">
<div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
<span class="govuk-footer__licence-description">
This licence 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>Footer with custom licence HTML
The meta_licence_html slot allows replacing the licence information with any custom HTML.
Input
= govuk_footer do |footer|
- footer.with_meta_licence_html do
|> Some custom HTML for the licence,
perhaps with a
= govuk_footer_link_to("link", "https://x-govuk.github.io/")<%= govuk_footer do |footer|
footer.with_meta_licence_html do %>Some custom HTML for the licence,
perhaps with a
<%= govuk_footer_link_to("link", "https://x-govuk.github.io/") %>
<% end; end %>Output
<footer role="contentinfo" class="govuk-footer">
<div class="govuk-width-container">
<svg class="govuk-footer__crown" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 60" height="30" width="32" fill="currentColor">
<g>
<circle cx="20" cy="17.6" r="3.7"/>
<circle cx="10.2" cy="23.5" r="3.7"/>
<circle cx="3.7" cy="33.2" r="3.7"/>
<circle cx="31.7" cy="30.6" r="3.7"/>
<circle cx="43.3" cy="17.6" r="3.7"/>
<circle cx="53.2" cy="23.5" r="3.7"/>
<circle cx="59.7" cy="33.2" r="3.7"/>
<circle cx="31.7" cy="30.6" r="3.7"/>
<path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z"/>
</g>
</svg>
<div class="govuk-footer__meta">
<div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
<span class="govuk-footer__licence-description">
Some custom HTML for the licence,
perhaps with a <a class="govuk-footer__link" href="https://x-govuk.github.io/">
link
</a>
</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 navigation
Input
= govuk_footer do |footer|
- footer.with_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 == govuk_footer_link_to("First", "#")
li == govuk_footer_link_to("Second", "#")
li == govuk_footer_link_to("Third", "#")
li == govuk_footer_link_to("Fourth", "#")
li == govuk_footer_link_to("Fifth", "#")
li == govuk_footer_link_to("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 == govuk_footer_link_to("First", "#")
li == govuk_footer_link_to("Second", "#")
li == govuk_footer_link_to("Third", "#")
li == govuk_footer_link_to("Fourth", "#")
li == govuk_footer_link_to("Fifth", "#")
li == govuk_footer_link_to("Sixth", "#")
li == govuk_footer_link_to("Seventh", "#")
li == govuk_footer_link_to("Eighth", "#")
li == govuk_footer_link_to("Ninth", "#")
li == govuk_footer_link_to("Tenth", "#")<%= govuk_footer do |footer|
footer.with_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><%= govuk_footer_link_to("First", "#") %>
</li>
<li><%= govuk_footer_link_to("Second", "#") %>
</li>
<li><%= govuk_footer_link_to("Third", "#") %>
</li>
<li><%= govuk_footer_link_to("Fourth", "#") %>
</li>
<li><%= govuk_footer_link_to("Fifth", "#") %>
</li>
<li><%= govuk_footer_link_to("Sixth", "#") %>
</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><%= govuk_footer_link_to("First", "#") %>
</li>
<li><%= govuk_footer_link_to("Second", "#") %>
</li>
<li><%= govuk_footer_link_to("Third", "#") %>
</li>
<li><%= govuk_footer_link_to("Fourth", "#") %>
</li>
<li><%= govuk_footer_link_to("Fifth", "#") %>
</li>
<li><%= govuk_footer_link_to("Sixth", "#") %>
</li>
<li><%= govuk_footer_link_to("Seventh", "#") %>
</li>
<li><%= govuk_footer_link_to("Eighth", "#") %>
</li>
<li><%= govuk_footer_link_to("Ninth", "#") %>
</li>
<li><%= govuk_footer_link_to("Tenth", "#") %>
</li>
</ul>
</div>
<% end; end %>Output
<footer role="contentinfo" class="govuk-footer">
<div class="govuk-width-container">
<svg class="govuk-footer__crown" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 60" height="30" width="32" fill="currentColor">
<g>
<circle cx="20" cy="17.6" r="3.7"/>
<circle cx="10.2" cy="23.5" r="3.7"/>
<circle cx="3.7" cy="33.2" r="3.7"/>
<circle cx="31.7" cy="30.6" r="3.7"/>
<circle cx="43.3" cy="17.6" r="3.7"/>
<circle cx="53.2" cy="23.5" r="3.7"/>
<circle cx="59.7" cy="33.2" r="3.7"/>
<circle cx="31.7" cy="30.6" r="3.7"/>
<path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z"/>
</g>
</svg>
<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="#">
Ninth
</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>