18F/web-design-standards

<nav class="usa-footer__nav" aria-label="{{ aria_label | default('Footer navigation') }}">
  <div class="grid-row grid-gap-4">
    {% for link in links %}
      <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">
            {{ link.label |e }}
          </h4>
          <ul class="usa-list usa-list--unstyled">
            {% for secondary_link in link.secondary_nav %}
              <li class="usa-footer__secondary-link">
                <a href="javascript:void(0);">{{ secondary_link.label |e }}</a>
              </li>
            {% endfor %}
          </ul>
        </section>
      </div>
    {% endfor %}
  </div>
</nav>