Alerts
Global Alerts
Example: Global Warning
(if this is coded correctly, the global warning alert should be showing fixed at the bottom of this web page.)
- The site will be down for scheduled maintenance on Friday, 13 October, 5:00-6:00 PM ET.
Example: Global Information
(if this is coded correctly, the global information alert should be showing fixed at the bottom of this web page.)
- Membership renewal begins soon. Get a head start on updating your profile. Go to Your Account
HTML
<div class="alert media alert-global-warning alert-dismissable">
<div class="media-left">
<span class="icon" 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" 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>
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.
Local Alerts
Example: Local Warning
Example: Local Information
- Your exam results are now available. View Results
Example: Local Success Alert
- Your personal information has been updated.
HTML
<div class="alert media alert-local-warning alert-dismissable">
<div class="media-left">
<span class="icon" 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" 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" 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>
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.
Transactional Alerts
Example: Error Summary
Example: 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.
Example: Process Note Alt
Please contact this society directly to pay your dues and ensure active status.
HTML
<div id="error-summary" class="alert media error-summary">
<div class="media-left">
<span class="cfaicon-hazardous white" 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" 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" 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>
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.