Imagine ArtA container that groups related content and actions with consistent styling and elevation.
Layout & Structureimport { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui"| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "elevated" | "outline" | "default" | Visual style and elevation. |
| padding | "none" | "sm" | "md" | "lg" | "md" | Internal padding amount. |
This is the default card variant with a subtle background.
Cards are surface-level containers that group related content and actions. They help organise information into digestible sections.
Uses a shadow to lift the card above the surface.
The elevated variant adds a subtle shadow, making the card appear raised from the page. Great for featured or highlighted content.
A transparent card with a visible border and large padding.
The outline variant uses a transparent background with a prominent border. Combined with large padding, it creates a spacious layout for content.