Listas · Exemplo

Card rico

renderItem troca o miolo do card por um layout próprio: título, protocolo, status, signatários, progresso e prazo. O contorno do card, o clique, a seleção e o menu continuam com o List.

Acompanhamento de envelopes

O card inteiro abre o envelope. Com renderItem, o menu fica no canto superior direito; reserve espaço para ele na primeira linha. Signatários aparecem com a cor da vez de cada um.

Contrato de prestação de serviçosDOC-2026-001184
Em assinatura
2 de 3 assinaram
67%
Prazo 24/10/2026Enviado por Marina Couto
Termo de adesão · Plano EmpresarialDOC-2026-001185
Enviado
0 de 2 assinaram
0%
Prazo 30/10/2026Enviado por Rafael Antunes
Procuração para representaçãoDOC-2026-001186
Concluído
2 de 2 assinaram
100%
Prazo 12/10/2026Enviado por Otávio Reis
Acordo de confidencialidadeDOC-2026-001188
Expirado
1 de 2 assinaram
50%
Prazo 05/10/2026Enviado por Caio Moreira
Distrato · Fornecedor ACMEDOC-2026-001189
Recusado
1 de 2 assinaram
50%
Prazo 18/10/2026Enviado por Marina Couto
Contrato de locação · Sala 402DOC-2026-001190
Em assinatura
1 de 3 assinaram
33%
Prazo 28/10/2026Enviado por Helena Duarte
Política de uso de dadosDOC-2026-001191
Concluído
4 de 4 assinaram
100%
Prazo 02/10/2026Enviado por Caio Moreira

Uso

<List
  aria-label="Acompanhamento de envelopes"
  items={items}
  onItemClick={openEnvelope}
  renderItem={(item, state) => <EnvelopeCard envelope={item.data} selected={state.selected} />}
/>