Footer
The footer provides copyright, licensing and other information about your service. It is an essential part of each page's NIHR branding.
When to use this component
Use the footer at the bottom of every page of your service.
Examples
A minimal footer
open this example in its own window
<footer class="main-footer">
<div class="container">
<div class="row">
<div
class="col d-flex align-items-stretch justify-content-between flex-column"
>
<ul class="social-media-links mb-5">
<li>
<a href="https://en-gb.facebook.com/OfficialNIHR/"
><i class="fa-brands fa-facebook-f"
><span class="visually-hidden">Facebook</span></i
></a
>
</li>
<li>
<a href="https://www.linkedin.com/company/nihr-research"
><i class="fa-brands fa-linkedin-in"
><span class="visually-hidden">LinkedIn</span></i
></a
>
</li>
<li>
<a href="https://twitter.com/NIHRresearch"
><i class="fa-brands fa-x-twitter"
><span class="visually-hidden">Twitter</span></i
></a
>
</li>
<li>
<a href="https://www.youtube.com/NIHRtv"
><i class="fa-brands fa-youtube"
><span class="visually-hidden">Youtube</span></i
></a
>
</li>
</ul>
</div>
<div class="col-auto">
<a
href="https://www.gov.uk/government/organisations/department-of-health-and-social-care"
class="funded-by-department-of-health-and-social-care-logo"
>
<img
src="https://www.nihr.ac.uk/layout/4.0/assets/logo-dhsc-reversed.png"
alt="Logo of the Department of Health & Social Care"
/>
</a>
</div>
</div>
<div class="row">
<div class="col">
<ul class="bottom-nav">
<li>© NIHR</li>
</ul>
</div>
</div>
</div>
</footer>
<script src="/design-system.bundle.js"></script>
Options to the footer() macro
-
body: string|null = null -
The footer's main body content, if any.
-
socialMediaLinks: Array<SocialMediaLink> = [] -
The additional social media links to show.
-
navigationLinks: Array<NavigationLink> = [] -
The additional navigation links to show.
Options to SocialMediaLink
-
href: string -
The link's href value.
-
label: string -
The human-readable link label.
-
classes: Array<string> = [] -
An array of CSS classes for the link icon.
Options to NavigationLink
-
href: string -
The link's href value.
-
label: string -
The human-readable link label.
{% from 'macros/component/footer.html' import footer %}
{{ footer() }}
Additional social media links
open this example in its own window
<footer class="main-footer">
<div class="container">
<div class="row">
<div
class="col d-flex align-items-stretch justify-content-between flex-column"
>
<ul class="social-media-links mb-5">
<li>
<a href="https://en-gb.facebook.com/OfficialNIHR/"
><i class="fa-brands fa-facebook-f"
><span class="visually-hidden">Facebook</span></i
></a
>
</li>
<li>
<a href="https://www.linkedin.com/company/nihr-research"
><i class="fa-brands fa-linkedin-in"
><span class="visually-hidden">LinkedIn</span></i
></a
>
</li>
<li>
<a href="https://twitter.com/NIHRresearch"
><i class="fa-brands fa-x-twitter"
><span class="visually-hidden">Twitter</span></i
></a
>
</li>
<li>
<a href="https://www.youtube.com/NIHRtv"
><i class="fa-brands fa-youtube"
><span class="visually-hidden">Youtube</span></i
></a
>
</li>
<li>
<a href="#"
><i class="fa-solid fa-bolt"
><span class="visually-hidden">Shiny lightning bolt</span></i
></a
>
</li>
</ul>
</div>
<div class="col-auto">
<a
href="https://www.gov.uk/government/organisations/department-of-health-and-social-care"
class="funded-by-department-of-health-and-social-care-logo"
>
<img
src="https://www.nihr.ac.uk/layout/4.0/assets/logo-dhsc-reversed.png"
alt="Logo of the Department of Health & Social Care"
/>
</a>
</div>
</div>
<div class="row">
<div class="col">
<ul class="bottom-nav">
<li>© NIHR</li>
</ul>
</div>
</div>
</div>
</footer>
<script src="/design-system.bundle.js"></script>
Options to the footer() macro
-
body: string|null = null -
The footer's main body content, if any.
-
socialMediaLinks: Array<SocialMediaLink> = [] -
The additional social media links to show.
-
navigationLinks: Array<NavigationLink> = [] -
The additional navigation links to show.
Options to SocialMediaLink
-
href: string -
The link's href value.
-
label: string -
The human-readable link label.
-
classes: Array<string> = [] -
An array of CSS classes for the link icon.
Options to NavigationLink
-
href: string -
The link's href value.
-
label: string -
The human-readable link label.
{% from 'macros/component/footer.html' import footer %}
{{ footer({
'socialMediaLinks': [
{
'label': 'Shiny lightning bolt',
'href': '#',
'classes': [
'fa-solid',
'fa-bolt'
]
}
]
}) }}
Navigation links
open this example in its own window
<footer class="main-footer">
<div class="container">
<div class="row">
<div
class="col d-flex align-items-stretch justify-content-between flex-column"
>
<ul class="social-media-links mb-5">
<li>
<a href="https://en-gb.facebook.com/OfficialNIHR/"
><i class="fa-brands fa-facebook-f"
><span class="visually-hidden">Facebook</span></i
></a
>
</li>
<li>
<a href="https://www.linkedin.com/company/nihr-research"
><i class="fa-brands fa-linkedin-in"
><span class="visually-hidden">LinkedIn</span></i
></a
>
</li>
<li>
<a href="https://twitter.com/NIHRresearch"
><i class="fa-brands fa-x-twitter"
><span class="visually-hidden">Twitter</span></i
></a
>
</li>
<li>
<a href="https://www.youtube.com/NIHRtv"
><i class="fa-brands fa-youtube"
><span class="visually-hidden">Youtube</span></i
></a
>
</li>
</ul>
</div>
<div class="col-auto">
<a
href="https://www.gov.uk/government/organisations/department-of-health-and-social-care"
class="funded-by-department-of-health-and-social-care-logo"
>
<img
src="https://www.nihr.ac.uk/layout/4.0/assets/logo-dhsc-reversed.png"
alt="Logo of the Department of Health & Social Care"
/>
</a>
</div>
</div>
<div class="row">
<div class="col">
<ul class="bottom-nav">
<li>
<a href="#">Privacy policy</a>
</li>
<li>© NIHR</li>
</ul>
</div>
</div>
</div>
</footer>
<script src="/design-system.bundle.js"></script>
Options to the footer() macro
-
body: string|null = null -
The footer's main body content, if any.
-
socialMediaLinks: Array<SocialMediaLink> = [] -
The additional social media links to show.
-
navigationLinks: Array<NavigationLink> = [] -
The additional navigation links to show.
Options to SocialMediaLink
-
href: string -
The link's href value.
-
label: string -
The human-readable link label.
-
classes: Array<string> = [] -
An array of CSS classes for the link icon.
Options to NavigationLink
-
href: string -
The link's href value.
-
label: string -
The human-readable link label.
{% from 'macros/component/footer.html' import footer %}
{{ footer({
'navigationLinks': [
{
'label': 'Privacy policy',
'href': '#'
}
]
}) }}
Body content
open this example in its own window
<footer class="main-footer">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-12">
<p><strong>Useful links</strong></p>
<ul>
<li>
<a href="#">Contact Us</a>
</li>
<li>
<a href="#">Press Office</a>
</li>
<li>
<a href="#">Our Visual Identity</a>
</li>
<li>
<a href="#">Glossary</a>
</li>
<li>
<a href="#">Explore NIHR</a>
</li>
</ul>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<p><strong>About</strong></p>
<ul>
<li>
<a href="#">News</a>
</li>
<li>
<a href="#">Blogs</a>
</li>
<li>
<a href="#">Events</a>
</li>
<li>
<a href="#">Jobs</a>
</li>
<li>
<a href="#">Our People</a>
</li>
</ul>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<p><strong>Research Funding</strong></p>
<ul>
<li>
<a href="#">Funding for industry</a>
</li>
<li>
<a href="#">Funding for researchers</a>
</li>
<li>
<a href="#">How we fund research</a>
</li>
<li>
<a href="#">Career development</a>
</li>
<li>
<a href="#">Manage your funding</a>
</li>
</ul>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<p><strong>Research opportunities</strong></p>
<ul>
<li>
<a href="#">Take part in a study</a>
</li>
<li>
<a href="#">Suggest a research topic</a>
</li>
<li>
<a href="#">Become a reviewer</a>
</li>
<li>
<a href="#">Join a funding committee</a>
</li>
<li>
<a href="#">Become a research champion</a>
</li>
</ul>
</div>
</div>
<hr />
<div class="row">
<div
class="col d-flex align-items-stretch justify-content-between flex-column"
>
<ul class="social-media-links mb-5">
<li>
<a href="https://en-gb.facebook.com/OfficialNIHR/"
><i class="fa-brands fa-facebook-f"
><span class="visually-hidden">Facebook</span></i
></a
>
</li>
<li>
<a href="https://www.linkedin.com/company/nihr-research"
><i class="fa-brands fa-linkedin-in"
><span class="visually-hidden">LinkedIn</span></i
></a
>
</li>
<li>
<a href="https://twitter.com/NIHRresearch"
><i class="fa-brands fa-x-twitter"
><span class="visually-hidden">Twitter</span></i
></a
>
</li>
<li>
<a href="https://www.youtube.com/NIHRtv"
><i class="fa-brands fa-youtube"
><span class="visually-hidden">Youtube</span></i
></a
>
</li>
</ul>
</div>
<div class="col-auto">
<a
href="https://www.gov.uk/government/organisations/department-of-health-and-social-care"
class="funded-by-department-of-health-and-social-care-logo"
>
<img
src="https://www.nihr.ac.uk/layout/4.0/assets/logo-dhsc-reversed.png"
alt="Logo of the Department of Health & Social Care"
/>
</a>
</div>
</div>
<div class="row">
<div class="col">
<ul class="bottom-nav">
<li>© NIHR</li>
</ul>
</div>
</div>
</div>
</footer>
<script src="/design-system.bundle.js"></script>
Options to the footer() macro
-
body: string|null = null -
The footer's main body content, if any.
-
socialMediaLinks: Array<SocialMediaLink> = [] -
The additional social media links to show.
-
navigationLinks: Array<NavigationLink> = [] -
The additional navigation links to show.
Options to SocialMediaLink
-
href: string -
The link's href value.
-
label: string -
The human-readable link label.
-
classes: Array<string> = [] -
An array of CSS classes for the link icon.
Options to NavigationLink
-
href: string -
The link's href value.
-
label: string -
The human-readable link label.
{% from 'macros/component/footer.html' import footer %}
{{ footer({
'body': '
<div class="col-lg-3 col-md-6 col-sm-12">
<p><strong>Useful links</strong></p>
<ul>
<li>
<a href="#">Contact Us</a>
</li>
<li>
<a href="#">Press Office</a>
</li>
<li>
<a href="#">Our Visual Identity</a>
</li>
<li>
<a href="#">Glossary</a>
</li>
<li>
<a href="#">Explore NIHR</a>
</li>
</ul>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<p><strong>About</strong></p>
<ul>
<li>
<a href="#">News</a>
</li>
<li>
<a href="#">Blogs</a>
</li>
<li>
<a href="#">Events</a>
</li>
<li>
<a href="#">Jobs</a>
</li>
<li>
<a href="#">Our People</a>
</li>
</ul>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<p><strong>Research Funding</strong></p>
<ul>
<li>
<a href="#">Funding for industry</a>
</li>
<li>
<a href="#">Funding for researchers</a>
</li>
<li>
<a href="#">How we fund research</a>
</li>
<li>
<a href="#">Career development</a>
</li>
<li>
<a href="#">Manage your funding</a>
</li>
</ul>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<p><strong>Research opportunities</strong></p>
<ul>
<li>
<a href="#">Take part in a study</a>
</li>
<li>
<a href="#">Suggest a research topic</a>
</li>
<li>
<a href="#">Become a reviewer</a>
</li>
<li>
<a href="#">Join a funding committee</a>
</li>
<li>
<a href="#">Become a research champion</a>
</li>
</ul>
</div>
' | safe
}) }}