Alert

Alerts can be used to place emphasis on a dialog or message that a visitor needs to see.
Currently there are 4 different styles that can be used. Pick a style that relates most to your intended message.
If you’d like to present a more interruptive dialog that requires user action, take a look at ss-modal.

Basic Alerts

<div class="ss-alert">Default alert</div>
<div class="ss-alert ss-success">Success alert</div>
<div class="ss-alert ss-info">Info alert</div>
<div class="ss-alert ss-warning">Warning alert</div>
<div class="ss-alert ss-error">Error alert</div>

Animated Alerts

Auto Animate

<div class="ss-alert ss-anim-jello">Default alert</div>
<div class="ss-alert ss-success ss-anim-jello">Success alert</div>
<div class="ss-alert ss-info ss-anim-jello">Info alert</div>
<div class="ss-alert ss-warning ss-anim-jello">Warning alert</div>
<div class="ss-alert ss-error ss-anim-jello">Error alert</div>

Onhover Animate

<div class="ss-alert ss-hvr-anim-jello">Default alert</div>
<div class="ss-alert ss-success ss-hvr-anim-jello">Success alert</div>
<div class="ss-alert ss-info ss-hvr-anim-jello">Info alert</div>
<div class="ss-alert ss-warning ss-hvr-anim-jello">Warning alert</div>
<div class="ss-alert ss-error ss-hvr-anim-jello">Error alert</div>