Overview
The footer includes many useful links to products, categories, services and resources. A variation of the footer should be included on every page.
Examples
Full variation
<footer class="site-footer" data-swiftype-index="false" data-myob-footer-legacy>
<div class="footer__container">
<div class="footer__links" data-myob-accordion data-accordion-open-on="medium">
<div class="footer__col">
<ul class="footer__section" data-accordion-item>
<li class="footer__heading">
<a href="#">
Footer heading
</a>
<a class="footer__arrow right border--l pl-1 no-display--lg" role="button" data-accordion-toggle data-accordion-target="1">
<svg role="img" class="icon icon-chevron-b icon--xxs fg-white">
<title>Toggle Menu</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#chevron-b"></use>
</svg>
</a>
</li>
<li class="footer__toggle_content" id="1">
<ul class="footer__panel">
<li class="footer__link">
<a href="#">Footer link</a>
</li>
</ul>
</li>
</ul>
<ul class="footer__section" data-accordion-item>
<li class="footer__heading">
<a href="#">
Footer heading
</a>
<a class="footer__arrow right border--l pl-1 no-display--lg" role="button" data-accordion-toggle data-accordion-target="2">
<svg role="img" class="icon icon-chevron-b icon--xxs fg-white">
<title>Toggle Menu</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#chevron-b"></use>
</svg>
</a>
</li>
<li class="footer__toggle_content" id="2">
<ul class="footer__panel">
<li class="footer__link">
<a href="#">Footer link</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="footer__col">
<ul class="footer__section" data-accordion-item>
<li class="footer__heading">
<a href="#">
Footer heading
</a>
<a class="footer__arrow right border--l pl-1 no-display--lg" role="button" data-accordion-toggle data-accordion-target="3">
<svg role="img" class="icon icon-chevron-b icon--xxs fg-white">
<title>Toggle Menu</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#chevron-b"></use>
</svg>
</a>
</li>
<li class="footer__toggle_content" id="3">
<ul class="footer__panel">
<li class="footer__link">
<a href="#">Footer link</a>
</li>
</ul>
</li>
</ul>
<ul class="footer__section" data-accordion-item>
<li class="footer__heading">
<a href="#">
Footer heading
</a>
<a class="footer__arrow right border--l pl-1 no-display--lg" role="button" data-accordion-toggle data-accordion-target="4">
<svg role="img" class="icon icon-chevron-b icon--xxs fg-white">
<title>Toggle Menu</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#chevron-b"></use>
</svg>
</a>
</li>
<li class="footer__toggle_content" id="4">
<ul class="footer__panel">
<li class="footer__link">
<a href="#">Footer link</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="footer__col">
<ul class="footer__section" data-accordion-item>
<li class="footer__heading">
<a href="#">
Footer heading
</a>
<a class="footer__arrow right border--l pl-1 no-display--lg" role="button" data-accordion-toggle data-accordion-target="5">
<svg role="img" class="icon icon-chevron-b icon--xxs fg-white">
<title>Toggle Menu</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#chevron-b"></use>
</svg>
</a>
</li>
<li class="footer__toggle_content" id="5">
<ul class="footer__panel">
<li class="footer__link">
<a href="#">Footer link</a>
</li>
</ul>
</li>
</ul>
<ul class="footer__section" data-accordion-item>
<li class="footer__heading">
<a href="#">
Footer heading
</a>
<a class="footer__arrow right border--l pl-1 no-display--lg" role="button" data-accordion-toggle data-accordion-target="6">
<svg role="img" class="icon icon-chevron-b icon--xxs fg-white">
<title>Toggle Menu</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#chevron-b"></use>
</svg>
</a>
</li>
<li class="footer__toggle_content" id="6">
<ul class="footer__panel">
<li class="footer__link">
<a href="#">Footer link</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="footer__col">
<ul class="footer__section" data-accordion-item>
<li class="footer__heading">
<a href="#">
Footer heading
</a>
<a class="footer__arrow right border--l pl-1 no-display--lg" role="button" data-accordion-toggle data-accordion-target="7">
<svg role="img" class="icon icon-chevron-b icon--xxs fg-white">
<title>Toggle Menu</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#chevron-b"></use>
</svg>
</a>
</li>
<li class="footer__toggle_content" id="7">
<ul class="footer__panel">
<li class="footer__link">
<a href="#">Footer link</a>
</li>
</ul>
</li>
</ul>
<ul class="footer__section" data-accordion-item>
<li class="footer__heading">
<a href="#">
Footer heading
</a>
<a class="footer__arrow right border--l pl-1 no-display--lg" role="button" data-accordion-toggle data-accordion-target="8">
<svg role="img" class="icon icon-chevron-b icon--xxs fg-white">
<title>Toggle Menu</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#chevron-b"></use>
</svg>
</a>
</li>
<li class="footer__toggle_content" id="8">
<ul class="footer__panel">
<li class="footer__link">
<a href="#">Footer link</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="footer__extras">
<div>
<div class="footer__ancillary">
<div class="ancillary-links">
<ul>
<li>
<a href="#" title="">Ancillary link</a>
</li>
</ul>
</div>
<div class="select-country">
<svg role="img" class="icon icon-globe icon--md">
<title>Select Country</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#globe"></use>
</svg>
<select class="dropdown-list">
<option value="https://www.myob.com/nz" selected>New Zealand</option>
<option value="https://www.myob.com/au">Australia</option>
</select>
</div>
</div>
<div class="footer__social">
<div class="social-links">
<ul>
<li>
<a href="https://twitter.com/MYOB">
<svg role="img" class="icon icon-twitter icon--md">
<title>Twitter Icon</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#twitter"></use>
</svg>
</a>
</li>
<li>
<a href="https://www.facebook.com/MYOB">
<svg role="img" class="icon icon-facebook icon--md">
<title>Facebook Icon</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#facebook"></use>
</svg>
</a>
</li>
<li>
<a href="http://www.linkedin.com/company/myob">
<svg role="img" class="icon icon-linkedin icon--md">
<title>Linkedin Icon</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#linkedin"></use>
</svg>
</a>
</li>
<li>
<a href="https://www.instagram.com/myobteam/">
<svg role="img" class="icon icon-instagram icon--md">
<title>Instagram Icon</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#instagram"></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer__copyright">
<p>Copyright © 2017 <a href="https://www.myob.com">MYOB Technology</a> Pty Ltd. All rights reserved.</p>
</div>
</div>
<div class="site-footer__gradient"></div>
</footer>Minimised variation
<footer class="site-footer site-footer--nz" data-swiftype-index="false" data-myob-footer-legacy>
<div class="footer__container">
<div class="footer__extras">
<div>
<div class="footer__ancillary">
<div class="ancillary-links">
<ul>
<li>
<a href="#" title="">Ancillary link</a>
</li>
</ul>
</div>
<div class="select-country">
<svg role="img" class="icon icon-globe icon--md">
<title>Select Country</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#globe"></use>
</svg>
<select class="dropdown-list">
<option value="https://www.myob.com/nz" selected>New Zealand</option>
<option value="https://www.myob.com/au">Australia</option>
</select>
</div>
</div>
<div class="footer__social">
<div class="social-links">
<ul>
<li>
<a href="https://twitter.com/MYOB">
<svg role="img" class="icon icon-twitter icon--md">
<title>Twitter Icon</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#twitter"></use>
</svg>
</a>
</li>
<li>
<a href="https://www.facebook.com/MYOB">
<svg role="img" class="icon icon-facebook icon--md">
<title>Facebook Icon</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#facebook"></use>
</svg>
</a>
</li>
<li>
<a href="http://www.linkedin.com/company/myob">
<svg role="img" class="icon icon-linkedin icon--md">
<title>Linkedin Icon</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#linkedin"></use>
</svg>
</a>
</li>
<li>
<a href="https://www.instagram.com/myobteam/">
<svg role="img" class="icon icon-instagram icon--md">
<title>Instagram Icon</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#instagram"></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer__copyright">
<p>Copyright © 2017 <a href="https://www.myob.com">MYOB Technology</a> Pty Ltd. All rights reserved.</p>
</div>
</div>
<div class="site-footer__gradient"></div>
</footer>Usage guidelines
| Dos | Don'ts |
|---|---|
 Do use the default, full variation on all main website core pages.
|
 Don't place any other page content underneath the Footer.
|
|
At your discretion, you may use the minimised variation on campaign landing pages and similarly isolated digital experiences.
|
Implementation guidelines
We're so sorry, there are currently no implementation guidelines for this component 😥
If you feel you can help out your fellow designers by creating implementation guidelines for this component, please reach out to @marquee on the #astridd Slack channel.