For more prominent or important messages, Global Notices can be highlighted which adds a more vibrant background colour to the notice.

Global Notices can be dismissable, useful if their interaction is no longer needed on the page.

A simple Global Notice

This is a simple Global Notice this uses the default colours and type settings and is not dismissable.

<div class="c-global-notice ">
  <h2 class="c-global-notice__title">A simple, yet important notice</h2>
  <p>This is a simple Global Notice example with a title and description</p>
</div>

A highlighted Global Notice

This is a Global Notice highlighted in our branded colours that shows a title without a description.

<div class="c-global-notice c-global-notice--highlighted">
  <h2 class="c-global-notice__title">A highlighted Global Notice example</h2>
  <p></p>
</div>

A Global Notice that is dismissable

This is a highlighted Global Notice as the previous example, but this one can be dismissed using the 'x' icon that is added via the "dismissable": true option.

<div class="c-global-notice c-global-notice--highlighted">
  <button type="button" class="c-alert__close js-notice-close" aria-label="Close">&times;</button>
  <h2 class="c-global-notice__title">A highlighted Global Notice</h2>
  <p>This one also has a nice description section under the title and can be dismissed</p>
</div>

Options

Atoms

• global notice
  • highlighted: true or false (optional, default false)
  • title: the title that is added into the global notice
  • description: a brief paragraph describing the notice
  • dismissable: Boolean. Whether the alert is dismissable or not (optional, default false)