Archive Task list pages

Important

This page is archived

This page has been archived as a task list component has been included in the release of GOV.UK Frontend v5.0.0.

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.

Open this example in a new window

<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: '#'
      }]
    }
  ]
}) }}