# Card

A composable card component suite for displaying grouped content in a bordered container with optional header, footer, image, and action slots.

---

## Components

| Component | Description |
|---|---|
| `Card` | Root container with border, shadow, and rounded corners |
| `CardHeader` | Top section — contains title, description, and optional action |
| `CardTitle` | `<h3>` heading styled for cards |
| `CardDescription` | Muted paragraph below the title |
| `CardAction` | Trailing action element (button/link) aligned to the header's right edge |
| `CardContent` | Main body area |
| `CardFooter` | Bottom area for buttons or metadata |
| `CardImage` | Full-width image with optional wrapper styling |

---

## Basic Card

```razor
<Card>
    <CardHeader>
        <CardTitle>Notifications</CardTitle>
        <CardDescription>You have 3 unread messages.</CardDescription>
    </CardHeader>
    <CardContent>
        <p>Here is the main content of the card.</p>
    </CardContent>
    <CardFooter>
        <Button>View All</Button>
    </CardFooter>
</Card>
```

---

## Card with Action

The `CardAction` renders at the trailing edge of the header using CSS grid:

```razor
<Card>
    <CardHeader>
        <CardTitle>Team Members</CardTitle>
        <CardDescription>Manage your team.</CardDescription>
        <CardAction>
            <Button Variant="@ButtonVariant.Outline" Size="@ButtonSize.Sm">
                Add Member
            </Button>
        </CardAction>
    </CardHeader>
    <CardContent>
        <!-- member list -->
    </CardContent>
</Card>
```

---

## Card with Image

```razor
<Card Class="max-w-sm">
    <CardImage Src="/images/hero.jpg" Alt="Hero image" WrapperClass="h-48" />
    <CardHeader>
        <CardTitle>Beautiful Scenery</CardTitle>
        <CardDescription>A mountain landscape at sunset.</CardDescription>
    </CardHeader>
    <CardContent>
        <p>The image fills the card width and crops via object-cover.</p>
    </CardContent>
</Card>
```

---

## Parameters

### Card

| Parameter | Type | Default | Description |
|---|---|---|---|
| `ChildContent` | `RenderFragment?` | — | Card inner content |
| `Class` | `string?` | — | Additional CSS classes |

Base classes: `rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden`

### CardImage

| Parameter | Type | Default | Description |
|---|---|---|---|
| `Src` | `string` | **required** | Image source URL |
| `Alt` | `string` | `""` | Alt text for accessibility |
| `Class` | `string?` | — | Additional classes on the `<img>` |
| `WrapperClass` | `string?` | — | Additional classes on the wrapper `<div>` |

### CardTitle, CardDescription, CardContent, CardFooter, CardAction

All accept `ChildContent` and `Class` parameters. All support unmatched HTML attributes via `@attributes`.