Notifications

There are four notification types, displaying messages at varying levels of importance. They usually appear at the top of the page and are manually dismissed with a close button.

Success

Example

Code example

<div class="c-notification c-notification--success row"><p class="col-xs col-xlg-10 col-lg-10 col-md-9 col-sm-9">Positive progress with an action</p><span class="box-row c-icon c-icon--right c-icon--large c-icon__cross--green js-close-parent col-xs last-xs u-mb1"></span></div>

Notification with link to further information

When you add a link to another page, we use an underline in an unselected state. This is to ensure we have enough contrast between the hyperlink and the coloured background to meet accessibility standards.

Example

Code example

<div class="c-notification c-notification--success row">
    <p>There are no planned changes to GCSE Mathematics for 2021 following
        <a href="https://www.gov.uk/government/consultations/proposed-changes-to-the-assessment-of-gcses-as-and-a-levels-in-2021" target="_blank" class="c-notification__link">Ofqual’s consultation</a>
    </p>
</div>

Information

Example

Code example

<div class="c-notification c-notification--important row">
    <p class="col-xs col-xlg-10 col-lg-10 col-md-9 col-sm-9">Information! Needs attention but not super important</p>
    <span class="box-row c-icon c-icon--right c-icon--large c-icon__cross--blue js-close-parent col-xs last-xs u-mb1"></span>
</div>

Warning

Example

Code example

<div class="c-notification c-notification--warning row">
    <p class="col-xs col-xlg-11 col-lg-11 col-md-10 col-sm-10">Updated contact hours from Thursday 24 December until Sunday 3 January our Customer Service Centre will be closed</p>
    <span class="box-row c-icon c-icon--right c-icon--large c-icon__cross--orange js-close-parent col-xs last-xs u-mb1"></span>
</div>

Danger

Example

Code example

<div class="c-notification c-notification--danger row">
    <p class="col-xs col-lg-10 col-md-9 col-sm-9">Some details need attention now</p>
    <span class="box-row c-icon c-icon--right c-icon--large c-icon__cross--red js-close-parent col-xs last-xs u-mb1"></span>
</div>