Skip to main content

Main Content

Alert

Description

For displaying a notification that keeps people informed of a status, or for displaying a validation message that alerts someone of an important piece of information.

Default Style

Information

Alert Heading

This is the details of the alert message. This is a link within an alert .

Example Markup

<div class="su-alert [ modifier_class ]"> <div class="centered-container"> <div class="su-alert__dismiss"> <button aria-label="Dismiss alert" class="su-alert__dismiss-button"> Dismiss <i class="su-fas su-fa-times-circle"></i> </button> </div> <div class="su-alert__header"> <span class="su-alert__icon"> <i class="su-far su-fa-bell"></i> </span> <span class="su-alert__label">Information</span> </div> <div class="su-alert__body"> <h3 class="su-alert__heading">Alert Heading</h3> <div class="su-alert__text"> This is the details of the alert message. This is a <a href="https://news.stanford.edu">link within an alert</a> . </div> <div class="su-alert__footer"> <a href="#" class="su-link su-link--action">Action Link</a> </div> </div> </div> </div>

Style Variants

.su-alert--success su-alert--text-light

Successful Transaction Message

Information

Alert Heading

This is the details of the alert message. This is a link within an alert.

Example Markup

<div class="su-alert su-alert--success"> <div class="centered-container"> <div class="su-alert__dismiss"> <button aria-label="Dismiss alert" class="su-alert__dismiss-button"> Dismiss <i class="su-fas su-fa-times-circle"></i> </button> </div> <div class="su-alert__header"> <span class="su-alert__icon"> <i class="su-far su-fa-bell"></i> </span> <span class="su-alert__label">Information</span> </div> <div class="su-alert__body"> <h3 class="su-alert__heading">Alert Heading</h3> <div class="su-alert__text"> This is the details of the alert message. This is a <a href="https://news.stanford.edu">link within an alert</a> . </div> <div class="su-alert__footer"> <a href="#" class="su-link su-link--action">Action Link</a> </div> </div> </div> </div>

.su-alert--warning

Warning Message

Information

Alert Heading

This is the details of the alert message. This is a link within an alert.

Example Markup

<div class="su-alert su-alert--warning"> <div class="centered-container"> <div class="su-alert__dismiss"> <button aria-label="Dismiss alert" class="su-alert__dismiss-button"> Dismiss <i class="su-fas su-fa-times-circle"></i> </button> </div> <div class="su-alert__header"> <span class="su-alert__icon"> <i class="su-far su-fa-bell"></i> </span> <span class="su-alert__label">Information</span> </div> <div class="su-alert__body"> <h3 class="su-alert__heading">Alert Heading</h3> <div class="su-alert__text"> This is the details of the alert message. This is a <a href="https://news.stanford.edu">link within an alert</a> . </div> <div class="su-alert__footer"> <a href="#" class="su-link su-link--action">Action Link</a> </div> </div> </div> </div>

.su-alert--error su-alert--text-light

Error Message

Information

Alert Heading

This is the details of the alert message. This is a link within an alert.

Example Markup

<div class="su-alert su-alert--error"> <div class="centered-container"> <div class="su-alert__dismiss"> <button aria-label="Dismiss alert" class="su-alert__dismiss-button"> Dismiss <i class="su-fas su-fa-times-circle"></i> </button> </div> <div class="su-alert__header"> <span class="su-alert__icon"> <i class="su-far su-fa-bell"></i> </span> <span class="su-alert__label">Information</span> </div> <div class="su-alert__body"> <h3 class="su-alert__heading">Alert Heading</h3> <div class="su-alert__text"> This is the details of the alert message. This is a <a href="https://news.stanford.edu">link within an alert</a> . </div> <div class="su-alert__footer"> <a href="#" class="su-link su-link--action">Action Link</a> </div> </div> </div> </div>

.su-alert--info su-alert--text-light

Informative Message

Information

Alert Heading

This is the details of the alert message. This is a link within an alert.

Example Markup

<div class="su-alert su-alert--info"> <div class="centered-container"> <div class="su-alert__dismiss"> <button aria-label="Dismiss alert" class="su-alert__dismiss-button"> Dismiss <i class="su-fas su-fa-times-circle"></i> </button> </div> <div class="su-alert__header"> <span class="su-alert__icon"> <i class="su-far su-fa-bell"></i> </span> <span class="su-alert__label">Information</span> </div> <div class="su-alert__body"> <h3 class="su-alert__heading">Alert Heading</h3> <div class="su-alert__text"> This is the details of the alert message. This is a <a href="https://news.stanford.edu">link within an alert</a> . </div> <div class="su-alert__footer"> <a href="#" class="su-link su-link--action">Action Link</a> </div> </div> </div> </div>

.su-alert--text-light

Lighter color text for darker backgrounds

Information

Alert Heading

This is the details of the alert message. This is a link within an alert.

Example Markup

<div class="su-alert su-alert--text-light"> <div class="centered-container"> <div class="su-alert__dismiss"> <button aria-label="Dismiss alert" class="su-alert__dismiss-button"> Dismiss <i class="su-fas su-fa-times-circle"></i> </button> </div> <div class="su-alert__header"> <span class="su-alert__icon"> <i class="su-far su-fa-bell"></i> </span> <span class="su-alert__label">Information</span> </div> <div class="su-alert__body"> <h3 class="su-alert__heading">Alert Heading</h3> <div class="su-alert__text"> This is the details of the alert message. This is a <a href="https://news.stanford.edu">link within an alert</a> . </div> <div class="su-alert__footer"> <a href="#" class="su-link su-link--action">Action Link</a> </div> </div> </div> </div>