Alert

This is how we bring urgent information to our members


How we design them

  • Use these for top level / system messaging
  • Don’t use for form errors, that’s what the form-error component is for
  • To hide the alert add the gg-c-alert--animate-out modifier

How they look

1. Success

View demo Open in new window
320 x 568
View code
<div class="gg-c-alert gg-c-alert--success" role="alert">
  <div class="gg-c-alert__wrapper">
    <div class="gg-c-alert__content">
      <div class="gg-c-alert__message">
        <p class="gg-c-alert__title">Woohoo</p>
        <p>It's all complete and good things are coming your&nbsp;way.</p>
      </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>
</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>

2. Error

View demo Open in new window
320 x 568
View code
<div class="gg-c-alert gg-c-alert--error" role="alert">
  <div class="gg-c-alert__wrapper">
    <div class="gg-c-alert__content">
      <div class="gg-c-alert__message">
        <p class="gg-c-alert__title">Oh no</p>
        <p>Something has gone terribly, terribly&nbsp;wrong</p>
      </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>
</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>

3. Warning

View demo Open in new window
320 x 568
View code
<div class="gg-c-alert gg-c-alert--warning" role="alert">
  <div class="gg-c-alert__wrapper">
    <div class="gg-c-alert__content">
      <div class="gg-c-alert__message">
        <p class="gg-c-alert__title">Watch out</p>
        <p>Something could go&nbsp;wrong</p>
      </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>
</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>

4. Info

View demo Open in new window
320 x 568
View code
<div class="gg-c-alert gg-c-alert--info" role="alert">
  <div class="gg-c-alert__wrapper">
    <div class="gg-c-alert__content">
      <div class="gg-c-alert__message">
        <p class="gg-c-alert__title">Hello</p>
        <p>Just to let you know everything is&nbsp;ok</p>
      </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>
</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>