Official websites use .gov
A .gov website belongs to an official government organization in the United States.

Secure .gov websites use HTTPS
A lock ( ) or https:// means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.

  • Special Publication:  Public Website Visual Style Guide
  • August 2015

Alerts and Modals

Use the styles below when you want to direct the reader’s attention to a specific task or time-sensitive information.

HTML Tags, Styled

Progress Bar <progress>

Output

Code

<progress value="0" max="100"></progress>

Alert and Modal Patterns

Alert <div class="alert-box">

Output

This is the default alert style.

This is the .alert-attention alert style.

This is the .alert-error alert style. Note that the text color automatically changes to white.

This is the .alert-notice alert style.

This is the .alert-success alert style.

This is the .alert-slim combined with the .alert-success alert style.

Code

<div class="alert-box">
<p>This is the default alert style.</p>
</div>

Helper Classes

Listed alphabetically by class name.

Alert Helper Classes
Class Description
.alert-attention Assign as an additional class to <div class="alert-box"> to change the background to MCC Web Yellow.
.alert-error Assign as an additional class to <div class="alert-box"> to change the background to MCC Web Red and any text in the alert to white.
.alert-notice Assign as an additional class to <div class="alert-box"> to change the background to a subtle blue color.
.alert-no-margin Assign as an additional class to <div class="alert-box"> to remove the top and bottom margin from the alert <div >.
.alert-slim Assign as an additional class to <div class="alert-box"> to reduce the padding inside the <div> by 50 percent and reduces the font size.
.alert-success Assign as an additional class to <div class="alert-box"> to change the background to a subtle green color.

Badge <div class="badge-box">

Output

This is an <h2> tag with a default badgeBadge text

This is an <h3> tag with a .badge-attention badge styleBadge text

This is a <p> tag with a .badge-error badge styleBadge text

This is a <p> tag with a .badge-notice badge styleBadge text

This is a <p> tag with a .badge-success badge styleBadge text

This is a <p> tag with a .badge-attention and .badge-slim badge stylesBadge text

Code

<p>This is some text. <span class="badge-box badge-error">Badge Text</span></p>

Helper Classes

Listed alphabetically by class name.

=
Badge Helper Classes
Class Description
.badge-attention Assign as an additional class to <div class="badge-box"> to change the background to MCC Web Yellow.
.badge-error Assign as an additional class to <div class="badge-box"> to change the background to MCC Web Red and any text in the alert to white.
.badge-notice Assign as an additional class to <div class="badge-box"> to change the background to a subtle blue color.
.badge-slim Assign as an additional class to <div class="badge-box"> to reduce the padding inside the <div> by 50 percent and reduces the font size.
.badge-success Assign as an additional class to <div class="badge-box"> to change the background to a subtle green color.

Modal Window <div class="modal">

This pattern originated from the Bourbon Refills pattern library.

Output

Code

<!-- Item to trigger the modal window -->
<button data-open-modal="modal-window">Open Modal Window</button>


<!-- Modal window and its content -->
<div data-modal="modal-window" aria-labelledby="modal-window-title" class="modal-wrapper" role="dialog" aria-hidden="true">
<div class="modal-overlay" data-close-modal></div>
<div role="document" class="modal">
<header role="banner">
<h1 id="modal-window-title">Modal Title</h1>
<button data-close-modal class="modal-close-button" aria-label="Close this dialog window"><i class="fa fa-times-circle" aria-hidden="true"></i><span class="visuallyhidden">Close Modal Window</span></button>
</header>
<div>
<p>Modal window content.</p>
</div>
</div>
</div>

Helper Classes

Listed alphabetically by class name.

Card Helper Classes
Class Description
.alert-attention Assign as an additional class to <div class="alert"> to change the border color to MCC Web Yellow.
.alert-error Assign as an additional class to <div class="alert"> to change the border color to MCC Web Red and any text in the alert to white.
.alert-notice Assign as an additional class to <div class="alert"> to change the border color to a subtle blue color.
.alert-success Assign as an additional class to <div class="alert"> to change the border color to a subtle green color.

Helper Classes

Helper classes are listed in a table in the accordion for a specific alert or modal type.