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">
<div class="footer__col">
<ul class="footer__section">
<li class="footer__heading">
<a href="#">
Footer heading
</a>
<a role="button" data-myob-display-toggle data-display-toggle-target="1" class="toggle is-active" data-responsive data-anim-in="expand-in-down-small" data-anim-out="expand-out-up-small">
<svg role="img" class="icon icon-chevron-b icon--xxs">
<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" data-display-toggle="1">
<ul class="footer__panel">
<li class="footer__link">
<a href="#">Footer link</a>
</li>
</ul>
</li>
</ul>
<ul class="footer__section">
<li class="footer__heading">
<a href="#">
Footer heading
</a>
<a role="button" data-myob-display-toggle data-display-toggle-target="2" class="toggle is-active" data-responsive data-anim-in="expand-in-down-small" data-anim-out="expand-out-up-small">
<svg role="img" class="icon icon-chevron-b icon--xxs">
<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" data-display-toggle="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">
<li class="footer__heading">
<a href="#">
Footer heading
</a>
<a role="button" data-myob-display-toggle data-display-toggle-target="3" class="toggle is-active" data-responsive data-anim-in="expand-in-down-small" data-anim-out="expand-out-up-small">
<svg role="img" class="icon icon-chevron-b icon--xxs">
<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" data-display-toggle="3">
<ul class="footer__panel">
<li class="footer__link">
<a href="#">Footer link</a>
</li>
</ul>
</li>
</ul>
<ul class="footer__section">
<li class="footer__heading">
<a href="#">
Footer heading
</a>
<a role="button" data-myob-display-toggle data-display-toggle-target="4" class="toggle is-active" data-responsive data-anim-in="expand-in-down-small" data-anim-out="expand-out-up-small">
<svg role="img" class="icon icon-chevron-b icon--xxs">
<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" data-display-toggle="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">
<li class="footer__heading">
<a href="#">
Footer heading
</a>
<a role="button" data-myob-display-toggle data-display-toggle-target="5" class="toggle is-active" data-responsive data-anim-in="expand-in-down-small" data-anim-out="expand-out-up-small">
<svg role="img" class="icon icon-chevron-b icon--xxs">
<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" data-display-toggle="5">
<ul class="footer__panel">
<li class="footer__link">
<a href="#">Footer link</a>
</li>
</ul>
</li>
</ul>
<ul class="footer__section">
<li class="footer__heading">
<a href="#">
Footer heading
</a>
<a role="button" data-myob-display-toggle data-display-toggle-target="6" class="toggle is-active" data-responsive data-anim-in="expand-in-down-small" data-anim-out="expand-out-up-small">
<svg role="img" class="icon icon-chevron-b icon--xxs">
<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" data-display-toggle="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">
<li class="footer__heading">
<a href="#">
Footer heading
</a>
<a role="button" data-myob-display-toggle data-display-toggle-target="7" class="toggle is-active" data-responsive data-anim-in="expand-in-down-small" data-anim-out="expand-out-up-small">
<svg role="img" class="icon icon-chevron-b icon--xxs">
<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" data-display-toggle="7">
<ul class="footer__panel">
<li class="footer__link">
<a href="#">Footer link</a>
</li>
</ul>
</li>
</ul>
<ul class="footer__section">
<li class="footer__heading">
<a href="#">
Footer heading
</a>
<a role="button" data-myob-display-toggle data-display-toggle-target="8" class="toggle is-active" data-responsive data-anim-in="expand-in-down-small" data-anim-out="expand-out-up-small">
<svg role="img" class="icon icon-chevron-b icon--xxs">
<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" data-display-toggle="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 | Donts |
|---|---|
 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 usage guidelines for this component, please reach out to #cr-marquee on Slack.