z-uiDesign system
Componentes · z-ui

CardList

Lista de itens num único cartão, com ícone, texto e divisórias. É uma lista semântica: o leitor de tela anuncia a quantidade de itens.

O que você vai precisar

Só ícone e texto, a forma mais simples.

  • Contrato em PDF de até 10 MB
  • E-mail de cada signatário
  • CPF de quem assina como parte

Resumo do envelope

Com descrição, conteúdo à direita e tom por item.

  • contrato-locacao-sala-12.pdf4 páginas · 1,8 MBAnexado
  • 2 de 3 assinaturasFalta Otávio LinsEm assinatura
  • Prazo até 31/10/2026Lembrete automático a cada 3 dias
  • Hash 9f2c41abe07d3c58Integridade conferida às 14:08
  • Beatriz Sá recusouMotivo: valor da multa divergente

Props

PropTipoPadrãoDescrição
itemsCardListItemData[]—{ id?, icon?, text, description?, trailing?, tone? } por item.
items[].tone"primary" | "success" | "warning" | "caution" | "danger" | "info""primary"Cor da caixa do ícone.
items[].trailingReactNode—Conteúdo à direita, como status ou ação.
classNamestring—Classe da lista (ul).