THEME
MOTION
HAPTIC
SOUND
CARD
Generic bordered panel — same chrome as TerminalFrame without the inset title. Use for readouts, info blocks, or grouped form fields where the content speaks for itself.
Live demo
Import
import { Card } from '@cathode-ui/react';Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
children | ReactNode | — | yes | |
accent | 'neutral'|'info'|'success'|'warning'|'danger' | neutral | — | |
surface | 'flat'|'elevated' | flat | — | `elevated` uses panel bg; `flat` is transparent. |
padding | 'none'|'sm'|'md'|'lg' | md | — | |
onClick | () => void | — | — | When set, the Card renders as a focusable button. |
Examples
info
<Card accent="info" surface="elevated"><DotLeader label="LAT" value="42 MS" /></Card>clickable
<Card onClick={open} aria-label="Show details">…</Card>Accessibility
Role: region (button when onClick)
- aria-label if clickable and children are icon-only
Feedback
| Haptic | none |
| Sound | none |