Alert
An alert displays at the top of every page of a website or app screen and is used to notify users of important, time-sensitive information. They are also a distinctive color based on the type of information being communicated: green for documentation, orange for time-sensitive information, red for emergencies. Users can close an alert with one click.
Usage
Use alerts to communicate deadlines, changes to important information, and emergencies. But use them sparingly—if users become accustomed to seeing an alert frequently, they may become desensitized to it.
Examples

Primary Alert
<link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" referrerpolicy="no-referrer" rel="stylesheet" />
<style type="text/css">
.cu-alert,
.cu-alert-primary,
.cu-alert-warning {
background: #c14d00;
color: #ffffff;
padding: 10px 10px 40px;
}
.cu-alert-success {
background: #6B8E23;
}
.cu-alert-danger {
background: #DC2A2A;
}
.cu-alert a {
color: #ffffff;
}
.cu-alert .alert-inner {
align-items: center;
display: flex;
gap: 15px;
position: relative;
}
.cu-alert .alert-icon {
font-size: 2.1em;
min-width: 40px;
}
.cu-alert .alert-inner .content {
flex-grow: 1;
padding-inline-end: 25px;
position: relative;
}
.cu-alert .alert-close {
background: 0;
border: 0;
color: inherit;
font-size: 1.3em;
inset-inline-end: 0;
position: absolute;
}
</style>
<div id="alert-1" class="cu-alert cu-alert-primary">
<div class="alert-inner">
<div class="alert-icon"><i class="fa-solid fa-circle-info"></i></div>
<div class="content">
<button class="alert-close">
<i tabindex="0" class="fa-solid fa-circle-xmark"></i>
</button>
<h2>Primary Alert</h2>
<div class="alert-summary">This is the primary alert style. <a href="#">Link to more information</a></div>
</div>
</div>
</div>
Success Alert
<link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" referrerpolicy="no-referrer" rel="stylesheet" />
<style type="text/css">
.cu-alert,
.cu-alert-primary,
.cu-alert-warning {
background: #c14d00;
color: #ffffff;
padding: 10px 10px 40px;
}
.cu-alert-success {
background: #6B8E23;
}
.cu-alert-danger {
background: #DC2A2A;
}
.cu-alert a {
color: #ffffff;
}
.cu-alert .alert-inner {
align-items: center;
display: flex;
gap: 15px;
position: relative;
}
.cu-alert .alert-icon {
font-size: 2.1em;
min-width: 40px;
}
.cu-alert .alert-inner .content {
flex-grow: 1;
padding-inline-end: 25px;
position: relative;
}
.cu-alert .alert-close {
background: 0;
border: 0;
color: inherit;
font-size: 1.3em;
inset-inline-end: 0;
position: absolute;
}
</style>
<div id="alert-1" class="cu-alert cu-alert-success">
<div class="alert-inner">
<div class="alert-icon"><i class="fa-solid fa-circle-check"></i></div>
<div class="content">
<button class="alert-close">
<i tabindex="0" class="fa-solid fa-circle-xmark"></i>
</button>
<h2>Success Alert</h2>
<div class="alert-summary">This is the success alert style. <a href="#">Link to more information</a></div>
</div>
</div>
</div>
Warning Alert
<link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" referrerpolicy="no-referrer" rel="stylesheet" />
<style type="text/css">.cu-alert,
.cu-alert-primary,
.cu-alert-warning {
background: #c14d00;
color: #ffffff;
padding: 10px 10px 40px;
}
.cu-alert-success {
background: #6B8E23;
}
.cu-alert-danger {
background: #DC2A2A;
}
.cu-alert a {
color: #ffffff;
}
.cu-alert .alert-inner {
align-items: center;
display: flex;
gap: 15px;
position: relative;
}
.cu-alert .alert-icon {
font-size: 2.1em;
min-width: 40px;
}
.cu-alert .alert-inner .content {
flex-grow: 1;
padding-inline-end: 25px;
position: relative;
}
.cu-alert .alert-close {
background: 0;
border: 0;
color: inherit;
font-size: 1.3em;
inset-inline-end: 0;
position: absolute;
}
</style>
<div id="alert-1" class="cu-alert cu-alert-warning">
<div class="alert-inner">
<div class="alert-icon"><i class="fa-solid fa-triangle-exclamation"></i></div>
<div class="content">
<button class="alert-close">
<i tabindex="0" class="fa-solid fa-circle-xmark"></i>
</button>
<h2>Warning Alert</h2>
<div class="alert-summary">This is the warning alert style. <a href="#">Link to more information</a></div>
</div>
</div>
</div>
Danger Alert
<link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" referrerpolicy="no-referrer" rel="stylesheet" />
<style type="text/css">.cu-alert,
.cu-alert-primary,
.cu-alert-warning {
background: #c14d00;
color: #ffffff;
padding: 10px 10px 40px;
}
.cu-alert-success {
background: #6B8E23;
}
.cu-alert-danger {
background: #DC2A2A;
}
.cu-alert a {
color: #ffffff;
}
.cu-alert .alert-inner {
align-items: center;
display: flex;
gap: 15px;
position: relative;
}
.cu-alert .alert-icon {
font-size: 2.1em;
min-width: 40px;
}
.cu-alert .alert-inner .content {
flex-grow: 1;
padding-inline-end: 25px;
position: relative;
}
.cu-alert .alert-close {
background: 0;
border: 0;
color: inherit;
font-size: 1.3em;
inset-inline-end: 0;
position: absolute;
}
</style>
<div id="alert-1" class="cu-alert cu-alert-danger">
<div class="alert-inner">
<div class="alert-icon"><i class="fa-solid fa-triangle-exclamation"></i></div>
<div class="content">
<button class="alert-close">
<i tabindex="0" class="fa-solid fa-circle-xmark"></i>
</button>
<h2>Danger Alert</h2>
<div class="alert-summary">This is the danger alert style. <a href="#">Link to more information</a></div>
</div>
</div>
</div>