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>