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: "{{ aspNotification({
title: \"Default notification title\",
content: {
html: '<p>Notification content (html) with a <a href=\"#\">link</a>.</p>
<p>With additional line. No modifier</p>'
}
}) }}", title: "", id: "65a92d900c984", url: "" }) }}

Default notification list with ticks

{{ aspExample({ code: "<div class=\"asp-notification\">
<h2 class=\"asp-notification__title\">Do/Don`t list with ticks</h2>
<ul class=\"asp-notification__list asp-notification__list–tick\">
<li class=\"asp-notification__item\">
<svg class=\"asp-notification__icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#000000\" stroke-width=\"3\" stroke-linecap=\"square\" stroke-linejoin=\"arcs\">
<polyline points=\"20 6 9 17 4 12\"></polyline>
</svg>
<span class=\"asp-notification__text\">List item one</span>
</li>
<li class=\"asp-notification__item\">
<svg class=\"asp-notification__icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#000000\" stroke-width=\"3\" stroke-linecap=\"square\" stroke-linejoin=\"arcs\">
<polyline points=\"20 6 9 17 4 12\"></polyline>
</svg>
<span class=\"asp-notification__text\">List item two</span>
</li>
</ul>
</div>", nunjucks: "{{ aspNotification({
title: \"Do / Don't list with ticks\",
modifier: \"do\",
rows: [
{
html: 'Do list item 1 (html) with a <a href=\"#\">link</a>.'
},
{
text: \"Do list item 2 (text). modifier: do\"
}
]
}) }}", title: "", id: "65a92d900c9f6", url: "" }) }}

Default notification with crosses

{{ aspExample({ code: "<div class=\"asp-notification\">
<h2 class=\"asp-notification__title\">Do/Don`t list with crosses</h2>
<ul class=\"asp-notification__list asp-notification__list–cross\">
<li class=\"asp-notification__item\">
<svg class=\"asp-notification__icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#000000\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
<line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>
<line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>
</svg>
<span class=\"asp-notification__text\">List item one</span>
</li>
<li class=\"asp-notification__item\">
<svg class=\"asp-notification__icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#000000\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
<line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>
<line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>
</svg>
<span class=\"asp-notification__text\">List item two</span>
</li>
</ul>
</div>", nunjucks: "{{ aspNotification({
title: \"Do / Don't list with crosses\",
modifier: \"dont\",
rows: [
{
html: 'Dont list item 1 (html) with a <a href=\"#\">link</a>.'
},
{
text: \"Don't list item 2 (text). modifier: dont\"
}
]
}) }}", title: "", id: "65a92d900ca3b", url: "" }) }}

Green notification

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

{{ aspExample({ code: "", nunjucks: "{{ aspNotification({
modifier: \"green\",
title: \"Notification title\",
content: {
html: '<p>Notification content (html) with a <a href=\"#\">link</a>. modifier: green</p>'
}
}) }}", title: "", id: "65a92d900cc2f", url: "" }) }}

Amber notification

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

{{ aspExample({ code: "", nunjucks: "{{ aspNotification({
modifier: \"amber\",
title: \"Notification title\",
content: {
text: 'Notification content (text). modifier: amber'
}
}) }}", title: "", id: "65a92d900ccbc", url: "" }) }}

Red notification

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

{{ aspExample({ code: "", nunjucks: "{{ aspNotification({
modifier: \"red\",
title: \"Notification title\",
content: {
text: 'Notification content (text). modifier: red'
}
}) }}", title: "", id: "65a92d900cd55", url: "" }) }}

Grey notification

A grey notification is currently often used for quotes.

{{ aspExample({ code: "", nunjucks: "{{ aspNotification({
modifier: \"grey\",
title: \"Notification title\",
content: {
html: '<p>Notification content (html).</p>
<p>With additional line. modifier: grey</p>'
}
}) }}", title: "", id: "668fa5cd42aec", url: "" }) }}

Green notification without title

In some cases, an notification does not require a title.

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

{{ aspExample({ code: "<div class=\"asp-notification asp-notification–green\">
<div class=\"asp-notification__description\">
<p>Your preferences have been updated.</p>
</div>
</div>", nunjucks: "{{ aspNotification({
modifier: \"green\",
content: {
html: '<p>Notification content (html) without a title. modifier: green</p>'
}
}) }}", title: "", id: "65a92d900cda5", url: "" }) }}

The use of links and bold text within the notification 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">Not started</span>'}
]
},
{
cells: [
{ text: 'Documentation'},
{ html: '<span class="status status–yellow">In progress</span>'}
]
}
]
}) }}