CSS only

Alert

Inline notices with an icon, title and description. SCSS-only: colour the alert with a token (ng-alert-success…) and combine modifiers.

An alert is a ng-alert with an optional ng-alert-icon, a ng-alert-body (ng-alert-title + ng-alert-desc) and, when dismissible, a ng-alert-close button.

Colors

Soft background tinted by the colour token, with a side bar in the darker tone. The four semantic ones above are the common cases; every framework colour token works:

Heads up

An informational message for the user.

Saved

Your changes were stored successfully.

Careful

Double-check this before continuing.

Error

Something went wrong with the request.

alert.html

<div class="ng-alert ng-alert-info">
    <span class="ng-alert-icon"><i class="ph ph-info"></i></span>
    <div class="ng-alert-body">
        <div class="ng-alert-title">Heads up</div>
        <div class="ng-alert-desc">An informational message for the user.</div>
    </div>
</div>
<div class="ng-alert ng-alert-success">
    <span class="ng-alert-icon"><i class="ph ph-check-circle"></i></span>
    <div class="ng-alert-body">
        <div class="ng-alert-title">Saved</div>
        <div class="ng-alert-desc">Your changes were stored successfully.</div>
    </div>
</div>
<div class="ng-alert ng-alert-warning">
    <span class="ng-alert-icon"><i class="ph ph-warning"></i></span>
    <div class="ng-alert-body">
        <div class="ng-alert-title">Careful</div>
        <div class="ng-alert-desc">Double-check this before continuing.</div>
    </div>
</div>
<div class="ng-alert ng-alert-danger">
    <span class="ng-alert-icon"><i class="ph ph-x-circle"></i></span>
    <div class="ng-alert-body">
        <div class="ng-alert-title">Error</div>
        <div class="ng-alert-desc">Something went wrong with the request.</div>
    </div>
</div>

All colour tokens

ng-alert-primary

ng-alert-secondary

ng-alert-success

ng-alert-info

ng-alert-warning

ng-alert-danger

ng-alert-mute

ng-alert-blue

ng-alert-blue-sky

ng-alert-green

ng-alert-lime

ng-alert-aguagreen

ng-alert-indigo

ng-alert-purple

ng-alert-purple-heart

ng-alert-cyan

ng-alert-magenta

ng-alert-yellow

alert.html

<div class="ng-alert ng-alert-primary compact">
    <span class="ng-alert-icon"><i class="ph ph-circle"></i></span>
    <div class="ng-alert-body">
        <div class="ng-alert-desc">ng-alert-primary</div>
    </div>
</div>
<div class="ng-alert ng-alert-secondary compact">
    <span class="ng-alert-icon"><i class="ph ph-circle"></i></span>
    <div class="ng-alert-body">
        <div class="ng-alert-desc">ng-alert-secondary</div>
    </div>
</div>
<div class="ng-alert ng-alert-success compact">
    <span class="ng-alert-icon"><i class="ph ph-circle"></i></span>
    <div class="ng-alert-body">
        <div class="ng-alert-desc">ng-alert-success</div>
    </div>
</div>
<div class="ng-alert ng-alert-info compact">
    <span class="ng-alert-icon"><i class="ph ph-circle"></i></span>
    <div class="ng-alert-body">
        <div class="ng-alert-desc">ng-alert-info</div>
    </div>
</div>
<div class="ng-alert ng-alert-warning compact">
    <span class="ng-alert-icon"><i class="ph ph-circle"></i></span>
    <div class="ng-alert-body">
        <div class="ng-alert-desc">ng-alert-warning</div>
    </div>
</div>
<div class="ng-alert ng-alert-danger compact">
    <span class="ng-alert-icon"><i class="ph ph-circle"></i></span>
    <div class="ng-alert-body">
        <div class="ng-alert-desc">ng-alert-danger</div>
    </div>
</div>
<div class="ng-alert ng-alert-mute compact">
    <span class="ng-alert-icon"><i class="ph ph-circle"></i></span>
    <div class="ng-alert-body">
        <div class="ng-alert-desc">ng-alert-mute</div>
    </div>
</div>
<div class="ng-alert ng-alert-blue compact">
    <span class="ng-alert-icon"><i class="ph ph-circle"></i></span>
    <div class="ng-alert-body">
        <div class="ng-alert-desc">ng-alert-blue</div>
    </div>
</div>
<div class="ng-alert ng-alert-blue-sky compact">
    <span class="ng-alert-icon"><i class="ph ph-circle"></i></span>
    <div class="ng-alert-body">
        <div class="ng-alert-desc">ng-alert-blue-sky</div>
    </div>
</div>
<div class="ng-alert ng-alert-green compact">
    <span class="ng-alert-icon"><i class="ph ph-circle"></i></span>
    <div class="ng-alert-body">
        <div class="ng-alert-desc">ng-alert-green</div>
    </div>
</div>
<div class="ng-alert ng-alert-lime compact">
    <span class="ng-alert-icon"><i class="ph ph-circle"></i></span>
    <div class="ng-alert-body">
        <div class="ng-alert-desc">ng-alert-lime</div>
    </div>
</div>
<div class="ng-alert ng-alert-aguagreen compact">
    <span class="ng-alert-icon"><i class="ph ph-circle"></i></span>
    <div class="ng-alert-body">
        <div class="ng-alert-desc">ng-alert-aguagreen</div>
    </div>
</div>
<div class="ng-alert ng-alert-indigo compact">
    <span class="ng-alert-icon"><i class="ph ph-circle"></i></span>
    <div class="ng-alert-body">
        <div class="ng-alert-desc">ng-alert-indigo</div>
    </div>
</div>
<div class="ng-alert ng-alert-purple compact">
    <span class="ng-alert-icon"><i class="ph ph-circle"></i></span>
    <div class="ng-alert-body">
        <div class="ng-alert-desc">ng-alert-purple</div>
    </div>
</div>
<div class="ng-alert ng-alert-purple-heart compact">
    <span class="ng-alert-icon"><i class="ph ph-circle"></i></span>
    <div class="ng-alert-body">
        <div class="ng-alert-desc">ng-alert-purple-heart</div>
    </div>
</div>
<div class="ng-alert ng-alert-cyan compact">
    <span class="ng-alert-icon"><i class="ph ph-circle"></i></span>
    <div class="ng-alert-body">
        <div class="ng-alert-desc">ng-alert-cyan</div>
    </div>
</div>
<div class="ng-alert ng-alert-magenta compact">
    <span class="ng-alert-icon"><i class="ph ph-circle"></i></span>
    <div class="ng-alert-body">
        <div class="ng-alert-desc">ng-alert-magenta</div>
    </div>
</div>
<div class="ng-alert ng-alert-yellow compact">
    <span class="ng-alert-icon"><i class="ph ph-circle"></i></span>
    <div class="ng-alert-body">
        <div class="ng-alert-desc">ng-alert-yellow</div>
    </div>
</div>

Solid

Add ng-alert-solid for a filled treatment.

Solid info alert.

Solid success alert.

alert.html

<div class="ng-alert ng-alert-info ng-alert-solid">
    <span class="ng-alert-icon"><i class="ph ph-info"></i></span>
    <div class="ng-alert-body">
        <div class="ng-alert-desc">Solid info alert.</div>
    </div>
</div>
<div class="ng-alert ng-alert-success ng-alert-solid">
    <span class="ng-alert-icon"><i class="ph ph-check-circle"></i></span>
    <div class="ng-alert-body">
        <div class="ng-alert-desc">Solid success alert.</div>
    </div>
</div>

Compact

Compact — tighter padding, single line.

alert.html

<div class="ng-alert ng-alert-info compact">
    <span class="ng-alert-icon"><i class="ph ph-info"></i></span>
    <div class="ng-alert-body">
        <div class="ng-alert-desc">Compact — tighter padding, single line.</div>
    </div>
</div>

Dismissible

Add dismissible and a ng-alert-close button.

Dismissible

Adds a close button on the right.

alert.html

<div class="ng-alert ng-alert-warning dismissible">
    <span class="ng-alert-icon"><i class="ph ph-warning"></i></span>
    <div class="ng-alert-body">
        <div class="ng-alert-title">Dismissible</div>
        <div class="ng-alert-desc">Adds a close button on the right.</div>
    </div>
    <button class="ng-alert-close" aria-label="Dismiss"><i class="ph ph-x"></i></button>
</div>

Anatomy

ng-alert ng-alert-icon ng-alert-body ng-alert-title ng-alert-desc ng-alert-close

Variants & modifiers

ng-alert-{color} ng-alert-solid compact dismissible ng-alert-banner ng-alert-bare ng-alert-floating

Reference

Generated from the component source (_ng_alert.scss).

Component info

Name	`Alert`
Type	`css`
Version	`1.1.0`
Status	`css`
CSS	`/assets/css/components/_ng_alert.scss`

Classes

.ng-alert .ng-alert- .ng-alert-banner .ng-alert-bare .ng-alert-body .ng-alert-close .ng-alert-desc .ng-alert-floating .ng-alert-icon .ng-alert-solid .ng-alert-title

Tokens

--ng-alert-bar --ng-alert-bar-width --ng-alert-bg --ng-alert-close-space --ng-alert-color --ng-alert-gap --ng-alert-icon-size --ng-alert-padding --ng-alert-radius