Valmor

Card Grid

Grid responsivo para exibir múltiplos cards.

Variantes:
gap-sm gap-md gap-lg

Card Grid

Card 1
Card 2
Card 3
<!-- Card Grid Component -->
<div class="card-grid">
  Card Grid content here
</div>
---
import Card Grid from '@/components/ui/data-display/Card Grid/Card Grid.astro';
---

<Card Grid />

Variantes

gap-sm

gap-sm

Espaçamento pequeno entre cards

gap-md

gap-md

Espaçamento médio (padrão)

gap-lg

gap-lg

Espaçamento grande

Uso

Quando usar

  • Use Card Grid para grid responsivo para exibir múltiplos cards.
  • Ideal para interfaces que precisam de exibição de dados

Boas práticas

  • Mantenha consistência com outros componentes da mesma categoria
  • Considere acessibilidade e estados de interação
  • Teste em diferentes tamanhos de tela