Digital pattern library

Footer

The footer pattern has been updated so that the social media icons are now added using Font Awesome rather then using SVG images – see old-copyright-footer example below. This support will be removed in a future version of the DPL, so please do not use the old-category-header markup.

The footer pattern presents the information that should be found at the bottom of all pages.

There are two components of the footer: the copyright-footer and navigation menu footer. The copyright-footer contains copyright, legal information and social media links. The navigation-menu-footer contains links and contact information relevant to the website.


Copyright footer

The copyright footer must appear at the bottom of all pages without any modifications.

Code
<!-- Begin pattern: footer //-->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<footer role="contentinfo">

    <div id="university-footer">
        <div class="container">
            <div class="row">

                <div class="col-lg-8">
                    <p id="footer-charity" role="contentinfo">© <script>document.write(new Date().getFullYear());</script>2025 University of St&nbsp;Andrews is a charity registered in Scotland, No SC013532.</p>

                    <ul id="footer-links">
                        <li><a href="http://www.st-andrews.ac.uk/terms/">Terms and conditions</a></li>
                        <li><a href="http://www.st-andrews.ac.uk/help/">Website help</a></li>
                    </ul>
                </div>

                <div class="col-lg-4">
                    <ul id="social">
                        <li><a href="https://www.facebook.com/uniofsta"><i class="fa fa-facebook-official fa-2x" title="Facebook"></i></a></li>
                        <li><a href="https://twitter.com/univofstandrews/"><i class="fa fa-twitter-square fa-2x" title="Twitter"></i></a></li>
                        <li><a href="https://www.instagram.com/uniofstandrews"><i class="fa fa-instagram fa-2x" title="Instagram"></i></a></li>
                        <li><a href="https://www.youtube.com/uofstandrews"><i class="fa fa-youtube-square fa-2x" title="YouTube"></i></a></li>
                    </ul>
                </div>

            </div> <!-- End .row //-->
        </div> <!-- End .container //-->
    </div> <!-- End #university-footer //-->
</footer>
<!-- End pattern: footer //-->

Navigation menu footer

The navigation menu footer should be used if needed and should contain content relevant to the section of the website where the page is located.

The navigation menu footer must never be included without the copyright footer below it.

The third column in the navigation menu footer must be reserved for the contact information.

Custom icons for social media links must not be added. Unique social media links must use text and can only be added to the navigation menu footer (see example below).

Code
<!-- Begin pattern: footer //-->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<footer role="contentinfo">
        <div id="website-footer">
            <div class="container">
                <div class="row">
                    <div class="col-sm-4" id="footer-tools">
                            <h3>Your St&nbsp;Andrews</h3>
                            <ul>
                                <li><a href="#">Current students</a></li>
                                <li><a href="#">Postgraduate</a></li>
                                <li><a href="#">Staff</a></li>
                                <li><a href="#">Jobs at St&nbsp;Andrews</a></li>
                            </ul>

                            <h3>Navigation</h3>
                            <ul>
                                <li><a href="#">Study at St&nbsp;Andrews</a></li>
                                <li><a href="#">Research</a></li>
                                <li><a href="#">Alumni and donors</a></li>
                                <li><a href="#">Community facilities</a></li>
                                <li><a href="#">Business services</a></li>
                                <li><a href="#">About</a></li>
                            </ul>

                            <h3>Social media</h3>
                            <ul>
                                <li><a href="#">Facebook</a></li>
                                <li><a href="#">Twitter</a></li>
                                <li><a href="#">Instagram</a></li>
                                <li><a href="#">Youtube</a></li>
                            </ul>
                    </div>

                    <div class="col-sm-4" id="footer-navigation">
                            <h3>Subjects</h3>
                            <ul>
                                <li><a href="#">Art History</a></li>
                                <li><a href="#">Biology</a></li>
                                <li><a href="#">Chemistry</a></li>
                                <li><a href="#">Classics</a></li>
                                <li><a href="#">Computer Science</a></li>
                                <li><a href="#">Divinity</a></li>
                                <li><a href="#">Earth and Environmental Sciences</a></li>
                                <li><a href="#">Economics and Finance</a></li>
                                <li><a href="#">English</a></li>
                                <li><a href="#">Film Studies</a></li>
                                <li><a href="#">Geography and Sustainable Development</a></li>
                                <li><a href="#">History</a></li>
                                <li><a href="#">International Relations</a></li>
                                <li><a href="#">Languages and Comparative Literature</a></li>
                                <li><a href="#">Management</a></li>
                                <li><a href="#">Mathematics and Statistics</a></li>
                                <li><a href="#">Medicine</a></li>
                                <li><a href="#">Philosophy</a></li>
                                <li><a href="#">Physics and Astronomy</a></li>
                                <li><a href="#">Psychology and Neuroscience</a></li>
                                <li><a href="#">Social Anthropology</a></li>
                            </ul>
                    </div>

                    <div class="col-sm-4" id="footer-contact">
                            <h3><a href="/contact/">Contact us</a></h3>
                            <address>
                                <p>
                                    <strong>University of St&nbsp;Andrews</strong><br>
                                    College Gate<br>St&nbsp;Andrews, Fife<br>KY16 9AJ<br>Scotland, UK
                                </p>
                                <p><strong>Phone:</strong> +44 (0)1334 47 6161</p>
                            </address>
                    </div>
                </div> <!-- End .row -->
            </div> <!-- End .container -->
        </div> <!-- End #website-footer -->

    <div id="university-footer">
        <div class="container">
            <div class="row">

                <div class="col-lg-8">
                    <p id="footer-charity" role="contentinfo">© <script>document.write(new Date().getFullYear());</script>2025 University of St&nbsp;Andrews is a charity registered in Scotland, No SC013532.</p>

                    <ul id="footer-links">
                        <li><a href="http://www.st-andrews.ac.uk/terms/">Terms and conditions</a></li>
                        <li><a href="http://www.st-andrews.ac.uk/help/">Website help</a></li>
                    </ul>
                </div>

                <div class="col-lg-4">
                    <ul id="social">
                        <li><a href="https://www.facebook.com/uniofsta"><i class="fa fa-facebook-official fa-2x" title="Facebook"></i></a></li>
                        <li><a href="https://twitter.com/univofstandrews/"><i class="fa fa-twitter-square fa-2x" title="Twitter"></i></a></li>
                        <li><a href="https://www.instagram.com/uniofstandrews"><i class="fa fa-instagram fa-2x" title="Instagram"></i></a></li>
                        <li><a href="https://www.youtube.com/uofstandrews"><i class="fa fa-youtube-square fa-2x" title="YouTube"></i></a></li>
                    </ul>
                </div>

            </div> <!-- End .row //-->
        </div> <!-- End .container //-->
    </div> <!-- End #university-footer //-->
</footer>
<!-- End pattern: footer //-->