Alerts

When you need to notice informing to user, use the .c-alert. .c-alert needs a modifier .-info, .-critical or .-warning.

Please use this one, for informational notices.

Please use this one, for critical notices.

Please use this one, for non-critical notices.

.c-alert.-info
  | Please use this one, for informational notices.

.c-alert.-critical
  | Please use this one, for critical notices.

.c-alert.-warning
  | Please use this one, for non-critical notices.

<div class="c-alert -info">
  Please use this one, for informational notices.
</div>
<div class="c-alert -critical">
  Please use this one, for critical notices.
</div>
<div class="c-alert -warning">
  Please use this one, for non-critical notices.
</div>

Margins of block/list elements inside .c-alert adjusted automaticaly.

This is a notice informing of situations of the user choice.
for example: After submitting the form below the user will have to wait some time to see the changes implemented.

learn more

.c-alert.-critical
  ul
    li This is a notice informing of situations of the user choice.
    li for example: After submitting the form below the user will have to wait some time to see the changes implemented.
  p
    a href="#" learn more

<div class="c-alert -critical">
  <ul>
    <li>
      This is a notice informing of situations of the user choice.
    </li>
    <li>
      for example: After submitting the form below the user will have to wait some time to see the changes implemented.
    </li>
  </ul>
  <p>
    <a href="#">learn more</a>
  </p>
</div>