Footer
Located at the bottom of every page, providing key links, copyright information, and branding.
Examples
The footer sits at the bottom of every page and provides key links, copyright and branding. This is a global component, meaning it is the same on every page and should not be edited.
Usage
Do:
- use the global footer code exactly as supplied
Avoid:
- adding or removing any elements to the global footer
The header (global), footer and helpdesk are added by installing the NES.Turas.UiComponents nuget package. A README file and assistance to set this up will be supplied at time.
<turas-footer footer-version-number="1.2.3.4">
<li><a href="/">Accessibility</a></li>
<li><a href="/">Privacy</a></li>
<li><a href="/">Terms and Conditions</a></li>
<li class="helpdesk">
<a href="" class="btn btn-success" style="padding: 5px 10px;"> Helpdesk <span class="fa fa-question-circle"></span></a>
</li>
</turas-footer>
<div id="footer">
<footer class="turas-ui-components-footer">
<div class="container">
<div class="row">
<div class="col-md-3">
<img class="turasLogo" src="/lib/turas-design-system/dist/img/TurasLogo.svg" alt="" />
</div>
<div class="col-md-9">
<div class="taglineWrapper">
<a href="https://www.nationaldigitalplatform.scot/" target="_blank">
<img src="/lib/turas-design-system/dist/img/NDP-Icon.svg" alt="National Digital Platform logo" />
<p>Built using the National Digital Platform</p>
</a>
</div>
</div>
</div> <!-- /.row -->
<div class="row">
<div class="footer-links col">
<ul class="list-unstyled mb-0">
<li><a href="/">Accessibility</a></li>
<li><a href="/">Privacy</a></li>
<li><a href="/">Terms and Conditions</a></li>
<li class="helpdesk">
<a href="" class="btn btn-success" style="padding: 5px 10px;"> Helpdesk <span class="fa fa-question-circle"></span></a>
</li>
</ul>
</div>
</div> <!-- /.row -->
</div> <!-- /.container -->
<div class="subfooter">
<div class="container">
<div class="row">
<div class="col">
<p>©2026 NHS Education for Scotland</p>
<p id="footerVersionNumber">Version: 1.2.3.4</p>
</div>
</div>
</div>
</div> <!-- /.subfooter-->
</footer></div>
Optional parameters
- No optional parameters
Accessibility status
This component is fully compliant with the WCAG 2.2 standard.
Testing
- check keyboard navigation to ensure the footer does not trap focus and that all interactive elements within the footer are accessible with a keyboard , for example any links or buttons
- test footer with screen readers to ensure interactive elements are announced as expected within the footer
Developer considerations
- make sure that the footer is consistently in the same place on every page
- make sure that the footer is created using the HTML tag <Footer> this allows users who are using assistive technology to navigate via landmarks to find the footer
