Alerts

The alert pattern is used to convey important information to users.

Rules for alerts

Must not appear before the page title, or before other patterns such as breadcrumbs or hero banner.
Use the alert-link class to quickly provide matching coloured links within any alert.
Wrap text with a div with a class of alert plus one of the four option classes:
- alert-success
- alert-info
- alert-warning
- alert-danger

Success

Use the class .alert-success for a success alert box. This alert box indicates a successful or positive action, such as successfully submitting a form.

Thank you for submitting your details. If you have any questions please email example@st-andrews.ac.uk.

Code




    Thank you for submitting your details. If you have any questions please email example@st-andrews.ac.uk.

Info

Use the class alert-info for an info alert box. This alert box indicates neutral information or a neutral action, such as a recommendation or an update.

Heads up! We recommend that you apply soon for a place on our poetry course.

Code




    Heads up! We recommend that you apply soon for a place on our poetry course.

Warning

Use the class alert-warning for a warning alert box. This alert box indicates a warning that might need attention or carries a time limit, such as impending application deadlines.

Warning! The deadline for submissions is the end of Semester 2. If you need help, please email example@st-andrews.ac.uk.

Code




    Warning! The deadline for submissions is the end of Semester 2. If you need help, please email example@st-andrews.ac.uk.

Danger

Use the class alert-danger for a danger alert box. This alert box indicates a dangerous or potentially negative action such as closures or expired deadlines.

Warning! The deadline for submissions has passed. If you need help please email example@st-andrews.ac.uk.

Code




    Warning! The deadline for submissions has passed. If you need help please email example@st-andrews.ac.uk.