Alert Box

Alert Box Components contain relevant messages for the user in the form of information, success, urgent, and warnings. The Alert Box Component is based on the Alerts Pattern in the U.S. Web Design System. The primary uses for alerts on the site are to indicate a successful screening or warn that other city applications will not work on mobile devices.

Information

Source: src/components/alert-box/alert-box-info

ACCESS NYC will be undergoing maintenance Friday, February 2nd from 9pm to 11pm EST.

Please contact our help desk with any questions.

<article class="c-alert-box color-info-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">
    <header>
      <h1 class="type-h4 m-0">ACCESS NYC will be undergoing maintenance Friday, February 2nd from 9pm to 11pm EST.</h1>
    </header>
    <p>Please <a href="#">contact our help desk</a> with any questions.</p>
  </div>
</article>

Success

Source: src/components/alert-box/alert-box-success

Finished! We found 8 programs for you.

Remember that we can't guarantee eligibility, but can only recommend programs for you to look at.

<article class="c-alert-box color-success-status">
  <div class="c-alert-box__icon">
    <svg class="c-alert-box__svg icon icon-4 icon-success" role="img">
      <title>Success Alert</title>
      <use xlink:href="#icon-success"></use>
    </svg>
  </div>
  <div class="c-alert-box__body">
    <header>
      <h1 class="type-h4 m-0">Finished! We found 8 programs for you.</h1>
    </header>
    <p>Remember that we can't guarantee eligibility, but can only recommend programs for you to look at.</p>
  </div>
</article>

Urgent

Source: src/components/alert-box/alert-box-urgent

Something went wrong.

Try refreshing the page or contact our help desk so we can help.

<article class="c-alert-box color-urgent-status">
  <div class="c-alert-box__icon">
    <svg class="c-alert-box__svg icon icon-4 icon-urgent" role="img">
      <title>Urgent Alert</title>
      <use xlink:href="#icon-urgent"></use>
    </svg>
  </div>
  <div class="c-alert-box__body">
    <header>
      <h1 class="type-h4 m-0">Something went wrong.</h1>
    </header>
    <p>Try refreshing the page or <a href="#">contact our help desk</a> so we can help.</p>
  </div>
</article>

Warning

Source: src/components/alert-box/alert-box-warning

You will need to apply from a desktop computer.

The online application will not work on a mobile phone or tablet. We can email or text you a link to this page to help you get back here more easily.

<article class="c-alert-box color-warning-status">
  <div class="c-alert-box__icon">
    <svg class="c-alert-box__svg icon icon-4 icon-warning" role="img">
      <title>Warning Alert</title>
      <use xlink:href="#icon-warning"></use>
    </svg>
  </div>
  <div class="c-alert-box__body">
    <header>
      <h1 class="type-h4 m-0">You will need to apply from a desktop computer.</h1>
    </header>
    <p>The online application will not work on a mobile phone or tablet. We can <a href="#">email or text you a link</a> to this page to help you get back here more easily.</p>
  </div>
</article>

COVID Response

Source: src/components/alert-box/alert-box-covid-response

COVID-19 updates related to benefits, food, housing, unemployment

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

ACCESS NYC

Patterns