Styleguide 0.30.11

18 - Alerts

Requires javascript

 

SISTE: Politiet vil fengsle SOS Rasisme-leder i fire uker for grovt bedrageri
<div data-alert class="alert-box">
  <span class="icon-Lab"></span> SISTE: Politiet vil fengsle SOS Rasisme-leder i fire uker for grovt bedrageri
  <a class="close"><span class="icon-Close"></span></a>
</div>

18.1 - Color

SISTE: Politiet vil fengsle SOS Rasisme-leder i fire uker for grovt bedrageri
.alert

Alert

SISTE: Politiet vil fengsle SOS Rasisme-leder i fire uker for grovt bedrageri
.success

Success

SISTE: Politiet vil fengsle SOS Rasisme-leder i fire uker for grovt bedrageri
.warning

Warning

SISTE: Politiet vil fengsle SOS Rasisme-leder i fire uker for grovt bedrageri
.secondary

Secondary

SISTE: Politiet vil fengsle SOS Rasisme-leder i fire uker for grovt bedrageri
.overlay

Overlay

SISTE: Politiet vil fengsle SOS Rasisme-leder i fire uker for grovt bedrageri
<div data-alert class="alert-box {$modifiers}">
  <span class="icon-Lab"></span> SISTE: Politiet vil fengsle SOS Rasisme-leder i fire uker for grovt bedrageri
  <a class="close"><span class="icon-Close"></span></a>
</div>

18.2 - Style

SISTE: Politiet vil fengsle SOS Rasisme-leder i fire uker for grovt bedrageri
.radius

Radius

SISTE: Politiet vil fengsle SOS Rasisme-leder i fire uker for grovt bedrageri
.round

Round

SISTE: Politiet vil fengsle SOS Rasisme-leder i fire uker for grovt bedrageri
<div data-alert class="alert-box {$modifiers}">
  <span class="icon-Lab"></span> SISTE: Politiet vil fengsle SOS Rasisme-leder i fire uker for grovt bedrageri
  <a class="close"><span class="icon-Close"></span></a>
</div>

18.3 - Alert group

Creates fixed alert-boxes to the top of the page that stack when showing multiple alerts.

<button onClick="db.libs.alert.create({'text': 'Pssssst. You really need to hear this…'})">Default</button>
<button onClick="db.libs.alert.create({'text': 'Success! You are awsome.', 'classes': 'success'})">Success</button>
<button onClick="db.libs.alert.create({'text': 'Error! Something is terribly wrong.', 'classes': 'alert'})">Alert</button>
<button onClick="db.libs.alert.create({'text': 'Warning! You are about to enter a restricted area.', 'classes': 'warning'})">Warning</button>
<button onClick="db.libs.alert.clear()" class="outline">Clear</button>