Skip to main content

Patterns

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.

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 bg-status-info mb-4">
  <div class="c-alert-box__icon"><svg class="c-alert-box__svg icon icon-4 icon-ui-info">
      <use xlink:href="#icon-ui-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 Alert

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 bg-status-success mb-4">
  <div class="c-alert-box__icon"><svg class="c-alert-box__svg icon icon-4 icon-ui-check-circle" role="img">
      <title>Success Alert</title>
      <use xlink:href="#icon-ui-check-circle"></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>
<article class="c-alert-box bg-status-urgent mb-4">
  <div class="c-alert-box__icon"><svg class="c-alert-box__svg icon icon-4 icon-ui-alert-octagon" role="img">
      <title>Urgent Alert</title>
      <use xlink:href="#icon-ui-alert-octagon"></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 Alert

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 bg-status-warning mb-4">
  <div class="c-alert-box__icon"><svg class="c-alert-box__svg icon icon-4 icon-ui-alert-triangle" role="img">
      <title>Warning Alert</title>
      <use xlink:href="#icon-ui-alert-triangle"></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>