Notification
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.
<div class="asp-notification">
<h2 class="asp-notification__title">Default notification title</h2>
<div class="asp-notification__content">
<p>Notification content (html) with a <a href="#">link</a>.</p>
<p>With additional line. No modifier</p>
</div>
</div>Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Description |
|---|---|---|
| modifier | string or false (boolean) | Default values are 'green', 'amber', 'red', 'do', 'dont', false (boolean) or null. |
| title | string or false (boolean) | The notification component title. Default values are false (boolean) or null. |
| rows | array or false (boolean) | The list of do or don't items. If notification modifier is 'do' or 'dont', the followng parameter/s are required and content will be ignored. Default values are false (boolean) or null. See rows. |
| content | array or false (boolean) | The notification component content. If notification modifier is 'do' or 'dont', content will be ignored. Default values are false (boolean) or null. See content. |
Options for rows
| Name | Type | Description |
|---|---|---|
| html | string | Required. HTML for the do or don't item. If 'html' is provided, the 'text' parameter will be ignored. |
| text | string | Required. Text for the do or don't item. If 'html' is provided, the 'text' parameter will be ignored. |
Options for content
| Name | Type | Description |
|---|---|---|
| html | string | Required. HTML for the notification component content. If 'html' is provided, the 'text' parameter will be ignored. |
| text | string | Required. Text for the notification component content. If 'html' is provided, the 'text' parameter will be ignored. |
{% from "notification/macro.njk" import aspNotification %}
{{ 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>'
}
}) }}
Default notification list with ticks
<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>Do list item 1 (html) with a <a href="#">link</a>.</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>Do list item 2 (text). modifier: do</span>
</li>
</ul>
</div>Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Description |
|---|---|---|
| modifier | string or false (boolean) | Default values are 'green', 'amber', 'red', 'do', 'dont', false (boolean) or null. |
| title | string or false (boolean) | The notification component title. Default values are false (boolean) or null. |
| rows | array or false (boolean) | The list of do or don't items. If notification modifier is 'do' or 'dont', the followng parameter/s are required and content will be ignored. Default values are false (boolean) or null. See rows. |
| content | array or false (boolean) | The notification component content. If notification modifier is 'do' or 'dont', content will be ignored. Default values are false (boolean) or null. See content. |
Options for rows
| Name | Type | Description |
|---|---|---|
| html | string | Required. HTML for the do or don't item. If 'html' is provided, the 'text' parameter will be ignored. |
| text | string | Required. Text for the do or don't item. If 'html' is provided, the 'text' parameter will be ignored. |
Options for content
| Name | Type | Description |
|---|---|---|
| html | string | Required. HTML for the notification component content. If 'html' is provided, the 'text' parameter will be ignored. |
| text | string | Required. Text for the notification component content. If 'html' is provided, the 'text' parameter will be ignored. |
{% from "notification/macro.njk" import aspNotification %}
{{ 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"
}
]
}) }}
Default notification with crosses
<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>Dont list item 1 (html) with a <a href="#">link</a>.</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>Don't list item 2 (text). modifier: dont</span>
</li>
</ul>
</div>Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Description |
|---|---|---|
| modifier | string or false (boolean) | Default values are 'green', 'amber', 'red', 'do', 'dont', false (boolean) or null. |
| title | string or false (boolean) | The notification component title. Default values are false (boolean) or null. |
| rows | array or false (boolean) | The list of do or don't items. If notification modifier is 'do' or 'dont', the followng parameter/s are required and content will be ignored. Default values are false (boolean) or null. See rows. |
| content | array or false (boolean) | The notification component content. If notification modifier is 'do' or 'dont', content will be ignored. Default values are false (boolean) or null. See content. |
Options for rows
| Name | Type | Description |
|---|---|---|
| html | string | Required. HTML for the do or don't item. If 'html' is provided, the 'text' parameter will be ignored. |
| text | string | Required. Text for the do or don't item. If 'html' is provided, the 'text' parameter will be ignored. |
Options for content
| Name | Type | Description |
|---|---|---|
| html | string | Required. HTML for the notification component content. If 'html' is provided, the 'text' parameter will be ignored. |
| text | string | Required. Text for the notification component content. If 'html' is provided, the 'text' parameter will be ignored. |
{% from "notification/macro.njk" import aspNotification %}
{{ 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"
}
]
}) }}
Green notification
A green notification is used to signify positive news or an update to information with a favourable outcome.
<div class="asp-notification asp-notification--green">
<h2 class="asp-notification__title">Notification title</h2>
<div class="asp-notification__content">
<p>Notification content (html) with a <a href="#">link</a>. modifier: green</p>
</div>
</div>Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Description |
|---|---|---|
| modifier | string or false (boolean) | Default values are 'green', 'amber', 'red', 'do', 'dont', false (boolean) or null. |
| title | string or false (boolean) | The notification component title. Default values are false (boolean) or null. |
| rows | array or false (boolean) | The list of do or don't items. If notification modifier is 'do' or 'dont', the followng parameter/s are required and content will be ignored. Default values are false (boolean) or null. See rows. |
| content | array or false (boolean) | The notification component content. If notification modifier is 'do' or 'dont', content will be ignored. Default values are false (boolean) or null. See content. |
Options for rows
| Name | Type | Description |
|---|---|---|
| html | string | Required. HTML for the do or don't item. If 'html' is provided, the 'text' parameter will be ignored. |
| text | string | Required. Text for the do or don't item. If 'html' is provided, the 'text' parameter will be ignored. |
Options for content
| Name | Type | Description |
|---|---|---|
| html | string | Required. HTML for the notification component content. If 'html' is provided, the 'text' parameter will be ignored. |
| text | string | Required. Text for the notification component content. If 'html' is provided, the 'text' parameter will be ignored. |
{% from "notification/macro.njk" import aspNotification %}
{{ aspNotification({
modifier: "green",
title: "Notification title",
content: {
html: '<p>Notification content (html) with a <a href="#">link</a>. modifier: green</p>'
}
}) }}
Amber notification
An amber notification is used to signify an update to key information.
<div class="asp-notification asp-notification--amber">
<h2 class="asp-notification__title">Notification title</h2>
<div class="asp-notification__content">
<p>Notification content (text). modifier: amber</p>
</div>
</div>Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Description |
|---|---|---|
| modifier | string or false (boolean) | Default values are 'green', 'amber', 'red', 'do', 'dont', false (boolean) or null. |
| title | string or false (boolean) | The notification component title. Default values are false (boolean) or null. |
| rows | array or false (boolean) | The list of do or don't items. If notification modifier is 'do' or 'dont', the followng parameter/s are required and content will be ignored. Default values are false (boolean) or null. See rows. |
| content | array or false (boolean) | The notification component content. If notification modifier is 'do' or 'dont', content will be ignored. Default values are false (boolean) or null. See content. |
Options for rows
| Name | Type | Description |
|---|---|---|
| html | string | Required. HTML for the do or don't item. If 'html' is provided, the 'text' parameter will be ignored. |
| text | string | Required. Text for the do or don't item. If 'html' is provided, the 'text' parameter will be ignored. |
Options for content
| Name | Type | Description |
|---|---|---|
| html | string | Required. HTML for the notification component content. If 'html' is provided, the 'text' parameter will be ignored. |
| text | string | Required. Text for the notification component content. If 'html' is provided, the 'text' parameter will be ignored. |
{% from "notification/macro.njk" import aspNotification %}
{{ aspNotification({
modifier: "amber",
title: "Notification title",
content: {
text: 'Notification content (text). modifier: amber'
}
}) }}
Red notification
A red notification is used to signify news of concern, danger or information that requires an immediate action.
<div class="asp-notification asp-notification--red">
<h2 class="asp-notification__title">Notification title</h2>
<div class="asp-notification__content">
<p>Notification content (text). modifier: red</p>
</div>
</div>Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Description |
|---|---|---|
| modifier | string or false (boolean) | Default values are 'green', 'amber', 'red', 'do', 'dont', false (boolean) or null. |
| title | string or false (boolean) | The notification component title. Default values are false (boolean) or null. |
| rows | array or false (boolean) | The list of do or don't items. If notification modifier is 'do' or 'dont', the followng parameter/s are required and content will be ignored. Default values are false (boolean) or null. See rows. |
| content | array or false (boolean) | The notification component content. If notification modifier is 'do' or 'dont', content will be ignored. Default values are false (boolean) or null. See content. |
Options for rows
| Name | Type | Description |
|---|---|---|
| html | string | Required. HTML for the do or don't item. If 'html' is provided, the 'text' parameter will be ignored. |
| text | string | Required. Text for the do or don't item. If 'html' is provided, the 'text' parameter will be ignored. |
Options for content
| Name | Type | Description |
|---|---|---|
| html | string | Required. HTML for the notification component content. If 'html' is provided, the 'text' parameter will be ignored. |
| text | string | Required. Text for the notification component content. If 'html' is provided, the 'text' parameter will be ignored. |
{% from "notification/macro.njk" import aspNotification %}
{{ aspNotification({
modifier: "red",
title: "Notification title",
content: {
text: 'Notification content (text). modifier: red'
}
}) }}
Grey notification
A grey notification is currently often used for quotes.
<div class="asp-notification asp-notification--grey">
<h2 class="asp-notification__title">Notification title</h2>
<div class="asp-notification__content">
<p>Notification content (html).</p>
<p>With additional line. modifier: grey</p>
</div>
</div>Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Description |
|---|---|---|
| modifier | string or false (boolean) | Default values are 'green', 'amber', 'red', 'do', 'dont', false (boolean) or null. |
| title | string or false (boolean) | The notification component title. Default values are false (boolean) or null. |
| rows | array or false (boolean) | The list of do or don't items. If notification modifier is 'do' or 'dont', the followng parameter/s are required and content will be ignored. Default values are false (boolean) or null. See rows. |
| content | array or false (boolean) | The notification component content. If notification modifier is 'do' or 'dont', content will be ignored. Default values are false (boolean) or null. See content. |
Options for rows
| Name | Type | Description |
|---|---|---|
| html | string | Required. HTML for the do or don't item. If 'html' is provided, the 'text' parameter will be ignored. |
| text | string | Required. Text for the do or don't item. If 'html' is provided, the 'text' parameter will be ignored. |
Options for content
| Name | Type | Description |
|---|---|---|
| html | string | Required. HTML for the notification component content. If 'html' is provided, the 'text' parameter will be ignored. |
| text | string | Required. Text for the notification component content. If 'html' is provided, the 'text' parameter will be ignored. |
{% from "notification/macro.njk" import aspNotification %}
{{ aspNotification({
modifier: "grey",
title: "Notification title",
content: {
html: '<p>Notification content (html).</p>
<p>With additional line. modifier: grey</p>'
}
}) }}
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.
<div class="asp-notification asp-notification--green">
<div class="asp-notification__content">
<p>Notification content (html) without a title. modifier: green</p>
</div>
</div>Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Description |
|---|---|---|
| modifier | string or false (boolean) | Default values are 'green', 'amber', 'red', 'do', 'dont', false (boolean) or null. |
| title | string or false (boolean) | The notification component title. Default values are false (boolean) or null. |
| rows | array or false (boolean) | The list of do or don't items. If notification modifier is 'do' or 'dont', the followng parameter/s are required and content will be ignored. Default values are false (boolean) or null. See rows. |
| content | array or false (boolean) | The notification component content. If notification modifier is 'do' or 'dont', content will be ignored. Default values are false (boolean) or null. See content. |
Options for rows
| Name | Type | Description |
|---|---|---|
| html | string | Required. HTML for the do or don't item. If 'html' is provided, the 'text' parameter will be ignored. |
| text | string | Required. Text for the do or don't item. If 'html' is provided, the 'text' parameter will be ignored. |
Options for content
| Name | Type | Description |
|---|---|---|
| html | string | Required. HTML for the notification component content. If 'html' is provided, the 'text' parameter will be ignored. |
| text | string | Required. Text for the notification component content. If 'html' is provided, the 'text' parameter will be ignored. |
{% from "notification/macro.njk" import aspNotification %}
{{ aspNotification({
modifier: "green",
content: {
html: '<p>Notification content (html) without a title. modifier: green</p>'
}
}) }}
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:
- Green: Useful information which user needs to be aware of
- Amber: Important information which user needs to be aware of
- Red: Crucial information which the user needs to be aware of
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.
| Development criteria | Status |
|---|---|
| WCAG 2.2 compliant | Not started |
| WCAG 2.1 compliant | Completed |
| HTML / Nunjucks version | Completed |
| Figma version | Not started |
| M365 versions | Not started |
| Documentation | In progress |
Published 3 May 2024
Last updated 12 September 2024