Card Compound container component for organizing and displaying content with visual hierarchy.
The Card component is a compound component that provides a flexible container for organizing content with clear visual hierarchy. It uses Shell.Cn() for class merging and renders with rounded-lg border bg-card text-card-foreground shadow-sm styling.
< Card > < CardHeader > < CardTitle >Welcome to ShellUI</ CardTitle > < CardDescription >Build beautiful Blazor applications</ CardDescription > </ CardHeader > < CardContent > < p >Your content goes here.</ p > </ CardContent > </ Card > < Card > < CardHeader > < CardTitle >Settings</ CardTitle > < CardDescription >Manage your account preferences</ CardDescription > </ CardHeader > < CardContent > < div class = "space-y-4" > < Label >Email Notifications</ Label > < Switch /> </ div > </ CardContent > < CardFooter > < Button Variant = "ButtonVariant.Outline" >Cancel</ Button > < Button >Save Changes</ Button > </ CardFooter > </ Card > < Card > < CardHeader > < div class = "flex flex-row items-center justify-between space-y-0 pb-2" > < CardTitle class = "text-sm font-medium" >Total Revenue</ CardTitle > < span class = "text-muted-foreground" >$</ span > </ div > </ CardHeader > < CardContent > < div class = "text-2xl font-bold" >$45,231.89</ div > < p class = "text-xs text-muted-foreground" >+20.1% from last month</ p > </ CardContent > </ Card > Each sub-component accepts a Class parameter merged via Shell.Cn():
< Card Class = "w-[350px]" > < CardHeader Class = "pb-2" > < CardTitle >Compact Card</ CardTitle > </ CardHeader > < CardContent Class = "text-sm text-muted-foreground" > < p >Card with custom class overrides.</ p > </ CardContent > </ Card > Parameter Type Default Description ChildContentRenderFragment— Child sub-components Classstring?nullAdditional CSS classes merged via Shell.Cn()
Parameter Type Default Description ChildContentRenderFragment— Header content (title, description) Classstring?nullAdditional CSS classes
Parameter Type Default Description ChildContentRenderFragment— Title text Classstring?nullAdditional CSS classes
Parameter Type Default Description ChildContentRenderFragment— Description text Classstring?nullAdditional CSS classes
Parameter Type Default Description ChildContentRenderFragment— Main card body Classstring?nullAdditional CSS classes
Parameter Type Default Description ChildContentRenderFragment— Footer content (actions) Classstring?nullAdditional CSS classes
Uses semantic HTML structure for proper screen reader navigation.
Supports keyboard focus management within interactive card content.
High contrast border and shadow ensure visual distinction.
