Tasks

Render task lists with semantic state: done, wip, blocked, todo.

Overview

Use data-task on list items to convey task state without CSS classes.

<ul>
  <li data-task="done">Completed item</li>
  <li data-task="wip">Work in progress</li>
  <li data-task="blocked">Blocked item</li>
  <li data-task="todo">Not started</li>
</ul>

States

Value	Meaning
`done`	Completed — green check
`wip`	In progress — amber
`blocked`	Blocked — red
`todo`	Not started — muted