govuk-frontend/dist/govuk/components/task-list/template-example-with-all-possible-colours.html

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.

<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>