Card

Card

Displays structured content in a visually distinct container with sections for headers, content, and footers.

Basic Card

A simple card with header, content, and footer sections.

Card Title

Card description goes here.

This is the main content area of the card.

Login Form Example

Card component used for a login form (matching shadcn/ui example).

Login to your account

Enter your email below to login to your account

Password

Card Grid Layout

Multiple cards in a responsive grid layout.

Total Revenue

January - December 2024

$45,231.89

+20.1% from last year

Active Users

Current active subscriptions

+2,350

+180.1% from last month

New Customers

This month

+573

+12.5% from last month

Card with Action Buttons

Cards with footer action buttons in different layouts.

Create Project

Deploy your new project in one-click.

Your project will be created with default settings.

Team Members

Invite your team to collaborate.

John Doe

Jane Smith

Content-Only Cards

Cards without footers, suitable for displaying information.

Notifications

You have 3 unread messages.

Your call has been confirmed.

5 minutes ago

You have a new message!

1 hour ago

System Status

All systems operational.

API Status Operational

Database Operational

Storage Operational

Custom Styling

Cards with custom CSS classes for extended styling.

Featured Card

With custom border color

This card has a custom border using the Class parameter.

Enhanced Shadow

With larger shadow effect

This card uses an enhanced shadow for more depth.

Accessibility

Semantic HTML structure with proper heading hierarchy. Sufficient color contrast (WCAG 2.1 AA). Responsive layout and dark mode compatible via CSS variables.

Usage

Common card patterns and code examples.

Basic Card Structure

<Card>
    <CardHeader>
        <CardTitle>Title</CardTitle>
        <CardDescription>Description</CardDescription>
    </CardHeader>
    <CardContent>
        Content goes here
    </CardContent>
    <CardFooter>
        <Button>Action</Button>
    </CardFooter>
</Card>

API Reference

Component parameters and their types.

Prop	Type	Default	Description
Class	string?	—	Additional CSS classes for the Card root element.
ChildContent	RenderFragment?	—	Card body. Compose with CardHeader, CardContent, and CardFooter sub-components.

Previous Calendar Next Carousel