Pages 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 (Task list (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: '#'
      }]
    }
  ]
}) }}

Contribute

You can contribute to this pattern in the GOV.UK Design System