Enciphered.Blazor.UIComponents/docs/components/card.md

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

<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:

<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

<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.