Logo

Listagem de Cards

Pré-requisitos

  • Entender card, card-compact e card-feature para escolher a variante correta.
  • Ter componentes reutilizáveis (ex.: MetricCard, PlanCard) definidos previamente.
  • Conhecer grid e list para organizar coleções de cards em diferentes layouts.

Passo a passo

  1. Escolha o layout principal (grid ou stack) considerando o espaço disponível.
  2. Defina um componente de card que receba os dados necessários via %props.
  3. Alimente o componente por meio de list $Componente: ou múltiplas instâncias $Componente:.
  4. Adicione ações de apoio em row-end ou fab para complementar a listagem.

Coleção de cards com dados dinâmicos

Proto-Typed
Loading DSL editor...

Por quê: demonstra como replicar cards com dados variados mantendo CTA consistentes.

Depuração rápida

  • Cards desalinhados → confirme que todos estão dentro do mesmo grid-* com número correto de colunas.
  • Texto truncado → use card-compact apenas quando o conteúdo for realmente curto.
  • Ações duplicadas → mova CTAs comuns para row-end compartilhado ou para um fab.
  • Componentes sem props suficientes → revise a ordem de valores nas linhas - e nos %props.
  • Cards sem espaçamento → envolva a listagem em container ou stack-loose para garantir respiro.

Próximos passos

  • Consulte Card para revisar variantes e uso de rodapés.
  • Revise Grid ao ajustar colunas responsivas.
  • Estude Component List para sincronizar dados tabulares com cards.
  • Explore Dashboard como referência de layout completo com múltiplas listagens.