core

Card

Example

Monthly Summary

Your spending overview for June 2025.

Total expenses: $3,240.00

Import

import { Card } from '@connor-adams/designsystem'

Usage

One-line: The default raised surface — white card, hairline border, light shadow, rounded-lg. Everything sits in one.

<Card>
  <CardHeader>
    <CardTitle>Net worth</CardTitle>
    <CardDescription>Across all accounts</CardDescription>
  </CardHeader>
  <CardContent>$128,400</CardContent>
</Card>

Sub-parts: CardHeader (grid, gap) · CardTitle (semibold, tight tracking) · CardDescription (muted body) · CardContent. Keep elevation light — a single soft --shadow, never stacked shadows.

Props

No documented props.