Metro Component Library Demo 2.0

Footer: Slim 

<footer class="usa-footer usa-footer--slim">
    <div class="grid-container usa-footer__return-to-top">
        <a href="#">Return to top</a>
    </div>
    <div class="usa-footer__primary-section">
        <div class="usa-footer__primary-container grid-row">
            <div class="mobile-lg:grid-col-8">
                <nav class="usa-footer__nav" aria-label="Footer navigation,">
                    <ul class="grid-row grid-gap">

                        <li class="mobile-lg:grid-col-6 desktop:grid-col-auto usa-footer__primary-content">
                            <a class="usa-footer__primary-link" href="javascript:void(0);">
                                &lt;Primary link&gt;
                            </a>
                        </li>

                        <li class="mobile-lg:grid-col-6 desktop:grid-col-auto usa-footer__primary-content">
                            <a class="usa-footer__primary-link" href="javascript:void(0);">
                                &lt;Primary link&gt;
                            </a>
                        </li>

                        <li class="mobile-lg:grid-col-6 desktop:grid-col-auto usa-footer__primary-content">
                            <a class="usa-footer__primary-link" href="javascript:void(0);">
                                &lt;Primary link&gt;
                            </a>
                        </li>

                        <li class="mobile-lg:grid-col-6 desktop:grid-col-auto usa-footer__primary-content">
                            <a class="usa-footer__primary-link" href="javascript:void(0);">
                                &lt;Primary link&gt;
                            </a>
                        </li>

                        <li class="mobile-lg:grid-col-6 desktop:grid-col-auto usa-footer__primary-content">
                            <a class="usa-footer__primary-link" href="javascript:void(0);">
                                &lt;Primary link&gt;
                            </a>
                        </li>

                    </ul>
                </nav>
            </div>
            <div class="mobile-lg:grid-col-4">
                <address class="usa-footer__address">
                    <div class="grid-row grid-gap">
                        <div class="grid-col-auto mobile-lg:grid-col-12 desktop:grid-col-auto">
                            <div class="usa-footer__contact-info">
                                <a href="tel:1-800-555-5555">
                                    &lt;(800) 555-GOVT&gt;
                                </a>
                            </div>
                        </div>
                        <div class="grid-col-auto mobile-lg:grid-col-12 desktop:grid-col-auto">
                            <div class="usa-footer__contact-info">
                                <a href="mailto:&lt;info@agency.gov&gt;">
                                    &lt;info@agency.gov&gt;
                                </a>
                            </div>
                        </div>
                    </div>
                </address>
            </div>
        </div>
    </div>
    <div class="usa-footer__secondary-section">
        <div class="grid-container">
            <div class="usa-footer__logo grid-row grid-gap-2">
                <div class="grid-col-auto">
                    <img class="usa-footer__logo-img" src="../../../dist/img/logo-img.png" alt="">
                </div>
                <div class="grid-col-auto">
                    <p class="usa-footer__logo-heading">
                        &lt;Agency Contact Center&gt;
                    </p>
                </div>
            </div>
        </div>
    </div>
</footer>

No notes defined.

package:
  name: metro-digital-design-system-demo
  version: 0.1.0
uswds:
  path: ../../../dist
placeholderLink: javascript:void()
top_link: Return to top
primary_section:
  aria_label: Footer navigation,
  footer_nav:
    nav_items:
      - <Primary link>
      - <Primary link>
      - <Primary link>
      - <Primary link>
      - <Primary link>
secondary_section:
  brand:
    logo: logo-img.png
    agency_name: <Name of Agency>
  contact_links:
    social_nav:
      - Facebook
      - Twitter
      - YouTube
      - Instagram
      - RSS
    heading: <Agency Contact Center>
    address:
      phone: <(800) 555-GOVT>
      email: <info@agency.gov>