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

HTML Tags, Styled

Expand or close the following content.Progress Bar `<progress>`

Output

Code


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

Alert and Modal Patterns

Expand or close the following content.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.

Expand or close the following content.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.

Expand or close the following content.Modal Window `<div class="modal">`

This pattern originated from the Bourbon Refills pattern library.

Output

Modal Title

Modal window content.

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.

Alerts and Modals

HTML Tags, Styled

Expand or close the following content.Progress Bar <progress>

Alert and Modal Patterns

Expand or close the following content.Alert <div class="alert-box">

Helper Classes

Expand or close the following content.Badge <div class="badge-box">

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

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

Helper Classes

Expand or close the following content.Modal Window <div class="modal">

Helper Classes

Helper Classes

Expand or close the following content.Progress Bar `<progress>`

Expand or close the following content.Alert `<div class="alert-box">`

Expand or close the following content.Badge `<div class="badge-box">`

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

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

Expand or close the following content.Modal Window `<div class="modal">`