Everything you can do with Beauter
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.
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.
Counters can be used to show numerical counts like number of notifications etc.3
Now using both together
<div class="alert _nightblue"> You got <span class="count _danger">5</span> unread messages! </div>