Minor alert

    <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>

  

    <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>

  

    <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>

  

    <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>
  

    <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>