Alerts

The alert pattern is used to convey important information to users with two different levels of importance.

Alert box

This should be used to announce information that takes precedence over all other page content. The inclusion of role="alert" will assist screen readers in announcing this content ahead of other information, so it should be used with caution.

Rules for alert boxes

  • There should only be one alert box on a page at a time.
  • 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.

Callout

This should be used to promote inline content that is of greater importance than the surrounding content. This can be used as a visually more prominent option over using bold text, but where the information is not sufficiently important to use an alert box.

Rules for callouts

  • Using too many callouts on a page will lower the visual impact of each and reduce their effectiveness.
  • Must not appear before the header, category header, main navigation, breadcrumbs or hero banner patterns.
  • Wrap text with a div with a class of callout plus one of the four option classes:
    • callout--success
    • callout--info
    • callout--warning
    • callout--danger
  • Use the different option classes to convey different types of message.
  • Must have a heading introducing the type of message.

Options available

Alert (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.

Example
Code 
<!-- Begin pattern: alerts //-->
<div class="alert alert--success" role="alert">
    <h3 class="alert__heading">Thank you!</h3><p>Thank you for submitting your details. If you have any questions please email <a href='mailto:#'>example@st-andrews.ac.uk</a>.</p>
</div>
<!-- End pattern: alerts //-->

Alert (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.

Example
Code 
<!-- Begin pattern: alerts //-->
<div class="alert alert--info" role="alert">
    <h3 class="alert__heading">Did you know?</h3><p>University of St Andrews was founded over 600 years ago. Find out more about the <a href='#'>history of St Andrews</a>.</p>
</div>
<!-- End pattern: alerts //-->

Alert (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.

Example
Code 
<!-- Begin pattern: alerts //-->
<div class="alert alert--warning" role="alert">
    <h3 class="alert__heading">Warning!</h3><p>The deadline for submissions is the end of Semester 2. If you need help, please email <a href='mailto:#'>example@st-andrews.ac.uk</a>.</p>
</div>
<!-- End pattern: alerts //-->

Alert (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.

Example
Code 
<!-- Begin pattern: alerts //-->
<div class="alert alert--danger" role="alert">
    <h3 class="alert__heading">Submissions have ended</h3><p>The deadline for submissions has passed. If you need help please email <a href='mailto:#'>example@st-andrews.ac.uk</a>.</p>
</div>
<!-- End pattern: alerts //-->

Callout (Success)

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

Example

Thank you!

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

Code 
<!-- Begin pattern: alerts //-->
<div class="callout callout--success" >
    <h4 class="callout__heading">Thank you!</h4><p>Thank you for submitting your details. If you have any questions please email <a href='mailto:#'>example@st-andrews.ac.uk</a>.</p>
</div>
<!-- End pattern: alerts //-->

Callout (Info)

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

Example

Did you know?

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

Code 
<!-- Begin pattern: alerts //-->
<div class="callout callout--info" >
    <h4 class="callout__heading">Did you know?</h4><p>University of St Andrews was founded over 600 years ago? Find out more about the <a href='#'>history of St Andrews</a>.</p>
</div>
<!-- End pattern: alerts //-->

Callout (Warning)

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

Example

Warning!

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

Code 
<!-- Begin pattern: alerts //-->
<div class="callout callout--warning" >
    <h4 class="callout__heading">Warning!</h4><p>The deadline for submissions is the end of Semester 2. If you need help, please email <a href='mailto:#'>example@st-andrews.ac.uk</a>.</p>
</div>
<!-- End pattern: alerts //-->

Callout (Danger)

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

Example

Submissions have ended

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

Code 
<!-- Begin pattern: alerts //-->
<div class="callout callout--danger" >
    <h4 class="callout__heading">Submissions have ended</h4><p>The deadline for submissions has passed. If you need help please email <a href='mailto:#'>example@st-andrews.ac.uk</a>.</p>
</div>
<!-- End pattern: alerts //-->