Archive
Task list pages
Status: ArchivedAbout ‘archived’ pages
This page is no longer being supported and should not be used.
Read about all the Design System statuses.
A coded example of a task list is below, which is not yet in the GOV.UK Design System. There is also a coded example of a task list page in the GOV.UK Prototype Kit.
<ol class="moj-task-list">
<li>
<h2 class="moj-task-list__section">
<span class="moj-task-list__section-number">1. </span>Client details
</h2>
<ul class="moj-task-list__items">
<li class="moj-task-list__item">
<a class="moj-task-list__task-name" href="#">Personal details</a>
<strong class="govuk-tag moj-task-list__task-completed">
completed
</strong>
</li>
<li class="moj-task-list__item">
<a class="moj-task-list__task-name" href="#">What you are covered for</a>
<strong class="govuk-tag moj-task-list__task-completed">
completed
</strong>
</li>
</ul>
</li>
<li>
<h2 class="moj-task-list__section">
<span class="moj-task-list__section-number">2. </span>Means assessment
</h2>
<ul class="moj-task-list__items">
<li class="moj-task-list__item">
<a class="moj-task-list__task-name" href="#">Bank account details</a>
</li>
<li class="moj-task-list__item">
<a class="moj-task-list__task-name" href="#">Income</a>
</li>
<li class="moj-task-list__item">
<a class="moj-task-list__task-name" href="#">Regular payments</a>
</li>
<li class="moj-task-list__item">
<a class="moj-task-list__task-name" href="#">Property</a>
</li>
<li class="moj-task-list__item">
<a class="moj-task-list__task-name" href="#">Savings and investments</a>
</li>
<li class="moj-task-list__item">
<a class="moj-task-list__task-name" href="#">Items of value</a>
</li>
<li class="moj-task-list__item">
<a class="moj-task-list__task-name" href="#">Restrictions</a>
</li>
</ul>
</li>
<li>
<h2 class="moj-task-list__section">
<span class="moj-task-list__section-number">3. </span>Merrits assessment
</h2>
<ul class="moj-task-list__items">
<li class="moj-task-list__item">
<a class="moj-task-list__task-name" href="#">Incident details</a>
<strong class="govuk-tag moj-task-list__task-completed">
completed
</strong>
</li>
<li class="moj-task-list__item">
<a class="moj-task-list__task-name" href="#">Respondent details</a>
<strong class="govuk-tag moj-task-list__task-completed">
completed
</strong>
</li>
<li class="moj-task-list__item">
<a class="moj-task-list__task-name" href="#">Case details</a>
<strong class="govuk-tag moj-task-list__task-completed">
completed
</strong>
</li>
</ul>
</li>
<li>
<h2 class="moj-task-list__section">
<span class="moj-task-list__section-number">4. </span>Apply
</h2>
<ul class="moj-task-list__items">
<li class="moj-task-list__item">
<a class="moj-task-list__task-name" href="#">Submit application</a>
</li>
</ul>
</li>
</ol>
Nunjucks macro options
Container
| Name | Type | Required | Description |
|---|---|---|---|
| sections | array | No | An array of section objects containing task list items. See sections. |
| classes | string | No | Classes to add to the nav container. |
| attributes | object | No | HTML attributes (for example data attributes) to add to the ol container. |
Sections
| Name | Type | Required | Description |
|---|---|---|---|
| items | array | Yes | An array of task list item objects. See items. |
| heading | object | Yes | See heading |
| attributes | object | No | HTML attributes (for example data attributes) to add to the section li. |
Headings
| Name | Type | Required | Description |
|---|---|---|---|
| headingLevel | numeric | No | A number for the heading level. Defaults to 2 (<h2>) |
| text | string | Yes | If html is set, this is not required. Text to use within the heading. If html is provided, the text argument will be ignored. |
| html | string | Yes | If text is set, this is not required. HTML to use within the heading. If html is provided, the text argument will be ignored. |
| classes | string | No | Classes to add to the heading. |
| attributes | object | No | HTML attributes (for example data attributes) to add to the item anchor. |
Items
| Name | Type | Required | Description |
|---|---|---|---|
| href | string | Yes | URL of the item anchor. Both href and text attributes for items need to be provided to create an item. |
| text | string | Yes | If html is set, this is not required. Text to use within the anchor. If html is provided, the text argument will be ignored. |
| html | string | Yes | If text is set, this is not required. HTML to use within the anchor. If html is provided, the text argument will be ignored. |
| complete | boolean | No | Flag to mark the item as complete or not. Defaults to false. |
| attributes | object | No | HTML attributes (for example data attributes) to add to the item anchor. |
Warning: If you’re using Nunjucks macros in production be aware that using HTML arguments, or ones ending with .html can be at risk from cross-site scripting attacks. More information about security vulnerabilities can be found in the Nunjucks documentation.
{%- from "moj/components/task-list/macro.njk" import mojTaskList -%}
{{ mojTaskList({
sections: [
{
heading: {
text: "Client details"
},
items: [{
text: "Personal details",
href: "#",
complete: true
}, {
text: "What you are covered for",
href: "#",
complete: true
}]
},
{
heading: {
text: "Means assessment"
},
items: [{
text: "Bank account details",
href: "#"
}, {
text: "Income",
href: "#"
}, {
text: "Regular payments",
href: "#"
}, {
text: "Property",
href: "#"
}, {
text: "Savings and investments",
href: "#"
}, {
text: "Items of value",
href: "#"
}, {
text: "Restrictions",
href: "#"
}]
},
{
heading: {
text: "Merrits assessment"
},
items: [{
text: "Incident details",
href: "#",
complete: true
}, {
text: "Respondent details",
href: "#",
complete: true
}, {
text: "Case details",
href: "#",
complete: true
}]
},
{
heading: {
text: "Apply"
},
items: [{
text: "Submit application",
href: "#"
}]
}
]
}) }}