Global alerts

Global alerts display across the top of the entire site to convey important information to the users.

Global alerts contain text, optional buttons and a close link.

Default alert

Used to convey non-critical important information.

<div class="nsw-sitewide-message  js-sitewide-message" role="alert">
  <div class="nsw-sitewide-message__wrapper">
    <div class="nsw-sitewide-message__content">
      <h2 class="nsw-sitewide-message__title">State of Emergency for NSW</h2>
      <p>Catastrophic weather conditions are forecast this week for NSW. Keep up to date with the latest bush fires alerts and warnings in your area.</p>
    </div>
      <a href="#" class="nsw-button">More information</a>
    <button type="button" class="nsw-sitewide-message__close">
      <i class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">close</i>
      <span class="sr-only">Close message</span>
    </button>
  </div>
</div>

 

Copy
<div class="nsw-sitewide-message js-sitewide-message" role="alert">
  <div class="nsw-sitewide-message__wrapper">
    <div class="nsw-sitewide-message__content">
      <h2 class="nsw-sitewide-message__title">State of Emergency for NSW</h2>
      <p>Catastrophic weather conditions are forecast this week for north and north west regions of NSW. Keep up to date with the latest bush fires alerts and warnings in your area. <a href="#" class="nsw-sitewide-message__link">More information</a></p>
    </div>
    <button type="button" class="nsw-sitewide-message__close">
      <i class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">close</i>
      <span class="sr-only">Close message</span>
    </button>
  </div>
</div>

 

Copy

Critical alert

Used to convey critical information.

<div class="nsw-sitewide-message nsw-sitewide-message--critical js-sitewide-message" role="alert">
  <div class="nsw-sitewide-message__wrapper">
    <div class="nsw-sitewide-message__content">
      <h2 class="nsw-sitewide-message__title">State of Emergency for NSW</h2>
      <p>Catastrophic weather conditions are forecast this week for NSW. Keep up to date with the latest bush fires alerts and warnings in your area.</p>
    </div>
      <a href="#" class="nsw-button">More information</a>
    <button type="button" class="nsw-sitewide-message__close">
      <i class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">close</i>
      <span class="sr-only">Close message</span>
    </button>
  </div>
</div>

 

Copy
    <div class="nsw-sitewide-message nsw-sitewide-message--critical js-sitewide-message" role="alert">
      <div class="nsw-sitewide-message__wrapper">
        <div class="nsw-sitewide-message__content">
          <h2 class="nsw-sitewide-message__title">State of Emergency for NSW</h2>
          <p>Catastrophic weather conditions are forecast this week for north and north west regions of NSW. Keep up to date with the latest bush fires alerts and warnings in your area. <a href="#" class="nsw-sitewide-message__link">More information</a></p>
        </div>
        <button type="button" class="nsw-sitewide-message__close">
          <i class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">close</i>
          <span class="sr-only">Close message</span>
        </button>
      </div>
    </div>
  

 

Copy

Light alert

Used as an alternative to the blue default on sites where blue features prominently.

<div class="nsw-sitewide-message nsw-sitewide-message--light js-sitewide-message" role="alert">
  <div class="nsw-sitewide-message__wrapper">
    <div class="nsw-sitewide-message__content">
      <h2 class="nsw-sitewide-message__title">State of Emergency for NSW</h2>
      <p>Catastrophic weather conditions are forecast this week for NSW. Keep up to date with the latest bush fires alerts and warnings in your area.</p>
    </div>
      <a href="#" class="nsw-button">More information</a>
    <button type="button" class="nsw-sitewide-message__close">
      <i class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">close</i>
      <span class="sr-only">Close message</span>
    </button>
  </div>
</div>

 

Copy
<div class="nsw-sitewide-message nsw-sitewide-message--light js-sitewide-message" role="alert">
  <div class="nsw-sitewide-message__wrapper">
    <div class="nsw-sitewide-message__content">
      <h2 class="nsw-sitewide-message__title">State of Emergency for NSW</h2>
      <p>Catastrophic weather conditions are forecast this week for north and north west regions of NSW. Keep up to date with the latest bush fires alerts and warnings in your area. <a href="#" class="nsw-sitewide-message__link">More information</a></p>
    </div>
    <button type="button" class="nsw-sitewide-message__close">
      <i class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">close</i>
      <span class="sr-only">Close message</span>
    </button>
  </div>
</div>

 

Copy

Global alerts are designed to capture the attention of the user in a deliberately intrusive way.

Global alerts persist over a session, but are user dismissible.

Global alerts are purposefully created and not initiated by a user interaction or system event.

Use global alerts:

  • to attract the attention of the user for important messages, or to encourage an action
  • for messages or actions that are relevant to the entire product or system, not just a feature or page

Do:

  • use clear, concise easy to understand language, to minimise cognitive load
  • use a button or link text in the description to provide users with more information or to complete an action
  • use at the upper most part of the screen, before the masthead
  • reserve the use of the critical alert for circumstances which warrant it

Global alert states

Global alerts are styled according to their purpose:

  • Default alert - used to convey non-critical important information
  • Critical alert - used to convey critical information
  • Light alert - used as an alternative to the blue default on sites where blue features prominently.

When to avoid

Do not display in response to an action initiated by a user interaction or system event.