Playground
Card
ui
container
Structured content container with header, content, footer slots
Pre-composed card pattern with consistent spacing and multiple visual variants
import { Card } from "@everydayos/ui";Usage
Default, filled, elevated, dark, and glass card variants
Default
Bordered, clean background
Filled
Muted background, no border
Elevated
Warm background with shadow
Dark
Ink background for contrast
Glass
Frosted glass — use on images or dark backgrounds
22°C
57%
API
| Prop | Type | Default |
|---|---|---|
className | unknown | — |
variant | unknown | "default" |
shadow | unknown | "none" |
interactive | unknown | false |
Examples
Product Card
Card with image header, badge status, and action buttons
Air^ Indoor Unit
In stock
Wall-mounted climate unit with integrated purification.
System Status
Online
Living room — last updated 2m ago
Temperature
22°C
Humidity
57%
Energy
1.2 kWh
Composition
Pairs well with
Stack
Heading
Text
Button
Badge
When to avoid
- Need simple container without structure — use Surface instead
- Need custom layout — use Surface with manual padding