Skip to main content

Patterns

Alert Banner

The Alert Banner contains messages and information relevant to users. Whether the Alert Banner is visible depends on the Cookie JavaScript Utility and a user's interaction. When a user lands on a page, the alert's cookie will be checked or created. When a user closes the Alert Banner, the cookie will get an expiration date, allowing the user to navigate the site without seeing the alert until the expiration date has passed.

This alert component consist of icons and a block containing the banner's message. Click here to see a full page demonstration.

<div aria-describedby="dialog-desc-site-alert-slug" aria-labelledby="dialog-title-site-alert-slug" class="c-alert-banner bg-status-info fixed bottom-0 w-screen px-8 js-alert hidden" data-cookie="site-alert-slug" role="dialog">
  <div class="c-alert-banner-wrapper">
    <div class="c-alert-banner__icon"><svg class="c-alert-banner__svg icon icon-info">
        <use xlink:href="#icon-info"></use>
      </svg></div>
    <div class="c-alert-banner__body">ACCESS NYC will be undergoing maintenance Friday, February 2nd from 9pm to 11pm EST.</div>
    <div class="c-alert-banner__closing"><button id="alert-button" type="button"><svg class="icon-ui-x" role="img">
          <title>close</title>
          <use xlink:href="#icon-ui-x"></use>
        </svg></button></div>
  </div>
</div>