Site footer

A site footer should appear at the bottom of every page and highlights links to content about the website.

Open this example in a new window

Sample HTML

<footer class="ds_site-footer  ds_reversed">
    <div class="ds_wrapper">
        <div class="ds_site-footer__content">
            <ul class="ds_site-footer__site-items">
                <li class="ds_site-items__item">
                    <a href="#">Privacy</a>
                </li>
                <li class="ds_site-items__item">
                    <a href="#">Cookies</a>
                </li>
                <li class="ds_site-items__item">
                    <a href="#">Accessibility</a>
                </li>
            </ul>

            <div class="ds_site-footer__copyright">
                <a class="ds_site-footer__copyright-logo" href="http://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/">
                    <img src="/assets/images/logos/ogl.svg" alt="Open Government License" />
                </a>
                <p>All content is available under the <a href="http://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/">Open Government Licence v3.0</a>, except for graphic assets and where otherwise stated</p>
                <p>&copy; Crown Copyright</p>
            </div>

            <div class="ds_site-footer__org">
                <a class="ds_site-footer__org-link" title="The Scottish Government" href="http://www.gov.scot/">
                    <img class="ds_site-footer__org-logo" src="/assets/images/logos/scottish-government.svg" alt="gov.scot" />
                </a>
            </div>
        </div>
    </div>
</footer>

Developer notes

Configuration options

The background colour of the site footer can be overridden.

$site-footer__background

Warning
If you are using a light colour for the footer background colour you should remove the ds_reversed class from the site footer element to meet WCAG contrast rules.

Your value for this should be included before you include the SCSS file.

$site-footer__background: red;
@import '/path/to/components/site-footer/site-footer';

About this pattern

A site footer should include:

  • an additional logo, if a parent or partner organisation’s logo is needed

  • a list of links to items such as the privacy statement, cookie information and accessibility statement

  • a copyright statement – for example, mygov.scot uses: “© Crown copyright. All content is available under the Open Government Licence v3.0, except for all graphic assets and otherwise stated.”

Why we use this pattern

Site footers are a best practice web pattern used to add information about a website at the bottom of web pages.

Evidence

Analytics evidence from mygov.scot and gov.scot shows that users are familiar with the logo as a route to the homepage. Users also interact with all the footer links.

Website analytics

The footer links, copyright notice, and footer logo are trackable as follows:

Footer link clicks can be tracked through the original page path, the click URL, the click text, and a data attribute attached to all links,data-footer="link".

Footer copyright clicks can be tracked through the original page path, the click URL, and a data attribute attached to all copyright links, data-footer="copyright".

To understand user behaviour, footer logo clicks can be tracked through the original page path, the click URL, and a data attribute attached to the image, data-footer="logo". Where multiple logos exist, each should have a different logo-NAME data attribute.

Feedback, help or support

If you need any help or want to give any feedback you can e-mail us at: designsystem@gov.scot

Back to top