Alerts are banners that share essential information or system changes with users with an associated severity. They are designed to attract the user’s attention, but not interrupt their work.
Information Alert Title
The information notice presents a neutral update. Use this to provide additional info that doesn’t require any action.
HTML
Copy
<div class="qw-alert qw-alert-info" role="status">
<div class="flex-grow-1">
<h3 class="qw-alert-heading">Alert Title</h3>
<p>Alert message contents here with a <a href="#" class="qw-alert-link">link</a>.</p>
</div>
</div>
Other Alert Types
Style an alert based on its context by replacing the .qw-alert-info with .qw-alert-warning, .qw-alert-danger or .qw-alert-success. Add .qw-alert-link to inline links, and .btn-link to links appended to the alert's contents.
The alert heading should provide context for its type in addition to the alert type colors, for accessibility purposes.
Warning Alert Title
A warning alert calls out important information that may not require additional action, but also won’t stand in the user’s way. Use this if there could be problems down the line.
Error Alert Title
The danger alert is used for malfunctions, major issues, and critical information requiring the user to complete an action.
Success Alert Title
The success alert is used sparingly when actions have been successfully completed.
Variants
Icon instead of heading
An icon can be used instead of a heading to provide the context of its type. The icon must have a label—which can be visually hidden—for accessibility purposes.
The information notice presents a neutral update. Use this to provide additional info that doesn’t require any action.
HTML
Copy
<div class="qw-alert qw-alert-success" role="status">
<svg class="qw-alert-icon" viewBox="0 0 24 24">
<use href="#qw-icon-success"></use>
<title>ALERT TITLE</title>
</svg>
<div class="flex-grow-1">
<p>Alert message contents here with a <a href="#" class="qw-alert-link">link</a>.</p>
</div>
</div>
A warning alert calls out important information that may not require additional action, but also won’t stand in the user’s way. Use this if there could be problems down the line.
The danger alert is used for major issues and vital information requiring the user to complete an action.
The success alert is used sparingly when actions have been successfully completed.
Page Level Alerts
Page level alerts display fixed to the top of the main content area of a layout. Add .qw-alert-bold to the .qw-alert to get the page-level alert style.
The success notice presents a positive outcome update. Use this to provide additional info that doesn’t require any action.
The information notice presents a neutral update. Use this to provide additional info that doesn’t require any action.
A warning alert calls out important information that may not require additional action, but also won’t stand in the user’s way. Use this if there could be problems down the line.
The danger alert is used for major issues and vital information requiring the user to complete an action.