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-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&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>