Do / Don’t lists are included as a child component.

Default notification

The default notification is white and blue. This is used to signify information that should be noted.

For example, instructions to not copy and paste content directly into a form.

{{ aspExample({ code: "", nunjucks: "", json: "", title: "", example: "default", id: "65a92d900c984" }) }}

Green notification

A green notification is used to signify positive news or an update to information with a favourable outcome.

{{ aspExample({ code: "", nunjucks: "", json: "", title: "", example: "green", id: "65a92d900cc2f" }) }}

Amber notification

An amber notification is used to signify an update to key information.

{{ aspExample({ code: "", nunjucks: "", json: "", title: "", example: "amber", id: "65a92d900ccbc" }) }}

Red notification

A red notification is used to signify news of concern, danger or information that requires an immediate action. eed

{{ aspExample({ code: "", nunjucks: "", json: "", title: "", example: "red", id: "65a92d900cd55" }) }}

Grey notification

A grey notification is currently often used for quotes.

{{ aspExample({ code: "", nunjucks: "", json: "", title: "", example: "grey", id: "668fa5cd42aec" }) }}

Notifications without title

In some cases, an notification does not require a title (exclusions are the do / don’t notification).

For example, a message based upon users interactions. As this message confirms a positive outcome, a green notification has been utilised.

{{ aspExample({ code: "", nunjucks: "", json: "", title: "", example: "green-no-title", id: "65a92d900cda5" }) }}

Do List

{{ aspExample({ code: "", nunjucks: "", json: "", title: "", example: "do-list", id: "65a92d900c9f6" }) }}

Don’t List

{{ aspExample({ code: "", nunjucks: "", json: "", title: "", example: "dont-list", id: "65a92d900ca3b" }) }}

The use of links and bold text within the notification (including descriptions is permitted.

When to use this component

The notification component allow us to highlight content depending on its severity in order to draw the eye to the content.

You can choose from:

Alias

A (left aligned) alert component is now a notification component.
e.g. A green (left aligned) alert (with / without a title) component is now a green notification component (with / without a title).

An info box component is now a notification component.
e.g. A green (left aligned) info box (with / without a title) component is now a green notification component (with / without a title).

Previously known as a do / don’t component on the ‘citizen site’.
e.g. a Do / Don’t component is now default notification list with ticks / default notification with crosses (or a mixture of the two).

Status of development

The below criteria all need to be met for a component to be considered as fully developed for use within the ASP Digital Design System.


{{ aspTable({
head: [
{ text: 'Development criteria'},
{ text: 'Status'}
],
rows: [
{
cells: [
{ text: 'WCAG 2.2 compliant'},
{ html: '<span class="status">Not started</span>'}
]
},
{
cells: [
{ text: 'WCAG 2.1 compliant'},
{ html: '<span class="status status–green">Completed</span>'}
]
},
{
cells: [
{ text: 'HTML / Nunjucks version'},
{ html: '<span class="status status–green">Completed</span>'}
]
},
{
cells: [
{ text: 'Figma version'},
{ html: '<span class="status status">Not started</span>'}
]
},
{
cells: [
{ text: 'M365 versions'},
{ html: '<span class="status status–green">Completed</span>'}
]
},
{
cells: [
{ text: 'Documentation'},
{ html: '<span class="status status–yellow">In progress</span>'}
]
}
]
}) }}