Example
Markup: components/navigation/footer-nav.twig
<footer role="contentinfo">
  <div class="region region-footer cr-footer">
    <div class="footer--minimal 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-comicrelief-footer-menu" id="block-comicrelief-footer" class="contextual-region block block-menu navigation menu--footer">
          <h2 class="visually-hidden" id="block-comicrelief-footer-menu">Minimal footer menu</h2>
          <div data-contextual-id="block:block=comicrelief_footer:langcode=en|menu:menu=footer:langcode=en" class="contextual" role="form">
            <button class="trigger focusable visually-hidden" type="button" aria-pressed="false">Open Minimal footer menu configuration options</button>
            <ul class="contextual-links" hidden="">
              <li class="block-configure"><a href="/admin/structure/block/manage/comicrelief_footer?destination=node/21">Configure block</a></li>
              <li class="entitymenuedit-form"><a href="/admin/structure/menu/manage/footer?destination=node/21">Edit menu</a></li>
            </ul>
          </div>
          <ul class="menu">
            <li class="menu-item">
              <a href="/contact-us" target="" data-drupal-link-system-path="node/39">Contact us</a>
            </li>
            <li class="menu-item">
              <a href="/working-with-us" data-drupal-link-system-path="node/8">Partners</a>
            </li>
            <li class="menu-item">
              <a href="/careers" data-drupal-link-system-path="node/40">Careers</a>
            </li>
            <li class="menu-item">
              <a href="/privacy-notice" data-drupal-link-system-path="node/615">Privacy</a>
            </li>
            <li class="menu-item">
              <a href="/cookies-policy" data-drupal-link-system-path="node/952">Cookies</a>
            </li>
            <li class="menu-item">
              <a href="/frequently-asked-questions" data-drupal-link-system-path="node/119">FAQs</a>
            </li>
            <li class="menu-item">
              <a href="/legal" target="" data-drupal-link-system-path="node/125">Legal</a>
            </li>
            <li class="menu-item">
              <a href="/press-releases" data-drupal-link-system-path="node/576">Press Area</a>
            </li>
            <li class="menu-item">
              <a href="/accessibility" data-drupal-link-system-path="node/122">Accessibility</a>
            </li>
            <li class="menu-item">
              <a href="/sitemap" data-drupal-link-system-path="node/418">Sitemap</a>
            </li>
            <li class="menu-item">
              <a href="/reporting-concerns-about-our-organisation-or-operations" data-drupal-link-system-path="node/799">Reporting concerns</a>
            </li>
            <li class="menu-item">
              <a href="/update-your-preferences" data-drupal-link-system-path="node/965">Update your preferences</a>
            </li>
            <li class="menu-item">
              <a href="/comic-reliefs-statement-on-modern-slavery-and-human-trafficking" data-drupal-link-system-path="node/856">Modern slavery and human trafficking</a>
            </li>
          </ul>
        </nav>
        <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 481