SDC Pattern Library

Footer

Rationale

There is currently a single footer variant available throughout SDC.

Additional planned variants include:

  • eQ footer: which will use a reduced set of links as it is within a transaction funnel.
  • Internal: which will tailor content and styles to the ‘IUI’.

Research

Usage

Currently in use in eQ

Scope

Global

Dependencies

  • /components/_footer.scss
  • vars/_colours.scss
<footer class="footer" role="contentinfo">
    <div class="container">
        <div class="grid">
            <div class="grid__col col-4@m">
                <h4 class="venus footer__heading">Legal information</h4>
                <ul class="list list--bare">
                    <li>
                        <a href="/cookies-privacy" class="footer__link" target="_blank">Cookies and privacy</a>
                    </li>
                </ul>
            </div>

            <div class="grid__col col-4@m">
                <h4 class="venus footer__heading">About ONS</h4>
                <ul class="list list--bare">
                    <li>
                        <a href="https://www.ons.gov.uk/aboutus/whatwedo" class="footer__link" target="_blank">What we do</a>
                    </li>
                    <li>
                        <a href="/contact-us" class="footer__link" target="_blank">Contact us</a>
                    </li>
                    <li>
                        <a href="https://www.ons.gov.uk/help/accessibility" class="footer__link" target="_blank">Accessibility</a>
                    </li>
                </ul>
            </div>

            <div class="grid__col col-4@m">
                <h4 class="venus footer__heading">Statistics</h4>
                <ul class="list list--bare">
                    <li>
                        <a href="https://www.statisticsauthority.gov.uk/about-the-authority/" class="footer__link" target="_blank">UK Statistics Authority</a>
                    </li>
                    <li>
                        <a href="https://www.ons.gov.uk/releasecalendar" class="footer__link" target="_blank">Release calendar</a>
                    </li>
                    <li>
                        <a href="https://www.ons.gov.uk/news" class="footer__link" target="_blank">News</a>
                    </li>
                </ul>
            </div>

            <div class="grid__col col-12@m footer__license">
                <img alt="OGL" class="footer__ogl-img" src="../../assets/img/UKOpenGovernmentLicence.svg"> All content is available under the
                <a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" class="footer__link">Open Government
                Licence v3.0</a>, except where otherwise stated
            </div>
        </div>
    </div>
</footer>
 
/* No context defined for this component. */