Alerts

Defines styles for success, warning and error messages.

Usage

To apply this feature, add the .css-alert class to a block element.

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.

Close button

To apply a close button, add the .css-close-button class to a <a> element inside the alert box.

Color modifiers

There are three more color modifiers available. Just add one of the following classes to apply a different look.

 

To indicate success or a positive message add the .alert-success class.

 

To indicate a message containing a warning add the .alert-warning class.

 

To indicate an important message add the .alert-danger class.

Markup

<div class="css-alert alert-success">
	<a class="css-close-button" href="#alert-1"> </a>
	<p>...</p>
</div>

This page has been viewed: 1488 time(s)