As of January 3rd, 2023 the ACCESS NYC Pattern library package is deprecated in favor of the NYC Opportunity Standard which contains updated user interface elements and usability guidance.
Footer
Source:
src/objects/footer/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 & Forms</a> </li> </ul> <div class="type-h3">About ACCESS NYC</div> <ul> <li> <a href="#">Training & 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 & 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&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>