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. |
| id | string | The ID of the notification. |
| classes | string | Additional classes to add to the notification. |
| 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 "components/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>'
}
}) }}
Twig 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. |
| id | string | The ID of the notification. |
| classes | string | Additional classes to add to the notification. |
| 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 "asp-frontend/components/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>'
}
}) }}
| Name | Type | Description |
|---|---|---|
| HeaderText | string | Required. Text input for the text to be displayed in the header. |
| BodyHTMLText | string | Required. HTML text input for the body of the action component. |
| Type | string | Required. Text input, use either “Blue”, “Red”, “Amber” or “Grey” to switch between variations. Can be controlled with a variable. |
| Font | string | Required. This is the font that the text will be shown in. This will likely be Font.'Segoe UI'. |
| Size | number | Required. Number input for body text size. |
| DarkMode | boolean | Required. Input to determine if the component should be dark mode or not. Set by named formula variable varDarkMode. |
| TextBoxHeight | string |
Required.
This is an output property which is then used as the component Height property for example cmp_ASP_Action.TextBoxHeight.
|
| FlagWidth | number | Required. Number input to determine the width of the coloured title fill. |
Default notification list with ticks
<div class="asp-notification">
<h2 class="asp-notification__title">Do / Don't list with ticks</h2>
<div class="asp-notification__content">
<ul class="asp-list--plain 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>
</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. |
| id | string | The ID of the notification. |
| classes | string | Additional classes to add to the notification. |
| 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 "components/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"
}
]
}) }}
Twig 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. |
| id | string | The ID of the notification. |
| classes | string | Additional classes to add to the notification. |
| 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 "asp-frontend/components/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"
}
]
}) }}
| Name | Type | Description |
|---|---|---|
| HeaderText | string | Required. Text input for the text to be displayed in the header. |
| BodyHTMLText | string | Required. HTML text input for the body of the action component. |
| Type | string | Required. Text input, use either “Blue”, “Red”, “Amber” or “Grey” to switch between variations. Can be controlled with a variable. |
| Font | string | Required. This is the font that the text will be shown in. This will likely be Font.'Segoe UI'. |
| Size | number | Required. Number input for body text size. |
| DarkMode | boolean | Required. Input to determine if the component should be dark mode or not. Set by named formula variable varDarkMode. |
| TextBoxHeight | string |
Required.
This is an output property which is then used as the component Height property for example cmp_ASP_Action.TextBoxHeight.
|
| FlagWidth | number | Required. Number input to determine the width of the coloured title fill. |
Default notification with crosses
<div class="asp-notification">
<h2 class="asp-notification__title">Do / Don't list with crosses</h2>
<div class="asp-notification__content">
<ul class="asp-list--plain 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>
</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. |
| id | string | The ID of the notification. |
| classes | string | Additional classes to add to the notification. |
| 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 "components/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"
}
]
}) }}
Twig 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. |
| id | string | The ID of the notification. |
| classes | string | Additional classes to add to the notification. |
| 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 "asp-frontend/components/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"
}
]
}) }}
| Name | Type | Description |
|---|---|---|
| HeaderText | string | Required. Text input for the text to be displayed in the header. |
| BodyHTMLText | string | Required. HTML text input for the body of the action component. |
| Type | string | Required. Text input, use either “Blue”, “Red”, “Amber” or “Grey” to switch between variations. Can be controlled with a variable. |
| Font | string | Required. This is the font that the text will be shown in. This will likely be Font.'Segoe UI'. |
| Size | number | Required. Number input for body text size. |
| DarkMode | boolean | Required. Input to determine if the component should be dark mode or not. Set by named formula variable varDarkMode. |
| TextBoxHeight | string |
Required.
This is an output property which is then used as the component Height property for example cmp_ASP_Action.TextBoxHeight.
|
| FlagWidth | number | Required. Number input to determine the width of the coloured title fill. |
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. |
| id | string | The ID of the notification. |
| classes | string | Additional classes to add to the notification. |
| 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 "components/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>'
}
}) }}
Twig 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. |
| id | string | The ID of the notification. |
| classes | string | Additional classes to add to the notification. |
| 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 "asp-frontend/components/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>'
}
}) }}
| Name | Type | Description |
|---|---|---|
| HeaderText | string | Required. Text input for the text to be displayed in the header. |
| BodyHTMLText | string | Required. HTML text input for the body of the action component. |
| Type | string | Required. Text input, use either “Blue”, “Red”, “Amber” or “Grey” to switch between variations. Can be controlled with a variable. |
| Font | string | Required. This is the font that the text will be shown in. This will likely be Font.'Segoe UI'. |
| Size | number | Required. Number input for body text size. |
| DarkMode | boolean | Required. Input to determine if the component should be dark mode or not. Set by named formula variable varDarkMode. |
| TextBoxHeight | string |
Required.
This is an output property which is then used as the component Height property for example cmp_ASP_Action.TextBoxHeight.
|
| FlagWidth | number | Required. Number input to determine the width of the coloured title fill. |
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. |
| id | string | The ID of the notification. |
| classes | string | Additional classes to add to the notification. |
| 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 "components/notification/macro.njk" import aspNotification %}
{{ aspNotification({
modifier: "amber",
title: "Notification title",
content: {
text: 'Notification content (text). modifier: amber'
}
}) }}
Twig 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. |
| id | string | The ID of the notification. |
| classes | string | Additional classes to add to the notification. |
| 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 "asp-frontend/components/notification/macro.njk" import aspNotification %}
{{ aspNotification({
modifier: "amber",
title: "Notification title",
content: {
text: 'Notification content (text). modifier: amber'
}
}) }}
| Name | Type | Description |
|---|---|---|
| HeaderText | string | Required. Text input for the text to be displayed in the header. |
| BodyHTMLText | string | Required. HTML text input for the body of the action component. |
| Type | string | Required. Text input, use either “Blue”, “Red”, “Amber” or “Grey” to switch between variations. Can be controlled with a variable. |
| Font | string | Required. This is the font that the text will be shown in. This will likely be Font.'Segoe UI'. |
| Size | number | Required. Number input for body text size. |
| DarkMode | boolean | Required. Input to determine if the component should be dark mode or not. Set by named formula variable varDarkMode. |
| TextBoxHeight | string |
Required.
This is an output property which is then used as the component Height property for example cmp_ASP_Action.TextBoxHeight.
|
| FlagWidth | number | Required. Number input to determine the width of the coloured title fill. |
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. |
| id | string | The ID of the notification. |
| classes | string | Additional classes to add to the notification. |
| 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 "components/notification/macro.njk" import aspNotification %}
{{ aspNotification({
modifier: "red",
title: "Notification title",
content: {
text: 'Notification content (text). modifier: red'
}
}) }}
Twig 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. |
| id | string | The ID of the notification. |
| classes | string | Additional classes to add to the notification. |
| 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 "asp-frontend/components/notification/macro.njk" import aspNotification %}
{{ aspNotification({
modifier: "red",
title: "Notification title",
content: {
text: 'Notification content (text). modifier: red'
}
}) }}
| Name | Type | Description |
|---|---|---|
| HeaderText | string | Required. Text input for the text to be displayed in the header. |
| BodyHTMLText | string | Required. HTML text input for the body of the action component. |
| Type | string | Required. Text input, use either “Blue”, “Red”, “Amber” or “Grey” to switch between variations. Can be controlled with a variable. |
| Font | string | Required. This is the font that the text will be shown in. This will likely be Font.'Segoe UI'. |
| Size | number | Required. Number input for body text size. |
| DarkMode | boolean | Required. Input to determine if the component should be dark mode or not. Set by named formula variable varDarkMode. |
| TextBoxHeight | string |
Required.
This is an output property which is then used as the component Height property for example cmp_ASP_Action.TextBoxHeight.
|
| FlagWidth | number | Required. Number input to determine the width of the coloured title fill. |
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. |
| id | string | The ID of the notification. |
| classes | string | Additional classes to add to the notification. |
| 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 "components/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>'
}
}) }}
Twig 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. |
| id | string | The ID of the notification. |
| classes | string | Additional classes to add to the notification. |
| 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 "asp-frontend/components/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>'
}
}) }}
| Name | Type | Description |
|---|---|---|
| HeaderText | string | Required. Text input for the text to be displayed in the header. |
| BodyHTMLText | string | Required. HTML text input for the body of the action component. |
| Type | string | Required. Text input, use either “Blue”, “Red”, “Amber” or “Grey” to switch between variations. Can be controlled with a variable. |
| Font | string | Required. This is the font that the text will be shown in. This will likely be Font.'Segoe UI'. |
| Size | number | Required. Number input for body text size. |
| DarkMode | boolean | Required. Input to determine if the component should be dark mode or not. Set by named formula variable varDarkMode. |
| TextBoxHeight | string |
Required.
This is an output property which is then used as the component Height property for example cmp_ASP_Action.TextBoxHeight.
|
| FlagWidth | number | Required. Number input to determine the width of the coloured title fill. |
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.
<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. |
| id | string | The ID of the notification. |
| classes | string | Additional classes to add to the notification. |
| 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 "components/notification/macro.njk" import aspNotification %}
{{ aspNotification({
modifier: "green",
content: {
html: '<p>Notification content (html) without a title. modifier: green</p>'
}
}) }}
Twig 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. |
| id | string | The ID of the notification. |
| classes | string | Additional classes to add to the notification. |
| 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 "asp-frontend/components/notification/macro.njk" import aspNotification %}
{{ aspNotification({
modifier: "green",
content: {
html: '<p>Notification content (html) without a title. modifier: green</p>'
}
}) }}
| Name | Type | Description |
|---|---|---|
| HeaderText | string | Required. Text input for the text to be displayed in the header. |
| BodyHTMLText | string | Required. HTML text input for the body of the action component. |
| Type | string | Required. Text input, use either “Blue”, “Red”, “Amber” or “Grey” to switch between variations. Can be controlled with a variable. |
| Font | string | Required. This is the font that the text will be shown in. This will likely be Font.'Segoe UI'. |
| Size | number | Required. Number input for body text size. |
| DarkMode | boolean | Required. Input to determine if the component should be dark mode or not. Set by named formula variable varDarkMode. |
| TextBoxHeight | string |
Required.
This is an output property which is then used as the component Height property for example cmp_ASP_Action.TextBoxHeight.
|
| FlagWidth | number | Required. Number input to determine the width of the coloured title fill. |
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 | Completed |
| Documentation | In progress |
Published 3 May 2024
Last updated 6 February 2025