Footer
The footer pattern presents the information that should be found at the bottom of all pages.
Rules for the footer
There are three components of the footer: the copyright footer, navigation menu footer and feedback footer.
- The copyright footer must appear at the bottom of all pages without any modification. It contains copyright information, legal information and social media links.
- The navigation menu footer contains links and contact information relevant to a specific section of the website.
- The feedback footer provides a way to gather simple feedback on the usefulness of a specific page. It must appear directly before any of the other footer components.
- The 'cookie preferences' link in the copyright footer should be used to access controls for a user to manage which cookies are set on their device.
In addition to this, logos can be used in the following places:
- Within the footer if a single logo associated with a sub-brand.
- Above the footer if used to show awards and accreditations.
Options available
Copyright footer
Code
Example
<!-- Begin pattern: footer //-->
<footer id="footer">
<div id="university-footer">
<div class="container">
<div class="row">
<div class="col-lg-8">
<p id="footer-charity">© 2020 The University of St Andrews is a charity registered in Scotland, No SC013532.</p>
<ul id="footer-links">
<li><a class="cookie-control__open" aria-controls="ccc-module">Cookie preferences</a></li>
<li><a href="https://www.st-andrews.ac.uk/digital-standards/accessibility/accessibility-statement/">Accessibility statement</a></li>
<li><a href="https://www.st-andrews.ac.uk/terms/">Terms and conditions</a></li>
<li><a href="https://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-square 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>
</div>
</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
Example
<!-- Begin pattern: footer //-->
<footer id="footer">
<div id="website-footer">
<div class="container">
<div class="row">
<div class="col-sm-4" id="footer-tools">
<h2>Navigation</h2>
<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>
<h2>Social media</h2>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">YouTube</a></li>
</ul>
</div>
<div class="col-sm-4" id="footer-navigation">
<h2>School websites</h2>
<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">
<h2><a href="/contact/">Contact us</a></h2>
<address>
<p>
<strong>University of St Andrews</strong><br>
College Gate<br>St Andrews<br>KY16 9AJ
</p>
<p><strong>Phone:</strong> +44 (0)1334 47 6161</p>
</address>
</div>
</div>
</div>
</div> <!-- End #website-footer -->
<div id="university-footer">
<div class="container">
<div class="row">
<div class="col-lg-8">
<p id="footer-charity">© 2020 The University of St Andrews is a charity registered in Scotland, No SC013532.</p>
<ul id="footer-links">
<li><a class="cookie-control__open" aria-controls="ccc-module">Cookie preferences</a></li>
<li><a href="https://www.st-andrews.ac.uk/digital-standards/accessibility/accessibility-statement/">Accessibility statement</a></li>
<li><a href="https://www.st-andrews.ac.uk/terms/">Terms and conditions</a></li>
<li><a href="https://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-square 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>
</div>
</div> <!-- End #university-footer //-->
</footer>
<!-- End pattern: footer //-->Navigation menu footer with feedback option
- When used, the feedback option must appear above both the navigation menu footer and the copyright footer.
- When a user choses a feedback option, an appropriate confirmation message must be shown.
Code
Example
<!-- Begin pattern: footer //-->
<footer id="footer">
<div class="feedback-footer" aria-live="polite">
<div class="container">
<span class="feedback-footer__heading">Did you find this page useful?</span> <button id="feedback-footer__button--yes" class="btn btn-tertiary-1">Yes</button> <button id="feedback-footer__button--no" class="btn btn-tertiary-1">No</button>
</div>
</div>
<div id="website-footer">
<div class="container">
<div class="row">
<div class="col-sm-4" id="footer-tools">
<h2>Navigation</h2>
<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>
<h2>Social media</h2>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">YouTube</a></li>
</ul>
</div>
<div class="col-sm-4" id="footer-navigation">
<h2>School websites</h2>
<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">
<h2><a href="/contact/">Contact us</a></h2>
<address>
<p>
<strong>University of St Andrews</strong><br>
College Gate<br>St Andrews<br>KY16 9AJ
</p>
<p><strong>Phone:</strong> +44 (0)1334 47 6161</p>
</address>
</div>
</div>
</div>
</div> <!-- End #website-footer -->
<div id="university-footer">
<div class="container">
<div class="row">
<div class="col-lg-8">
<p id="footer-charity">© 2020 The University of St Andrews is a charity registered in Scotland, No SC013532.</p>
<ul id="footer-links">
<li><a class="cookie-control__open" aria-controls="ccc-module">Cookie preferences</a></li>
<li><a href="https://www.st-andrews.ac.uk/digital-standards/accessibility/accessibility-statement/">Accessibility statement</a></li>
<li><a href="https://www.st-andrews.ac.uk/terms/">Terms and conditions</a></li>
<li><a href="https://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-square 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>
</div>
</div> <!-- End #university-footer //-->
</footer>
<!-- End pattern: footer //-->Awards and affiliations logo pre-footer with two logos
The awards and affiliations logo pre-footer is used to display logos of affiliated partners, awards, and certifications.
- The awards and affiliations logo pre-footer must only be used on the homepage of a website.
- Links may be included to the relevant website or webpage for each logo.
Code
Example
<!-- 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/medal-512.png" alt="Award 1" title="Award 1"></a>
</div>
<div class="col-sm-6 text-center affiliation-logo">
<a href="#"><img src="../../assets/docs/images/placeholders/medal2-512.png" alt="Award 2" title="Award 2"></a>
</div>
</div>
</div>
</div>
<footer id="footer">
<div id="website-footer">
<div class="container">
<div class="row">
<div class="col-sm-4" id="footer-tools">
<h2>Your St Andrews</h2>
<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>
<h2>Navigation</h2>
<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>
</div>
<div class="col-sm-4" id="footer-navigation">
<h2>School websites</h2>
<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">
<h2><a href="/contact/">Contact us</a></h2>
<address>
<p>
<strong>University of St Andrews</strong><br>
College Gate<br>St Andrews<br>KY16 9AJ
</p>
<p><strong>Phone:</strong> +44 (0)1334 47 6161</p>
</address>
</div>
</div>
</div>
</div> <!-- End #website-footer -->
<div id="university-footer">
<div class="container">
<div class="row">
<div class="col-lg-8">
<p id="footer-charity">© 2020 The University of St Andrews is a charity registered in Scotland, No SC013532.</p>
<ul id="footer-links">
<li><a class="cookie-control__open" aria-controls="ccc-module">Cookie preferences</a></li>
<li><a href="https://www.st-andrews.ac.uk/digital-standards/accessibility/accessibility-statement/">Accessibility statement</a></li>
<li><a href="https://www.st-andrews.ac.uk/terms/">Terms and conditions</a></li>
<li><a href="https://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-square 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>
</div>
</div> <!-- End #university-footer //-->
</footer>
<!-- End pattern: footer //-->Awards and affiliations logo pre-footer with three logos
Code
Example
<!-- Begin pattern: footer //-->
<div id="affiliation-banner">
<div class="container">
<div class="row">
<div class="col-sm-4 text-center affiliation-logo">
<a href="#"><img src="../../assets/docs/images/placeholders/medal-512.png" alt="Award 1" title="Award 1"></a>
</div>
<div class="col-sm-4 text-center affiliation-logo">
<a href="#"><img src="../../assets/docs/images/placeholders/medal-512.png" alt="Award 2" title="Award 2"></a>
</div>
<div class="col-sm-4 text-center affiliation-logo">
<a href="#"><img src="../../assets/docs/images/placeholders/medal2-512.png" alt="Award 3" title="Award 3"></a>
</div>
</div>
</div>
</div>
<footer id="footer">
<div id="website-footer">
<div class="container">
<div class="row">
<div class="col-sm-4" id="footer-tools">
<h2>Your St Andrews</h2>
<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>
<h2>Navigation</h2>
<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>
</div>
<div class="col-sm-4" id="footer-navigation">
<h2>School websites</h2>
<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">
<h2><a href="/contact/">Contact us</a></h2>
<address>
<p>
<strong>University of St Andrews</strong><br>
College Gate<br>St Andrews<br>KY16 9AJ
</p>
<p><strong>Phone:</strong> +44 (0)1334 47 6161</p>
</address>
</div>
</div>
</div>
</div> <!-- End #website-footer -->
<div id="university-footer">
<div class="container">
<div class="row">
<div class="col-lg-8">
<p id="footer-charity">© 2020 The University of St Andrews is a charity registered in Scotland, No SC013532.</p>
<ul id="footer-links">
<li><a class="cookie-control__open" aria-controls="ccc-module">Cookie preferences</a></li>
<li><a href="https://www.st-andrews.ac.uk/digital-standards/accessibility/accessibility-statement/">Accessibility statement</a></li>
<li><a href="https://www.st-andrews.ac.uk/terms/">Terms and conditions</a></li>
<li><a href="https://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-square 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>
</div>
</div> <!-- End #university-footer //-->
</footer>
<!-- End pattern: footer //-->Navigation menu footer with additional sub-branding
The footer may be used to introduce additional branding that is unique to a particular website.- The logo should be placed at the top of the first column.
- Where possible an SVG file type should be used to provide a crisp image at all sizes. If this is not possible then a PNG with transparent background should be used.
- The image should be no larger than 280px wide and 180px high.
Code
<!-- Begin pattern: footer //-->
<footer id="footer">
<div id="website-footer">
<div class="container">
<div class="row">
<div class="col-sm-4" id="footer-tools">
<div class="website-footer__image">
<img src="../../assets/docs/images/placeholders/280x180.png" alt=""/>
</div>
</div>
<div class="col-sm-4" id="footer-navigation">
<h2>Navigation</h2>
<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>
</div>
<div class="col-sm-4" id="footer-contact">
<h2><a href="/contact/">Contact us</a></h2>
<address>
<p>
<strong>University of St Andrews</strong><br>
College Gate<br>St Andrews<br>KY16 9AJ
</p>
<p><strong>Phone:</strong> +44 (0)1334 47 6161</p>
</address>
</div>
</div>
</div>
</div> <!-- End #website-footer -->
<div id="university-footer">
<div class="container">
<div class="row">
<div class="col-lg-8">
<p id="footer-charity">© 2020 The University of St Andrews is a charity registered in Scotland, No SC013532.</p>
<ul id="footer-links">
<li><a class="cookie-control__open" aria-controls="ccc-module">Cookie preferences</a></li>
<li><a href="https://www.st-andrews.ac.uk/digital-standards/accessibility/accessibility-statement/">Accessibility statement</a></li>
<li><a href="https://www.st-andrews.ac.uk/terms/">Terms and conditions</a></li>
<li><a href="https://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-square 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>
</div>
</div> <!-- End #university-footer //-->
</footer>
<!-- End pattern: footer //-->