Card
Contêiner flexível com sub-componentes compostos.
Demonstração
default
variant="default"
Este é o corpo do card. Pode conter qualquer conteúdo.
elevated
variant="elevated"
Este é o corpo do card. Pode conter qualquer conteúdo.
ghost
variant="ghost"
Este é o corpo do card. Pode conter qualquer conteúdo.
filled
variant="filled"
Este é o corpo do card. Pode conter qualquer conteúdo.
Hoverable
Hoverable Card
Hover to see the lift effect.
Pass hoverable to enable the hover animation.
Media Card
Media Card
Image at the top with content below.
Use CardImage before CardHeader.
Horizontal Layout
Horizontal Card
Image on the left, content on the right.
Pass orientation="horizontal" and position="left".
Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
variant | "default" | "elevated" | "ghost" | "filled" | "default" | Estilo visual: default | elevated | ghost | filled. |
orientation | "vertical" | "horizontal" | "vertical" | Direção do layout: vertical (padrão) ou horizontal. |
hoverable | boolean | false | Quando verdadeiro, o card sobe ao passar o mouse. |
CardHeader | { children, className, ...HTMLDivAttributes } | — | Container para CardTitle e CardDescription. |
CardTitle | { children, className, ...HTMLHeadingAttributes } | — | Título principal dentro do card (renderiza como h3). |
CardDescription | { children, className, ...HTMLParagraphAttributes } | — | Subtítulo ou texto auxiliar dentro do cabeçalho do card. |
CardContent | { children, className, ...HTMLDivAttributes } | — | Área de conteúdo principal do card. |
CardFooter | { children, className, ...HTMLDivAttributes } | — | Área do rodapé, normalmente usada para ações. |
CardImage › src | string | — | URL da imagem. |
CardImage › alt | string | — | Texto alternativo da imagem (obrigatório para acessibilidade). |
CardImage › aspectRatio | "16/9" | "4/3" | "1/1" | "3/4" | "16/9" | Proporção da imagem: 16/9 | 4/3 | 1/1 | 3/4. |
CardImage › position | "top" | "left" | "right" | "background" | "top" | Posição da imagem: top | left | right | background. |
Uso
import {
Card, CardImage,
CardHeader, CardTitle, CardDescription,
CardContent, CardFooter,
} from '@ghiberti85/ui'
{/* Default card */}
<Card>
<CardHeader>
<CardTitle>Title</CardTitle>
<CardDescription>Description.</CardDescription>
</CardHeader>
<CardContent>Content</CardContent>
<CardFooter>
<Button variant="primary">Action</Button>
</CardFooter>
</Card>
{/* Media card */}
<Card>
<CardImage src="/cover.jpg" alt="Cover" aspectRatio="16/9" />
<CardHeader>
<CardTitle>Media Card</CardTitle>
</CardHeader>
<CardContent>Content below image.</CardContent>
</Card>
{/* Horizontal card */}
<Card orientation="horizontal">
<CardImage src="/thumb.jpg" alt="Thumb" position="left" />
<CardContent>Horizontal layout content.</CardContent>
</Card>