Alerts

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

Rules for alerts

• Must not appear before the header, category header, main navigation, breadcrumbs or hero banner patterns.
• 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
• Use the different option classes to convey different types of message.
• Must have a heading introducing the type of message.

Options available

• Success
• Info
• Warning
• 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!
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.

    
Did you know?
University of St Andrews was founded over 600 years ago? Find out more about the history of St Andrews.

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.

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.

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