Alerts

Provides feedback to users in the form of a brief, important message.

General Alerts

Primary (+ close example)

Primary (minimal)

Success

Success (minimal)

Danger

Danger (minimal)

Warning

Warning (minimal)

Dark

Dark (minimal)

Light

Light (minimal)

Code Example Shortcut: z-alert-name

<div class="alert-primary" role="alert">
    <a class="close position-corner"></a>
    primary alert—use alert-primary class
</div>

<div class="alert-primary-minimal" role="alert">
    primary alert
</div>

<div class="alert-success" role="alert">
    success alert
</div>

<div class="alert-success-minimal" role="alert">
    success alert
</div>

<div class="alert-danger" role="alert">
    danger alert
</div>

<div class="alert-danger-minimal" role="alert">
    danger alert
</div>

<div class="alert-warning" role="alert">
    warning alert
</div>

<div class="alert-warning-minimal" role="alert">
    warning alert
</div>

<div class="alert-dark" role="alert">
    dark alert
</div>

<div class="alert-dark-minimal" role="alert">
    dark alert
</div>

<div class="alert-light" role="alert">
    light alert
</div>

<div class="alert-light-minimal" role="alert">
    light alert
</div>

State Alerts

Success

Warning

Danger

Notice

Code Example Shortcut: z-alert-name

<div class="success">Success</div>
<div class="warning">Warning</div>
<div class="danger">Danger</div>
<div class="notice">Notice</div>

The Zen Test

Every component, section, and utility we ship will pass layout, color, and functional tests to ensure they perform flawlessly in today's modern browsers.

So you can be assured it "just works". Try it out below.