Intro
As Listas são estruturas fundamentais para organizar informações relacionadas em sequência, agrupamento ou prioridade.
Elas melhoram:
- Escaneabilidade
- Organização lógica
- Compreensão rápida
- Hierarquia de conteúdo
No Design System, listas devem seguir padrões claros de estrutura, semântica e espaçamento.
Características Visuais
- Numeração automática
- Alinhamento consistente
- Espaçamento vertical claro
Espaçamento e Ritmo Vertical
Listas devem manter:
- Espaçamento entre itens
- Separação clara do bloco anterior
- Coerência com títulos e parágrafos
Evitar:
- Itens colados
- Excesso de espaçamento
Listas com Ícones
Em alguns contextos, o marcador pode ser substituído por:
- Ícones
- Checkmarks
- Indicadores visuais
- Status
Uso recomendado quando:
- A lista representa estados
- A lista representa benefícios
- A lista possui categorização visual
Listas em Componentes
Listas podem aparecer dentro de:
- Cards
- Accordions
- Modais
- Tabelas (estrutura alternativa)
- Páginas institucionais
Em componentes compactos, a lista pode usar:
- Espaçamento reduzido
- Tipografia menor
- Marcadores sutis
Boas Práticas
✅ Faça
- Use listas para conteúdo relacionado
- Escolha tipo adequado (ordenada vs não ordenada)
- Mantenha itens curtos
- Use paralelismo textual
- Garanta alinhamento consistente
❌ Não Faça
- Não use lista para apenas um item
- Não misture estilos de marcador
- Não escreva parágrafos longos dentro de item
- Não quebre hierarquia sem necessidade
- Não usar
<div>para simular lista
Acessibilidade
- Usar
<ul>,<ol>,<li> - Não substituir por elementos genéricos
- Garantir contraste adequado
- Manter estrutura correta para leitores de tela
Listas bem estruturadas melhoram significativamente navegação assistiva.
Casos Especiais
Lista Horizontal
- Uso em navegação
- Breadcrumb
- Segment Button
Lista de Ações
- Menu dropdown
- Lista contextual
Lista Densa
- Ambientes administrativos
- Conteúdo técnico
Resumo
As listas são essenciais para:
- Organização clara
- Leitura rápida
- Estrutura lógica
- Redução de carga cognitiva
Quando bem utilizadas, aumentam a eficiência de leitura e fortalecem a hierarquia da interface.