Card
Cards contain content and actions about a single subject in a contained, elevated surface.
Basic Card
Basic Card
A simple card with content. Cards contain information and actions about a single subject.
Card with Header & Actions
Card TitleSubtitle text
This card uses CardHeader for structured titles and CardActions for interactive elements.
Outlined Card
Outlined Variant
Uses a border instead of elevation for a lighter visual weight.
Elevated Cards
Elevation 1
Shadow depth levelElevation 3
Shadow depth levelElevation 6
Shadow depth levelElevation 12
Shadow depth levelCard Grid
Analytics
Manage your analytics preferences and configurations.
Reports
Manage your reports preferences and configurations.
Settings
Manage your settings preferences and configurations.
Usage
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardActions from '@mui/material/CardActions';
<Card>
<CardContent>
<Typography variant="h6">Title</Typography>
<Typography variant="body2">Content here.</Typography>
</CardContent>
<CardActions>
<Button size="small">Action</Button>
</CardActions>
</Card>