Site footer

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

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.

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

  • Footer logo clicks can be tracked through the original page path, the click URL, and a data attribute attached to the image.

The data attributes are added automatically by the Design System’s “tracking” script.

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