Skip to main content

This is an internal development app.

To learn how to design and build digital services, visit the design system in the NHS digital service manual for guidance and examples.

Task list

These examples are used for automated tests and may not follow service manual best practice.

Task list default

Open this example in a new tab: Task list default

Code

Markup

<ul class="nhsuk-task-list">
  <li class="nhsuk-task-list__item nhsuk-task-list__item--with-link">
    <div class="nhsuk-task-list__name-and-hint">
      <a class="nhsuk-link nhsuk-task-list__link" href="#" aria-describedby="your-health-1-status">
        Exercise
      </a>
    </div>
    <div class="nhsuk-task-list__status nhsuk-task-list__status--completed" id="your-health-1-status">
      Completed
    </div>
  </li>
  <li class="nhsuk-task-list__item nhsuk-task-list__item--with-link">
    <div class="nhsuk-task-list__name-and-hint">
      <a class="nhsuk-link nhsuk-task-list__link" href="#" aria-describedby="your-health-2-status">
        Personal health
      </a>
    </div>
    <div class="nhsuk-task-list__status nhsuk-task-list__status--completed" id="your-health-2-status">
      Completed
    </div>
  </li>
  <li class="nhsuk-task-list__item nhsuk-task-list__item--with-link">
    <div class="nhsuk-task-list__name-and-hint">
      <a class="nhsuk-link nhsuk-task-list__link" href="#" aria-describedby="your-health-3-hint your-health-3-status">
        Family health history
      </a>
      <div class="nhsuk-task-list__hint" id="your-health-3-hint">
        Details of your parents, brothers and sisters
      </div>
    </div>
    <div class="nhsuk-task-list__status" id="your-health-3-status">
      <strong class="nhsuk-tag nhsuk-tag--blue">
        Incomplete
      </strong>
    </div>
  </li>
  <li class="nhsuk-task-list__item nhsuk-task-list__item--with-link">
    <div class="nhsuk-task-list__name-and-hint">
      <a class="nhsuk-link nhsuk-task-list__link" href="#" aria-describedby="your-health-4-status">
        Smoking history
      </a>
    </div>
    <div class="nhsuk-task-list__status" id="your-health-4-status">
      <strong class="nhsuk-tag nhsuk-tag--blue">
        Incomplete
      </strong>
    </div>
  </li>
  <li class="nhsuk-task-list__item">
    <div class="nhsuk-task-list__name-and-hint">
      <div>
        Blood test
      </div>
    </div>
    <div class="nhsuk-task-list__status nhsuk-task-list__status--cannot-start-yet" id="your-health-5-status">
      Cannot start yet
    </div>
  </li>
</ul>

Macro

{% from "task-list/macro.njk" import taskList -%}

{{ taskList({
  idPrefix: "your-health",
  items: [
    {
      title: {
        text: "Exercise"
      },
      href: "#",
      status: {
        text: "Completed",
        classes: "nhsuk-task-list__status--completed"
      }
    },
    {
      title: {
        text: "Personal health"
      },
      href: "#",
      status: {
        text: "Completed",
        classes: "nhsuk-task-list__status--completed"
      }
    },
    {
      title: {
        text: "Family health history"
      },
      hint: {
        text: "Details of your parents, brothers and sisters"
      },
      href: "#",
      status: {
        tag: {
          text: "Incomplete",
          colour: "blue"
        }
      }
    },
    {
      title: {
        text: "Smoking history"
      },
      href: "#",
      status: {
        tag: {
          text: "Incomplete",
          colour: "blue"
        }
      }
    },
    {
      title: {
        text: "Blood test"
      },
      status: {
        text: "Cannot start yet",
        classes: "nhsuk-task-list__status--cannot-start-yet"
      }
    }
  ]
}) }}

Task list with empty items

Open this example in a new tab: Task list with empty items

Code

Markup

<ul class="nhsuk-task-list">
  <li class="nhsuk-task-list__item nhsuk-task-list__item--with-link">
    <div class="nhsuk-task-list__name-and-hint">
      <a class="nhsuk-link nhsuk-task-list__link" href="#" aria-describedby="your-health-1-status">
        Exercise
      </a>
    </div>
    <div class="nhsuk-task-list__status nhsuk-task-list__status--completed" id="your-health-1-status">
      Completed
    </div>
  </li>
  <li class="nhsuk-task-list__item nhsuk-task-list__item--with-link">
    <div class="nhsuk-task-list__name-and-hint">
      <a class="nhsuk-link nhsuk-task-list__link" href="#" aria-describedby="your-health-2-status">
        Personal health
      </a>
    </div>
    <div class="nhsuk-task-list__status nhsuk-task-list__status--completed" id="your-health-2-status">
      Completed
    </div>
  </li>


  <li class="nhsuk-task-list__item nhsuk-task-list__item--with-link">
    <div class="nhsuk-task-list__name-and-hint">
      <a class="nhsuk-link nhsuk-task-list__link" href="#" aria-describedby="your-health-5-status">
        Blood test
      </a>
    </div>
    <div class="nhsuk-task-list__status" id="your-health-5-status">
      <strong class="nhsuk-tag nhsuk-tag--blue">
        Incomplete
      </strong>
    </div>
  </li>
</ul>

Macro

{% from "task-list/macro.njk" import taskList -%}

{{ taskList({
  idPrefix: "your-health",
  items: [
    {
      title: {
        text: "Exercise"
      },
      href: "#",
      status: {
        text: "Completed",
        classes: "nhsuk-task-list__status--completed"
      }
    },
    {
      title: {
        text: "Personal health"
      },
      href: "#",
      status: {
        text: "Completed",
        classes: "nhsuk-task-list__status--completed"
      }
    },
    false,
    false,
    {
      title: {
        text: "Blood test"
      },
      href: "#",
      status: {
        tag: {
          text: "Incomplete",
          colour: "blue"
        }
      }
    }
  ]
}) }}