Alert Bars/Boxes

  The documentation pages are still being written, please bear with us.

Quick Look

A helpful alert bar.

An informative alert bar.

A successful alert bar.

An error alert bar.

<div class="alert-bar-help">A helpful alert bar.</div>
<p class="alert-bar-info">An informative alert bar.</p>
<div class="alert-bar-success"><p>A successful alert bar.</p></div>
<span class="alert-bar-error">An error alert bar.</span>

Sass

Load the alert bar styles by including the alert-bars() mixin:

@include alert-bars();

The following options can be passed to the mixin to customize the alert bars:

Option	Description	Default
name	The name used when generating the CSS selector	'alert'
colors	A Sass map where the key will be used as a modifier and the value will be used as the color	palette('alert')
text-color	Text color for alert bars	color('greyscale', 'white')
bar-padding	Padding for alert bars	0.85em
box-padding	Padding for alert boxes	1.5em

The above options can be passed to the mixin like so:

@include alert-bars((
    'colors':(
        'carrot': #F97E52,
        'error' : #DA4D44,
        'rose'  : #D870AD
    )
));

The above example produces the following alert bars (custom values will be recursively merged with default values):

A carrot alert bar.

<div class="alert-bar-carrot">A carrot alert bar.</div>

A rose alert bar.

A helpful alert bar.

An informative alert bar.

A successful alert bar.

An error alert bar.

Examples

With Icon

A successful alert bar.

An error alert bar.

<div class="alert-bar-success">
    <i class="alert_icon fa fa-times"></i> A successful alert bar.
</div>
<div class="alert-bar-error">
    <i class="alert_icon fa fa-times"></i> An error alert bar.
</div>

With Right-Aligned Icon

An error alert bar.

<div class="alert-bar-error">
    <i class="alert_icon-right fa fa-times"></i> An error alert bar.
</div>

Alert Box

<div class="alert-box-info">
    <h3 class="heading-size-4">This is an Alert Box</h3>
    <p>...<p>
</div>