Overview
The Card component is a versatile container for grouping related content. It provides a clean, elevated surface with consistent padding and styling.
Basic Usage
import { Card } from '@yourproject/components';
function Example() {
return (
<Card>
<h3>Card Title</h3>
<p>Card content goes here.</p>
</Card>
);
}
Variants
Default
Outlined
Elevated
Flat
<Card>
Standard card with default elevation and padding.
</Card>
<Card variant="outlined">
Card with border instead of shadow.
</Card>
<Card variant="elevated">
Card with enhanced shadow for more prominence.
</Card>
<Card variant="flat">
Card with no shadow or border, minimal styling.
</Card>
Card Structure
import { Card, CardHeader, CardContent, CardFooter } from '@yourproject/components';
function Example() {
return (
<Card>
<CardHeader>
<h3>Card Title</h3>
<p>Subtitle or description</p>
</CardHeader>
<CardContent>
Main content of the card goes here.
</CardContent>
<CardFooter>
<Button>Action</Button>
</CardFooter>
</Card>
);
}
Interactive Cards
Hoverable Card
<Card hoverable>
Hover over this card to see the elevation effect.
</Card>
Clickable Card
<Card
clickable
onClick={() => console.log('Card clicked')}
>
Click this entire card.
</Card>
Padding Options
<Card padding="none">No padding</Card>
<Card padding="sm">Small padding</Card>
<Card padding="md">Medium padding (default)</Card>
<Card padding="lg">Large padding</Card>
Props
Card Props
Visual style: default, outlined, elevated, or flat
Internal padding: none, sm, md, or lg
Whether to show elevation effect on hover
Makes the entire card clickable with hover effects
Click handler when card is clickable: () => void
The content to display inside the card
Additional CSS class names to apply
Header content (typically title and subtitle)
Action element to display in the header (e.g., icon button)
CardContent Props
Footer content (typically actions or metadata)
Alignment of footer content: left, center, or right
TypeScript Interfaces
interface CardProps {
variant?: 'default' | 'outlined' | 'elevated' | 'flat';
padding?: 'none' | 'sm' | 'md' | 'lg';
hoverable?: boolean;
clickable?: boolean;
onClick?: () => void;
children: React.ReactNode;
className?: string;
}
interface CardHeaderProps {
children: React.ReactNode;
action?: React.ReactNode;
className?: string;
}
interface CardContentProps {
children: React.ReactNode;
className?: string;
}
interface CardFooterProps {
children: React.ReactNode;
align?: 'left' | 'center' | 'right';
className?: string;
}
Layout Examples
Card Grid
import { Card, Grid } from '@yourproject/components';
function Example() {
return (
<Grid cols={3} gap="md">
<Card>
<CardHeader>
<h3>Feature 1</h3>
</CardHeader>
<CardContent>
Description of feature 1.
</CardContent>
</Card>
<Card>
<CardHeader>
<h3>Feature 2</h3>
</CardHeader>
<CardContent>
Description of feature 2.
</CardContent>
</Card>
<Card>
<CardHeader>
<h3>Feature 3</h3>
</CardHeader>
<CardContent>
Description of feature 3.
</CardContent>
</Card>
</Grid>
);
}
Profile Card
import { Card, CardHeader, CardContent, CardFooter, Button } from '@yourproject/components';
function ProfileCard() {
return (
<Card variant="elevated">
<CardHeader>
<img src="avatar.jpg" alt="Profile" />
<h3>John Doe</h3>
<p>Software Engineer</p>
</CardHeader>
<CardContent>
<p>Bio: Passionate about building great user experiences.</p>
</CardContent>
<CardFooter align="center">
<Button variant="primary">Follow</Button>
<Button variant="secondary">Message</Button>
</CardFooter>
</Card>
);
}
Use the hoverable prop for cards in a grid to provide visual feedback on interaction.
Accessibility
- Uses semantic HTML with proper heading hierarchy
- Clickable cards include proper role and keyboard support
- Maintains focus indicators for keyboard navigation
- Screen reader compatible with descriptive content