Footer
A footer is the bottom section of a page that can contain navigation links, z-clause information, social links and much more.
Usage
The footer component should go at the bottom of the page.
Within the footer nav, relevant navigation links should be added for an easier user journey around the site.
Accessible attributes
| Accessible attribute | Description |
|---|---|
aria-expanded="true" |
This attribute is added to the button of the footer accordion and is set to true when expanded, otherwise false. |
aria-controls="ID" |
This attribute is added to the button of the footer accordion and the value is set to the ID of the panel. |
aria-labelledby="IDREF" |
This attribute is added to the panel of the footer accordion and the value is set to the buttons ID Reference, linking both panel and button together. |
JavaScript Support
| JavaScript Support class name | Description |
|---|---|
slb-show |
This class is added to the button of the footer accordion to show and hide the accordion content |
footer\footer.hbs
<footer class="slb-footer">
<div class="container">
<div class="row justify-content-end">
<div class="col slb-footer-strapline">
<h2 class="slb-footer-strapline__title">There's a lot to look forward to</h2>
</div>
</div>
</div>
<div class="slb-footer-thread">
<svg xmlns="http://www.w3.org/2000/svg" class="slb-footer-thread__image" preserveAspectRatio="none" viewBox="0 0 1440 141">
<linearGradient id="a-example" x1="12.962%" x2="96.805%" y1="50%" y2="50%">
<stop offset="0%" stop-color="#FB0" />
<stop offset="54.756%" stop-color="#FFDF00" />
<stop offset="87.313%" stop-color="#FFDF00" />
<stop offset="100%" stop-color="#FB0" />
</linearGradient>
<filter id="b-example" width="101.9%" height="127.4%" x="-1%" y="-13.7%" filterUnits="objectBoundingBox">
<feGaussianBlur in="SourceGraphic" stdDeviation="4.286" />
</filter>
<g fill="none" fill-rule="evenodd">
<path stroke="url(#a-example)" stroke-width="6" d="M-3 51.23C245.17-4.168 493.752-3.74 742.745 52.513c360.2 81.378 575.447 35.154 700.255-29.455" />
<path stroke="#6E6D6A" stroke-opacity=".3" stroke-width="2" d="M-5 52.403C243.542 6.07 492.496 11.008 741.864 67.213c321.931 72.56 528.038 65.811 657.263 21.73 15.742-5.37 30.343-11.294 43.873-17.695"
filter="url(#b-example)" />
</g>
</svg>
</div>
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-md-4 col-lg-2">
<h3 class="slb-footer__title">Have a question?</h3>
<ul class="slb-footer-nav slb-footer-nav--inline">
<li class="slb-footer-nav__item">
<a href="#" class="slb-footer-nav__item--link">FAQs</a>
</li>
<li class="slb-footer-nav__item">
<a href="#" class="slb-footer-nav__item--link">Contact Us</a>
</li>
</ul>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-2">
<h3 class="slb-footer__title">Connect with us</h3>
<ul class="slb-footer-nav slb-footer-nav--inline">
<li class="slb-footer-nav__item">
<a class="slb-footer-nav__social-link" href="#" target="_blank" rel="noopener" aria-label="Facebook">
<svg class="slb-footer-nav__social-icon" viewBox="0 0 448 512">
<path d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z" /></svg>
</a>
</li>
<li class="slb-footer-nav__item">
<a class="slb-footer-nav__social-link" href="#" target="_blank" rel="noopener" aria-label="Twitter">
<svg class="slb-footer-nav__social-icon" viewBox="0 0 512 512">
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z" /></svg>
</a>
</li>
<li class="slb-footer-nav__item">
<a class="slb-footer-nav__social-link" href="#" target="_blank" rel="noopener" aria-label="LinkedIn">
<svg class="slb-footer-nav__social-icon" viewBox="0 0 448 512">
<path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z" /></svg>
</a>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-6 col-lg-3">
<ul class="slb-footer-nav">
<li class="slb-footer-nav__item slb-footer-nav__item--column-title">
<h3 class="slb-footer-nav__title"><a href="#" class="slb-footer-nav__title-link">Cookie policy <span class="fa fa-external-link"></span></a></h3>
</li>
</ul>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<ul class="slb-footer-nav">
<li class="slb-footer-nav__item slb-footer-nav__item--column-title">
<h3 class="slb-footer-nav__title"><a href="#" class="slb-footer-nav__title-link">Privacy policy <span class="fa fa-external-link"></span></a></h3>
</li>
</ul>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<ul class="slb-footer-nav">
<li class="slb-footer-nav__item slb-footer-nav__item--column-title">
<h3 class="slb-footer-nav__title"><a href="#" class="slb-footer-nav__title-link">Legal information <span class="fa fa-external-link"></span></a></h3>
</li>
</ul>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<ul class="slb-footer-nav">
<li class="slb-footer-nav__item slb-footer-nav__item--column-title">
<h3 class="slb-footer-nav__title"><a href="#" class="slb-footer-nav__title-link">Accessibility <span class="fa fa-external-link"></span></a></h3>
</li>
</ul>
</div>
<div class="col-12">
<div class="slb-footer-row-divider"></div>
</div>
</div>
<div class="row">
<div class="col-12 d-flex flex-wrap">
<div class="slb-accordion">
<button class="slb-accordion__toggle collapsed" id="slb-footer-accordion-toggle-1" data-toggle="collapse" data-target="#slb-footer-accordion-1" aria-expanded="true" aria-controls="slb-footer-accordion-1">
<svg class="slb-accordion__toggle-icon" viewBox="0 0 512 512" id="chevron-circle-down-example">
<title>chevron-circle-down</title><path d="M504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zM273 369.9l135.5-135.5c9.4-9.4 9.4-24.6 0-33.9l-17-17c-9.4-9.4-24.6-9.4-33.9 0L256 285.1 154.4 183.5c-9.4-9.4-24.6-9.4-33.9 0l-17 17c-9.4 9.4-9.4 24.6 0 33.9L239 369.9c9.4 9.4 24.6 9.4 34 0z"/>
</svg>Website brand and provider details
</button>
<div id="slb-footer-accordion-1" class="slb-accordion__panel collapse" aria-labelledby="slb-footer-accordion-toggle-1">
<p>
Standard Life is the brand for Standard Life’s UK direct customer proposition and features
products provided by Standard Life Assurance Limited and other subsidiaries of Standard
Life Aberdeen plc. See Legal information for our list of product providers. © 2019
Standard Life Aberdeen, images reproduced under licence. All rights reserved.
</p>
</div>
</div>
<p class="slb-footer__copyright">© 2019 Standard Life Aberdeen</p>
</div>
</div>
</div>
</footer>
Source:
components/_footer.scss