Alerts

Alerts are typically used to provide site visitors with timely information about issues that will impact their HealthCare.gov experience. Alert messaging can range from raising awareness about recent Marketplace policy changes to notifications about limited access to Marketplace applications, content, or services.

Primary alerts

Blue alert

We place blue alerts at the top of the page right below the header to communicate new information or special calls to action.

Example & Code

Open enrollment is over. See the full list of exemptions to enroll for coverage.

<div class="container">
        <div class="top-content centered row">
            <div class="alert blue-bg col-md-8 col-md-offset-2">
                <p>Alert text.</p>
            </div>
        </div>
    </div>

Red alert

We place red alerts at the top of the page right below the header to communicate issues or problems with the site that may impact the availability of content, applications, or services.

Example & Code

HealthCare.gov is currently experiencing technical difficulties. Please check back later.

<div class="container">
        <div class="top-content centered row">
        <div class="alert alert-danger col-md-8 col-md-offset-2">
            <p>Alert text.</p>
        </div>
    </div>

Secondary alert

We place secondary alerts inside the hero area to communicate specific information that the more utilitarian primary alerts might not address, such as Marketplace policy changes.

Example & Code

Important:

If you tried to enroll by 2/15, but couldn’t finish, you may still be able to get 2015 coverage.

<div id="secondary-alert" class="col-xs-12">
        <div class="hero-message">
            <div class="message-icon">
                <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
            </div>
            <div>
                <div>
                    <div><h2>Important:</h2>
                         <p>If you tried to enroll by 2/15, but couldn’t finish, <a href="#">you may still be able to get 2015 coverage</a>.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>