Footer medium

Overview

This footer variant supports multi-level navigation menus, company info (including logo, address, phone, and email), 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" 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 l-box">
      <div class="dd-g">
        <div class="dd-footer__logo dd-u-6-24">
          <img class="dd-img" src="/assets/imgs/logo-box-solid.svg" alt="ldnddev, LLC." />
        </div>
        <div class="dd-footer__name dd-u-18-24 l-box">{{ Name Of Company }}</div>
        <div class="dd-footer__contact dd-u-1-1 l-box">
          <div class="dd-footer__address dd-u-1-1">
            <address>{{ Company Address }}</address>
          </div>
          <div class="dd-footer__phone dd-u-1-1">
            <a href="tel:555-555-5555" title="Call 555-555-5555">555-555-5555</a>
          </div>
          <div class="dd-footer__email dd-u-1-1">
            <a href="mailto:[email protected]" title="Send email to [email protected]">[email protected]</a>
          </div>
        </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" 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>