Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Default Alerts

Add color contextual class.

<div class="alert success" role="alert">This is a success alert—check it out!</div>
<div class="alert warning" role="alert">This is a warning alert—check it out!</div>
<div class="alert danger" role="alert">This is a danger alert—check it out!</div>

Add class="square" to make alert square.

Alert dismissible

<div class="alert warning" role="alert" id="dismiss">
	<a href="#dismiss" class="close"></a>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>

Alerts with buttons

<div class="alert warning" role="alert" id="message">
	<h1 class="title">Some Message</h1>
	<a href="#dismiss" class="close"></a>
	<div class="container">
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit velit nam eos. Repellendus dolorum quaerat, inventore. Minus quod neque culpa, aut id fugiat, alias. Qui recusandae, distinctio perferendis. Nihil, accusamus.
		</p>
		<button class="btn has-effect primary">Okay&;</button>
		<button class="btn has-effect">No, thanks</button>
	</div>
</div>

Float alert

add class="floating" to made a float alert. 

<div class="alert danger floating" role="alert" id="float-alert">
	<a href="#float-alert" class="close"></a>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
	Fugit velit nam eos.
</div>

add class="top" to change default position to right top or add class="left" to change position to bottom left.

Flat alert

Add class="flat" to made a flat alert.

<div class="flat alert success" id="dismissFlatAlert">
	<h1 class="title">Salvo com Sucesso!</h1>
	<a href="#dismissFlatAlert" class="close"></>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>

State Messages

Something is Wrong :(

Welcome Mr.Lupossa

Updating 20%, don't turn off your computer 

<div class="group">
	<p class="text-error">
		Something is wrong :(
	</p>
	<p class="text-success">
		Welcome Mr. Lupossa
	</p>
	<p class="text-warning">
		Updating 20%, don't turn off your computer
	</p>
</div>

Issues

Bug or features request ? Open an Issue