Expanded Footer
Toggle example guides Toggle HTML markup
Expanded footer (aka TURBOFOOTER™) for the CR.com site in 2018
Example
Markup: components/navigation/expanded-footer.twig
<footer role="contentinfo">
<div class="region region-footer cr-footer">
<div class="footer--expanded footer-nav-outer-wrapper">
<div class="footer-nav-inner-wrapper">
<div class="footer__social-links">
<ul>
<li>
<a href="https://www.facebook.com/comicrelief" title="Facebook" target="_blank" class="icon__fb">
<svg class="icon">
<use xlink:href="#icon-facebook"></use>
</svg>
</a>
</li>
<li>
<a href="https://twitter.com/comicrelief" title="Twitter" target="_blank" class="icon__twitter">
<svg class="icon">
<use xlink:href="#icon-twitter"></use>
</svg>
</a>
</li>
<li>
<a href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw" title="Youtube" target="_blank" class="icon__youtube">
<svg class="icon">
<use xlink:href="#icon-youtube"></use>
</svg>
</a>
</li>
<li>
<a href="https://www.instagram.com/comicrelief" title="Instagram" target="_blank" class="icon__instagram">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50">
<defs>
<radialGradient id="a" cx="14.53" cy="2.37" r="50.41" gradientTransform="matrix(1, 0, 0, -1, 0, 52.25)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ffd676"></stop>
<stop offset="0.25" stop-color="#f2a454"></stop>
<stop offset="0.38" stop-color="#f05c3c"></stop>
<stop offset="0.7" stop-color="#c22f86"></stop>
<stop offset="0.96" stop-color="#6666ad"></stop>
<stop offset="0.99" stop-color="#5c6cb2"></stop>
</radialGradient>
</defs>
<title>Rednoseday Instagram</title>
<desc>Visit Rednoseday instagram page</desc>
<circle cx="25" cy="25" r="25" fill="url(#a)"></circle>
<path d="M25,13.25c3.83,0,4.28,0,5.79.08a7.93,7.93,0,0,1,2.66.49,4.75,4.75,0,0,1,2.72,2.72,7.93,7.93,0,0,1,.49,2.66c.07,1.51.08,2,.08,5.79s0,4.28-.08,5.79a7.93,7.93,0,0,1-.49,2.66,4.75,4.75,0,0,1-2.72,2.72,7.93,7.93,0,0,1-2.66.49c-1.51.07-2,.08-5.79.08s-4.28,0-5.79-.08a7.93,7.93,0,0,1-2.66-.49,4.75,4.75,0,0,1-2.72-2.72,7.93,7.93,0,0,1-.49-2.66c-.07-1.51-.08-2-.08-5.79s0-4.28.08-5.79a7.93,7.93,0,0,1,.49-2.66,4.75,4.75,0,0,1,2.72-2.72,7.93,7.93,0,0,1,2.66-.49c1.51-.07,2-.08,5.79-.08m0-2.58c-3.89,0-4.38,0-5.91.09a10.52,10.52,0,0,0-3.48.67,7.33,7.33,0,0,0-4.19,4.19,10.52,10.52,0,0,0-.67,3.48c-.07,1.53-.09,2-.09,5.91s0,4.38.09,5.91a10.52,10.52,0,0,0,.67,3.48,7.33,7.33,0,0,0,4.19,4.19,10.52,10.52,0,0,0,3.48.67c1.53.07,2,.09,5.91.09s4.38,0,5.91-.09a10.52,10.52,0,0,0,3.48-.67,7.33,7.33,0,0,0,4.19-4.19,10.52,10.52,0,0,0,.67-3.48c.07-1.53.09-2,.09-5.91s0-4.38-.09-5.91a10.52,10.52,0,0,0-.67-3.48,7.33,7.33,0,0,0-4.19-4.19,10.52,10.52,0,0,0-3.48-.67C29.38,10.69,28.91,10.67,25,10.67Z" fill="#fff"></path>
<path d="M25,17.64A7.36,7.36,0,1,0,32.36,25,7.36,7.36,0,0,0,25,17.64Zm0,12.14A4.78,4.78,0,1,1,29.78,25h0A4.78,4.78,0,0,1,25,29.78Z" fill="#fff"></path>
<circle cx="32.65" cy="17.35" r="1.72" fill="#fff"></circle>
</svg>
</a>
</li>
</ul>
</div>
<nav role="navigation" aria-labelledby="block-expandedfooter-menu" id="block-expandedfooter" class="contextual-region block block-menu navigation menu--expanded-footer crExpandedFooter-processed">
<h2 class="visually-hidden" id="block-expandedfooter-menu">Expanded Footer</h2>
<div data-contextual-id="block:block=expandedfooter:langcode=en|menu:menu=expanded-footer:langcode=en" class="contextual" role="form">
<button class="trigger focusable visually-hidden" type="button" aria-pressed="false">Open Expanded Footer configuration options</button>
<ul class="contextual-links" hidden="">
<li class="block-configure"><a href="/admin/structure/block/manage/expandedfooter?destination=node/21">Configure block</a></li>
<li class="entitymenuedit-form"><a href="/admin/structure/menu/manage/expanded-footer?destination=node/21">Edit menu</a></li>
</ul>
</div>
<ul class="menu menu--level-0">
<li class="menu-item menu-item--expanded menu-item--1 clearfix">
<a href="/" title="A Second Menu" aria-expanded="false" aria-haspopup="true" data-drupal-link-system-path="<front>" class="is-active"><span class="menu-item__text">Hear From Us</span></a>
<ul class="menu menu--level-0 menu menu--expanded-footer menu--has-2-items menu--level-1 clearfix">
<li class="menu-item menu-item--1 clearfix">
<a class="js-esu-popup" href="#">
<span class="menu-item__text">
<svg class="icon" focusable="false" tabindex="-1">
<use xlink:href="#envelope"></use>
</svg>
Get the newsletter
</span>
</a>
</li>
<li class="menu-item menu-item--2 clearfix">
<a href="/" data-drupal-link-system-path="<front>" class="is-active"><span class="menu-item__text">How we contact you</span></a>
</li>
</ul>
</li>
<li class="menu-item menu-item--expanded menu-item--2 clearfix">
<a href="/" title="Get in touch" aria-expanded="false" aria-haspopup="true" data-drupal-link-system-path="<front>" class="is-active"><span class="menu-item__text">Get in touch</span></a>
<ul class="menu menu--level-0 menu menu--expanded-footer menu--has-2-items menu--level-1 clearfix menu--has-3-items">
<li class="menu-item menu-item--1 clearfix">
<a href="/" data-drupal-link-system-path="<front>" class="is-active"><span class="menu-item__text">Contact us</span></a>
</li>
<li class="menu-item menu-item--2 clearfix">
<a href="/" title="Your Gift Aid" data-drupal-link-system-path="<front>" class="is-active"><span class="menu-item__text">Your Gift Aid</span></a>
</li>
<li class="menu-item menu-item--3 clearfix">
<a href="/" title="FAQs" data-drupal-link-system-path="<front>" class="is-active"><span class="menu-item__text">FAQs</span></a>
</li>
</ul>
</li>
<li class="menu-item menu-item--expanded menu-item--3 clearfix">
<a href="/" aria-expanded="false" aria-haspopup="true" data-drupal-link-system-path="<front>" class="is-active"><span class="menu-item__text">About us</span></a>
<ul class="menu menu--level-0 menu menu--expanded-footer menu--has-2-items menu--level-1 clearfix menu--has-3-items menu--has-6-items">
<div class="menu--expanded-footer__left">
<li class="menu-item menu-item--1 clearfix">
<a href="/newsletter" title="Get the newsletter"><span class="menu-item__text">Get the newsletter</span></a>
</li>
<li class="menu-item menu-item--2 clearfix">
<a href="/how-we-contact-you" title="Choose how we contact you"><span class="menu-item__text">Choose how we contact you</span></a>
</li>
<li class="menu-item menu-item--3 clearfix">
<a href="/another-link" title="Another link"><span class="menu-item__text">Another link</span></a>
</li>
</div>
<div class="menu--expanded-footer__right">
<li class="menu-item menu-item--4 clearfix">
<a href="/yet-another-link" title="Yet Another Link"><span class="menu-item__text">Yet Another Link</span></a>
</li>
<li class="menu-item menu-item--5 clearfix">
<a href="/a-fifth-link" title="A Fifth Link"><span class="menu-item__text">A Fifth Link</span></a>
</li>
<li class="menu-item menu-item--6 clearfix">
<a href="/sixth-link"><span class="menu-item__text">A Final Sixth Link</span></a>
</li>
</div>
</ul>
</li>
<li class="menu-item menu-item--expanded menu-item--4 clearfix">
<a href="/" title="Careers" aria-expanded="false" aria-haspopup="true" data-drupal-link-system-path="<front>" class="is-active"><span class="menu-item__text">Careers</span></a>
<ul class="menu menu--level-0 menu menu--expanded-footer menu--has-2-items menu--level-1 clearfix menu--has-3-items menu--has-6-items">
<li class="menu-item menu-item--1 clearfix">
<a href="/" title="Open roles" data-drupal-link-system-path="<front>" class="is-active"><span class="menu-item__text">Open roles</span></a>
</li>
<li class="menu-item menu-item--2 clearfix">
<a href="/" title="Working at Comic Relief" data-drupal-link-system-path="<front>" class="is-active"><span class="menu-item__text">Working at Comic Relief</span></a>
</li>
</ul>
</li>
<li class="menu-item menu-item--expanded menu-item--5 clearfix">
<a href="/" title="News" aria-expanded="false" aria-haspopup="true" data-drupal-link-system-path="<front>" class="is-active"><span class="menu-item__text">News</span></a>
<ul class="menu menu--level-0 menu menu--expanded-footer menu--has-2-items menu--level-1 clearfix menu--has-3-items menu--has-6-items">
<li class="menu-item menu-item--1 clearfix">
<a href="/news" title="News" data-drupal-link-system-path="node/427"><span class="menu-item__text">News</span></a>
</li>
<li class="menu-item menu-item--2 clearfix">
<a href="/" title="News" data-drupal-link-system-path="<front>" class="is-active"><span class="menu-item__text">Press Area</span></a>
</li>
</ul>
</li>
<li class="menu-item menu-item--expanded menu-item--6 clearfix">
<a href="/" title="Legal" aria-expanded="false" aria-haspopup="true" data-drupal-link-system-path="<front>" class="is-active"><span class="menu-item__text">Legal</span></a>
<ul class="menu menu--level-0 menu menu--expanded-footer menu--has-2-items menu--level-1 clearfix menu--has-3-items menu--has-6-items menu--has-4-items">
<div class="menu--expanded-footer__left">
<li class="menu-item menu-item--1 clearfix">
<a href="/some-link" title="Fourth Menu link"><span class="menu-item__text">Fourth Menu link</span></a>
</li>
<li class="menu-item menu-item--2 clearfix">
<a href="/liiiiink" title="liiiiink"><span class="menu-item__text">liiiiink</span></a>
</li>
</div>
<div class="menu--expanded-footer__right">
<li class="menu-item menu-item--3 clearfix">
<a href="/liiiiink2" title="liiiiink2"><span class="menu-item__text">liiiiink2</span></a>
</li>
<li class="menu-item menu-item--4 clearfix">
<a href="/liiiiink4" title="liiiiink4"><span class="menu-item__text">liiiiink4</span></a>
</li>
</div>
</ul>
</li>
</ul>
</nav>
<span class="lg-breakpoint"></span>
<div class="footer__copyright">
<p>Comic Relief is the trading name of Charity Projects, a registered charity in England and Wales (326568) and Scotland (SC039730), which is a company limited by guarantee registered in England and Wales (01806414) with its registered address at Hanover House, 14 Hanover Square, London, W1S 1HP</p>
</div>
<div class="footer__branding">
<a title="Comic Relief" href="http://www.comicrelief.com/" rel="home" target="_blank">
<svg class="icon">
<use xlink:href="#crlogo2018"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
</footer>
Source:
_cr17-styleguide.scss, line 487