# Card

> Surface container in 3 variants and 3 sizes. Near black with a border that lights up on hover. The header wraps instead of clipping.

Section: Primitives. Docs: https://entrepta.vercel.app/docs/components/card

## Install

```bash
npx @entrepta/cli@latest add card
```

Files: `primitives/card.tsx`, `lib/icon.tsx`.
npm packages: `@phosphor-icons/react`, `class-variance-authority`.
Comes with: `icon-lib`.

## Usage

```tsx
import {
  Card, CardHeader, CardLabel, CardMeta, CardTitle,
  CardDescription, CardFooter, CardNote,
} from "@/components/entrepta/card"

<Card>
  <CardHeader>
    <CardLabel>latest post</CardLabel>
    <CardMeta>apr 12 · 1 min</CardMeta>
  </CardHeader>
  <CardTitle>
    Plain markdown beats <em>Notion</em>.
  </CardTitle>
  <CardDescription>Two years of notes, back in plain text.</CardDescription>
  <CardFooter>
    <span>read →</span>
    <CardNote>draft</CardNote>
  </CardFooter>
</Card>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "featured" \| "data"` | "default" | Background and border style |
| `size` | `"sm" \| "md" \| "xl"` | "md" | Padding, gap and radius |
| `as` | `"span" \| "h2" \| "h3"` | "span" | Render CardLabel as a heading (CardLabel only) |
| `icon` | `Icon \| ReactElement` | - | A Phosphor icon, or an icon element, in front of the label (CardLabel only) |