The Card component provides a simple container with elevation and rounded corners, perfect for grouping related content and actions. It’s built on top of Material-UI’s Paper component.
import { Card } from '@naturacosmeticos/natds-web';
Basic Card
import { Card } from '@naturacosmeticos/natds-web';
function Example() {
return (
<Card>
<div style={{ padding: 16 }}>
<h3>Card Title</h3>
<p>This is the card content.</p>
</div>
</Card>
);
}
Card with Elevation
Control the shadow depth of the card:
import { Card } from '@naturacosmeticos/natds-web';
function ElevationExamples() {
return (
<>
<Card elevation={0}>
<div style={{ padding: 16 }}>No elevation</div>
</Card>
<Card elevation={1}>
<div style={{ padding: 16 }}>Default elevation</div>
</Card>
<Card elevation={3}>
<div style={{ padding: 16 }}>Higher elevation</div>
</Card>
<Card elevation={8}>
<div style={{ padding: 16 }}>Even higher</div>
</Card>
</>
);
}
Square Card
Remove rounded corners:
import { Card } from '@naturacosmeticos/natds-web';
function Example() {
return (
<Card square>
<div style={{ padding: 16 }}>
This card has square corners.
</div>
</Card>
);
}
Complete Card Example
Card is often used with companion components like CardContent, CardHeader, CardActions, CardMedia, and CardActionArea:
import {
Card,
CardHeader,
CardMedia,
CardContent,
CardActions,
Button,
Typography
} from '@naturacosmeticos/natds-web';
function CompleteCard() {
return (
<Card elevation={2}>
<CardHeader
title="Card Title"
subheader="September 14, 2023"
/>
<CardMedia
component="img"
height="194"
image="/static/images/cards/product.jpg"
alt="Product image"
/>
<CardContent>
<Typography variant="body2" color="textSecondary">
This is a detailed description of the card content.
It can contain multiple paragraphs and rich formatting.
</Typography>
</CardContent>
<CardActions>
<Button size="small" color="primary">
Learn More
</Button>
<Button size="small" color="primary">
Share
</Button>
</CardActions>
</Card>
);
}
ICardProps
Shadow depth of the card. Accepts values between 0 and 24 inclusive. Higher values create more prominent shadows.
If true, rounded corners are disabled and the card has square corners.
CSS class name to apply custom styles to the card.
Related Components
Card is typically used alongside these companion components:
- CardHeader: Displays a title, subtitle, and optional avatar/action
- CardMedia: Displays media content like images or videos
- CardContent: Main content area with proper padding
- CardActions: Action buttons or controls at the bottom
- CardActionArea: Makes the entire card clickable
Migration Note
The Paper component is deprecated and will be removed in a future version. Use Card instead.
// Old
import { Paper } from '@naturacosmeticos/natds-web';
// New
import { Card } from '@naturacosmeticos/natds-web';
