# Card

A React card for Next.js and Tailwind CSS: a surface for grouped content with header, action, content and footer parts, a small size and a link style.

Source: https://ui.fewtone.com/components/card

## Installation

```bash
npx shadcn@latest add https://ui.fewtone.com/r/card.json
```

## Usage

```tsx
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Button } from "@/components/ui/button"

export function CreateProject() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Create project</CardTitle>
        <CardDescription>Deploy a new project in a few clicks.</CardDescription>
      </CardHeader>
      <CardContent>{/* fields */}</CardContent>
      <CardFooter>
        <Button>Deploy</Button>
      </CardFooter>
    </Card>
  )
}
```

## API reference

### Card

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | `"sm" \| "md"` | `"md"` | Padding and gaps: 24px, or 16px for dense grids. |
| `asChild` | `boolean` | `false` | Render the single child (for example a link) with the card styles. As a link, the surface lifts a step on hover; everything inside is read as the link's name, so keep it short. |

### CardHeader

| Prop | Type | Default | Description |
| --- | --- | --- | --- |

### CardTitle

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `asChild` | `boolean` | `false` | Render a heading at the level your page needs instead of a div, for example <h3>. |

### CardDescription

| Prop | Type | Default | Description |
| --- | --- | --- | --- |

### CardAction

| Prop | Type | Default | Description |
| --- | --- | --- | --- |

### CardContent

| Prop | Type | Default | Description |
| --- | --- | --- | --- |

### CardFooter

| Prop | Type | Default | Description |
| --- | --- | --- | --- |

**When to use it:** Use Card to group related content and actions on a surface: forms, settings, stats, previews. Render it asChild with a link when the whole card goes somewhere. Use Separator for a line between sections without a surface.
**Built on:** Radix Slot.
**npm packages (installed by the CLI):** class-variance-authority@^0.7.1, radix-ui@^1.7.0.

## Examples

### Overview

A card with every part, a small card with an action beside its title, and a whole card as a link. Hover the link: its surface lifts a step, and nothing moves.

```tsx
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { ArrowUpRightIcon } from "lucide-react";
import { useId } from "react";

/*
 * The range at a glance, each named underneath: a form card with every part, a small card with an action, and a
 * whole card as a link (hover it: the surface lifts a step).
 */
export default function CardOverview() {
  const id = useId();

  return (
    <ul className="grid w-full max-w-3xl items-start gap-x-6 gap-y-8 md:grid-cols-2">
      <li className="flex flex-col items-center gap-2 md:row-span-2">
        <Card className="w-full">
          <CardHeader>
            <CardTitle asChild>
              <h3>Create project</h3>
            </CardTitle>
            <CardDescription>Deploy a new project in a few clicks.</CardDescription>
          </CardHeader>
          <CardContent className="grid gap-4">
            <div className="grid gap-2">
              <label htmlFor={`${id}-name`} className="text-sm font-medium">
                Name
              </label>
              <Input id={`${id}-name`} placeholder="My project" />
            </div>
            <div className="grid gap-2">
              <label htmlFor={`${id}-repo`} className="text-sm font-medium">
                Repository
              </label>
              <Input id={`${id}-repo`} placeholder="github.com/you/project" />
            </div>
          </CardContent>
          <CardFooter className="justify-end">
            <Button variant="outline">Cancel</Button>
            <Button>Deploy</Button>
          </CardFooter>
        </Card>
        <span className="text-xs text-muted-foreground">Default</span>
      </li>

      <li className="flex flex-col items-center gap-2">
        <Card size="sm" className="w-full">
          <CardHeader>
            <CardTitle asChild>
              <h3>Team plan</h3>
            </CardTitle>
            <CardDescription>8 of 10 seats used</CardDescription>
            <CardAction>
              <Badge variant="secondary">Active</Badge>
            </CardAction>
          </CardHeader>
          <CardFooter>
            <Button variant="outline" size="sm">
              Manage seats
            </Button>
          </CardFooter>
        </Card>
        <span className="text-xs text-muted-foreground">Small, with an action</span>
      </li>

      <li className="flex flex-col items-center gap-2">
        <Card asChild size="sm" className="w-full">
          <a href="https://github.com/FewTone/ui" target="_blank" rel="noreferrer">
            <CardHeader>
              <CardTitle asChild>
                <h3>Source on GitHub</h3>
              </CardTitle>
              <CardDescription>Browse the code and open issues.</CardDescription>
              <CardAction>
                <ArrowUpRightIcon aria-hidden className="size-(--size-icon-md) text-muted-foreground" />
              </CardAction>
            </CardHeader>
          </a>
        </Card>
        <span className="text-xs text-muted-foreground">Link</span>
      </li>
    </ul>
  );
}
```

## Related

- [Button](https://ui.fewtone.com/components/button.md): An accessible React button for Next.js and Tailwind CSS with six variants, three sizes, icons and a soft tint on hover and press, built on a native button.
- [Badge](https://ui.fewtone.com/components/badge.md): An accessible React badge for Next.js and Tailwind CSS: small status labels in five variants, including one with a light travelling round its edge.