Card
Concise NERV frame for structural panels and footage-style plaques. variant
controls the palette, while rounded controls whether the frame stays rigid or
leans into the softer camera-overlay treatment.
1import { Card } from "@mdrbx/nerv-ui";
Default Variant
Alert Variant
HUD Variant
Translucent version for overlays, while staying angular unless rounded is
explicitly enabled.
Video Variant
video is only a palette. It gives the orange footage-style treatment without
changing the geometry of the card.
Rounded Option
rounded is a pure shape option. It can be enabled on any palette, including
the default structural one.
Without Title
Minimal card — no header, just payload and a single footer line.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | ReactNode | — | Main header title |
| eyebrow | ReactNode | — | Small line above the title |
| subtitle | ReactNode | — | Supporting line below the title |
| children | ReactNode | — | Main content |
| footer | ReactNode | — | Footer content |
| variant | "default" | "alert" | "hud" | "video" | "default" | Palette for the frame and typography |
| rounded | boolean | false | Whether the outer frame uses rounded corners |
| cutSize | number | 20 | Legacy compatibility prop retained for older usages |
| className | string | "" | Additional CSS classes |
variant="video" only changes the palette. rounded only changes the outer
shape. They can be used independently or together.
Keep most structural shells angular. Turn on rounded when the card should
feel attached to footage, tracking, or a subject lockup.