Alert Messages

Beauter can add various types of alert messages which are dynamic. You can also use -close class and add a × symbol to close the alert message.

Using modifiers like _primary, _success, _shadow, _box etc will further shape and alter the design of the alert boxes. Learn more here.

Example

The static alert boxes

<div class="alert">
A simple static fixed alert box.
</div>

Dynamic Alert Boxes

<div class="alert _warning _shadow _box">
  <span class="-close">×</span>
  <strong>Woah!</strong> A dynamic alert box with close button.
</div>

Note that you need to include beauter.js at the end for the dynamic actions of -close symbol. See how here.

Counter

Counters can be used to show numerical counts like number of notifications etc.

<span class="count">3</span>

Now using both together

<div class="alert _nightblue">
  You got <span class="count _danger">5</span> unread messages!
</div>