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.
Variations
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 d-flex">
<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>
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 d-flex">
<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>
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 d-flex">
<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>
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>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</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 d-flex">
<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>
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>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
' | safe
}) }}