Components
Footer
The footer component displays information that should be placed at the bottom of all pages.
Advanced footer
The advanced footer component contains two parts, a row with contact details, map and social media links, and a row displaying the copyright and policy links.
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<h2 class="sr-only">Contact us</h2>
<p>Oxford Brookes University<br>
Headington Campus<br>
Oxford<br>
<a href="https://maps.google.com/maps?q=OX3+0BP">OX3 0BP</a> <br>
UK<br>
<a href="tel:+441865741111">+44 (0)1865 741111</a></p>
<p><a href="https://www.brookes.ac.uk//about-brookes/contacts-maps-and-campuses/campus-addresses/">Campus addresses »</a></p>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<h2 class="sr-only">Location map</h2>
<p><a id="map-footer-click" href="https://www.brookes.ac.uk/about-brookes/contacts-maps-and-campuses/"><img src="https://www.brookes.ac.uk/FrontendResources/img/map-homepage.png" alt="Oxford Brookes University map"></a></p>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<h2 class="sr-only">Social media</h2>
<ul class="social-icons list-inline">
<li><a href="http://www.facebook.com/oxfordbrookes" class="icon-facebook"><span class="fa fa-facebook" aria-label="Facebook"></span></a></li>
<li><a href="https://twitter.com/oxford_brookes" class="icon-twitter"><span class="fa fa-twitter" aria-label="Twitter"></span></a></li>
<li><a href="http://www.linkedin.com/edu/school?id=12621&oxfordbrookes" class="icon-linkedin"><span class="fa fa-linkedin" aria-label="Linkedin"></span></a></li>
<li><a href="http://www.youtube.com/oxfordbrookes" class="icon-youtube"><span class="fa fa-youtube" aria-label="Youtube"></span></a></li>
<li><a href="http://www.flickr.com/photos/40003115@N05/" class="icon-flickr"><span class="fa fa-flickr" aria-label="Flickr"></span></a></li>
<li><a href="http://www.pinterest.com/oxfordbrookes/oxford-brookes-university/" class="icon-pinterest"><span class="fa fa-pinterest-p" aria-label="Pinterest"></span></a></li>
<li><a href="https://instagram.com/oxfordbrookes/" class="icon-instagram"><span class="fa fa-instagram" aria-label="Instagram"></span></a></li>
<li><a href="http://www.weibo.com/OxfordBrookesUni" class="icon-weibo"><span class="fa fa-weibo" aria-label="Weibo"></span></a></li>
<li><a href="http://plus.google.com/+oxfordbrookes" class="icon-google-plus"><span class="fa fa-google-plus" aria-label="Google plus"></span></a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h2 class="sr-only">Footer Navigation</h2>
<ul class="list-inline text-left">
<li>© 2018 Oxford Brookes University -</li>
<li><a href="https://www.brookes.ac.uk/about-brookes/structure-and-governance/policies-and-financial-statements/">Policies</a> </li>
<li><a href="https://www.brookes.ac.uk/about-brookes/structure-and-governance/policies-and-financial-statements/privacy-policy/">Privacy</a> </li>
<li><a href="https://www.brookes.ac.uk/About-Brookes/Structure-and-governance/Policies-and-financial-statements/Cookie-policy/">Cookies</a> </li>
<li><a href="https://www.brookes.ac.uk/about-brookes/structure-and-governance/policies-and-financial-statements/modern-slavery-and-human-trafficking/">Modern slavery statement</a> </li>
</ul>
</div>
</div>
</div>
</footer>
The contact details, maps and social media links can be changed. The copyright and policy links must always be used on all pages without any modification.
Use aria-label
attributes on each icon (i.e., Facebook, Twitter, etc.).
Headings are hidden to all devices except screen readers with .sr-only
.
Basic footer
The basic version of the footer only includes a row displaying the copyright and policy links.
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2 class="sr-only">Footer Navigation</h2>
<ul class="list-inline text-left">
<li>© 2018 Oxford Brookes University -</li>
<li><a href="https://www.brookes.ac.uk/about-brookes/structure-and-governance/policies-and-financial-statements/">Policies</a> </li>
<li><a href="https://www.brookes.ac.uk/about-brookes/structure-and-governance/policies-and-financial-statements/privacy-policy/">Privacy</a> </li>
<li><a href="https://www.brookes.ac.uk/About-Brookes/Structure-and-governance/Policies-and-financial-statements/Cookie-policy/">Cookies</a> </li>
<li><a href="https://www.brookes.ac.uk/about-brookes/structure-and-governance/policies-and-financial-statements/modern-slavery-and-human-trafficking/">Modern slavery statement</a> </li>
</ul>
</div>
</div>
</div>
</footer>
The copyright and policy links must always be used on all pages without any modification.
These links may be updated regularly over time.
Headings are hidden to all devices except screen readers with .sr-only
.
Changelog
Added | Updates | Current version | Accessibility | Status |
---|---|---|---|---|
31 May 2017 | N/A | 1.0.0 | Accessible | Current |