Guidance
A footer is a section located at the bottom of every page that serves a standard place to put secondary navigation links and copyright information. The footer helps to create a consistent look and feel across a website or application.
There are 2 footer styles: footer dark and footer light. The dark footer is the first choice for most websites and applications. Extended footers contain the Government of New Brunswick logo and additional secondary navigation options. Extended footers are ideal for websites not using the Government of New Brunswick brand, or for websites and applications that benefit from a secondary global navigation.
Do
- Use the footer to provide links that are relevant to the entire site or application.
- Keep the footer simple and uncluttered to reduce cognitive load for users.
- Keep the footer contents consistent across your website or application.
- Make sure the footer is accessible and visible on all screen sizes and devices.
- Use the footer to provide links, copyright information, or contact details.
Don’t
- Use the footer as the primary means of navigation. This can make it difficult for users to find the information they need.
- Use the footer as a catch-all for excess content or links.
- Wrap the footer in a section or container. A footer is its own section.
Footer dark
The default footer style for Government of New Brunswick websites and applications.
HTML
<footer class="gnb-footer gnb-footer-dark">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<p class="copyright">© Government of New Brunswick</p>
</div>
<div class="col-lg-6">
<h3 class="sr-only" id="footer-links">Information and feedback</h3>
<nav class="nav-legal" aria-labelledby="footer-links">
<ul>
<li>
<a href="#">Feedback</a>
</li>
<li>
<a href="#">Social media</a>
</li>
<li>
<a href="https://www2.gnb.ca/content/gnb/en/admin/privacy.html">Privacy</a>
</li>
<li>
<a href="https://www2.gnb.ca/content/gnb/en/admin/disclaimer.html">Disclaimer</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</footer>
Footer light
A lighter alternative to the default footer style for Government of New Brunswick websites and applications.
HTML
<footer class="gnb-footer gnb-footer-light">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<p class="copyright">© Government of New Brunswick</p>
</div>
<div class="col-lg-6">
<h3 class="sr-only" id="footer-links">Information and feedback</h3>
<nav class="nav-legal" aria-labelledby="footer-links">
<ul>
<li>
<a href="#">Feedback</a>
</li>
<li>
<a href="#">Social media</a>
</li>
<li>
<a href="https://www2.gnb.ca/content/gnb/en/admin/privacy.html">Privacy</a>
</li>
<li>
<a href="https://www2.gnb.ca/content/gnb/en/admin/disclaimer.html">Disclaimer</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</footer>
Footer dark extended
Extended footers contain the Government of New Brunswick logo and additional secondary navigation options.
The white version of the New Brunswick logo (SVG 10kb) must be used on the dark footer.
HTML
<footer class="gnb-footer-extended gnb-footer-dark">
<div class="gnb-footer-extended-content">
<div class="container">
<div class="row">
<div class="logo col-lg-3">
<img src="../img/NB_white.svg" alt="Government of New Brunswick" />
</div>
<div class="col-6 col-md-4 col-lg-3">
<h3 id="footer-nav-heading-1">Heading</h3>
<nav class="nav-footer" aria-labelledby="footer-nav-heading-1">
<ul>
<li>
<a href="#">Lorem ipsum</a>
</li>
<li>
<a class="external-link" href="#">Dolor sit amet</a>
</li>
<li>
<a href="#">Consectetur adipiscing elit</a>
</li>
</ul>
</nav>
</div>
<div class="col-6 col-md-4 col-lg-3">
<h3 id="footer-nav-heading-2">Heading</h3>
<nav class="nav-footer" aria-labelledby="footer-nav-heading-2">
<ul>
<li>
<a href="#">Ullamco laboris nisi</a>
</li>
<li>
<a href="#">Aliquip ex ea commodo</a>
</li>
<li>
<a href="#">Duis aute irure</a>
</li>
</ul>
</nav>
</div>
<div class="col-6 col-md-4 col-lg-3">
<h3 id="footer-nav-heading-3">Heading</h3>
<nav class="nav-footer" aria-labelledby="footer-nav-heading-3">
<ul>
<li>
<a href="#">Sed do eiusmod</a>
</li>
<li>
<a href="#">Tempor incididunt</a>
</li>
<li>
<a class="external-link" href="#">Ut labore et dolore</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="gnb-footer">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<p class="copyright">© Government of New Brunswick</p>
</div>
<div class="col-lg-6">
<h3 class="sr-only" id="footer-links">Information and feedback</h3>
<nav class="nav-legal" aria-labelledby="footer-links">
<ul>
<li>
<a href="#">Feedback</a>
</li>
<li>
<a href="#">Social media</a>
</li>
<li>
<a href="https://www2.gnb.ca/content/gnb/en/admin/privacy.html">Privacy</a>
</li>
<li>
<a
href="https://www2.gnb.ca/content/gnb/en/admin/disclaimer.html">Disclaimer</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</footer>
Footer light extended
Extended footers contain the Government of New Brunswick logo and additional secondary navigation options.
The full colour version of the New Brunswick logo (SVG 12kb) must be used on the light footer.
HTML
<footer class="gnb-footer-extended gnb-footer-light">
<div class="gnb-footer-extended-content">
<div class="container">
<div class="row">
<div class="logo col-lg-3">
<img src="../img/NB.svg" alt="Government of New Brunswick" />
</div>
<div class="col-6 col-md-4 col-lg-3">
<h3 id="footer-nav-heading-1">Heading</h3>
<nav class="nav-footer" aria-labelledby="footer-nav-heading-1">
<ul>
<li>
<a href="#">Lorem ipsum</a>
</li>
<li>
<a class="external-link" href="#">Dolor sit amet</a>
</li>
<li>
<a href="#">Consectetur adipiscing elit</a>
</li>
</ul>
</nav>
</div>
<div class="col-6 col-md-4 col-lg-3">
<h3 id="footer-nav-heading-2">Heading</h3>
<nav class="nav-footer" aria-labelledby="footer-nav-heading-2">
<ul>
<li>
<a href="#">Ullamco laboris nisi</a>
</li>
<li>
<a href="#">Aliquip ex ea commodo</a>
</li>
<li>
<a href="#">Duis aute irure</a>
</li>
</ul>
</nav>
</div>
<div class="col-6 col-md-4 col-lg-3">
<h3 id="footer-nav-heading-3">Heading</h3>
<nav class="nav-footer" aria-labelledby="footer-nav-heading-3">
<ul>
<li>
<a href="#">Sed do eiusmod</a>
</li>
<li>
<a href="#">Tempor incididunt</a>
</li>
<li>
<a class="external-link" href="#">Ut labore et dolore</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="gnb-footer">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<p class="copyright">© Government of New Brunswick</p>
</div>
<div class="col-lg-6">
<h3 class="sr-only" id="footer-links">Information and feedback</h3>
<nav class="nav-legal" aria-labelledby="footer-links">
<ul>
<li>
<a href="#">Feedback</a>
</li>
<li>
<a href="#">Social media</a>
</li>
<li>
<a href="https://www2.gnb.ca/content/gnb/en/admin/privacy.html">Privacy</a>
</li>
<li>
<a
href="https://www2.gnb.ca/content/gnb/en/admin/disclaimer.html">Disclaimer</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</footer>