Card

Usage

Q3 Revenue Review

Jamie captured 12 action items and 3 key decisions from this meeting with the Finance Team.

import { Card, CardContent, CardHeader, CardTitle } from '@jamie/ui/card'
 
export function CardDemo() {
  return (
    <Card className="max-w-sm">
      <CardHeader>
        <CardTitle>Q3 Revenue Review</CardTitle>
      </CardHeader>
      <CardContent>
        <p className="text-sm text-muted-foreground">
          Jamie captured 12 action items and 3 key decisions from this meeting with the Finance
          Team.
        </p>
      </CardContent>
    </Card>
  )
}

With Content

Cards work well for displaying metrics and summary data side by side.

Meetings This Week

+8 from last week

Action Items

3 due today

import { Card, CardContent, CardHeader, CardTitle } from '@jamie/ui/card'
 
export function CardWithContentDemo() {
  return (
    <div className="flex flex-wrap gap-4">
      <Card className="w-48">
        <CardHeader>
          <CardTitle className="text-sm font-medium">Meetings This Week</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-2xl font-bold">24</p>
          <p className="text-xs text-muted-foreground">+8 from last week</p>
        </CardContent>
      </Card>
      <Card className="w-48">
        <CardHeader>
          <CardTitle className="text-sm font-medium">Action Items</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-2xl font-bold">7</p>
          <p className="text-xs text-muted-foreground">3 due today</p>
        </CardContent>
      </Card>
    </div>
  )
}