Alerts

Alerts are handy elements you can drop into a form or inline on a page to communicate success, warnings, failure or just information. They'll conform to 100% of the container width you put them in.

Below, we discuss two types of alerts: Alert Boxes and Alert Banners.

Alert Boxes

Use the following markup to create an alert box.

This is a standard alert. × 
<!-- Example alert -->
<div class="alert-box">
    <!-- Alert content goes here -->
    This is a standard alert.
    <a href="#" class="close">&times;</a>
</div>

Contextual Colors

Depending on the context or message of your alert, you may want to use one of the following alert-boxes:

This is a success alert. ×
This is a warning alert. ×
This is an info alert. ×
This is an "alert" - alert. × 
<div data-alert class="alert-box success">
    This is a success alert.
    <a href="#" class="close">&times;</a>
</div>

<div data-alert class="alert-box warning">
    This is a warning alert.
    <a href="#" class="close">&times;</a>
</div>

<div data-alert class="alert-box info">
    This is an info alert.
    <a href="#" class="close">&times;</a>
</div>

<div data-alert class="alert-box alert">
    This is an "alert" - alert.
    <a href="#" class="close">&times;</a>
</div>

Alert Banners - Standalone

The standalone alert banner is meant to, well, stand alone. It can be injected in dialogs or modals or appear at the top of a dashboard, and is meant to prominently inform the user of important information.

To use it, simply apply the .standalone class to your .alert-banner.

Standalone Alert Banners

Successfully linked account

We have successfully linked your Chase checking 2019 account. You can now track your transactions.

<!-- Example Alert Banner (standalone) -->
<div class="alert-banner standalone success">

    <!-- Icon -->
    <span class="icon"></span>

    <!-- Heading -->
    <h3>Successfully linked account</h3>

    <!-- Copy -->
    <p>We have successfully linked your Chase checking 2019 account. You can now track your transactions.</p>
</div>

This could easily be extended to include buttons.

Successfully linked account

We have successfully linked your Chase checking 2019 account. You can now track your transactions.

<div class="alert-banner standalone success">

    <span class="icon"></span>
    <h3>Successfully linked account</h3>
    <p>We have successfully linked your Chase checking 2019 account. You can now track your transactions.</p>

    <!-- Buttons -->
    <div>
        <button>Got it, Thanks!</button>
        <button class="dull">Learn more</button>
    </div>
</div>

Contextual Variants

As always, classes can be applied to represent our four standard contexts: .success, .alert, .warning, and .info.

Successfully linked account

We have successfully linked your Chase checking 2019 account. You can now track your transactions.

Sorry, you can only upload PDFs

Looks like you tried to upload a file we don't support. Convert your file to a PDF and then try uploading again.

Update your Password

A Reminder that your current password expires in 29 days. Please update your password before it expires.

System Maintenance

We will be performing system maintenance on May 14, 2017 between the hours of 1am and 3am and our site may be slow.

<div class="row">
    <div class="columns small-12 medium-6 margin-bottom-xlarge">

        <!-- Alert Banner - "success" context -->
        <div class="alert-banner standalone success">
            <span class="icon"></span>
            <h3>Successfully linked account</h3>
            <p>We have successfully linked your Chase checking 2019 account. You can now track your transactions.</p>
            <div>
                <button>Got it, Thanks!</button>
                <button class="dull">Learn more</button>
            </div>
        </div>

    </div>

    <div class="columns small-12 medium-6 margin-bottom-xlarge">

        <!-- Alert Banner - "alert" context -->
        <div class="alert-banner standalone alert">
            <span class="icon"></span>
            <h3>Sorry, you can only upload PDFs</h3>
            <p>Looks like you tried to upload a file we don't support. Convert your file to a PDF and then try uploading again.</p>
            <div>
                <button>Try Again</button>
                <button class="dull">Cancel</button>
            </div>
        </div>

    </div>

</div>
<div class="row">

    <div class="columns small-12 medium-6 margin-bottom-xlarge">

        <!-- Alert Banner - "warning" context -->
        <div class="alert-banner standalone warning">
            <span class="icon"></span>
            <h3>Update your Password</h3>
            <p>A Reminder that your current password expires in 29 days. Please update your password before it expires.</p>
            <div>
                <button>Update</button>
                <button class="dull">Cancel</button>
            </div>
        </div>

    </div>

    <div class="columns small-12 medium-6 margin-bottom-xlarge">

        <!-- Alert Banner - "info" context -->
        <div class="alert-banner standalone info">
            <span class="icon"></span>
            <h3>System Maintenance</h3>
            <p>We will be performing system maintenance on May 14, 2017 between the hours of 1am and 3am and our site may be slow.</p>
            <div>
                <button>Got it, Thanks!</button>
                <button class="dull">Learn more</button>
            </div>
        </div>

    </div>

</div>

Alert Banners - Insert

The insert variety of the Alert Banner is meant to be shown insert with other content. To use it, simply apply the .insert class to your .alert-banner.

Successfully linked account

We have successfully linked your Chase checking 2019 account. You can now track your transactions.

<!-- Example Alert Banner (Insert) -->
<div class="alert-banner success insert">

    <!-- Icon -->
    <span class="icon"></span>

    <!-- Heading -->
    <h3>Successfully linked account</h3>

    <!-- Copy -->
    <p>We have successfully linked your Chase checking 2019 account. You can now track your transactions.</p>

</div>

Again, these can be easily displayed with buttons.

Successfully linked account

We have successfully linked your Chase checking 2019 account. You can now track your transactions.

<div class="alert-banner success insert">

    <span class="icon"></span>
    <h3>Successfully linked account</h3>
    <p>We have successfully linked your Chase checking 2019 account. You can now track your transactions.</p>
    <div>
        <button>Got it, Thanks!</button>
        <button class="dull">Learn more</button>
    </div>
</div>

Contextual Variants

Again, classes can be applied to represent our four standard contexts: .success, .alert, .warning, and .info.

Successfully linked account

We have successfully linked your Chase checking 2019 account. You can now track your transactions.

Sorry, you can only upload PDFs

Looks like you tried to upload a file we don't support. Convert your file to a PDF and then try uploading again.

Update your Password

A Reminder that your current password expires in 29 days. Please update your password before it expires.

System Maintenance

We will be performing system maintenance on May 14, 2017 between the hours of 1am and 3am and our site may be slow.

<!-- Alert Banner - "success" context -->
<div class="alert-banner insert success margin-bottom-medium">
    <span class="icon"></span>
    <h3>Successfully linked account</h3>
    <p>We have successfully linked your Chase checking 2019 account. You can now track your transactions.</p>
    <div>
        <button>Got it, Thanks!</button>
        <button class="dull">Learn more</button>
    </div>
</div>

<!-- Alert Banner - "alert" context -->
<div class="alert-banner insert alert margin-bottom-medium">
    <span class="icon"></span>
    <h3>Sorry, you can only upload PDFs</h3>
    <p>Looks like you tried to upload a file we don't support. Convert your file to a PDF and then try uploading again.</p>
    <div>
        <button>Try Again</button>
        <button class="dull">Cancel</button>
    </div>
</div>

<!-- Alert Banner - "warning" context -->
<div class="alert-banner insert warning margin-bottom-medium">
    <span class="icon"></span>
    <h3>Update your Password</h3>
    <p>A Reminder that your current password expires in 29 days. Please update your password before it expires.</p>
    <div>
        <button>Update</button>
        <button class="dull">Cancel</button>
    </div>
</div>

<!-- Alert Banner - "info" context -->
<div class="alert-banner insert info">
    <span class="icon"></span>
    <h3>System Maintenance</h3>
    <p>We will be performing system maintenance on May 14, 2017 between the hours of 1am and 3am and our site may be slow.</p>
    <div>
        <button>Got it, Thanks!</button>
        <button class="dull">Learn more</button>
    </div>
</div>

Example Modal

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Back to Version Explorer!