Card
Flexible container with compound sub-components.
Live Demo
default
variant="default"
This is the card body. It can contain any content.
elevated
variant="elevated"
This is the card body. It can contain any content.
ghost
variant="ghost"
This is the card body. It can contain any content.
filled
variant="filled"
This is the card body. It can contain any content.
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 | Type | Default | Description |
|---|---|---|---|
variant | "default" | "elevated" | "ghost" | "filled" | "default" | Visual style: default | elevated | ghost | filled. |
orientation | "vertical" | "horizontal" | "vertical" | Layout direction: vertical (default) or horizontal. |
hoverable | boolean | false | When true, the card lifts on hover. |
CardHeader | { children, className, ...HTMLDivAttributes } | — | Container for CardTitle and CardDescription. |
CardTitle | { children, className, ...HTMLHeadingAttributes } | — | Main heading inside the card (renders as h3). |
CardDescription | { children, className, ...HTMLParagraphAttributes } | — | Subtitle or helper text inside the card header. |
CardContent | { children, className, ...HTMLDivAttributes } | — | Main content area of the card. |
CardFooter | { children, className, ...HTMLDivAttributes } | — | Footer area, typically used for actions. |
CardImage › src | string | — | Image URL. |
CardImage › alt | string | — | Alt text for the image (required for accessibility). |
CardImage › aspectRatio | "16/9" | "4/3" | "1/1" | "3/4" | "16/9" | Aspect ratio of the image: 16/9 | 4/3 | 1/1 | 3/4. |
CardImage › position | "top" | "left" | "right" | "background" | "top" | Image placement: top | left | right | background. |
Usage
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>