Skip to main content

Patterns

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-color-white" data-js="newsletter" data-sketch-symbol-instance="objects/newsletter/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" data-sketch-symbol-instance="elements/checkboxes/checkboxes" 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" data-sketch-symbol-instance="elements/checkboxes/checkboxes" 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" data-sketch-symbol-instance="elements/checkboxes/checkboxes" 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" data-sketch-symbol-instance="elements/checkboxes/checkboxes" 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" data-sketch-symbol-instance="elements/checkboxes/checkboxes" 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-font-size-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-font-size-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-color-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, 2018 All Rights Reserved.<br />NYC is a trademark and service mark of the City of New York.</p>
  </div>
</footer>