Alerts

Example: Global Alerts

Global Warning

×
  • The site will be down for scheduled maintenance on Friday, 13 October, 5:00-6:00 PM ET.

Global Information

×
  • Membership renewal begins soon. Get a head start on updating your profile. Go to Your Account

Code

HTML

<div class="alert media alert-global-warning alert-dismissable">
    <div class="media-left">
        <span class="icon pe-7s-attention" aria-hidden="true"></span>
    </div>
    <div class="media-body">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
        <ul class="list-unstyled">
            <li>The site will be down for scheduled maintenance on Friday, 13 October, 5:00-6:00 PM ET.</li>
        </ul>
    </div>
</div>

<div class="alert media alert-global-information alert-dismissable">
    <div class="media-left">
        <span class="icon pe-7s-info" aria-hidden="true"></span>
    </div>
    <div class="media-body">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
        <ul class="list-unstyled">
            <li>Membership renewal begins soon. Get a head start on updating your profile. <a href="#" class="int-nav">Go to Your Account</a></li>
        </ul>
    </div>
</div>
                

Documentation

Problem Being Solved

We need to display a temporary message on every page of the enterprise site.

When To Use

Users want to know when there is an issue that will impact their access (maintenance alerts), or when there is a deadline with a significant impact (membership renewal).

When Not To use

A global alert should not be used when the issue affects a small audience segment, or when the issue is confined to a small section of the site. It should not be used for permanent content.

Formatting

  • Alerts rely on bootstrap's alert and media box styles.
  • Alerts will be displayed at top of page, full width.
  • Icons are from the pe7 font library.

Example: Local Alerts

Local Warning

×
  • Make sure your passport is up to date. Check Now

Local Information

×

Local Success Alert

×
  • Your personal information has been updated.

Code

HTML

<div class="alert media alert-local-warning alert-dismissable">
    <div class="media-left">
        <span class="icon pe-7s-attention" aria-hidden="true"></span>
    </div>
    <div class="media-body">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
        <ul class="list-unstyled">
            <li>Make sure your passport is up to date. <a href="#" class="int-nav">Check Now</a></li>
        </ul>
    </div>
</div>

<div class="alert media alert-local-information alert-dismissable">
    <div class="media-left">
        <span class="icon pe-7s-info" aria-hidden="true"></span>
    </div>
    <div class="media-body">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
        <ul class="list-unstyled">
            <li>Your exam results are now available. <a href="#" class="int-nav">View Results</a></li>
        </ul>
    </div>
</div>

<div class="alert media alert-local-success alert-dismissable">
    <div class="media-left">
        <span class="icon pe-7s-check" aria-hidden="true"></span>
    </div>
    <div class="media-body">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
        <ul class="list-unstyled">
            <li>Your personal information has been updated.</li>
        </ul>
    </div>
</div>
                

Documentation

Problem Being Solved

We need to display a temporary message on one page of the enterprise site.

When To Use

There is an issue that affects a single page or section of a site, or there is messaging pertinent to a small audience.

When Not To use

A local alert should not be used if the issue or message affects a significant audience (for example, all members).

Formatting

  • Alerts rely on bootstrap's alert and media box styles.
  • Icons are from the pe7 font library.

Example: Transactional Alerts

Error Summary

  • Last four characters of passport number is required. Edit
  • Passport expiration date is required. Edit

Process Note

Current Students
  • You are eligible to register for the Level I exam, but you must complete your bachelor's degree program before you may register for the Level II exam.

Process Note Alt

Please contact this society directly to pay your dues and ensure active status.

Code

HTML

<div id="error-summary" class="alert media error-summary">
    <div class="media-left">
        <span class="icon pe-7s-attention" aria-hidden="true"></span>
    </div>
    <div class="media-body">
        <ul class="list-unstyled">
            <li>Last four characters of passport number is required. <a href="#">Edit</a></li>
            <li>Passport expiration date is required. <a href="#">Edit</a></li>
        </ul>
    </div>
</div>

<h3>Process Note</h3>
<div class="alert media alert-process-note">
    <div class="media-left">
        <span class="icon pe-7s-info" aria-hidden="true"></span>
    </div>
    <div class="media-body">
        <h5>Current Students</h5>
        <ul class="list-unstyled">
            <li>You are eligible to register for the Level I exam, but you must complete your bachelor's degree program before you may register for the Level II exam.</li>
        </ul>
    </div>
</div>

<h3>Process Note Alt</h3>
<div class="alert media alert-process-note-alt">
    <div class="media-left">
        <span class="icon pe-7s-info" aria-hidden="true"></span>
    </div>
    <div class="media-body">
        <p>Please contact this society directly to pay your dues and ensure active status.</p>
    </div>
</div>
                

Documentation

Problem Being Solved

The user needs to know when a transaction succeeded or failed.

When To Use

Error summary should be used for form validation.

Process note should be used when the user needs to be alerted to a unique circumstance or a next step.

When Not To use

Error summary should not be used on anything other than a form.

Process note should not be used outside of a transaction.

Formatting

  • For front end validation show/hide, an error box should be hidden on load. Can look into dynamically creating the summary box in future.
  • Edit links link directly to the specific fields that are in error.