Alert

This is how we bring urgent information to our members

Default info alert
Alert with no icon
Alert with centered text
Success alert
Error alert
Warning alert
Dismissable alerts

How we design them

Use these for top level / system messaging
To show the alert add the gg-c-alert--animate-in modifier
To hide the alert add the gg-c-alert--animate-out modifier

Designed for inclusion

Don’t rely on colour or imagery alone

Our colour combination contrasts are nice and high so that everyone can read them with no issues. However, we shouldn’t use colour, or imagery, alone to indicate state. We should always ensure the use of visually hidden indicative text for users of screen readers and other assistive tech, who might not be able to see icons or colours:

<span class="gg-u-screen-reader-only">Info</span>
<span class="gg-u-screen-reader-only">Success</span>
<span class="gg-u-screen-reader-only">Error</span>
<span class="gg-u-screen-reader-only">Warning</span>

Ensure that ALL users are alerted at the right time

The alerts utilise the role="alert attribute which will inform users of assistive technology. However, the use case of when to add this should be considered, as assistive tech will immediately inform the user as soon as it detects it. Consider this when building journeys. The less urgent alerts need to utilise the aria-live="polite" attribute. We favour these methods over solely using CSS to hide them, as users of assistive tech can still access them inadvertantly.

How they look

Default - Info

View demo

320 x 568

View code

    
<div class="gg-c-alert gg-c-alert--info gg-c-alert--animate-in" aria-live="polite">
  <div class="gg-c-alert__content">
  <div class="gg-c-alert__icon"></div>
    <div class="gg-c-alert__message">
      <span class="gg-u-screen-reader-only">Info</span>
      <p class="gg-c-alert__title">Hello</p>
      <p>Just to let you know everything is&nbsp;ok</p>
      <a class="gg-u-link">I am a link</a>
    </div>
  </div>
</div>

Need to be dynamic?

View demo

320 x 568

View code

    <div class="gg-c-alert gg-c-alert--info">
  <div class="gg-c-alert__content">
  <div class="gg-c-alert__icon"></div>
    <div class="gg-c-alert__message">
      <span class="gg-u-screen-reader-only">Info</span>
      <p class="gg-c-alert__title">Hello</p>
      <p>Just to let you know everything is&nbsp;ok</p>
    </div>
  </div>
</div>

<section class="gg-o-page-section">
  <button class="gg-c-btn gg-c-btn--primary gg-c-btn--center" aria-label="Button">
    <span class="gg-c-btn__switch" aria-hidden="true">Alert me</span>
  </button>
</section>

<script>
  (() => {
    const alert= document.querySelector('.gg-c-alert')
    const invoke= document.querySelector('button')

    invoke.onclick = ()=> {
      alert.classList.add('gg-c-alert--animate-in');
      alert.setAttribute("role", "alert");
    }
  })();
</script>

No icon

View demo

320 x 568

View code

    <div class="gg-c-alert gg-c-alert--info gg-c-alert--animate-in" aria-live="polite">
  <div class="gg-c-alert__content">
    <div class="gg-c-alert__message">
      <span class="gg-u-screen-reader-only">Info</span>
      <p class="gg-c-alert__title">Here is some useful information </p>
    </div>
  </div>
</div>

Centred

View demo

320 x 568

View code

    
<div class="gg-c-alert gg-c-alert--info gg-c-alert--center gg-c-alert--animate-in" aria-live="polite">
  <div class="gg-c-alert__wrapper">
    <div class="gg-c-alert__content">
      <div class="gg-c-alert__message">
        <span class="gg-u-screen-reader-only">Info</span>
        <p class="gg-c-alert__title">Some useful information</p>
        <a class="gg-u-link">I am a link</a>
      </div>
    </div>
  </div>
</div>

Success

View demo

320 x 568

View code

    
<div class="gg-c-alert gg-c-alert--success gg-c-alert--animate-in" role="alert">
  <div class="gg-c-alert__content">
  <div class="gg-c-alert__icon"></div>
    <div class="gg-c-alert__message">
      <span class="gg-u-screen-reader-only">Success</span>
      <p class="gg-c-alert__title">Woohoo</p>
      <p>It's all complete and good things are coming your&nbsp;way.</p>
      <a class="gg-u-link">I am a link</a>
    </div>
  </div>
</div>

Error

View demo

320 x 568

View code

    <div class="gg-c-alert gg-c-alert--error gg-c-alert--animate-in" role="alert">
  <div class="gg-c-alert__content">
  <div class="gg-c-alert__icon"></div>
    <div class="gg-c-alert__message">
      <span class="gg-u-screen-reader-only">Error</span>
      <p class="gg-c-alert__title">Oh no</p>
      <p>Something has gone terribly, terribly&nbsp;wrong</p>
    </div>
  </div>
</div>

Warning

View demo

320 x 568

View code

    
<div class="gg-c-alert gg-c-alert--warning gg-c-alert--animate-in" role="alert">
  <div class="gg-c-alert__content">
  <div class="gg-c-alert__icon"></div>
    <div class="gg-c-alert__message">
      <span class="gg-u-screen-reader-only">Warning</span>
      <p class="gg-c-alert__title">Watch out</p>
      <p>Something could go&nbsp;wrong</p>
      <a class="gg-u-link">I am a link</a>
    </div>
  </div>
</div>

Dismissable

View demo

320 x 568

View code

    
<div class="gg-c-alert gg-c-alert--info gg-c-alert--animate-in" role="alert">
  <div class="gg-c-alert__content">
  <div class="gg-c-alert__icon"></div>
    <div class="gg-c-alert__message">
      <span class="gg-u-screen-reader-only">Info</span>
      <p class="gg-c-alert__title">Hello</p>
      <p>Just to let you know everything is&nbsp;ok</p>
      <a class="gg-u-link">I am a link</a>
    </div>
    <button class="gg-c-alert__close js-example-close" aria-label="Close alert">
      <svg class="gg-c-alert__close-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M33.3 25L45 13.3 36.7 5 25 16.7 13.3 5 5 13.3 16.7 25 5 36.7l8.3 8.3L25 33.3 36.7 45l8.3-8.3z"></path></svg>
    </button>
  </div>
</div>

<script>
  (() => {
    const alert= document.querySelector('.gg-c-alert')
    const alertClose = alert.querySelector('.gg-c-alert__close')

    alertClose.onclick = ()=> {
      alert.classList.add('gg-c-alert--animate-out');
    }
  })();
</script>