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.

EXAMPLE

Show Code

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

Contextual Colors

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

EXAMPLE

Show Code

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

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

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

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

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

EXAMPLE

Show Code

 
<!-- 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>

Successfully linked account

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

This could easily be extended to include buttons.

EXAMPLE

Show Code

 
<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>

Successfully linked account

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

Contextual Variants

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

EXAMPLE

Show Code

 
<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&apos;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>

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 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.

EXAMPLE

Show Code

 
<!-- 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>

Successfully linked account

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

Again, these can be easily displayed with buttons.

EXAMPLE

Show Code

 
<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>

Successfully linked account

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

Contextual Variants

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

EXAMPLE

Show Code

 
<!-- 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&apos;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>

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.

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!