TaskList

A list of things to do or follow, each with its status, leading to the item.

On this page

Playground

Review the leaseWaiting
Organize the photosDoing
Water the plantsDone

Detail

Background

HTML

<ul class="feitio-task-list"><li><span class="name"><a class="feitio-link" href="#playground">Review the lease</a></span><span class="feitio-tag" data-status="warn"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-warn"></use></svg>Waiting</span></li><li><span class="name"><a class="feitio-link" href="#playground">Organize the photos</a></span><span class="feitio-tag"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-info"></use></svg>Doing</span></li><li><span class="name"><a class="feitio-link" href="#playground">Water the plants</a></span><span class="feitio-tag" data-status="ok"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-check"></use></svg>Done</span></li></ul>

When to use

For tasks, schedules or parts of a job, when what matters is each one’s name and status.

When not to use

Several characteristics to compare: Table.
A list with no status (only links): a plain list.

Examples

Review the leaseDue Nov 10Waiting
Organize the photosIn progressDoing
Water the plantsDone on Nov 7Done

Tasks

The name leads to the item; the detail says who and when; the status is a Tag, on the right.

Show code

HTML

<ul class="feitio-task-list">
  <li>
    <span class="name"><a class="feitio-link" href="/tarefas/1">Revisar o contrato</a><small>Prazo 10 nov</small></span>
    <span class="feitio-tag" data-status="warn">…Esperando</span>
  </li>
</ul>

Anatomy

Review the contractDue Nov 10Waiting

Name: a link to the item.
Detail, optional: who, when.
Status: a Tag, on the right.

Do and don’t

Replace the photosLate

The name leads to the item; the status reads at once.

Don’t

Replace the photosViewEditComplete

Three links per row and no status: the list becomes a button panel.

Writing

Name: the task as an action ("Review the contract"), the same everywhere.
Status: the usual words ("Open", "Doing", "Waiting", "Done").

It is a list (<ul>): screen readers say how many items there are.
The status is a word, not just a color.

Attributes

Attribute	Values	What for
`class="feitio-task-list"`	on the `<ul>`	Items with hairlines, name on the left and status on the right.
`class="name"`	on name and detail	Name in bold and small detail.