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.
The copyright footer must appear at the bottom of all pages without any modifications.
<!-- 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 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 //-->
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).
<!-- 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 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 Andrews</a></li>
</ul>
<h3>Navigation</h3>
<ul>
<li><a href="#">Study at St 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 Andrews</strong><br>
College Gate<br>St 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 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 //-->