The footer provides copyright, licensing and other information about the website and network. It is included in the default page template.
When to use this component
Use the footer on every page.
Formatted example
HTML code
<footer class="footer" role="contentinfo">
<div class="width-container">
<div class="grid-row">
<div class="grid-column-one-third">
<h2 class="footer--wordmark">Civil Service LGBT+ Network</h2>
</div>
<div class="grid-column-one-third">
<h2 class="footer--heading">Related links</h2>
<ul class="footer--list">
<li class="footer--list-item">
<a class="footer--link" href="https://www.civilservice.lgbt/design-system" title="Visit the design system">
Design system
</a>
</li>
<li class="footer--list-item">
<a class="footer--link" href="https://www.civilservice.lgbt/manuals" title="Read the volunteer manuals">
Volunteer manuals
</a>
</li>
</ul>
</div>
<div class="grid-column-one-third">
<h2 class="footer--heading">Social media</h2>
<ul class="footer--list">
<li class="footer--list-item">
<a class="footer--link" href="//facebook.com/civilservicelgbt" title="Visit our Facebook profile page (Opens in new window)" rel="noreferrer noopener" target="_blank">
Like us on Facebook
</a>
</li>
<li class="footer--list-item">
<a class="footer--link" href="//twitter.com/cslgbt" title="Visit our Twitter profile page (Opens in new window)" rel="noreferrer noopener" target="_blank">
Follow us on Twitter
</a>
</li>
<li class="footer--list-item">
<a class="footer--link" href="//www.flickr.com/photos/civilservicelgbt/" title="Visit our Flickr profile page (Opens in new window)" rel="noreferrer noopener" target="_blank">
Find us on Flickr
</a>
</li>
<li class="footer--list-item">
<a class="footer--link" href="//www.instagram.com/civilservicelgbt" title="Visit our Instagram profile page (Opens in new window)" rel="noreferrer noopener" target="_blank">
Follow us on Instagram
</a>
</li>
</ul>
</div>
</div>
<hr class="footer--section-break">
<div class="footer--meta">
<div class="footer--meta-item">
<p>Website created by Civil Service LGBT+ Network.</p>
</div>
<div class="footer--meta-item">
<p>All content is released under the <a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" title="Read more about the Open Government License. (Opens in new window)" target="_blank">Open Government License</a> unless otherwise stated. Please attribute our work.</p>
</div>
</div>
</div>
</footer>