Footer
The Home Office footer provides information about your service and department.
Props
string |
|
'id' attribute to place on the base HTML element |
string |
|
Block name override in BEM style classes applied to all elements |
other |
|
BEM style modifiers to apply to the base HTML element |
string |
|
Extra classes to apply to the base HTML element |
other |
|
Navigation links |
When to use this component
Use the footer at the bottom of every page of your internal service.
How it works
Standard footer
<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 with navigation links
<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"
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
<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.