Card

Preview HTML Astro

Card Padrão

Um card simples com título e conteúdo padrão.

Este card possui a propriedade "hover" e atua como um link interativo (a tag).

Card com Imagem

Card renderizando uma figura (figure) na parte superior através da prop "image".

Card sem Borda

Design limpo sem as bordas externas. Ideal para painéis de dashboard (bordered=false).

Card Compacto

Os paddings e o tamanho da fonte são reduzidos neste card para interfaces mais densas (compact).

Card com Ações

Card com o slot "actions" preenchido com botões no rodapé.

<!-- Card Component -->
<div class="card">
  Card content here
</div>

---
import Card from '@/components/ui/data-display/Card/Card.astro';
---

<Card />

Uso