# Card

Displays a card with header, content, and footer.

- Install: `php artisan blatui:add card`
- Source: https://blatui.remix-it.com/r/card.json
- Composer: `composer require gehrisandro/tailwind-merge-laravel`

## resources/views/components/ui/card.blade.php

```blade
@props(['variant' => 'default'])

@php
    $variants = [
        // Simple padded box — the dominant use case. Put any content inside directly.
        'default' => 'bg-card text-card-foreground rounded-xl border p-6 shadow-sm',
        // Sectioned layout for card-header / card-content / card-footer. Those parts each
        // supply their own px-6, so this adds py-6 only (never px) to avoid double padding.
        'sectioned' => 'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
    ];

    $classes = $variants[$variant] ?? $variants['default'];
@endphp

<div data-slot="card" {{ $attributes->twMerge($classes) }}>
    {{ $slot }}
</div>
```

## resources/views/components/ui/card-action.blade.php

```blade
<div data-slot="card-action" {{ $attributes->twMerge('col-start-2 row-span-2 row-start-1 self-start justify-self-end') }}>{{ $slot }}</div>
```

## resources/views/components/ui/card-content.blade.php

```blade
<div data-slot="card-content" {{ $attributes->twMerge('px-6') }}>{{ $slot }}</div>
```

## resources/views/components/ui/card-description.blade.php

```blade
<div data-slot="card-description" {{ $attributes->twMerge('text-muted-foreground text-sm') }}>{{ $slot }}</div>
```

## resources/views/components/ui/card-footer.blade.php

```blade
<div data-slot="card-footer" {{ $attributes->twMerge('flex items-center px-6 [.border-t]:pt-6') }}>{{ $slot }}</div>
```

## resources/views/components/ui/card-header.blade.php

```blade
<div data-slot="card-header" {{ $attributes->twMerge('@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6') }}>
    {{ $slot }}
</div>
```

## resources/views/components/ui/card-title.blade.php

```blade
<div data-slot="card-title" {{ $attributes->twMerge('leading-none font-semibold') }}>{{ $slot }}</div>
```