Footer large

Overview

This footer variant supports multi-level navigation menus, a newsletter signup form, 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">First Menu
            <ul class="sub-menu">
              <li class="menu-item">
                <a href="#" class="navigation__link">Link</a>
              </li>
              <li class="menu-item">
                <a href="#" class="navigation__link">Link</a>
              </li>
              <li class="menu-item">
                <a href="#" class="navigation__link">Link</a>
              </li>
            </ul>
          </li>
          <li class="menu-item">Second Menu
            <ul class="sub-menu">
              <li class="menu-item">
                <a href="#" class="navigation__link">Link</a>
              </li>
              <li class="menu-item">
                <a href="#" class="navigation__link">Link</a>
              </li>
              <li class="menu-item">
                <a href="#" class="navigation__link">Link</a>
              </li>
            </ul>
          </li>
          <li class="menu-item">Third Menu
            <ul class="sub-menu">
              <li class="menu-item">
                <a href="#" class="navigation__link">Link</a>
              </li>
              <li class="menu-item">
                <a href="#" class="navigation__link">Link</a>
              </li>
              <li class="menu-item">
                <a href="#" class="navigation__link">Link</a>
              </li>
            </ul>
          </li>
          <li class="menu-item">Forth Menu
            <ul class="sub-menu">
              <li class="menu-item">
                <a href="#" class="navigation__link">Link</a>
              </li>
              <li class="menu-item">
                <a href="#" class="navigation__link">Link</a>
              </li>
              <li class="menu-item">
                <a href="#" class="navigation__link">Link</a>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
    <div class="dd-footer__newsletter dd-u-1-1 dd-u-lg-6-24 l-box">
      <div class="newsletter-signup">
        <div class="newsletter-signup__header">Sign up</div>
        <form class="newsletter-signup__form">
          <label for="email" id="">Your email address</label>
          <input id="email" name="email" type="email" />
          <button class="dd-button" type="submit">Sign up</button>
        </form>
      </div>
    </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/" itemprop="url" class="-facebook"><span class="visually-hidden">Facebook</span></a>
          </li>
          <li class="menu-item">
            <a href="https://www.instagram.com/" itemprop="url" class="-instagram"><span class="visually-hidden">Instagram</span></a>
          </li>
          <li class="menu-item">
            <a href="https://twitter.com/" 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>