Alerts

Warning

Here is a warning about something.

Error

Here is a warning about something.

Informational

Here is information about something.

Success

Here is confirmation about something.

HTML
<div class="fizz-alert-warning">
<p><strong>Warning</strong></p>
<p>Here is a warning about something.</p>
</div>

<div class="fizz-alert-error">
<p><strong>Error</strong></p>
<p>Here is a warning about something.</p>
</div>

<div class="fizz-alert-info">
<p><strong>Informational</strong></p>
<p>Here is information about something.</p>
</div>

<div class="fizz-alert-success">
<p><strong>Success</strong></p>
<p>Here is confirmation about something.</p>
</div>

Compact

Functionally the same as regular alerts. Just putting everything on one line.

Warning Here is a warning about something.

HTML
<div class="fizz-alert-warning">
<p><strong>Warning</strong> Here is a warning about something.</p>
</div>

Dismissable

Warning

Here is a warning about something.

HTML
<div class="fizz-alert-warning">
<button class="fizz-icon-button-small fizz-close-button">
<svg class="fizz-icon-16" role="img" aria-hidden="true" width="24" height="24">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<p><strong>Warning</strong></p>
<p>Here is a warning about something.</p>
</div>

Flash Message Container

You can add any number of alerts to a .fizz-flash-message-container give them a drop-shadow and position them absolutely on the page, relative to a parent container with .fizz-relative applied.

Error

Here is an error about something.

Error

Here is another error about something.

HTML
<div class="fizz-relative" style="height: 200px">
<div class="fizz-flash-message-container">
<div class="fizz-alert-error">
<button class="fizz-icon-button-small fizz-close-button">
<svg class="fizz-icon-16" role="img" aria-hidden="true" width="24" height="24">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<p><strong>Error</strong></p>
<p>Here is an error about something.</p>
</div>
<div class="fizz-alert-error">
<button class="fizz-icon-button-small fizz-close-button">
<svg class="fizz-icon-16" role="img" aria-hidden="true" width="24" height="24">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<p><strong>Error</strong></p>
<p>Here is another error about something.</p>
</div>
</div>
</div>