Alerts

Messages that usually appear at the top of the page or container. Blaze alerts are grouped together in an .c-alerts block.

Default

Brand

Info

Warning

Success

Error

<div class="c-alert">
  <button class="c-button c-button--close">×</button>
  Default
</div>
<div class="c-alert c-alert--brand">
  <button class="c-button c-button--close">×</button>
  Brand
</div>
<div class="c-alert c-alert--info">
  <button class="c-button c-button--close">×</button>
  Info
</div>
<div class="c-alert c-alert--warning">
  <button class="c-button c-button--close">×</button>
  Warning
</div>
<div class="c-alert c-alert--success">
  <button class="c-button c-button--close">×</button>
  Success
</div>
<div class="c-alert c-alert--error">
  <button class="c-button c-button--close">×</button>
  Error
</div>