Alerts

# Intro

Alerts are displayed inside of the page content to notify the user of a status or action.

This is the default alert

<div class="alert" role="alert">
	<div class="content">
		This is the default alert
	</div>
</div>

The alert class has color modifiers available with -primary, -success, -warning, -danger, -dark, and -light. The -light modifier should only be used in the dark theme or inside darker elements.

This is a primary alert

This is a success alert

This is a warning alert

This is a danger alert

This is a dark alert

This is a light alert

<div class="alert -primary" role="alert">
	<div class="content">
		This is a primary alert
	</div>
</div>

# Shape

You can change the shape of alerts by using the border radius utility on the content element.

This is a rectangle alert

This is a rounded small alert

This is a rounded alert

This is a rounded large alert

This is a rounded full alert

<div class="alert" role="alert">
	<div class="content --rectangle">
		This is a rectangle alert
	</div>
</div>

# Outline

Alerts can be outlined using the -outline modifier. Backgrounds will be transparent.

This is an outlined alert

<div class="alert -outline" role="alert">
	<div class="content">
		This is an outlined alert
	</div>
</div>
<div class="alert -primary -outline" role="alert">
	<div class="content">
		This is an outlined alert
	</div>
</div>

# Dismissible

Alerts can be dismissible by adding the -dismissible modifier to the alert and both a checkbox and label above the content container. Dismissible alerts do not use any JavaScript.

This is a dismissible alert

<div class="alert -primary -dismissible" role="alert">
	<input type="checkbox" id="dismissible1"/>
	<label for="dismissible1" title="close"><i class="icon lni lni-close"></i></label>
	<div class="content">
		This is a dismissible alert
	</div>
</div>
<div class="alert -primary -outline -dismissible" role="alert">
	<input type="checkbox" id="dismissible2"/>
	<label for="dismissible2" title="close"><i class="icon lni lni-close"></i></label>
	<div class="content">
		This is a dismissible alert
	</div>
</div>

# Fixed

Alerts can be fixed buy using the -fixed modifier along with -top or -bottom to affix an alert to the top or bottom of the page.

Toggle Top

This is a fixed top alert

Toggle Bottom

This is a fixed bottom alert

<div class="alert -primary -dismissible -fixed -top" role="alert">
	<input type="checkbox" id="fixed1" checked/>
	<label for="fixed1" title="close"><i class="icon lni lni-close"></i></label>
	<div class="content">
		This is a fixed top alert
	</div>
</div>
...
<div class="alert -primary -dismissible -fixed -bottom" role="alert">
	<input type="checkbox" id="fixed2" checked/>
	<label for="fixed2" title="close"><i class="icon lni lni-close"></i></label>
	<div class="content">
		This is a fixed bottom alert
	</div>
</div>