Footer small

Overview

This footer variant supports multi-level navigation menus, company info (name), social media links, and a copyright section.

Preview

Code

<footer class="dd-footer">
  <div class="dd-g">
    <div class="dd-footer__navigation navigation -footer-menu dd-u-1-1 dd-u-lg-18-24 l-box">
      <nav class="navigation -footer" role="navigation" itemscope itemtype="https://schema.org/SiteNavigationElement" aria-label="Footer navigation">
        <ul class="menu">
          <li class="menu-item"><a href="#" class="navigation__link">First Menu</a></li>
          <li class="menu-item"><a href="#" class="navigation__link">Second Menu</a></li>
          <li class="menu-item"><a href="#" class="navigation__link">Third Menu</a></li>
          <li class="menu-item"><a href="#" class="navigation__link">Fourth Menu</a></li>
        </ul>
      </nav>
    </div>
  </div>
  <div class="dd-g">
    <div class="dd-footer__company-info dd-u-1-1 dd-u-lg-16-24">
      <div class="dd-g">
        <div class="dd-footer__logo dd-u-6-24">
          <picture>
            <source srcset="/assets/imgs/logo-full-white-text.svg" media="(prefers-color-scheme: dark)">
            <img src="/assets/imgs/logo-full-black-text.svg" alt="ldnddev, LLC. logo" class="dd-img">
          </picture>
        </div>
        <div class="dd-footer__name dd-u-18-24 l-box">{{ Name Of Company }}</div>
      </div>
    </div>
    <div class="dd-footer__navigation navigation -social-menu dd-u-1-1 dd-u-lg-8-24 l-box">
      <nav class="navigation -social" role="navigation" itemscope itemtype="https://schema.org/SiteNavigationElement" aria-label="Footer navigation">
        <ul class="menu">
          <li class="menu-item">
            <a href="https://www.facebook.com/AnchorBrewing" itemprop="url" class="-facebook"><span class="visually-hidden">Facebook</span></a>
          </li>
          <li class="menu-item">
            <a href="https://www.instagram.com/anchorbrewing/" itemprop="url" class="-instagram"><span class="visually-hidden">Instagram</span></a>
          </li>
          <li class="menu-item">
            <a href="https://twitter.com/AnchorBrewing" itemprop="url" class="-x"><span class="visually-hidden">Twitter</span></a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
  <div class="dd-g">
    <div class="dd-footer__copyright dd-u-1-1">
      <div class="l-box">
        {{ copyright goes here }}
      </div>
    </div>
  </div>
</footer>