Notifications

Notifications 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 notifications: Notification Boxes and Notification Banners.

Notification Boxes

Use the following markup to create an notification box.

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

Contextual Colors

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

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

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

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

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

Notification Banners - Standalone

The standalone notification 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 .notification-banner.

Standalone Notification Banners

Successfully linked account

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

<!-- Example Notification Banner (standalone) -->
<div class="notification-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="notification-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">

        <!-- Notification Banner - "success" context -->
        <div class="notification-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">

        <!-- Notification Banner - "alert" context -->
        <div class="notification-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">

        <!-- Notification Banner - "warning" context -->
        <div class="notification-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">

        <!-- Notification Banner - "info" context -->
        <div class="notification-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>

Notification Banners - Insert

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

Successfully linked account

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

<!-- Example Notification Banner (Insert) -->
<div class="notification-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="notification-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.

<!-- Notification Banner - "success" context -->
<div class="notification-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>

<!-- Notification Banner - "notification" context -->
<div class="notification-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>

<!-- Notification Banner - "warning" context -->
<div class="notification-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>

<!-- Notification Banner - "info" context -->
<div class="notification-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!