Alert

Defines styles for success, warning and error messages.

Usage

To apply this component, add the .f-alert class to a block element.

Example

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

Markup

<div class="f-alert">...</div>

Close button

To apply a close button, add the .f-alert-close class to a <button> or <a> element inside the alert box. To enable the JavaScript for the close button, just add the data-f-alert attribute to the alert box. We recommend adding the .f-close class from the Close component to give the button a proper styling, though you can also use text or an image.

Example

close

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Markup

<div class="f-alert" data-f-alert>
	<a href="" class="f-alert-close f-close"><i class="material-icons">close</i></a>
	<p>...</p>
</div>

Color modifiers

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

Example

close

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

close

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

close

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

Markup

<div class="f-alert f-alert-success"> ... </div>
<div class="f-alert f-alert-warning">...</div>
<div class="f-alert f-alert-danger">...</div>

Size modifier

Add the .f-alert-large class to increase the spacing in an alert box. This can be useful, if you want to use richer typography.

Example

close

Today's headline

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Markup

<div class="f-alert f-alert-large">...</div>