Alerts are used to notify users of important time-sensitive information or changes, in a way that attracts the user's attention, and should be used sparingly.
This component is assigned role="alert" to signify information requiring the user's immediate attention. For people using assistive technologies, this role will listen for such an event and notify the user accordingly:
<!-- Large alert -->
<div class="alert" role="alert">
<h2><span class="fa fa-info-circle"></span> Find out more.</h2>
<div>
<p>Read about our <a href="#">complaints process</a> for information on how we handle complaints.</p>
</div>
</div>
<!-- Small alert -->
<div class="alert" role="alert">
<div>
<p><span class="fa fa-info-circle"></span> <strong>Find out more</strong> Read about our <a href="#">complaints process</a> for information on how we handle complaints.</p>
</div>
</div>
The success alert is used for notifying the user that a task is fully completed.
<!-- Large alert -->
<div class="alert" role="alert">
<h2><span class="fa fa-check"></span> Your application was successfully submitted</h2>
<div>
<p>Your reference number is MQ-9S72K-XTBC9. A confirmation has been emailed to you.</p>
<p><a href="#">Download a copy</a> of your completed application form (PDF, 48.3KB).</p>
</div>
</div>
<!-- Small alert -->
<div class="alert" role="alert">
<div>
<p><span class="fa fa-thumbs-up"></span> <strong>Thank you.</strong> Your feedback is important to us and will be used to improve the page.</p>
</div>
</div>
Use warning page alerts to tell the user something urgent. Only use an alert if the information will help the user avoid a problem or bad experience.
<!-- Large alert -->
<div class="alert" role="alert">
<h2><span class="fa fa-exclamation-circle"></span> Registration of interest has closed</h2>
<div>
<p>Registration of interest for the <a href="#">Resilient Homes Fund</a> closed on 30 July 2023.</p>
</div>
</div>
<!-- Small alert -->
<div class="alert" role="alert">
<div>
<p><span class="fa fa-exclamation-circle"></span> <strong>Registration of interest has closed.</strong> Registration of interest for the <a href="#">Resilient Homes Fund</a> closed on 30 July 2023.</p>
</div>
</div>
The critical page alert should be used with form validation errors or other errors which will block the user from completing their task.
<!-- Large alert -->
<div class="alert alert-danger" role="alert">
<h2><span class="fa fa-times-circle"></span> It looks like there was a problem</h2>
<div>
<p>Please try again soon or <a href="#">contact us</a>for further assistance.</p>
</div>
</div>
<!-- Small alert -->
<div class="alert alert-danger" role="alert">
<div>
<p><span class="fa fa-times-circle"></span> <strong>It looks like there was a problem.</strong> Please try again soon or <a href="#">contact us</a>for further assistance.</p>
</div>
</div>