Card

stable

Container with structured border and optional header

import { Card } from "@nodus/design-system"

Default Card

Standard card with label and content area.

Dark

Dark variant

Accent

Yellow variant

Loading demo…

Props

Prop	Type	Default	Description
`variant`	`"default" \| "dark" \| "yellow"`	"default"	Visual style variant
`label`	`string`	—	Optional header label

variant

Type "default" | "dark" | "yellow"Default "default"

Visual style variant

label

Type stringDefault —

Optional header label

Renders as a <div> with no implicit role. Use role="region" with aria-labelledby for landmark navigation when the card represents a major section.
The label prop renders as a visual text header, not a semantic <h*> element. Add a heading inside the card's children for correct document outline.
Accepts all HTMLAttributes<HTMLDivElement> including role, aria-label, and aria-describedby.
Color variants (dark, yellow) maintain sufficient contrast — text tokens are chosen per variant to meet WCAG AA.

MobileStacks / Scroll

Cards with horizontal interior layout (e.g. icon + content + action) stack to single column below sm breakpoint. Use flex-col sm:flex-row pattern.

Design Rationale

This component was designed to express:

Generic box container with padding and border props

Semantic section wrapper with vertical spacing

Was this helpful?