Product Name
This is a description of the product.
Card
A flexible card component with support for media, headers, content sections, and footers. Supports both vertical and horizontal layouts with multiple variants.
Horizontal Layout
User Profile
Member since 2024. Active contributor to the community.
Split Layout
Article Title
This is a longer description that provides context about the article content. Perfect for blog posts or news items.
Grid Stats
Dashboard Overview
Total Sales
$12,345
Orders
234
Customers
1,234
Revenue
$45,678
Multi-Section
Event Details
Annual Company Meetup
- Date:
- March 15, 2024
- Location:
- San Francisco, CA
- Attendees:
- 150 people
Custom Heading Level
Page Title Card
Using h2 instead of the default h3.
Variants
Default
Outline
Elevated
API Reference
CardRoot
Root container for the card. Renders as an <article> element.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'outline' | 'elevated' | 'default' | Visual style variant of the card |
| className | string | - | Additional CSS classes |
| ...props | React.ComponentProps<"article"> | - | Standard article element props |
CardTitle
The card heading. Renders as an <h3> by default.
| Prop | Type | Default | Description |
|---|---|---|---|
| as | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'h3' | The heading level to render |
| className | string | - | Additional CSS classes |
| ...props | React.ComponentProps<"h3"> | - | Standard heading element props |
CardMedia, CardHeader, CardDescription, CardContent, CardSection, CardFooter
Layout sub-components for structuring card content. Each accepts className and standard HTML element props.
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes |
| ...props | React.ComponentProps<"div" | "header" | "p" | "section" | "footer"> | - | Standard HTML element props for the respective element |