COMPONENT: Card (Base) Component

[nayan458]

Task: Card (Base) Component

Type: Component
Milestone: M0.5 — Shared Component Library
Estimate: S

Component Type

• Design system (no API calls, pure props)

Props Interface

interface CardProps {
  children:   ReactNode;
  variant?:   'default' | 'danger' | 'warning' | 'success' | 'info';
  padding?:   'none' | 'sm' | 'md' | 'lg';
  className?: string;
  testId?:    string;
}

Variants / States

Variant / State	Description
default	Neutral border, --bg-primary background
danger	--bg-danger background, --border-danger border
warning	--bg-warning background, --border-warning border
success	--bg-success background, --border-success border
info	--bg-info background, --border-info border
padding="none"	No padding — caller controls spacing completely
padding="sm"	Compact — dense lists, mobile
padding="md"	Default — desktop queue, panels
padding="lg"	Spacious — analytics panels, standalone sections

Acceptance Criteria

• All 5 variants render with correct theme-aware colors
• Padding variants apply only to the content area
• Width is always 100% of parent — card never sets its own width
• Height grows with content — no fixed height ever
• Forwards className for layout overrides (margin, grid placement) by parent
• Zero hardcoded hex values — all colors from CSS variables
• Storybook stories: all variants, all padding scales, nested cards
• No TypeScript errors

Notes

• This is the base — it is a styled box and nothing more. No slots, no click behaviour, no expand logic. Those belong in ListCard.
• MetricCard, AnalyticsPanel, ContentPreviewBox compose this directly
• ListCard extends this — validate the className forwarding works before ListCard ticket starts

[nayan458]

complete 50#