104 lines
2.8 KiB
Markdown
104 lines
2.8 KiB
Markdown
# 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`.
|