Close
Close full mode
logoWebDevAssist

How to create Cards in Material-UI react

Material-UI Card component examples:

Material-UI Card component is used to show different contents with actionable items. For example, we can show text and images with action buttons. It provides different ways to create different types of cards easily. In this post, we will learn how to use the Material-UI Card component with examples.

YouTube video:

I have published one video on YouTube. You can watch it here:

How to import Card:

We can import Card component as like below:

import { Card } from "@material-ui/core";

Components of Card:

CardContent and CardActions:

Let's take a look at the below example:

import {
Box,
Card,
CardContent,
Typography,
CardActions,
Button,
} from "@material-ui/core";
import { Theme, createStyles, makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
display: "flex",
flexWrap: "wrap",
"& > *": {
margin: theme.spacing(3),
},
},
})
);
function App() {
const classes = useStyles();
return (
<Box className={classes.root}>
<Card>
<CardContent>
<Typography variant="h3">Card Title</Typography>
</CardContent>
<CardActions>
<Button>share</Button>
</CardActions>
</Card>
</Box>
);
}
export default App;
  • CardContent component is used to put the contents.
  • CardActions component is used to put the actions. We added one Button in this component.

It will create one card as like below:

Material-UI card
Material-UI card

We can also add more that one buttons in CardActions.

CardHeader:

CardHeader is used to add one header to a card. We can add one avatar, title, subheader and one action button. For example:

import {
Box,
Card,
CardContent,
Typography,
CardActions,
Button,
Avatar,
CardHeader,
IconButton,
} from "@material-ui/core";
import { Theme, createStyles, makeStyles } from "@material-ui/core/styles";
import MoreVertIcon from "@material-ui/icons/MoreVert";
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
display: "flex",
flexWrap: "wrap",
"& > *": {
margin: theme.spacing(3),
},
},
})
);
function App() {
const classes = useStyles();
return (
<Box className={classes.root}>
<Card>
<CardHeader
avatar={<Avatar>N</Avatar>}
title="Card Header"
subheader="Card sub heading"
action={
<IconButton>
<MoreVertIcon />
</IconButton>
}
/>
<CardContent>
<Typography variant="h3">Card Title</Typography>
</CardContent>
<CardActions>
<Button>share</Button>
</CardActions>
</Card>
</Box>
);
}
export default App;

It will one Avatar, title, subheader and one action to the card.

Material-UI card header
Material-UI card header

CardMedia:

We can show one image as a media using CardMedia component. e.g.:

<Box className={classes.root}>
<Card>
<CardHeader
avatar={<Avatar>N</Avatar>}
title="Card Header"
subheader="Card sub heading"
action={
<IconButton>
<MoreVertIcon />
</IconButton>
}
/>
<CardMedia
style={{ paddingTop: "50%" }}
image="./media/background.png"
title="Background image"
/>
<CardContent>
<Typography variant="h3">Card Title</Typography>
</CardContent>
<CardActions>
<Button>share</Button>
</CardActions>
</Card>
</Box>

Material-UI card media
Material-UI card media

CardActionArea:

CardActionArea component is used to make one area of the card clickable. For example, we can put CardHeader, CardMedia and CardContent inside CardActionArea to make it clickable.

<Box className={classes.root}>
<Card>
<CardActionArea>
<CardHeader
avatar={<Avatar>N</Avatar>}
title="Card Header"
subheader="Card sub heading"
action={
<IconButton>
<MoreVertIcon />
</IconButton>
}
/>
<CardMedia
style={{ paddingTop: "50%" }}
image="./media/background.png"
title="Background image"
/>
<CardContent>
<Typography variant="h3">Card Title</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button>share</Button>
</CardActions>
</Card>
</Box>

Full example:

import {
Box,
Card,
CardContent,
Typography,
CardActions,
Button,
Avatar,
CardHeader,
IconButton,
CardMedia,
CardActionArea,
} from "@material-ui/core";
import { Theme, createStyles, makeStyles } from "@material-ui/core/styles";
import MoreVertIcon from "@material-ui/icons/MoreVert";
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
display: "flex",
flexWrap: "wrap",
"& > *": {
margin: theme.spacing(3),
},
},
})
);
function App() {
const classes = useStyles();
return (
<Box className={classes.root}>
<Card>
<CardActionArea>
<CardHeader
avatar={<Avatar>N</Avatar>}
title="Card Header"
subheader="Card sub heading"
action={
<IconButton>
<MoreVertIcon />
</IconButton>
}
/>
<CardMedia
style={{ paddingTop: "50%" }}
image="./media/background.png"
title="Background image"
/>
<CardContent>
<Typography variant="h3">Card Title</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button>share</Button>
</CardActions>
</Card>
</Box>
);
}
export default App;

Subscribe to our Newsletter

Previous
How to create Paper in Material-UI react
Next
Material-UI Accordion component example