Footer

The Footer Object is a custom module with specific classes used to define its elements, including the navigation columns and copyright.

<footer class="o-footer color-mid-background">
  <nav class="o-footer__nav">
    <ul class="o-footer__nav-list px-3">
      <li class="o-footer__column-first">
        <div class="type-h3">Get Help Now</div>
        <ul>
          <li>
            <a href="#">Am I Eligible?</a>
          </li>
          <li>
            <a href="#">Find Help Nearby</a>
          </li>
          <li>
            <a href="#">Search</a>
          </li>
          <li>
            <a href="#">Contact Us</a>
          </li>
        </ul>
        <div class="type-h3">For Caseworkers</div>
        <ul>
          <li>
            <a href="#">Applications &amp; Forms</a>
          </li>
        </ul>
        <div class="type-h3">About ACCESS NYC</div>
        <ul>
          <li>
            <a href="#">Training &amp; Support</a>
          </li>
          <li>
            <a href="#">NYC.gov Privacy Policy</a>
          </li>
          <li>
            <a href="#">NYC.gov Terms of Use</a>
          </li>
          <li>
            <a href="#">About</a>
          </li>
        </ul>
      </li>
      <li class="o-footer__column-middle">
        <div class="type-h3">Programs</div>
        <ul class="screen-tablet:layout-columns-gutter screen-desktop:layout-rows">
          <li>
            <a href="#">Cash &amp; Expenses</a>
          </li>
          <li>
            <a href="#">Child Care</a>
          </li>
          <li>
            <a href="#">City ID Card</a>
          </li>
          <li>
            <a href="#">Education</a>
          </li>
          <li>
            <a href="#">Enrichment</a>
          </li>
          <li>
            <a href="#">Family Services</a>
          </li>
          <li>
            <a href="#">Food</a>
          </li>
          <li>
            <a href="#">Health</a>
          </li>
          <li>
            <a href="#">Housing</a>
          </li>
          <li>
            <a href="#">Special Needs</a>
          </li>
          <li>
            <a href="#">Work</a>
          </li>
        </ul>
      </li>
      <li class="o-footer__column-last">
        <div class="mb-4 p-3 screen-desktop:p-4 bg-white" data-js="newsletter">
          <div class="type-h3">Get Updates</div>
          <form action="https://nyc.us18.list-manage.com/subscribe/post?u=d04b7b607bddbd338b416fa89&amp;id=aa67394696" id="mc-embedded-subscribe-form" method="post" novalidate="true" target="_blank">
            <div class="c-question">
              <label class="c-question__label">Receive benefits news and reminders about upcoming open enrollment periods.</label>
              <div class="c-question__container">
                <input class="w-full" name="EMAIL" placeholder="Email address" required="true" type="email" />
              </div>
            </div>
            <div class="c-question mt-3">
              <fieldset class="c-question">
                <legend class="c-question__label">Which borough(s) would you like to recieve updates for?</legend>
                <div class="c-question__container screen-tablet:layout-columns">
                  <label class="checkbox" for="mce-group[4369]-4369-0">
                    <input id="mce-group[4369]-4369-0" name="group[4369][1]" type="checkbox" value="1" />
                    <span class="checkbox__label">Bronx</span>
                  </label>
                  <label class="checkbox" for="mce-group[4369]-4369-4">
                    <input id="mce-group[4369]-4369-4" name="group[4369][16]" type="checkbox" value="16" />
                    <span class="checkbox__label">Staten Island</span>
                  </label>
                  <label class="checkbox" for="mce-group[4369]-4369-3">
                    <input id="mce-group[4369]-4369-3" name="group[4369][8]" type="checkbox" value="8" />
                    <span class="checkbox__label">Queens</span>
                  </label>
                  <label class="checkbox" for="mce-group[4369]-4369-1">
                    <input id="mce-group[4369]-4369-1" name="group[4369][2]" type="checkbox" value="2" />
                    <span class="checkbox__label">Brooklyn</span>
                  </label>
                  <label class="checkbox" for="mce-group[4369]-4369-2">
                    <input id="mce-group[4369]-4369-2" name="group[4369][4]" type="checkbox" value="4" />
                    <span class="checkbox__label">Manhattan</span>
                  </label>
                </div>
              </fieldset>
            </div>
            <div aria-hidden="true" style="position: absolute; left: -5000px;">
              <input name="b_d04b7b607bddbd338b416fa89_98ff3f3900" tabindex="-1" type="text" value="" />
            </div>
            <button class="btn-primary btn-small" type="submit">Sign Up</button>
            <article aria-hidden="true" class="c-alert-box bg-status-warning mt-3 text-small hidden" data-js-newsletter="alert-box-warning">
              <div class="c-alert-box__icon">
                <div class="c-alert-box__svg bg-icon-warning"></div>
              </div>
              <div class="c-alert-box__body" data-js-newsletter="alert-box__text"></div>
            </article>
            <article aria-hidden="true" class="c-alert-box bg-status-success mt-3 text-small hidden" data-js-newsletter="alert-box-success">
              <div class="c-alert-box__icon">
                <div class="c-alert-box__svg bg-icon-success"></div>
              </div>
              <div class="c-alert-box__body" data-js-newsletter="alert-box__text"></div>
            </article>
          </form>
        </div>
      </li>
    </ul>
  </nav>
  <div class="o-footer__copyright mb-4">
    <svg class="icon icon-logo-full text-blue-dark">
      <use xlink:href="#icon-logo-full"></use>
    </svg>
  </div>
  <div class="o-footer__copyright">
    <svg class="icon icon-logo-nyc">
      <use xlink:href="#icon-logo-nyc"></use>
    </svg>
    <p>City of New York, 2022 All Rights Reserved.
      <br />NYC is a trademark and service mark of the City of New York.
    </p>
  </div>
</footer>