- A-Z
- Accordion
- Action
- Alert
- Breadcrumbs
- Button
- Card
- Checkboxes
- Confirmation
- Cookie banner
- Date input
- Details
- Env
- Filter
- Footer
- Forms
- Group
- Header
- Help
- Hero
- Horizontal rule
- Input
- Leave site
- Notification
- Pagination
- Progress
- Radios
- Select
- Signage
- Skip link
- Status
- Steps
- Summary list
- Table
- Tabs
- Textarea
- Time input
Your web browser is out of date
Your web browser (the software you use to access the internet) is out of date. You need to update it or use a different web browser to ensure you can complete this form.
Confirmation
Content to follow
<div class="asp-confirmation">
<h1>Submission complete</h1>
<p>Your form submission number is</p>
<p class="asp-confirmation__code">AAA-AAAXX</p>
</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 |
|---|---|---|
| title | text | Required. |
| content | array | Required. The confirmation component content. If false (boolean), the following parameters will be ignored. See content. |
| code | string or false (boolean) | The confirmation component code. |
| advisory | string or false (boolean) | The confirmation component content that comes after the code. |
Options for content
| Name | Type | Description |
|---|---|---|
| html | string | Required. The confirmation component content. If 'html' is provided, the 'text' parameter will be ignored. |
| text | string | Required. The confirmation component content. If 'html' is provided, the 'text' parameter will be ignored. |
{% from "components/confirmation/macro.njk" import aspConfirmation %}
{{ aspConfirmation({
title: "Submission complete",
content: {
text: "Your form submission number is"
},
code: "AAA-AAAXX"
}) }}
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 |
|---|---|---|
| title | text | Required. |
| content | array | Required. The confirmation component content. If false (boolean), the following parameters will be ignored. See content. |
| code | string or false (boolean) | The confirmation component code. |
| advisory | string or false (boolean) | The confirmation component content that comes after the code. |
Options for content
| Name | Type | Description |
|---|---|---|
| html | string | Required. The confirmation component content. If 'html' is provided, the 'text' parameter will be ignored. |
| text | string | Required. The confirmation component content. If 'html' is provided, the 'text' parameter will be ignored. |
{% from "components/confirmation/macro.njk" import aspConfirmation %}
{{ aspConfirmation({
title: "Submission complete",
content: {
text: "Your form submission number is"
},
code: "AAA-AAAXX"
}) }}
<div class="asp-confirmation">
<h1>Confirmation</h1>
<p>Your form submission has been submitted</p><p>Your confirmation email should arrive immediately.</p>
</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 |
|---|---|---|
| title | text | Required. |
| content | array | Required. The confirmation component content. If false (boolean), the following parameters will be ignored. See content. |
| code | string or false (boolean) | The confirmation component code. |
| advisory | string or false (boolean) | The confirmation component content that comes after the code. |
Options for content
| Name | Type | Description |
|---|---|---|
| html | string | Required. The confirmation component content. If 'html' is provided, the 'text' parameter will be ignored. |
| text | string | Required. The confirmation component content. If 'html' is provided, the 'text' parameter will be ignored. |
{% from "components/confirmation/macro.njk" import aspConfirmation %}
{{ aspConfirmation({
title: "Confirmation",
content: {
html: "<p>Your form submission has been submitted</p><p>Your confirmation email should arrive immediately.</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 |
|---|---|---|
| title | text | Required. |
| content | array | Required. The confirmation component content. If false (boolean), the following parameters will be ignored. See content. |
| code | string or false (boolean) | The confirmation component code. |
| advisory | string or false (boolean) | The confirmation component content that comes after the code. |
Options for content
| Name | Type | Description |
|---|---|---|
| html | string | Required. The confirmation component content. If 'html' is provided, the 'text' parameter will be ignored. |
| text | string | Required. The confirmation component content. If 'html' is provided, the 'text' parameter will be ignored. |
{% from "components/confirmation/macro.njk" import aspConfirmation %}
{{ aspConfirmation({
title: "Confirmation",
content: {
html: "<p>Your form submission has been submitted</p><p>Your confirmation email should arrive immediately.</p>"
}
}) }}
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 | Not started |
| HTML / Nunjucks version | Not started |
| Figma version | Not started |
| M365 versions | Not started |
| Documentation | Not started |
Submit a request
Request a change or addition to the design system use this form.
Published 23 July 2025
Last updated 17 September 2025