Digital pattern library

Footer

The footer pattern has been updated so that the social media icons are now added using Font Awesome rather than using Scalable Vector Graphics (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.

Rules for the footer

There are two components of the footer: the copyright-footer and navigation menu footer.

Options available


Code
<!-- Begin pattern: footer //-->


<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"><span class="sr-only">Facebook</span><i class="fa fa-facebook-official fa-2x" title="Facebook"></i></a></li>
                        <li><a href="https://twitter.com/univofstandrews/"><span class="sr-only">Twitter</span><i class="fa fa-twitter-square fa-2x" title="Twitter"></i></a></li>
                        <li><a href="https://www.instagram.com/uniofstandrews"><span class="sr-only">Instagram</span><i class="fa fa-instagram fa-2x" title="Instagram"></i></a></li>
                        <li><a href="https://www.youtube.com/user/UofStAndrews"><span class="sr-only">YouTube</span><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 //-->

Code
<!-- Begin pattern: footer //-->


<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"><span class="sr-only">Facebook</span><i class="fa fa-facebook-official fa-2x" title="Facebook"></i></a></li>
                        <li><a href="https://twitter.com/univofstandrews/"><span class="sr-only">Twitter</span><i class="fa fa-twitter-square fa-2x" title="Twitter"></i></a></li>
                        <li><a href="https://www.instagram.com/uniofstandrews"><span class="sr-only">Instagram</span><i class="fa fa-instagram fa-2x" title="Instagram"></i></a></li>
                        <li><a href="https://www.youtube.com/user/UofStAndrews"><span class="sr-only">YouTube</span><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 //-->

Code
<!-- Begin pattern: footer //-->

<div id="affiliation-banner">
    <div class="container">
        <div class="row">
            <div class="col-sm-6 text-center affiliation-logo">
                <a href="#"><img src="../../assets/docs/images/placeholders/university-of-the-year-for-teaching-quality-2017.png" alt="University of the year for teaching quality 2017" title="University of the year for teaching quality 2017"></a>
            </div>
            <div class="col-sm-6 text-center affiliation-logo">
                <a href="#"><img src="../../assets/docs/images/placeholders/tef-gold-logo-transparent.gif" alt="TEF Gold" title="TEF Gold"></a>
            </div>
        </div>
    </div>
</div>

<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"><span class="sr-only">Facebook</span><i class="fa fa-facebook-official fa-2x" title="Facebook"></i></a></li>
                        <li><a href="https://twitter.com/univofstandrews/"><span class="sr-only">Twitter</span><i class="fa fa-twitter-square fa-2x" title="Twitter"></i></a></li>
                        <li><a href="https://www.instagram.com/uniofstandrews"><span class="sr-only">Instagram</span><i class="fa fa-instagram fa-2x" title="Instagram"></i></a></li>
                        <li><a href="https://www.youtube.com/user/UofStAndrews"><span class="sr-only">YouTube</span><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 //-->