# Card

> Surface container composed of header, content, and footer.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/card.json`

## Install

```tsx
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@aspyn-io/kit";
```

### Composition

Cards are compound components: compose exactly the sections you need.

```tsx
<Card>
  <CardHeader>
    <CardTitle>Team plan</CardTitle>
    <CardDescription>$29/user/month, billed annually.</CardDescription>
  </CardHeader>
  <CardContent>Unlimited projects, priority support, SSO.</CardContent>
  <CardFooter>
    <Button className="w-full">Upgrade</Button>
  </CardFooter>
</Card>
```

### Stat card

The dashboard-metric pattern used across Aspyn products.

```tsx
<Card>
  <CardHeader className="pb-2">
    <CardDescription>Active subscriptions</CardDescription>
    <CardTitle className="text-2xl">632.9K</CardTitle>
  </CardHeader>
  <CardContent>
    <p className="text-xs text-muted-foreground">+19% from last month</p>
  </CardContent>
</Card>
```

### With separated actions

```tsx
<Card>
  <CardHeader>
    <div className="flex items-center justify-between">
      <CardTitle>API keys</CardTitle>
      <Badge variant="secondary">3 active</Badge>
    </div>
  </CardHeader>
  <Separator />
  <CardContent className="pt-6">…</CardContent>
</Card>
```

### Login form card

A self-contained auth card: header copy, labelled fields, and a full-width submit in the footer.

```tsx
<Card className="w-full max-w-sm">
  <CardHeader>
    <CardTitle>Sign in</CardTitle>
    <CardDescription>Enter your credentials to continue.</CardDescription>
  </CardHeader>
  <CardContent>
    <form className="grid gap-4">
      <div className="grid gap-2">
        <Label htmlFor="email">Email</Label>
        <Input id="email" type="email" placeholder="you@aspyn.io" />
      </div>
      <div className="grid gap-2">
        <Label htmlFor="password">Password</Label>
        <Input id="password" type="password" />
      </div>
    </form>
  </CardContent>
  <CardFooter>
    <Button type="submit" className="w-full">Sign in</Button>
  </CardFooter>
</Card>
```

### Media card

Lead with an AspectRatio image (pt-0 + overflow-hidden lets it sit flush), then title and CTA below.

```tsx
<Card className="w-full max-w-sm overflow-hidden pt-0">
  <AspectRatio ratio={16 / 9}>
    <img
      src={photo.url}
      alt={photo.alt}
      className="h-full w-full object-cover"
    />
  </AspectRatio>
  <CardHeader>
    <CardTitle>Coastal retreat</CardTitle>
    <CardDescription>Big Sur, California</CardDescription>
  </CardHeader>
  <CardFooter>
    <Button className="w-full">View listing</Button>
  </CardFooter>
</Card>
```