Code Club Style Guide

Footer

There isn't quite enough space here to comfortably show the footer in use. Take a look at one of the example pages to see it.

Example
<footer class="o-footer">
<div class="c-grid c-grid--v-top">
<div class="c-col--3">
<p class="o-footer__heading">About</p>
<ul class="o-footer__list">
<li class="o-footer__list-item"><a href="#" class="o-footer__list-link">About Code Club</a></li>
<li class="o-footer__list-item"><a href="#" class="o-footer__list-link">Creating a Code Club</a></li>
<li class="o-footer__list-item"><a href="#" class="o-footer__list-link">Becoming a Coordinator</a></li>
</ul>
</div>
<div class="c-col--3">
<p class="o-footer__heading">Support Code Club</p>
<ul class="o-footer__list">
<li class="o-footer__list-item"><a href="#" class="o-footer__list-link">Donate</a></li>
<li class="o-footer__list-item"><a href="#" class="o-footer__list-link">Shop</a></li>
</ul>
</div>
<div class="c-col--3">
<p class="o-footer__heading">Help</p>
<ul class="o-footer__list">
<li class="o-footer__list-item"><a href="#" class="o-footer__list-link">FAQ</a></li>
<li class="o-footer__list-item"><a href="#" class="o-footer__list-link">Terms of Service</a></li>
</ul>
</div>
<div class="c-col--3">
<p class="o-footer__heading">Useful Links</p>
<ul class="o-footer__list">
<li class="o-footer__list-item"><a href="#" class="o-footer__list-link">Code Club Projects</a></li>
<li class="o-footer__list-item"><a href="#" class="o-footer__list-link">Download Scrach 2</a></li>
<li class="o-footer__list-item"><a href="#" class="o-footer__list-link">Code Club World on Github</a></li>
<li class="o-footer__list-item"><a href="#" class="o-footer__list-link">Code Club UK</a></li>
</ul>
</div>
<div class="c-col--9">
&copy; Code Club World Limited 2012–2016.
All Rights Reserved.
Company No. 081440247. Hosting by <a href="#">Whatevers Hosting</a>
</div>
<div class="c-col--3">
<ul class="o-footer__social-list">
<li class="o-footer__social-list-item">
<a class="o-footer__social-list-link" href="#">
<span class="c-icon c-icon--social-facebook c-icon--white"></span>
</a>
</li>
<li class="o-footer__social-list-item">
<a class="o-footer__social-list-link" href="#">
<span class="c-icon c-icon--social-google c-icon--white"></span>
</a>
</li>
<li class="o-footer__social-list-item">
<a class="o-footer__social-list-link" href="#">
<span class="c-icon c-icon--social-twitter c-icon--white"></span>
</a>
</li>
<li class="o-footer__social-list-item">
<a class="o-footer__social-list-link" href="#">
<span class="c-icon c-icon--social-youtube c-icon--white"></span>
</a>
</li>
</ul>
</div>
</div>
</footer>