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">
                  <title>Rednoseday Instagram</title>
                  <desc>Visit Rednoseday instagram page</desc>
                  <circle cx="25" cy="25" r="25" fill="#E52630"></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 href="#" data-drupal-link-system-path="<front>" class="is-active">
                    <span class="menu-item__text">
                      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="md-breakpoint"></span>
        <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 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>
    </div>
  </div>
</footer>
Source: _cr19-styleguide.scss, line 595