Style user-feedback messages using one of the four contextual classes, .alert-success, .alert-info, .alert-warning or .alert-danger.
Optionally, you can also use the .alert-link class to create complementary link colors.
Heads up! This alert needs your attention, but it’s not super important. Basically just an FYI for you…
Well done! You successfully read this important alert message, award yourself a hug.
Alert! Alert! Something might be about to happen so you have to make some decisions now. Not critical decisions, but decisions nonetheless. For more details click our placeholder anchor.
Well done! You successfully read this important alert message.
Example HTML
<div class="alert alert--info" role="alert">
<p>
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important. Basically just an FYI for you…
</p>
</div>