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">
      <svg class="nsw-icon " focusable="false" aria-hidden="true">
        <use xlink:href="#close"></use>
      </svg>
      <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">
      <svg class="nsw-icon " focusable="false" aria-hidden="true">
        <use xlink:href="#close"></use>
      </svg>
      <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">
      <svg class="nsw-icon " focusable="false" aria-hidden="true">
        <use xlink:href="#close"></use>
      </svg>
      <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 to attract the attention of the user for important messages, or to encourage an action.

Use for messages or actions that are relevant to the entire product or system, not just a feature or page.

Use clear, concise easy to understand language, to minimise cognitive load.

Use at the upper most part of the screen, before the masthead.

Reserve the use of the critical alert for circumstances which warrant it.