Alert
SCSS Source: core/src/scss/components/alert/_alert.scss
Twig Source: core/src/templates/components/alert/alert.twig
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
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
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
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
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
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>