Footer: Big

<footer class="usa-footer usa-footer--big" role="contentinfo">
    <div class="grid-container usa-footer__return-to-top">
        <a href="#">Return to top</a>
    </div>
    <div class="usa-footer__primary-section">
        <div class="grid-container">
            <div class="grid-row grid-gap">
                <div class="tablet:grid-col-8">
                    <nav class="usa-footer__nav">
                        <div class="grid-row grid-gap-4">
                            <div class="mobile-lg:grid-col-6 desktop:grid-col-3">
                                <section class="usa-footer__primary-content usa-footer__primary-content--collapsible">
                                    <h4 class="usa-footer__primary-link">Topic</h4>
                                    <ul class="usa-list usa-list--unstyled">
                                        <li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li>
                                        <li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li>
                                        <li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link that's a bit longer than most of the others</a></li>
                                        <li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li>
                                    </ul>
                                </section>
                            </div>
                            <div class="mobile-lg:grid-col-6 desktop:grid-col-3">
                                <section class="usa-footer__primary-content usa-footer__primary-content--collapsible">
                                    <h4 class="usa-footer__primary-link">Topic</h4>
                                    <ul class="usa-list usa-list--unstyled">
                                        <li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li>
                                        <li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link that's pretty long</a></li>
                                        <li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li>
                                        <li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li>
                                    </ul>
                                </section>
                            </div>
                            <div class="mobile-lg:grid-col-6 desktop:grid-col-3">
                                <section class="usa-footer__primary-content usa-footer__primary-content--collapsible">
                                    <h4 class="usa-footer__primary-link">Topic</h4>
                                    <ul class="usa-list usa-list--unstyled">
                                        <li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li>
                                        <li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li>
                                        <li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li>
                                        <li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li>
                                    </ul>
                                </section>
                            </div>
                            <div class="mobile-lg:grid-col-6 desktop:grid-col-3">
                                <section class="usa-footer__primary-content usa-footer__primary-content--collapsible">
                                    <h4 class="usa-footer__primary-link">Topic</h4>
                                    <ul class="usa-list usa-list--unstyled">
                                        <li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li>
                                        <li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li>
                                        <li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li>
                                        <li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li>
                                    </ul>
                                </section>
                            </div>
                        </div>
                    </nav>
                </div>
                <div class="tablet:grid-col-4">
                    <div class="usa-sign-up">
                        <h3 class="usa-sign-up__heading">Sign up</h3>
                        <form class="usa-form">
                            <label class="usa-label" for="email" id="">Your email address</label>
                            <input class="usa-input" id="email" name="email" type="email">
                            <button class="usa-button" type="submit">Sign up</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="usa-footer__secondary-section">
        <div class="grid-container">
            <div class="grid-row grid-gap">
                <div class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2">
                    <div class="mobile-lg:grid-col-auto">
                        <img class="usa-footer__logo-img" src="../../dist/img/logo-img.png" alt="">
                    </div>
                    <div class="mobile-lg:grid-col-auto">
                        <h3 class="usa-footer__logo-heading">Name of Agency</h3>
                    </div>
                </div>
                <div class="usa-footer__contact-links mobile-lg:grid-col-6">
                    <div class="usa-footer__social-links grid-row grid-gap-1">
                        <div class="grid-col-auto">
                            <a class="usa-social-link usa-social-link--facebook" href="javascript:void(0);">
                <span>Facebook</span>
              </a>
                        </div>
                        <div class="grid-col-auto">
                            <a class="usa-social-link usa-social-link--twitter" href="javascript:void(0);">
                <span>Twitter</span>
              </a>
                        </div>
                        <div class="grid-col-auto">
                            <a class="usa-social-link usa-social-link--youtube" href="javascript:void(0);">
                <span>YouTube</span>
              </a>
                        </div>
                        <div class="grid-col-auto">
                            <a class="usa-social-link usa-social-link--rss" href="javascript:void(0);">
                <span>RSS</span>
              </a>
                        </div>
                    </div>
                    <h3 class="usa-footer__contact-heading">Agency Contact Center</h3>
                    <address class="usa-footer__address">
            <div class="usa-footer__contact-info grid-row grid-gap">
              <div class="grid-col-auto">
                <a href="tel:1-800-555-5555">(800) CALL-GOVT</a>
              </div>
              <div class="grid-col-auto">
                <a href="mailto:info@agency.gov">info@agency.gov</a>
              </div>
            </div>
          </address>
                </div>
            </div>
        </div>
    </div>
</footer>