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.
COVID Response
New
<mark class="badge color-covid-response-status">New</mark>
icon cash expenses v2
<svg class="icon-6 text-covid-response fill-covid-response-light"> <title id="icon-cash-expenses-v2-title">icon cash expenses v2</title> <use xlink:href="#icon-cash-expenses-v2"></use> </svg>
icon child care v2
<svg class="icon-6 text-covid-response fill-covid-response-light"> <title id="icon-child-care-v2-title">icon child care v2</title> <use xlink:href="#icon-child-care-v2"></use> </svg>
icon city id card v2
<svg class="icon-6 text-covid-response fill-covid-response-light"> <title id="icon-city-id-card-v2-title">icon city id card v2</title> <use xlink:href="#icon-city-id-card-v2"></use> </svg>
icon education v2
<svg class="icon-6 text-covid-response fill-covid-response-light"> <title id="icon-education-v2-title">icon education v2</title> <use xlink:href="#icon-education-v2"></use> </svg>
icon enrichment v2
<svg class="icon-6 text-covid-response fill-covid-response-light"> <title id="icon-enrichment-v2-title">icon enrichment v2</title> <use xlink:href="#icon-enrichment-v2"></use> </svg>
icon family services v2
<svg class="icon-6 text-covid-response fill-covid-response-light"> <title id="icon-family-services-v2-title">icon family services v2</title> <use xlink:href="#icon-family-services-v2"></use> </svg>
icon food v2
<svg class="icon-6 text-covid-response fill-covid-response-light"> <title id="icon-food-v2-title">icon food v2</title> <use xlink:href="#icon-food-v2"></use> </svg>
icon health v2
<svg class="icon-6 text-covid-response fill-covid-response-light"> <title id="icon-health-v2-title">icon health v2</title> <use xlink:href="#icon-health-v2"></use> </svg>
icon housing v2
<svg class="icon-6 text-covid-response fill-covid-response-light"> <title id="icon-housing-v2-title">icon housing v2</title> <use xlink:href="#icon-housing-v2"></use> </svg>
icon people with disabilities v2
<svg class="icon-6 text-covid-response fill-covid-response-light"> <title id="icon-people-with-disabilities-v2-title">icon people with disabilities v2</title> <use xlink:href="#icon-people-with-disabilities-v2"></use> </svg>
icon work v2
<svg class="icon-6 text-covid-response fill-covid-response-light"> <title id="icon-work-v2-title">icon work v2</title> <use xlink:href="#icon-work-v2"></use> </svg>
icon card cash expenses v2
<svg class="icon-6 text-covid-response fill-covid-response-light"> <title id="icon-card-cash-expenses-v2-title">icon card cash expenses v2</title> <use xlink:href="#icon-card-cash-expenses-v2"></use> </svg>
icon card child care v2
<svg class="icon-6 text-covid-response fill-covid-response-light"> <title id="icon-card-child-care-v2-title">icon card child care v2</title> <use xlink:href="#icon-card-child-care-v2"></use> </svg>
icon card city id card v2
<svg class="icon-6 text-covid-response fill-covid-response-light"> <title id="icon-card-city-id-card-v2-title">icon card city id card v2</title> <use xlink:href="#icon-card-city-id-card-v2"></use> </svg>
icon card education v2
<svg class="icon-6 text-covid-response fill-covid-response-light"> <title id="icon-card-education-v2-title">icon card education v2</title> <use xlink:href="#icon-card-education-v2"></use> </svg>
icon card enrichment v2
<svg class="icon-6 text-covid-response fill-covid-response-light"> <title id="icon-card-enrichment-v2-title">icon card enrichment v2</title> <use xlink:href="#icon-card-enrichment-v2"></use> </svg>
icon card family services v2
<svg class="icon-6 text-covid-response fill-covid-response-light"> <title id="icon-card-family-services-v2-title">icon card family services v2</title> <use xlink:href="#icon-card-family-services-v2"></use> </svg>
icon card food v2
<svg class="icon-6 text-covid-response fill-covid-response-light"> <title id="icon-card-food-v2-title">icon card food v2</title> <use xlink:href="#icon-card-food-v2"></use> </svg>
icon card health v2
<svg class="icon-6 text-covid-response fill-covid-response-light"> <title id="icon-card-health-v2-title">icon card health v2</title> <use xlink:href="#icon-card-health-v2"></use> </svg>
icon card housing v2
<svg class="icon-6 text-covid-response fill-covid-response-light"> <title id="icon-card-housing-v2-title">icon card housing v2</title> <use xlink:href="#icon-card-housing-v2"></use> </svg>
icon card people with disabilities v2
<svg class="icon-6 text-covid-response fill-covid-response-light"> <title id="icon-card-people-with-disabilities-v2-title">icon card people with disabilities v2</title> <use xlink:href="#icon-card-people-with-disabilities-v2"></use> </svg>
icon card work v2
<svg class="icon-6 text-covid-response fill-covid-response-light"> <title id="icon-card-work-v2-title">icon card work v2</title> <use xlink:href="#icon-card-work-v2"></use> </svg>
The COVID Response button is reserved for linking to content about city announcements, stimulus programs, and other information related to the New York City COVID-19 Response.
<button class="btn-covid-response" type="button">COVID Response Button</button>
<article class="c-alert-box color-covid-response-status">
<div class="c-alert-box__icon">
<svg class="c-alert-box__svg icon icon-4 icon-info">
<use xlink:href="#icon-info"></use>
</svg>
</div>
<div class="c-alert-box__body">
<p>
<strong>
<a href="https://access.nyc.gov/coronavirus-covid-19-updates/">COVID-19 updates related to benefits, food, housing, unemployment</a>
</strong>
</p>
</div>
</article>
covid response button
covid response button Text
Selector.color-covid-response-button
covid response
Text covid response
Hex#803D8D
Border.border-covid-response
Text.text-covid-response
Background.bg-covid-response
covid response light
Text covid response light
Hex#DAB7E0
Border.border-covid-response-light
Text.text-covid-response-light
Background.bg-covid-response-light