Minor alert

Alerts


How they look

1. Error

View demo Open in new window
320 x 568
View code
<div class="gg-c-minor-alert" role="alert">
  <div class="gg-c-minor-alert__icon"></div>
  <div class="gg-c-minor-alert__message">
    <p class="gg-c-minor-alert__title">
      Oops wrong credentials
    </p>
    <p>
      Keep seeing this message? <a href="#" class="gg-u-link">Try this instead</a>
    </p>
  </div>
</div>

2. Warning

View demo Open in new window
320 x 568
View code
<div class="gg-c-minor-alert gg-c-minor-alert--warning" role="alert">
  <div class="gg-c-minor-alert__icon"></div>
  <div class="gg-c-minor-alert__message">
    <p class="gg-c-minor-alert__title">
      Warning
    </p>
    <p>
      You are running low on credit. <a href="#" class="gg-u-link">Top up now</a>
    </p>
  </div>
</div>

3. Success

View demo Open in new window
320 x 568
View code
<div class="gg-c-minor-alert gg-c-minor-alert--success" role="alert">
  <div class="gg-c-minor-alert__icon"></div>
  <div class="gg-c-minor-alert__message">
    <p class="gg-c-minor-alert__title">
      Your payment has gone through
    </p>
  </div>
</div>

4. Info

View demo Open in new window
320 x 568
View code
<div class="gg-c-minor-alert gg-c-minor-alert--info" role="alert">
  <div class="gg-c-minor-alert__icon"></div>
  <div class="gg-c-minor-alert__message">
    <p class="gg-c-minor-alert__title">
      Just to let you know everything is ok
    </p>
  </div>
</div>

5. No icon

View demo Open in new window
320 x 568
View code
<div class="gg-c-minor-alert" role="alert">
  <div class="gg-c-minor-alert__message">
    <p class="gg-c-minor-alert__title">
      Looks like you are offline
    </p>
  </div>
</div>

6. With button

View demo Open in new window
320 x 568
View code
<div class="gg-c-minor-alert gg-c-minor-alert--warning" role="alert">
  <div class="gg-c-minor-alert__icon"></div>
  <div class="gg-c-minor-alert__message">
  <div>   
    <p class="gg-c-minor-alert__title">
      Warning
    </p>
    <p>
      You are running low on credit.
    </p>
    </div>
<button class="gg-c-btn--small-container gg-c-minor-alert__btn">
  <span class="gg-c-btn gg-c-btn--small gg-c-btn--primary ">
    <span class="gg-c-btn__switch">Top up credit</span>
  </span>
</button>

  </div>
</div>