Skip to main content

Internal review app NHS.UK frontend

Use design system guidance and examples to build consistent, accessible NHS services for the public and staff.

Deployed automatically from main branch (opens in new tab).

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-task-list__link nhsuk-link" href="#/task/exercise" aria-describedby="your-health-1-status">
        Exercise
      </a>
    </div>
    <div class="nhsuk-task-list__status" id="your-health-1-status">
      <strong class="nhsuk-tag nhsuk-tag--no-colour nhsuk-tag--no-border nhsuk-u-font-weight-normal">
        Completed
      </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-task-list__link nhsuk-link" href="#/task/personal-health" aria-describedby="your-health-2-status">
        Personal health
      </a>
    </div>
    <div class="nhsuk-task-list__status" id="your-health-2-status">
      <strong class="nhsuk-tag nhsuk-tag--no-colour nhsuk-tag--no-border nhsuk-u-font-weight-normal">
        Completed
      </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-task-list__link nhsuk-link" href="#/task/family-health-history" 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-task-list__link nhsuk-link" href="#/task/smoking-history" 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" id="your-health-5-status">
      <strong class="nhsuk-tag nhsuk-tag--no-colour nhsuk-tag--no-border nhsuk-u-font-weight-normal nhsuk-u-secondary-text-colour">
        Cannot start yet
      </strong>
    </div>
  </li>
</ul>

Macro

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

{{ taskList({
  idPrefix: "your-health",
  items: [
    {
      heading: {
        text: "Exercise"
      },
      href: "#/task/exercise",
      status: {
        tag: {
          text: "Completed",
          border: false,
          colour: false,
          classes: "nhsuk-u-font-weight-normal"
        }
      }
    },
    {
      heading: {
        text: "Personal health"
      },
      href: "#/task/personal-health",
      status: {
        tag: {
          text: "Completed",
          border: false,
          colour: false,
          classes: "nhsuk-u-font-weight-normal"
        }
      }
    },
    {
      heading: {
        text: "Family health history"
      },
      hint: {
        text: "Details of your parents, brothers and sisters"
      },
      href: "#/task/family-health-history",
      status: {
        tag: {
          text: "Incomplete",
          colour: "blue"
        }
      }
    },
    {
      heading: {
        text: "Smoking history"
      },
      href: "#/task/smoking-history",
      status: {
        tag: {
          text: "Incomplete",
          colour: "blue"
        }
      }
    },
    {
      heading: {
        text: "Blood test"
      },
      status: {
        tag: {
          text: "Cannot start yet",
          border: false,
          colour: false,
          classes: "nhsuk-u-font-weight-normal nhsuk-u-secondary-text-colour"
        }
      }
    }
  ]
}) }}

Task list with deprecated status classes

Open this example in a new tab: Task list with deprecated status classes

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-task-list__link nhsuk-link" href="#/task/exercise" 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-task-list__link nhsuk-link" href="#/task/personal-health" 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-task-list__link nhsuk-link" href="#/task/family-health-history" 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-task-list__link nhsuk-link" href="#/task/smoking-history" 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: "#/task/exercise",
      status: {
        text: "Completed",
        classes: "nhsuk-task-list__status--completed"
      }
    },
    {
      title: {
        text: "Personal health"
      },
      href: "#/task/personal-health",
      status: {
        text: "Completed",
        classes: "nhsuk-task-list__status--completed"
      }
    },
    {
      title: {
        text: "Family health history"
      },
      hint: {
        text: "Details of your parents, brothers and sisters"
      },
      href: "#/task/family-health-history",
      status: {
        tag: {
          text: "Incomplete",
          colour: "blue"
        }
      }
    },
    {
      title: {
        text: "Smoking history"
      },
      href: "#/task/smoking-history",
      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 deprecated titles

Open this example in a new tab: Task list with deprecated titles

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-task-list__link nhsuk-link" href="#/task/exercise" aria-describedby="your-health-1-status">
        Exercise
      </a>
    </div>
    <div class="nhsuk-task-list__status" id="your-health-1-status">
      <strong class="nhsuk-tag nhsuk-tag--no-colour nhsuk-tag--no-border nhsuk-u-font-weight-normal">
        Completed
      </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-task-list__link nhsuk-link" href="#/task/personal-health" aria-describedby="your-health-2-status">
        Personal health
      </a>
    </div>
    <div class="nhsuk-task-list__status" id="your-health-2-status">
      <strong class="nhsuk-tag nhsuk-tag--no-colour nhsuk-tag--no-border nhsuk-u-font-weight-normal">
        Completed
      </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-task-list__link nhsuk-link" href="#/task/family-health-history" 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-task-list__link nhsuk-link" href="#/task/smoking-history" 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" id="your-health-5-status">
      <strong class="nhsuk-tag nhsuk-tag--no-colour nhsuk-tag--no-border nhsuk-u-font-weight-normal nhsuk-u-secondary-text-colour">
        Cannot start yet
      </strong>
    </div>
  </li>
</ul>

Macro

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

{{ taskList({
  idPrefix: "your-health",
  items: [
    {
      title: {
        text: "Exercise"
      },
      href: "#/task/exercise",
      status: {
        tag: {
          text: "Completed",
          border: false,
          colour: false,
          classes: "nhsuk-u-font-weight-normal"
        }
      }
    },
    {
      title: {
        text: "Personal health"
      },
      href: "#/task/personal-health",
      status: {
        tag: {
          text: "Completed",
          border: false,
          colour: false,
          classes: "nhsuk-u-font-weight-normal"
        }
      }
    },
    {
      title: {
        text: "Family health history"
      },
      hint: {
        text: "Details of your parents, brothers and sisters"
      },
      href: "#/task/family-health-history",
      status: {
        tag: {
          text: "Incomplete",
          colour: "blue"
        }
      }
    },
    {
      title: {
        text: "Smoking history"
      },
      href: "#/task/smoking-history",
      status: {
        tag: {
          text: "Incomplete",
          colour: "blue"
        }
      }
    },
    {
      title: {
        text: "Blood test"
      },
      status: {
        tag: {
          text: "Cannot start yet",
          border: false,
          colour: false,
          classes: "nhsuk-u-font-weight-normal nhsuk-u-secondary-text-colour"
        }
      }
    }
  ]
}) }}

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-task-list__link nhsuk-link" href="#/task/exercise" aria-describedby="your-health-1-status">
        Exercise
      </a>
    </div>
    <div class="nhsuk-task-list__status" id="your-health-1-status">
      <strong class="nhsuk-tag nhsuk-tag--no-colour nhsuk-tag--no-border nhsuk-u-font-weight-normal">
        Completed
      </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-task-list__link nhsuk-link" href="#/task/personal-health" aria-describedby="your-health-2-status">
        Personal health
      </a>
    </div>
    <div class="nhsuk-task-list__status" id="your-health-2-status">
      <strong class="nhsuk-tag nhsuk-tag--no-colour nhsuk-tag--no-border nhsuk-u-font-weight-normal">
        Completed
      </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-task-list__link nhsuk-link" href="#/task/blood-test" 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: [
    {
      heading: {
        text: "Exercise"
      },
      href: "#/task/exercise",
      status: {
        tag: {
          text: "Completed",
          border: false,
          colour: false,
          classes: "nhsuk-u-font-weight-normal"
        }
      }
    },
    {
      heading: {
        text: "Personal health"
      },
      href: "#/task/personal-health",
      status: {
        tag: {
          text: "Completed",
          border: false,
          colour: false,
          classes: "nhsuk-u-font-weight-normal"
        }
      }
    },
    false,
    false,
    {
      heading: {
        text: "Blood test"
      },
      href: "#/task/blood-test",
      status: {
        tag: {
          text: "Incomplete",
          colour: "blue"
        }
      }
    }
  ]
}) }}

Task list with headings and hints as strings

Open this example in a new tab: Task list with headings and hints as strings

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-task-list__link nhsuk-link" href="#/task/exercise" aria-describedby="your-health-1-status">
        Exercise
      </a>
    </div>
    <div class="nhsuk-task-list__status" id="your-health-1-status">
      <strong class="nhsuk-tag nhsuk-tag--no-colour nhsuk-tag--no-border nhsuk-u-font-weight-normal">
        Completed
      </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-task-list__link nhsuk-link" href="#/task/personal-health" aria-describedby="your-health-2-status">
        Personal health
      </a>
    </div>
    <div class="nhsuk-task-list__status" id="your-health-2-status">
      <strong class="nhsuk-tag nhsuk-tag--no-colour nhsuk-tag--no-border nhsuk-u-font-weight-normal">
        Completed
      </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-task-list__link nhsuk-link" href="#/task/family-health-history" 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-task-list__link nhsuk-link" href="#/task/smoking-history" 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" id="your-health-5-status">
      <strong class="nhsuk-tag nhsuk-tag--no-colour nhsuk-tag--no-border nhsuk-u-font-weight-normal nhsuk-u-secondary-text-colour">
        Cannot start yet
      </strong>
    </div>
  </li>
</ul>

Macro

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

{{ taskList({
  idPrefix: "your-health",
  items: [
    {
      heading: "Exercise",
      href: "#/task/exercise",
      status: {
        tag: {
          text: "Completed",
          border: false,
          colour: false,
          classes: "nhsuk-u-font-weight-normal"
        }
      }
    },
    {
      heading: "Personal health",
      href: "#/task/personal-health",
      status: {
        tag: {
          text: "Completed",
          border: false,
          colour: false,
          classes: "nhsuk-u-font-weight-normal"
        }
      }
    },
    {
      heading: "Family health history",
      hint: "Details of your parents, brothers and sisters",
      href: "#/task/family-health-history",
      status: {
        tag: {
          text: "Incomplete",
          colour: "blue"
        }
      }
    },
    {
      heading: "Smoking history",
      href: "#/task/smoking-history",
      status: {
        tag: {
          text: "Incomplete",
          colour: "blue"
        }
      }
    },
    {
      heading: "Blood test",
      status: {
        tag: {
          text: "Cannot start yet",
          border: false,
          colour: false,
          classes: "nhsuk-u-font-weight-normal nhsuk-u-secondary-text-colour"
        }
      }
    }
  ]
}) }}

Task list with headings and status text as strings

Open this example in a new tab: Task list with headings and status text as strings

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-task-list__link nhsuk-link" href="#/task/exercise" aria-describedby="your-health-1-status">
        Exercise
      </a>
    </div>
    <div class="nhsuk-task-list__status" id="your-health-1-status">
      Not applicable
    </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-task-list__link nhsuk-link" href="#/task/personal-health" aria-describedby="your-health-2-status">
        Personal health
      </a>
    </div>
    <div class="nhsuk-task-list__status" id="your-health-2-status">
      Not applicable
    </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-task-list__link nhsuk-link" href="#/task/blood-test" aria-describedby="your-health-3-status">
        Blood test
      </a>
    </div>
    <div class="nhsuk-task-list__status" id="your-health-3-status">
      Not applicable
    </div>
  </li>
</ul>

Macro

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

{{ taskList({
  idPrefix: "your-health",
  items: [
    {
      heading: "Exercise",
      href: "#/task/exercise",
      status: "Not applicable"
    },
    {
      heading: "Personal health",
      href: "#/task/personal-health",
      status: "Not applicable"
    },
    {
      heading: "Blood test",
      href: "#/task/blood-test",
      status: "Not applicable"
    }
  ]
}) }}