<footer class="usa-footer">
<div class="grid-container usa-footer__return-to-top">
<a href="#">Return to top</a>
</div>
<div class="usa-footer__primary-section">
<nav class="usa-footer__nav" aria-label="Footer navigation">
<ul class="grid-row grid-gap">
<li class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content">
<a class="usa-footer__primary-link" href="javascript:void(0);">Primary link</a>
</li>
<li class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content">
<a class="usa-footer__primary-link" href="javascript:void(0);">Primary link</a>
</li>
<li class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content">
<a class="usa-footer__primary-link" href="javascript:void(0);">Primary link</a>
</li>
<li class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content">
<a class="usa-footer__primary-link" href="javascript:void(0);">Primary link</a>
</li>
<li class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content">
<a class="usa-footer__primary-link" href="javascript:void(0);">Primary link</a>
</li>
</ul>
</nav>
</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);">
<img class="usa-social-link__icon" src="../../dist/img/usa-icons/facebook.svg" alt="Facebook" />
</a>
</div>
<div class="grid-col-auto">
<a class="usa-social-link usa-social-link--twitter" href="javascript:void(0);">
<img class="usa-social-link__icon" src="../../dist/img/usa-icons/twitter.svg" alt="Twitter" />
</a>
</div>
<div class="grid-col-auto">
<a class="usa-social-link usa-social-link--youtube" href="javascript:void(0);">
<img class="usa-social-link__icon" src="../../dist/img/usa-icons/youtube.svg" alt="YouTube" />
</a>
</div>
<div class="grid-col-auto">
<a class="usa-social-link usa-social-link--rss" href="javascript:void(0);">
<img class="usa-social-link__icon" src="../../dist/img/usa-icons/rss_feed.svg" alt="RSS" />
</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>
No notes defined.
<footer class="usa-footer">
<div class="grid-container usa-footer__return-to-top">
<a href="#">Return to top</a>
</div>
<div class="usa-footer__primary-section">
<nav class="usa-footer__nav" aria-label="Footer navigation">
<ul class="grid-row grid-gap">
<li class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content">
<a class="usa-footer__primary-link" href="javascript:void(0);">Primary link</a>
</li>
<li class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content">
<a class="usa-footer__primary-link" href="javascript:void(0);">Primary link</a>
</li>
<li class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content">
<a class="usa-footer__primary-link" href="javascript:void(0);">Primary link</a>
</li>
<li class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content">
<a class="usa-footer__primary-link" href="javascript:void(0);">Primary link</a>
</li>
<li class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content">
<a class="usa-footer__primary-link" href="javascript:void(0);">Primary link</a>
</li>
</ul>
</nav>
</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="{{ uswds.path }}/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);">
<img
class="usa-social-link__icon"
src="{{ uswds.path }}/img/usa-icons/facebook.svg"
alt="Facebook" />
</a>
</div>
<div class="grid-col-auto">
<a class="usa-social-link usa-social-link--twitter" href="javascript:void(0);">
<img
class="usa-social-link__icon"
src="{{ uswds.path }}/img/usa-icons/twitter.svg"
alt="Twitter" />
</a>
</div>
<div class="grid-col-auto">
<a class="usa-social-link usa-social-link--youtube" href="javascript:void(0);">
<img
class="usa-social-link__icon"
src="{{ uswds.path }}/img/usa-icons/youtube.svg"
alt="YouTube" />
</a>
</div>
<div class="grid-col-auto">
<a class="usa-social-link usa-social-link--rss" href="javascript:void(0);">
<img
class="usa-social-link__icon"
src="{{ uswds.path }}/img/usa-icons/rss_feed.svg"
alt="RSS" />
</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>
package:
name: null
version: 1.0.0
uswds:
path: ../../dist