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>