Alerts

Use alerts to display important messages and notifications to users. Choose the appropriate type based on the nature of the message.

Information Alert

Use for neutral information that users should be aware of.

<div class="alert alert-info">
  <h3 class="alert-title">New service available</h3>
  <div class="alert-body">
    <p>You can now renew your driving licence online. This service takes about 10 minutes.</p>
  </div>
</div>

Success Alert

Use to confirm a successful action or completion.

<div class="alert alert-success">
  <h3 class="alert-title">Application submitted</h3>
  <div class="alert-body">
    <p>Your passport application has been successfully submitted.</p>
  </div>
</div>

Warning Alert

Use to warn users about something that might cause problems.

<div class="alert alert-warning">
  <h3 class="alert-title">Session expiring soon</h3>
  <div class="alert-body">
    <p>Your session will expire in 5 minutes.</p>
  </div>
</div>

Error Alert

Use to inform users about errors or problems that need attention.

<div class="alert alert-error">
  <h3 class="alert-title">There is a problem</h3>
  <div class="alert-body">
    <p>The form could not be submitted. Please check the following:</p>
    <ul>
      <li><a href="#name">Enter your full name</a></li>
      <li><a href="#email">Enter a valid email address</a></li>
    </ul>
  </div>
</div>

Simple Alert (No Title)

For simple messages, you can omit the title.

<div class="alert alert-info">
  <div class="alert-body">
    <p>This service is available Monday to Friday, 9am to 5pm.</p>
  </div>
</div>

Error Summary (Form Validation)

Use at the top of a form to summarise validation errors. Link each error to the relevant field.

<div class="alert alert-error" role="alert" aria-labelledby="error-summary-title">
  <h3 class="alert-title" id="error-summary-title">There is a problem</h3>
  <div class="alert-body">
    <ul>
      <li><a href="#full-name">Enter your full name</a></li>
      <li><a href="#date-of-birth-day">Date of birth must include a day</a></li>
      <li><a href="#passport-number">Enter your passport number</a></li>
    </ul>
  </div>
</div>

When to Use Alerts

Information (Blue)

• New features or services
• Important dates or deadlines
• General announcements

Success (Green)

• Successful form submission
• Completed transactions
• Saved changes

Warning (Yellow)

• Session timeouts
• Incomplete information
• Potential issues ahead

Error (Red)

• Form validation errors
• Failed transactions
• System errors

Usage Guidelines

Do

• Use clear, concise language
• Place alerts at the top of the relevant content
• Link to specific form fields in error summaries
• Use the appropriate alert type for the message

Don't

• Don't overuse alerts — they lose impact
• Don't use error alerts for information messages
• Don't rely on colour alone to convey meaning
• Don't hide important alerts below the fold

Accessibility

• Use role="alert" for important messages that need immediate attention
• Use aria-labelledby to link the alert to its title
• Error summaries should appear above the form
• Links in error messages should jump to the relevant field
• Focus should move to the error summary when the form is submitted with errors

CSS Classes

/* Base alert */
.alert { }

/* Types */
.alert-info { }
.alert-success { }
.alert-warning { }
.alert-error { }

/* Content */
.alert-title { }
.alert-body { }