TaskList

Uma lista de coisas a fazer ou acompanhar, cada uma com o seu estado, levando ao item.

Nesta página

Playground

Revisar o contrato do aluguelEsperando
Organizar as fotosFazendo
Regar as plantasConcluída

Detalhe

Fundo

HTML

<ul class="feitio-task-list"><li><span class="name"><a class="feitio-link" href="#playground">Revisar o contrato do aluguel</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>Esperando</span></li><li><span class="name"><a class="feitio-link" href="#playground">Organizar as fotos</a></span><span class="feitio-tag"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-info"></use></svg>Fazendo</span></li><li><span class="name"><a class="feitio-link" href="#playground">Regar as plantas</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>Concluída</span></li></ul>

Quando usar

Para tarefas, agendamentos ou partes de um trabalho, quando o que importa é o nome e o estado de cada um.

Quando não usar

Várias características para comparar: Table.
Uma lista sem estado (só links): uma lista comum.

Exemplos

Revisar o contrato do aluguelPrazo 10 novEsperando
Organizar as fotosEm andamentoFazendo
Regar as plantasConcluída em 7 novConcluída

Tarefas

O nome leva ao item; o detalhe diz quem e quando; o estado é uma Tag, à direita.

Mostrar código

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>

Anatomia

Revisar o contratoPrazo 10 novEsperando

Nome: um link que leva ao item.
Detalhe, opcional: quem, quando.
Estado: uma Tag, à direita.

Bons e maus padrões

Faça assim

Trocar as fotosAtrasada

O nome leva ao item; o estado se lê na hora.

Não faça

Trocar as fotosVerEditarConcluir

Três links por linha e nenhum estado: a lista vira um painel de botões.

Como escrever

Nome: a tarefa como ação ("Revisar o contrato"), igual em todo lugar.
Estado: as mesmas palavras de sempre ("Aberta", "Fazendo", "Esperando", "Concluída").

É uma lista (<ul>): o leitor de tela diz quantos itens há.
O estado é palavra, não só cor.

Atributos

Atributo	Valores	Para quê
`class="feitio-task-list"`	no `<ul>`	Itens com linhas finas, nome à esquerda e estado à direita.
`class="name"`	no nome e detalhe	Nome em negrito e detalhe miúdo.