- A-Z
- Accordion
- Acronym
- Action
- Alert
- Breadcrumbs
- Button
- Card
- Checkboxes
- Confirmation
- Cookie banner
- Copy
- Date input
- Details
- Env
- Error summary
- Filter
- Footer
- Forms
- Group
- Header
- Help
- Hero
- Hr
- Input
- Leave site
- Notification
- Pagination
- Panel
- Progress
- Radios
- Search input
- 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.
Action
The action component highlights important or crucial content to users, suggesting when they may need to complete an action.
Design preview and code implementation
The component displays content in a different coloured box, depending on the urgency of the action needed.
<div class="asp-action">
<div class="asp-action__title-container">
<h2 class="asp-action__title">Action title
<span class="asp-action__arrow" aria-hidden="true"></span>
</h2>
</div>
<div class="asp-action__content">
<p>Action content (html) with a <a href="#">link</a>.</p>
</div>
</div>{
"type": "action",
"params": {
"title": "Action title",
"content": {
"html": "<p>Action content (html) with a <a href=\"#\">link</a>.</p>"
}
}
}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 'urgent', false (boolean) or null. |
| title | string | Required. The action component title. |
| content | object | Required. The action component content. See content. |
Options for content
| Name | Type | Description |
|---|---|---|
| html | string | Required. HTML for the action component content. If 'html' is provided, the 'text' parameter will be ignored. |
| text | string | Required. Text for the action component content. If 'html' is provided, the 'text' parameter will be ignored. |
{% from "components/action/macro.njk" import aspAction %}
{{ aspAction({
title: "Action title",
content: {
html: "<p>Action content (html) with a <a href="#">link</a>.</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 'urgent', false (boolean) or null. |
| title | string | Required. The action component title. |
| content | object | Required. The action component content. See content. |
Options for content
| Name | Type | Description |
|---|---|---|
| html | string | Required. HTML for the action component content. If 'html' is provided, the 'text' parameter will be ignored. |
| text | string | Required. Text for the action component content. If 'html' is provided, the 'text' parameter will be ignored. |
{% from "@asp-frontend/components/action/macro.twig" import aspAction %}
{{ aspAction({
title: "Action title",
content: {
html: "<p>Action content (html) with a <a href="#">link</a>.</p>"
}
}) }}Tag helper attributes
Use attributes to customise the appearance, content and behaviour of a component when using a tag helper, for example, changing the text.
Some attributes are required for the tag helper to work; these are marked as "Required" in the attribute description.
If you're using tag helpers in production with content-html or other HTML attributes, you must sanitise the HTML to protect against cross-site scripting exploits.
| Attribute | Type | Description |
|---|---|---|
| modifier | string or false (boolean) |
Default values are 'urgent', false (boolean) or null. HTML attribute on <asp-action>.
|
| title | string |
Required.
The action component title. HTML attribute on <asp-action>.
|
| content | object |
Required.
The action component content. On <asp-action>, use content-html or content-text attributes.
See content.
|
content attributes
| Attribute | Type | Description |
|---|---|---|
| content-html | string | Required. HTML for the action component content. If 'html' is provided, the 'text' parameter will be ignored. |
| content-text | string | Required. Text for the action component content. If 'html' is provided, the 'text' parameter will be ignored. |
<asp-action title='Action title' content-html='<p>Action content (html) with a <a href="#">link</a>.</p>' />| Name | Type | Description |
|---|---|---|
| HeaderText | string or false (boolean) | Required. Text input for the text to be displayed in the header. |
| BodyHTMLText | string or false (boolean) | Required. HTML text input for the body of the action component. |
| BlueOrRead | string or false (boolean) | Required. Text input, use either "Blue" or "Red" to switch between variations. Can be controlled with a variable. |
| Font | string or false (boolean) | Required. This is the font that the text will be shown in. This will likely be Font.'Segoe UI'. |
| DarkMode | string or false (boolean) |
Required.
Input to determine if the component should be dark mode or not. Set by named formula variable varDarkMode.
|
| TextBoxHeight | string or false (boolean) |
Required.
This is an output property which is then used as the component Height property for example cmp_ASP_Action.TextBoxHeight.
|
<div class="asp-action asp-action--urgent">
<div class="asp-action__title-container">
<h2 class="asp-action__title">Action title
<span class="asp-action__arrow" aria-hidden="true"></span>
</h2>
</div>
<div class="asp-action__content">
<p>Action content (text). modifier urgent</p>
</div>
</div>{
"type": "action",
"params": {
"modifier": "urgent",
"title": "Action title",
"content": {
"text": "Action content (text). modifier urgent"
}
}
}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 'urgent', false (boolean) or null. |
| title | string | Required. The action component title. |
| content | object | Required. The action component content. See content. |
Options for content
| Name | Type | Description |
|---|---|---|
| html | string | Required. HTML for the action component content. If 'html' is provided, the 'text' parameter will be ignored. |
| text | string | Required. Text for the action component content. If 'html' is provided, the 'text' parameter will be ignored. |
{% from "components/action/macro.njk" import aspAction %}
{{ aspAction({
modifier: "urgent",
title: "Action title",
content: {
text: "Action content (text). modifier urgent"
}
}) }}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 'urgent', false (boolean) or null. |
| title | string | Required. The action component title. |
| content | object | Required. The action component content. See content. |
Options for content
| Name | Type | Description |
|---|---|---|
| html | string | Required. HTML for the action component content. If 'html' is provided, the 'text' parameter will be ignored. |
| text | string | Required. Text for the action component content. If 'html' is provided, the 'text' parameter will be ignored. |
{% from "@asp-frontend/components/action/macro.twig" import aspAction %}
{{ aspAction({
modifier: "urgent",
title: "Action title",
content: {
text: "Action content (text). modifier urgent"
}
}) }}Tag helper attributes
Use attributes to customise the appearance, content and behaviour of a component when using a tag helper, for example, changing the text.
Some attributes are required for the tag helper to work; these are marked as "Required" in the attribute description.
If you're using tag helpers in production with content-html or other HTML attributes, you must sanitise the HTML to protect against cross-site scripting exploits.
| Attribute | Type | Description |
|---|---|---|
| modifier | string or false (boolean) |
Default values are 'urgent', false (boolean) or null. HTML attribute on <asp-action>.
|
| title | string |
Required.
The action component title. HTML attribute on <asp-action>.
|
| content | object |
Required.
The action component content. On <asp-action>, use content-html or content-text attributes.
See content.
|
content attributes
| Attribute | Type | Description |
|---|---|---|
| content-html | string | Required. HTML for the action component content. If 'html' is provided, the 'text' parameter will be ignored. |
| content-text | string | Required. Text for the action component content. If 'html' is provided, the 'text' parameter will be ignored. |
<asp-action modifier='urgent' title='Action title' content-text='Action content (text). modifier urgent' />| Name | Type | Description |
|---|---|---|
| HeaderText | string or false (boolean) | Required. Text input for the text to be displayed in the header. |
| BodyHTMLText | string or false (boolean) | Required. HTML text input for the body of the action component. |
| BlueOrRead | string or false (boolean) | Required. Text input, use either "Blue" or "Red" to switch between variations. Can be controlled with a variable. |
| Font | string or false (boolean) | Required. This is the font that the text will be shown in. This will likely be Font.'Segoe UI'. |
| DarkMode | string or false (boolean) |
Required.
Input to determine if the component should be dark mode or not. Set by named formula variable varDarkMode.
|
| TextBoxHeight | string or false (boolean) |
Required.
This is an output property which is then used as the component Height property for example cmp_ASP_Action.TextBoxHeight.
|
When to use this component
Use this component to help users understand they may need to complete an action.
Depending on the urgency of the action needed, you may use:
- Non-urgent (blue version): Content where the action is not urgent for the safety of a user. For example, ‘Ring 101 or complete an online form’.
- Urgent (red version): Content where the action is paramount to the safety of the user. For example, ‘Ring 999 immediately’.
When not to use this component
The component should be used for clear and concise messages where an action may be needed. It should not be used for longer messages as this can add unnecessary length to the page.
Avoid using this component multiple times next to each other as this can make the page difficult to scan and may confuse the user as to which message is important.
Example of where we have used this component
This component is used on:
- ASP website
- OPCC wesite
This list is not exhaustive.
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 |
Make a change to the Design System
Suggest an edit to this system, or any of the components in it, by submitting a Design System change request.
Published 3 May 2024
Last updated 24 July 2026