Display
Card
Neutral container in four surface treatments; becomes a real link or button when given `href` or `onclick`.
Card CardHeader CardFooter
import { Card, CardHeader, CardFooter } from '@anomalia/ui'; Notes
- An interactive card renders as
<a>/<button>and gains ripple, press and elevation — do not nest another button inside it. variant="glass"only reads correctly over content; on a flat background it looks like a mistake.
Examples
Variants
Four surface treatments. `glass` only reads correctly over content — on a flat background it looks like a mistake.
Outlined
The default: one hairline, no shadow.
Use for most content on a page.
Elevated
Layered soft shadow, no border.
Use when a surface must float.
Filled
Raised background, no border.
Use for grouped, secondary blocks.
With actions
Live
Header actions sit on the trailing edge.
Interactive
Give a card `href` or `onclick` and it becomes a real link or button: ripple, press squish, elevation on hover, keyboard support.
API
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'outlined' | 'elevated' | 'filled' | 'glass' | 'outlined' | Surface treatment. |
padding | 'none' | 'sm' | 'md' | 'lg' | 'md' | Inner spacing. |
href / onclick | string / function | — | Promotes the card to an interactive surface. |
selected | boolean | false | Accent ring for selectable sets. |
Every component also forwards the native attributes of its root element, plus class, so anything not listed here still works.