Footer

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.

Copy


        <turas-footer footer-version-number="1.1.202410294">
            <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>

Copy


        <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>&#169;2025 NHS Education for Scotland</p>

                        <p id="footerVersionNumber">Version: 1.1.202410294</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

Cards

Header (global)

Examples

Usage

Optional parameters

Accessibility status

Testing

Developer considerations

Suggest a new component

Build accessible experiences

Research user journeys

Was this page helpful?