Introduction | TrueUI

Molecules | Messaging

Alerts

Examples

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.

HTML

<div class="bg-green white pa3">
  Well done! You successfully read this important alert message.
</div>
<div class="bg-blue white pa3">
  Heads up! This alert needs your attention, but it's not super important.
</div>
<div class="bg-orange white pa3">
  Warning! Better check yourself, you're not looking too good.
</div>
<div class="bg-red white pa3">
  Oh snap! Change a few things up and try submitting again.
</div>