Added docs

2026-04-13 18:57:47 +05:00
parent b323862e03
commit 5668cf20d9
9 changed files with 1421 additions and 1 deletions
@@ -0,0 +1,103 @@
+# 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`.