Task list

Task list

Open this example in a new tab

Code

Markup

<ul class="govuk-task-list">
  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint">
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="task-list-1-status">
        Company Directors
      </a>
    </div>
    <div class="govuk-task-list__status" id="task-list-1-status">
      Completed
    </div>
  </li>
  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint">
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="task-list-2-status">
        Registered company details
      </a>
    </div>
    <div class="govuk-task-list__status" id="task-list-2-status">
      <strong class="govuk-tag govuk-tag--blue">
        Incomplete
      </strong>
    </div>
  </li>
  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint">
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="task-list-3-status">
        Business plan
      </a>
    </div>
    <div class="govuk-task-list__status" id="task-list-3-status">
      <strong class="govuk-tag govuk-tag--blue">
        Incomplete
      </strong>
    </div>
  </li>
</ul>

Macro

{% from "govuk/components/task-list/macro.njk" import govukTaskList %}

{{ govukTaskList({
  items: [
    {
      title: {
        text: "Company Directors"
      },
      href: "#",
      status: {
        text: "Completed"
      }
    },
    {
      title: {
        text: "Registered company details"
      },
      href: "#",
      status: {
        tag: {
          text: "Incomplete",
          classes: "govuk-tag--blue"
        }
      }
    },
    {
      title: {
        text: "Business plan"
      },
      href: "#",
      status: {
        tag: {
          text: "Incomplete",
          classes: "govuk-tag--blue"
        }
      }
    }
  ]
}) }}

Task list example with 3 states

Open this example in a new tab

Code

Markup

<ul class="govuk-task-list">
  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint">
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="task-list-1-status">
        Company Directors
      </a>
    </div>
    <div class="govuk-task-list__status" id="task-list-1-status">
      Completed
    </div>
  </li>
  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint">
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="task-list-2-status">
        Registered company details
      </a>
    </div>
    <div class="govuk-task-list__status" id="task-list-2-status">
      <strong class="govuk-tag govuk-tag--light-blue">
        Not started
      </strong>
    </div>
  </li>
  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint">
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="task-list-3-status">
        Business plan
      </a>
    </div>
    <div class="govuk-task-list__status" id="task-list-3-status">
      <strong class="govuk-tag govuk-tag--blue">
        In progress
      </strong>
    </div>
  </li>
  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint">
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="task-list-4-status">
        Documentation
      </a>
    </div>
    <div class="govuk-task-list__status" id="task-list-4-status">
      <strong class="govuk-tag govuk-tag--light-blue">
        Not started
      </strong>
    </div>
  </li>
</ul>

Macro

{% from "govuk/components/task-list/macro.njk" import govukTaskList %}

{{ govukTaskList({
  items: [
    {
      title: {
        text: "Company Directors"
      },
      href: "#",
      status: {
        text: "Completed"
      }
    },
    {
      title: {
        text: "Registered company details"
      },
      href: "#",
      status: {
        tag: {
          text: "Not started",
          classes: "govuk-tag--light-blue"
        }
      }
    },
    {
      title: {
        text: "Business plan"
      },
      href: "#",
      status: {
        tag: {
          text: "In progress",
          classes: "govuk-tag--blue"
        }
      }
    },
    {
      title: {
        text: "Documentation"
      },
      href: "#",
      status: {
        tag: {
          text: "Not started",
          classes: "govuk-tag--light-blue"
        }
      }
    }
  ]
}) }}

Task list example with hint text and additional states

Open this example in a new tab

Code

Markup

<ul class="govuk-task-list">
  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint">
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="task-list-1-status">
        Company Directors
      </a>
    </div>
    <div class="govuk-task-list__status" id="task-list-1-status">
      Completed
    </div>
  </li>
  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint">
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="task-list-2-status">
        Registered company details
      </a>
    </div>
    <div class="govuk-task-list__status" id="task-list-2-status">
      <strong class="govuk-tag govuk-tag--light-blue">
        Not started
      </strong>
    </div>
  </li>
  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint">
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="task-list-3-hint task-list-3-status">
        Business plan
      </a>
      <div id="task-list-3-hint" class="govuk-task-list__hint">
        Ensure the plan covers objectives, strategies, sales, marketing and financial forecasts.
      </div>
    </div>
    <div class="govuk-task-list__status" id="task-list-3-status">
      <strong class="govuk-tag govuk-tag--pink">
        Review
      </strong>
    </div>
  </li>
  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint">
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="task-list-4-status">
        Documentation
      </a>
    </div>
    <div class="govuk-task-list__status" id="task-list-4-status">
      <strong class="govuk-tag govuk-tag--blue">
        In progress
      </strong>
    </div>
  </li>
  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint">
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="task-list-5-status">
        Charitable status
      </a>
    </div>
    <div class="govuk-task-list__status" id="task-list-5-status">
      <strong class="govuk-tag govuk-tag--red">
        Error
      </strong>
    </div>
  </li>
  <li class="govuk-task-list__item">
    <div class="govuk-task-list__name-and-hint">
      <div>
        Payment
      </div>
      <div id="task-list-6-hint" class="govuk-task-list__hint">
        It will cost between £15 and £75
      </div>
    </div>
    <div class="govuk-task-list__status govuk-task-list__status--cannot-start-yet" id="task-list-6-status">
      Cannot start yet
    </div>
  </li>
</ul>

Macro

{% from "govuk/components/task-list/macro.njk" import govukTaskList %}

{{ govukTaskList({
  items: [
    {
      title: {
        text: "Company Directors"
      },
      href: "#",
      status: {
        text: "Completed"
      }
    },
    {
      title: {
        text: "Registered company details"
      },
      href: "#",
      status: {
        tag: {
          text: "Not started",
          classes: "govuk-tag--light-blue"
        }
      }
    },
    {
      title: {
        text: "Business plan"
      },
      href: "#",
      hint: {
        text: "Ensure the plan covers objectives, strategies, sales, marketing and financial forecasts."
      },
      status: {
        tag: {
          text: "Review",
          classes: "govuk-tag--pink"
        }
      }
    },
    {
      title: {
        text: "Documentation"
      },
      href: "#",
      status: {
        tag: {
          text: "In progress",
          classes: "govuk-tag--blue"
        }
      }
    },
    {
      title: {
        text: "Charitable status"
      },
      href: "#",
      status: {
        tag: {
          text: "Error",
          classes: "govuk-tag--red"
        }
      }
    },
    {
      title: {
        text: "Payment"
      },
      hint: {
        text: "It will cost between £15 and £75"
      },
      status: {
        text: "Cannot start yet",
        classes: "govuk-task-list__status--cannot-start-yet"
      }
    }
  ]
}) }}

Task list example with all possible colours

Open this example in a new tab

Code

Markup

<ul class="govuk-task-list">
  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint">
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="task-list-1-status">
        Task A
      </a>
    </div>
    <div class="govuk-task-list__status" id="task-list-1-status">
      Text colour
    </div>
  </li>
  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint">
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="task-list-2-status">
        Task B
      </a>
    </div>
    <div class="govuk-task-list__status govuk-task-list__status--cannot-start-yet" id="task-list-2-status">
      Secondary text colour
    </div>
  </li>
  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint">
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="task-list-3-status">
        Task C
      </a>
    </div>
    <div class="govuk-task-list__status" id="task-list-3-status">
      <strong class="govuk-tag govuk-tag--grey">
        Grey
      </strong>
    </div>
  </li>
  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint">
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="task-list-4-status">
        Task D
      </a>
    </div>
    <div class="govuk-task-list__status" id="task-list-4-status">
      <strong class="govuk-tag govuk-tag--blue">
        Blue
      </strong>
    </div>
  </li>
  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint">
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="task-list-5-status">
        Task E
      </a>
    </div>
    <div class="govuk-task-list__status" id="task-list-5-status">
      <strong class="govuk-tag govuk-tag--light-blue">
        Light blue
      </strong>
    </div>
  </li>
  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint">
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="task-list-6-status">
        Task F
      </a>
    </div>
    <div class="govuk-task-list__status" id="task-list-6-status">
      <strong class="govuk-tag govuk-tag--turquoise">
        Turquoise
      </strong>
    </div>
  </li>
  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint">
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="task-list-7-status">
        Task G
      </a>
    </div>
    <div class="govuk-task-list__status" id="task-list-7-status">
      <strong class="govuk-tag govuk-tag--green">
        Green
      </strong>
    </div>
  </li>
  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint">
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="task-list-8-status">
        Task H
      </a>
    </div>
    <div class="govuk-task-list__status" id="task-list-8-status">
      <strong class="govuk-tag govuk-tag--purple">
        Purple
      </strong>
    </div>
  </li>
  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint">
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="task-list-9-status">
        Task I
      </a>
    </div>
    <div class="govuk-task-list__status" id="task-list-9-status">
      <strong class="govuk-tag govuk-tag--pink">
        Pink
      </strong>
    </div>
  </li>
  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint">
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="task-list-10-status">
        Task J
      </a>
    </div>
    <div class="govuk-task-list__status" id="task-list-10-status">
      <strong class="govuk-tag govuk-tag--red">
        Red
      </strong>
    </div>
  </li>
  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint">
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="task-list-11-status">
        Task K
      </a>
    </div>
    <div class="govuk-task-list__status" id="task-list-11-status">
      <strong class="govuk-tag govuk-tag--orange">
        Orange
      </strong>
    </div>
  </li>
  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint">
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="task-list-12-status">
        Task L
      </a>
    </div>
    <div class="govuk-task-list__status" id="task-list-12-status">
      <strong class="govuk-tag govuk-tag--yellow">
        Yellow
      </strong>
    </div>
  </li>
</ul>

Macro

{% from "govuk/components/task-list/macro.njk" import govukTaskList %}

{{ govukTaskList({
  items: [
    {
      title: {
        text: "Task A"
      },
      href: "#",
      status: {
        text: "Text colour"
      }
    },
    {
      title: {
        text: "Task B"
      },
      href: "#",
      status: {
        text: "Secondary text colour",
        classes: "govuk-task-list__status--cannot-start-yet"
      }
    },
    {
      title: {
        text: "Task C"
      },
      href: "#",
      status: {
        tag: {
          text: "Grey",
          classes: "govuk-tag--grey"
        }
      }
    },
    {
      title: {
        text: "Task D"
      },
      href: "#",
      status: {
        tag: {
          text: "Blue",
          classes: "govuk-tag--blue"
        }
      }
    },
    {
      title: {
        text: "Task E"
      },
      href: "#",
      status: {
        tag: {
          text: "Light blue",
          classes: "govuk-tag--light-blue"
        }
      }
    },
    {
      title: {
        text: "Task F"
      },
      href: "#",
      status: {
        tag: {
          text: "Turquoise",
          classes: "govuk-tag--turquoise"
        }
      }
    },
    {
      title: {
        text: "Task G"
      },
      href: "#",
      status: {
        tag: {
          text: "Green",
          classes: "govuk-tag--green"
        }
      }
    },
    {
      title: {
        text: "Task H"
      },
      href: "#",
      status: {
        tag: {
          text: "Purple",
          classes: "govuk-tag--purple"
        }
      }
    },
    {
      title: {
        text: "Task I"
      },
      href: "#",
      status: {
        tag: {
          text: "Pink",
          classes: "govuk-tag--pink"
        }
      }
    },
    {
      title: {
        text: "Task J"
      },
      href: "#",
      status: {
        tag: {
          text: "Red",
          classes: "govuk-tag--red"
        }
      }
    },
    {
      title: {
        text: "Task K"
      },
      href: "#",
      status: {
        tag: {
          text: "Orange",
          classes: "govuk-tag--orange"
        }
      }
    },
    {
      title: {
        text: "Task L"
      },
      href: "#",
      status: {
        tag: {
          text: "Yellow",
          classes: "govuk-tag--yellow"
        }
      }
    }
  ]
}) }}

Task list example with very long single word tags

Open this example in a new tab

Code

Markup

<ul class="govuk-task-list">
  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint">
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="task-list-1-status">
        Company Directors
      </a>
    </div>
    <div class="govuk-task-list__status" id="task-list-1-status">
      Completed
    </div>
  </li>
  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint">
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="task-list-2-status">
        Registered company details
      </a>
    </div>
    <div class="govuk-task-list__status" id="task-list-2-status">
      <strong class="govuk-tag govuk-tag--blue">
        Incomplete
      </strong>
    </div>
  </li>
  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint">
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="task-list-3-status">
        A very very very long Business plan
      </a>
    </div>
    <div class="govuk-task-list__status" id="task-list-3-status">
      <strong class="govuk-tag govuk-tag--blue">
        Thisisaverylongwaytosaythatsomethingisincomplete
      </strong>
    </div>
  </li>
</ul>

Macro

{% from "govuk/components/task-list/macro.njk" import govukTaskList %}

{{ govukTaskList({
  items: [
    {
      title: {
        text: "Company Directors"
      },
      href: "#",
      status: {
        text: "Completed"
      }
    },
    {
      title: {
        text: "Registered company details"
      },
      href: "#",
      status: {
        tag: {
          text: "Incomplete",
          classes: "govuk-tag--blue"
        }
      }
    },
    {
      title: {
        text: "A very very very long Business plan"
      },
      href: "#",
      status: {
        tag: {
          text: "Thisisaverylongwaytosaythatsomethingisincomplete",
          classes: "govuk-tag--blue"
        }
      }
    }
  ]
}) }}

Task list with empty values

Open this example in a new tab

Code

Markup

<ul class="govuk-task-list">


  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint">
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="task-list-3-status">
        Task A
      </a>
    </div>
    <div class="govuk-task-list__status" id="task-list-3-status">
      Completed
    </div>
  </li>


  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint">
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="task-list-6-status">
        Task B
      </a>
    </div>
    <div class="govuk-task-list__status" id="task-list-6-status">
      Completed
    </div>
  </li>
</ul>

Macro

{% from "govuk/components/task-list/macro.njk" import govukTaskList %}

{{ govukTaskList({
  items: [
    null,
    null,
    {
      title: {
        text: "Task A"
      },
      href: "#",
      status: {
        text: "Completed"
      }
    },
    false,
    "",
    {
      title: {
        text: "Task B"
      },
      href: "#",
      status: {
        text: "Completed"
      }
    }
  ]
}) }}