As of January 3rd, 2023 the Working NYC Pattern library package is deprecated in favor of the NYC Opportunity Standard which contains updated user interface elements and usability guidance.
Alert
Alert Components contain contextually relevant messages for the user. The primary uses for alerts on the site are to indicate a successful or unsuccessful interaction and provide time-sensitive information about content within a view.
Demonstration
A standard alert message or callout.
Markup
<!--{ @data-js This selector is recommended for JavaScript enhanced alerts but not necessary }-->
<article class="c-alert " data-js="alert-info">
<div class="c-alert__graphic">
<svg aria-hidden="true" class="icon-wnyc-ui">
<use href="#feather-info"></use>
</svg>
</div>
<!--{ @aria-live Setting aria-live="polite" dynamically is recommended for new content that appears based on user interaction }-->
<div class="c-alert__body">
<!--{ @data-js-alert This selector is recommended for JavaScript enhanced alerts but not necessary }-->
<p data-js-alert='text'>A standard alert message or callout.</p>
</div>
</article>
Demonstration
An informational message or callout.
Markup
<!--{ @data-js This selector is recommended for JavaScript enhanced alerts but not necessary }-->
<article class="c-alert status-primary" data-js="alert-primary">
<div class="c-alert__graphic">
<svg aria-hidden="true" class="icon-wnyc-ui">
<use href="#feather-info"></use>
</svg>
</div>
<!--{ @aria-live Setting aria-live="polite" dynamically is recommended for new content that appears based on user interaction }-->
<div class="c-alert__body">
<!--{ @data-js-alert This selector is recommended for JavaScript enhanced alerts but not necessary }-->
<p data-js-alert='text'>An informational message or callout.</p>
</div>
</article>
Demonstration
A successful message or callout.
Markup
<!--{ @data-js This selector is recommended for JavaScript enhanced alerts but not necessary }-->
<article class="c-alert status-secondary" data-js="alert-secondary">
<div class="c-alert__graphic">
<svg aria-hidden="true" class="icon-wnyc-ui">
<use href="#feather-info"></use>
</svg>
</div>
<!--{ @aria-live Setting aria-live="polite" dynamically is recommended for new content that appears based on user interaction }-->
<div class="c-alert__body">
<!--{ @data-js-alert This selector is recommended for JavaScript enhanced alerts but not necessary }-->
<p data-js-alert='text'>A successful message or callout.</p>
</div>
</article>
Demonstration
A warning message or callout.
Markup
<!--{ @data-js This selector is recommended for JavaScript enhanced alerts but not necessary }-->
<article class="c-alert status-tertiary" data-js="alert-tertiart">
<div class="c-alert__graphic">
<svg aria-hidden="true" class="icon-wnyc-ui">
<use href="#feather-info"></use>
</svg>
</div>
<!--{ @aria-live Setting aria-live="polite" dynamically is recommended for new content that appears based on user interaction }-->
<div class="c-alert__body">
<!--{ @data-js-alert This selector is recommended for JavaScript enhanced alerts but not necessary }-->
<p data-js-alert='text'>A warning message or callout.</p>
</div>
</article>