Overview
Overview
Footers are a common element of web design that appear at the bottom of a webpage. They're used to provide users with additional information that may be helpful or relevant to their needs.
Footers can include links to related content, contact information, copyright notices, and social media icons.
Footers can help to improve the overall user experience by making it easier for users to find the information they need and navigate to other areas of a website.
Our footer
We've designed a standardised footer that must appear consistently on every webpage. The footer shows links that aren't in the main navigation. It also includes access to legal content and contact information. There are also optional components including a website feedback section, emergency contacts and social media content.
Default example
Please note the footer component is best previewed in a new window.
<!--
Dark: <footer class="qld__footer qld__footer--dark" >
-->
<footer class="qld__footer qld__footer--dark" role="contentinfo">
<!-- Section 1: Site title -->
<div class="container-fluid">
<div class="row qld__footer__row">
<div class="col-xs-12 qld__footer__column">
<div class="qld__footer__title">
<h2 class="qld__footer__heading">Site Title</h2>
</div>
</div>
</div>
</div>
<!-- Footer content container -->
<div class="container-fluid">
<div class="row">
<!-- Section 2: Contact us and Site wide CTAs -->
<div class="col-xs-12 col-lg-3 qld__footer__column">
<div class="container-fluid">
<div class="row qld__footer-contact">
<div class="col-xs-12 col-sm-8 col-lg-12">
<h3 class="qld__footer__heading">Get in touch</h3>
<p class="qld__footer__cta-content">
Get in touch for enquiries, feedback, complaints and compliments.
</p>
<p class="qld__footer__cta-content">
<a href="tel:1234567"><svg class="qld__icon qld__icon--lead qld__icon--xs" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="https://www.designsystem.qld.gov.au/?a=167672:dist/mysource_files/img/QLD-icons.svg#phone"></use></svg>Phone: 123 4567
</a>
</p>
<p class="qld__footer__cta-content">
<a href="mailto:email@qld.gov.au"><svg class="qld__icon qld__icon--lead qld__icon--xs" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="https://www.designsystem.qld.gov.au/?a=167672:dist/mysource_files/img/QLD-icons.svg#Email"></use></svg>Email: email@qld.gov.au</a>
</p>
</div>
<div class="col-xs-12 col-sm-4 col-lg-12">
<a href="#" class="qld__btn qld__btn--secondary">Contact us</a>
</div>
</div>
</div>
</div>
<!-- Section 3: Section links (Custom secondary nav items) -->
<div class="col-xs-12 col-lg-2 qld__footer__column">
<nav class="qld__footer__navigation" aria-label="footer navigation">
<h3 class="sr-only">Custom link heading</h3>
<ul class="qld__link-list">
<li>
<a class="qld__footer__clickable__link" href="#">Custome link 1</a>
</li>
<li>
<a class="qld__footer__clickable__link" href="#">Custome link 2</a>
</li>
<li>
<a class="qld__footer__clickable__link" href="#">Custome link 3</a>
</li>
<li>
<a class="qld__footer__clickable__link" href="#">Custome link 4</a>
</li>
<li>
<a class="qld__footer__clickable__link" href="#">Custome link 5</a>
</li>
<li>
<a class="qld__footer__clickable__link" href="#">Custome link 6</a>
</li>
<li>
<a class="qld__footer__clickable__link" href="#">Custome link 7</a>
</li>
</ul>
</nav>
</div>
<!-- Section 4: Mandatory QLD Government Links -->
<div class="col-xs-12 col-lg-2 qld__footer__column">
<nav class="qld__footer__navigation" aria-label="Queensland Government links">
<h3 class="sr-only">Queensland Government links</h3>
<ul class="qld__link-list">
<li>
<a class="qld__footer__clickable__link" href="https://www.health.qld.gov.au/global/copyright-statement">Copyright</a>
</li>
<li>
<a class="qld__footer__clickable__link" href="https://www.health.qld.gov.au/global/disclaimer">Disclaimer</a>
</li>
<li>
<a class="qld__footer__clickable__link" href="https://www.health.qld.gov.au/global/privacy">Privacy</a>
</li>
<li>
<a class="qld__footer__clickable__link" href="https://www.health.qld.gov.au/system-governance/contact-us/access-info">Right to information</a>
</li>
<li>
<a class="qld__footer__clickable__link" href="https://www.qld.gov.au/help/accessibility/">Accessibility</a>
</li>
<li>
<a class="qld__footer__clickable__link" href="https://smartjobs.qld.gov.au/jobtools/jncustomsearch.jobsearch?in_organid=14904">Jobs</a>
</li>
<li>
<a class="qld__footer__clickable__link" href="https://www.qld.gov.au/languages/">Other languages</a>
</li>
</ul>
</nav>
</div>
<!-- Section 5: Social media and engagment -->
<div class="col-xs-12 col-lg-2 qld__footer__column">
<nav class="qld__footer__social" aria-label="social media links">
<h3 class="qld__footer__heading">Follow us</h3>
<ul class="qld__link-list">
<li>
<a class="qld__footer__clickable__link" href="#">
<svg class="qld__icon qld__icon--md" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="https://www.designsystem.qld.gov.au/?a=167672:dist/mysource_files/img/QLD-icons.svg#Facebook"></use></svg>
<span class="qld__footer__social__label">Facebook</span>
</a>
</li>
<li>
<a class="qld__footer__clickable__link" href="#">
<svg class="qld__icon qld__icon--md" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="https://www.designsystem.qld.gov.au/?a=167672:dist/mysource_files/img/QLD-icons.svg#Instagram"></use></svg>
<span class="qld__footer__social__label">Instagram</span>
</a>
</li>
<li>
<a class="qld__footer__clickable__link" href="#">
<svg class="qld__icon qld__icon--md" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="https://www.designsystem.qld.gov.au/?a=167672:dist/mysource_files/img/QLD-icons.svg#LinkedIn"></use></svg>
<span class="qld__footer__social__label">LinkedIn</span>
</a>
</li>
<li>
<a class="qld__footer__clickable__link" href="#">
<svg class="qld__icon qld__icon--md" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="https://www.designsystem.qld.gov.au/?a=167672:dist/mysource_files/img/QLD-icons.svg#YouTube"></use></svg>
<span class="qld__footer__social__label">Youtube</span>
</a>
</li>
<li>
<a class="qld__footer__clickable__link" href="#">
<svg class="qld__icon qld__icon--md" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="https://www.designsystem.qld.gov.au/?a=167672:dist/mysource_files/img/QLD-icons.svg#X"></use></svg>
<span class="qld__footer__social__label">Twitter</span>
</a>
</li>
</ul>
</nav>
</div>
<!-- Section 6: Aknowlegement, Qld Government Coat of Arms and Copyright information -->
<div class="col-xs-12 qld__footer__column">
<div>
<h3 class="qld__footer__heading">
Acknowledgement of Country
</h3>
<p class="qld__footer__acknowledgements">
Queensland Government acknowledges the Traditional Owners of the land and pays respect to Elders past, present and future.
</p>
<a class="qld__footer__logo" href="https://www.qld.gov.au/">
<img class="qld__footer__logo-image" alt="Queensland Government Coat of Arms" src="./?a=160255">
</a>
<h3 class="sr-only">Copyright statement</h3>
<p class="qld__footer__copyrightMessage">
© The State of Queensland 1995-2024 (Organisation) Queensland Government
</p>
<a class="qld__footer__clickable__link qld__footer__copyright-link" href="https://www.qld.gov.au/" rel="external">Queensland Government</a>
</div>
</div>
</div>
</div>
</footer>
Other footer examples
Usage guidelines
A footer may contain links to secondary tasks of interest to the user and can serve as a second chance for convincing users who haven't found what they were looking for.
The footer can also be used as a last resort for hard-to-find content. Users may turn to the footer for additional options that aren't present in the global navigation.
Users do use the footer for navigation, common information that users expect to find in a footer includes contact information, company details, social media links, and related content (Fressenden 2019).
When to use
Footers must be included on all sites and include the mandatory Queensland Government agency links.
How to use
The best way to use a footer is to keep it simple and consistent across all pages. It should be clearly separated from the main content, usually by a horizontal line or a change in background color. The links and information in the footer should be organised in a way that is easy to understand and navigate.
You must include the following links
These government agency links must be displayed in the correct order:
Other information that must be included is:
- the site name
- an Acknowledgement of Country
- the Qld Government Coat of Arms if necessary (see brand guidelines).
Optional information that can be included is:
- ABN
- contact details
- social media links
- links to other pages within the website
- global call to actions.
Don't
- Place anywhere but the bottom of the page
- Use multiple footers per page
- Remove copyright or privacy information
- Use if there are many navigational items – consider multiple link lists instead
- Include more than 2 levels of information hierarchy
- Use unclear link names in the footer (e.g. Company Info or Help versus Contact Us)