Alerts

Alerts are available for any length of text and includes many type of alerts

Regular Alerts

You can create an alert by simply adding class .fui-alert and represent the alert type using classes of background, For Example: .success 

<div class="fui-alert success">
	    An Alert
	</div>

Available Alerts

<div class="fui-alert primary" role="alert">
	    A simple primary alert — check it out!
	</div>

	<div class="fui-alert secondary" role="alert">
	    A simple secondary alert — check it out!
	</div>

	<div class="fui-alert gray" role="alert">
	    A simple gray alert — check it out!
	</div>

	<div class="fui-alert success" role="alert">
	    A simple success alert — check it out!
	</div>

	<div class="fui-alert danger" role="alert">
	    A simple danger alert — check it out!
	</div>

	<div class="fui-alert warning" role="alert">
	    A simple warning alert — check it out!
	</div>

	<div class="fui-alert info" role="alert">
	    A simple info alert — check it out!
	</div>

	<div class="fui-alert dark" role="alert">
	    A simple dark alert — check it out!
	</div>

Dismissable Alerts

You can create Dismissable alert by simply adding .dismissable class to .fui-alert and inside the alert add .fui-alert-close button, example shown below. 
<div class="fui-alert primary dismissable">
	    A simple primary alert — check it out!

	    <!-- ALERT CLOSE -->
	    <div class="fui-alert-close"><i class="fa fa-close"></i></div>
	</div>

Available Dismissable Alerts

<div class="fui-alert primary dismissable" role="alert">
	    A simple primary alert — check it out!

	    <!-- ALERT CLOSE -->
	    <div class="fui-alert-close"><i class="fa fa-close"></i></div>
	</div>

	<div class="fui-alert secondary dismissable" role="alert">
	    A simple secondary alert — check it out!

	    <!-- ALERT CLOSE -->
	    <div class="fui-alert-close"><i class="fa fa-close"></i></div>
	</div>

	<div class="fui-alert gray dismissable" role="alert">
	    A simple gray alert — check it out!

	    <!-- ALERT CLOSE -->
	    <div class="fui-alert-close"><i class="fa fa-close"></i></div>
	</div>

	<div class="fui-alert success dismissable" role="alert">
	    A simple success alert — check it out!

	    <!-- ALERT CLOSE -->
	    <div class="fui-alert-close"><i class="fa fa-close"></i></div>
	</div>

	<div class="fui-alert danger dismissable" role="alert">
	    A simple danger alert — check it out!

	    <!-- ALERT CLOSE -->
	    <div class="fui-alert-close"><i class="fa fa-close"></i></div>
	</div>

	<div class="fui-alert warning dismissable" role="alert">
	    A simple warning alert — check it out!

	    <!-- ALERT CLOSE -->
	    <div class="fui-alert-close"><i class="fa fa-close"></i></div>
	</div>

	<div class="fui-alert info dismissable" role="alert">
	    A simple info alert — check it out!

	    <!-- ALERT CLOSE -->
	    <div class="fui-alert-close"><i class="fa fa-close"></i></div>
	</div>

	<div class="fui-alert dark dismissable" role="alert">
	    A simple dark alert — check it out!

	    <!-- ALERT CLOSE -->
	    <div class="fui-alert-close"><i class="fa fa-close"></i></div>
	</div>