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.
Banner
Source:
src/objects/banner/banner
The Banner Object is a custom module with specific classes used to define its elements, including the title, tout columns, and buttons.
<div class="o-banner color-dark-background">
<div class="o-banner__inner">
<h1 class="o-banner__title">Find help in NYC with <a href="https://access.nyc.gov/programs/?program_cat=food">food</a>, <a href="https://access.nyc.gov/programs/?program_cat=cash-expenses">money</a>, <a href="https://access.nyc.gov/programs/?program_cat=housing">housing</a>, <a href="https://access.nyc.gov/programs/?program_cat=work">work</a> and more on ACCESS NYC.</h1>
<hr class="divider border-blue" />
<div class="screen-tablet:layout-columns-gutter mb-3">
<div class="o-banner__tout">
<h3 class="o-banner__tout-title">What am I eligible for?</h3>
<div class="o-banner__tout-body flex-auto">
<p class="p1">There are over 30 programs you or your family may be eligible for regardless of immigration status and even if you’re already receiving benefits or have a job.</p>
</div>
<div class="o-banner__tout-cta">
<a class="btn btn-tertiary" href="https://access.nyc.gov/eligibility">
<svg class="icon-ui icon-4 icon-ui-user-check">
<use xlink:href="#icon-ui-user-check"></use>
</svg>Am I eligible?
</a>
</div>
</div>
<div class="o-banner__tout">
<h2 class="o-banner__tout-title type-h3">Apply now for benefits.</h2>
<div class="o-banner__tout-body flex-auto">
<p>Apply directly for SNAP, Cash Assistance and Medicaid renewal. Log into your HRA account.</p>
</div>
<div class="o-banner__tout-cta">
<a class="btn btn-secondary btn-next" href="https://a069-access.nyc.gov/ACCESSNYC/application.do">Go to ACCESS HRA</a>
</div>
</div>
</div>
</div>
</div>