Alerts

Alerts with Embedded Links

Use .lead inside of an alert to make the beginning of your message stand out.

Use .alert-link to style a link inside your alert.

DefaultYou just read the alert message successfully.

Success You just read the alert message successfully.

Info This alert needs your attention.

Warning This alert is a warning message.

Danger Something is not right.

<div class="alert alert-danger">
    <strong class="lead">Danger</strong> <a href="#" class="alert-link">Something</a> is not right.
</div>

Dismissible Alerts

Default You just read the alert message successfully.

Success You just read the alert message successfully.

Info This alert needs your attention.

Warning This alert is a warning message.

Danger Something is not right.

<div class="alert alert-dismissible alert-danger" role="alert">
    <button aria-label="Close" class="close" data-dismiss="alert" type="button">
        <svg aria-hidden="true" class="icon-monospaced lexicon-icon  lexicon-icon-times">
            <use xlink:href="../../images/icons/icons.svg#times" />
        </svg>
        <span class="sr-only">Close</span>
    </button>

    <strong class="lead">Danger</strong> Something is not right.
</div>

Alert Notification

Alternate alert style for notifications

Danger:

Due to inactivity, your session has expired. Please save any data you may have entered before refreshing the page. Log in

Warning:

Due to inactivity, your session will expire in 00:00:56. To extend your session another 2 minutes click: Extend.

Meeting Rescheduled:

The UX Team has rescheduled to the following date: 2014 - 12 - 17.

Please complete the attendance form to confirm your attendance: More Info.

Meeting Rescheduled:

The UX Team has rescheduled to the following date: 2014 - 12 - 17.

Please complete the attendance form to confirm your attendance: More Info.

<div class="alert alert-dismissible alert-notification alert-danger" role="alert">
        <button aria-label="Close" class="close" data-dismiss="alert" type="button">
            <svg aria-hidden="true" class="icon-monospaced lexicon-icon lexicon-icon-times">
                <use xlink:href="../../images/icons/icons.svg#times" />
            </svg>
        </button>

        <strong class="lead">Danger:</strong>
        <p>Your session has expired. Please <a class="alert-link" href="#1">log in</a>.</p>
    </div>