# Card (/layout/card)





<ComponentPreview name="card-preskok-demo" description="A card component with header, content, and actions." />

## Installation [#installation]

```bash
npx shadcn@latest add @preskok/card
```

## Usage [#usage]

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

export function CardDemo() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card description goes here</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Card content goes here.</p>
      </CardContent>
      <CardFooter>
        <Button>Action</Button>
      </CardFooter>
    </Card>
  )
}
```

## Components [#components]

### Card [#card]

The root card container.

| Prop        | Type     | Default | Description            |
| ----------- | -------- | ------- | ---------------------- |
| `className` | `string` | -       | Additional CSS classes |

### CardHeader [#cardheader]

Card header section with optional title and description.

| Prop          | Type     | Default | Description            |
| ------------- | -------- | ------- | ---------------------- |
| `title`       | `string` | -       | Header title           |
| `description` | `string` | -       | Header description     |
| `className`   | `string` | -       | Additional CSS classes |

### CardTitle [#cardtitle]

Standalone card title component.

| Prop        | Type     | Default | Description            |
| ----------- | -------- | ------- | ---------------------- |
| `className` | `string` | -       | Additional CSS classes |

### CardDescription [#carddescription]

Standalone card description component.

| Prop        | Type     | Default | Description            |
| ----------- | -------- | ------- | ---------------------- |
| `className` | `string` | -       | Additional CSS classes |

### CardAction [#cardaction]

Card action area, typically placed in the header.

| Prop        | Type     | Default | Description            |
| ----------- | -------- | ------- | ---------------------- |
| `className` | `string` | -       | Additional CSS classes |

### CardContent [#cardcontent]

Main content area of the card.

| Prop        | Type     | Default | Description            |
| ----------- | -------- | ------- | ---------------------- |
| `className` | `string` | -       | Additional CSS classes |

### CardFooter [#cardfooter]

Card footer section for actions or additional content.

| Prop        | Type     | Default | Description            |
| ----------- | -------- | ------- | ---------------------- |
| `className` | `string` | -       | Additional CSS classes |

## Examples [#examples]

<ComponentPreview name="card-preskok-demo" description="Cards with headers, descriptions, header actions, menus, content metrics, badges, footers, and responsive grid layout." />

## Features [#features]

* **Flexible layout** - Compose cards with different sections
* **Optional elements** - Use only the components you need
* **Consistent spacing** - Built-in spacing between sections
* **Responsive design** - Adapts to different screen sizes
* **Customizable styling** - Full control over appearance
* **Semantic structure** - Proper HTML structure for accessibility