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.

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 bg-status-info mb-4" data-sketch-symbol-instance="components/disclaimer/disclaimer-small">
  <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

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

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" data-sketch-symbol-instance="components/disclaimer/disclaimer-small">
  <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>

Urgent

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

<article class="c-alert-box bg-status-urgent mb-4" data-sketch-symbol-instance="components/disclaimer/disclaimer-small">
  <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

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

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" data-sketch-symbol-instance="components/disclaimer/disclaimer-small">
  <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>

Share Form

Source: src/components/alert-box/alert-box-share-form

Information Alert

Come back to it later.

We can send you a link to this page to help you get back to it when you’re ready.

Information Alert By providing your email address or phone number, you agree to be contacted by the City of New York regarding your ACCESS NYC public benefit screening results. Your activity on ACCESS NYC is anonymous, but providing your phone number may identify you and reveal that you used the website. To find out more about how the City might use the data you share with ACCESS NYC, visit the Terms of Use for NYC.gov, and Privacy Policy for NYC.gov.

<article class="c-alert-box bg-status-info mb-4" data-sketch-symbol-instance="components/disclaimer/disclaimer-small">
  <div class="c-alert-box__icon"><svg class="c-alert-box__svg icon icon-4 icon-ui-info" role="img">
      <title>Information Alert</title>
      <use xlink:href="#icon-ui-info"></use>
    </svg></div>
  <div class="c-alert-box__body">
    <header>
      <h1 class="type-h4 m-0">Come back to it later.</h1>
    </header>
    <p>We can send you a link to this page to help you get back to it when you’re ready.</p>
    <div class="layout--gutter screen-tablet:layout--columns-gutter">
      <div class="c-share-form" data-sketch-symbol-instance="components/share-form/share-form-email"><a class="btn btn-primary c-share-form__toggle active" data-scroll-offset="20" href="#share-by-text">Email</a>
        <div class="c-share-form__input active" id="share-by-text">
          <form>
            <div class="c-share-form__controls"><input name="to" placeholder="Email" required="true" type="email" />
              <div class="c-share-form__button"><button class="btn btn-primary btn-small" data-sketch-symbol-instance="elements/buttons/btn-small" type="submit">Send</button>
                <div class="c-share-form__spinner" data-js="spinner" style="display: none"><svg class="spinner icon-4 text-color-yellow-access" data-sketch-symbol-instance="elements/spinner/spinner" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <circle class="spinner__path" cx="12" cy="12" fill="none" r="10"></circle>
                  </svg></div>
                <div class="success-message">Sent!</div>
              </div>
            </div>
          </form>
        </div>
      </div>
      <div class="c-share-form" data-sketch-symbol-instance="components/share-form/share-form-text"><a class="btn btn-primary c-share-form__toggle active" data-scroll-offset="20" href="#share-by-text">Text</a>
        <div class="c-share-form__input active" id="share-by-text">
          <form>
            <div class="c-share-form__controls"><input name="to" placeholder="Phone Number" required="true" type="tel" />
              <div class="c-share-form__button"><button class="btn btn-primary btn-small" data-sketch-symbol-instance="elements/buttons/btn-small" type="submit">Send</button>
                <div class="c-share-form__spinner" data-js="spinner" style="display: none"><svg class="spinner icon-4 text-color-yellow-access" data-sketch-symbol-instance="elements/spinner/spinner" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <circle class="spinner__path" cx="12" cy="12" fill="none" r="10"></circle>
                  </svg></div>
                <div class="success-message">Sent!</div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="mt-3 screen-tablet:m-0">
      <div class="c-disclaimer" data-sketch-symbol-instance="components/disclaimer/disclaimer-small">
        <p><small><svg class="c-disclaimer__icon c-disclaimer__icon--pre icon icon-ui-info" role="img">
              <title>Information Alert</title>
              <use xlink:href="#icon-ui-info"></use>
            </svg>By providing your email address or phone number, you agree to be contacted by the City of New York regarding your ACCESS NYC public benefit screening results. Your activity on ACCESS NYC is anonymous, but providing your phone number may identify you and reveal that you used the website. To find out more about how the City might use the data you share with ACCESS NYC, visit the <a href="http://www1.nyc.gov/home/terms-of-use.page" target="_blank" rel="noopener noreferrer"> Terms of Use for NYC.gov</a>, and <a href="http://www1.nyc.gov/home/privacy-policy.page" target="_blank" rel="noopener noreferrer"> Privacy Policy for NYC.gov</a>.</small></p>
      </div>
    </div>
  </div>
</article>