How to use Material UI's Card component
The Card component is a surface that acts as a container for related contents and their actions. It is usually used to display text, images, buttons, and links. Examples, where card components are used, include product cards, user profile cards, event cards, testimonial cards, etc. In this Answer, we will look into Material UI's Card component, its types, and customization in a React application.
Note: Please makes sure to install Material UI version 5 in your systems as we will be using it in the Answer.
Now we will see how we can create a simple Card component using Material UI.
Simple card
A basic or simple Material UI Card contains textual information and acts as an entry point for the detailed content related to the card. This helps to improve data organization and content readability on the web page by eliminating data congestion. An example code for creating a Card component is shown below:
import * as React from 'react';
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardActions from '@mui/material/CardActions';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
export default function SimpleCard() {
return (
<Box sx={{height:300 , display:'flex', justifyContent:'center',alignItems:'center'}}>
<Card sx={{ maxWidth: 280 }}>
<CardContent>
<Typography sx={{ fontSize: 15 }} color="text.secondary">
Software House
</Typography>
<Typography variant="h5">
Educative
</Typography>
<Typography sx={{ mb: 2 }} color="text.secondary">
TechEd Company
</Typography>
<Typography variant="body1">
Educating people with text based content.
</Typography>
</CardContent>
<CardActions>
<Button variant = 'contained' size="large">Join</Button>
</CardActions>
</Card>
</Box>
);
}Code explanation
Line 3: We import the
Cardcomponent from@mui/material/Cardmodule. TheCardis the main component that wraps around the entire contents of the card.Line 4: We import the
CardContentcomponent from@mui/material/CardContent. TheCardContentis used to display the main contents of the card.Line 5: We import the
CardActionscomponent from@mui/material/CardActions. TheCardActionsis used to display the action buttons and interactive elements of the card.Line 12: We define the
Cardcomponent and give it a maximum width (maxWidth) of 280 px.Lines 13–26: We define the
CardContentcomponent and add all of the contents of the card in it using theTypographycomponents.Lines 27–29: We define the
CardActionscomponent and add the action buttons in it using theButtoncomponent.
Outlined variant
We can create an outline around the Card component by setting the variant attribute to outlined. The syntax of the Card component will be:
<Card variant="outlined">{Card contents}</Card>
The output of the outlined card is shown below:
Complex card
Material UI provides us with the tools to build interactive cards that contain images and icons. These tools are expandable. Below, we can see an example code for creating a card that contains a header, an image, and an expandable section.
import * as React from 'react';
import Card from '@mui/material/Card';
import CardHeader from '@mui/material/CardHeader';
import CardMedia from '@mui/material/CardMedia';
import CardContent from '@mui/material/CardContent';
import CardActions from '@mui/material/CardActions';
import Collapse from '@mui/material/Collapse';
import Avatar from '@mui/material/Avatar';
import { Box , Button } from '@mui/material';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import Logo from "./educative.png";
import GroupPhoto from "./groupphoto.jpeg";
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
export default function SimpleCard() {
const [expanded, setExpanded] = React.useState(false);
const handleExpandClick = () => {
setExpanded(!expanded);
};
return (
<Box sx={{height:500 , display:'flex', justifyContent:'center',alignItems:'center'}}>
<Card sx={{ width: 300 }}>
<CardHeader
avatar={<Avatar src = {Logo}/>}
action={
<IconButton expand={expanded} onClick={handleExpandClick} aria-expanded={expanded} aria-label="show more">
<ExpandMoreIcon/>
</IconButton>
}
title="Educative"
subheader="Founded in 2015"
/>
<CardMedia component="img" height="200" image={GroupPhoto} alt="Educative Interns"/>
<Collapse in={expanded} timeout="auto">
<CardContent>
<Typography sx={{ fontSize: 15 }} color="text.secondary">
Software House
</Typography>
<Typography variant="h5">
Educative
</Typography>
<Typography sx={{ mb: 2 }} color="text.secondary">
TechEd Company
</Typography>
<Typography variant="body1">
Educating people with text based content.
</Typography>
</CardContent>
</Collapse>
<CardActions sx={{justifyContent:'center'}}>
<Button variant = 'contained' size="large">Join</Button>
</CardActions>
</Card>
</Box>
);
}Code explanation
Lines 2–7: We import the necessary components to create a complex card.
Line 17: We create a state variable
expandedthat controls the card's expandable section.Lines 19–21: We create the
handleExpandClickfunction that controls the state of theexpandedstate variable.Lines 26–35: We create the
CardHeadercomponent that is used to display contents on the top of the card. We pass in anavatarwith theAvatarcomponent (displayed on the left), anactionwith theIconButtoncomponent (displayed on the right), atitle, and asubheader.Line 36: We define the
CardMediacomponent and pass in the path to the image using thesrcattribute.Lines 38-53: We define the
Collapsecomponent that wraps around the content we want to make collapsible. It takes in theinattribute which controls the components collapsing state.Lines 55–57: We define the
CardActioncomponent that contains the action elements like buttons.
The CardActionArea component
To make a card clickable, we can wrap the whole content of the Card component inside the CardActionArea component. To use the CardActionArea component, we have to import it from @mui/material. The syntax is given below:
Once we make our card clickable by using the CardActionArea, it becomes interactive as shown below:
import * as React from 'react';
import Card from '@mui/material/Card';
import CardHeader from '@mui/material/CardHeader';
import CardMedia from '@mui/material/CardMedia';
import CardContent from '@mui/material/CardContent';
import CardActions from '@mui/material/CardActions';
import Collapse from '@mui/material/Collapse';
import Avatar from '@mui/material/Avatar';
import { Box , Button } from '@mui/material';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import Logo from "./educative.png";
import GroupPhoto from "./groupphoto.jpeg";
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import {CardActionArea} from '@mui/material'
export default function SimpleCard() {
const [expanded, setExpanded] = React.useState(false);
const handleExpandClick = () => {
setExpanded(!expanded);
};
return (
<Box sx={{height:500 , display:'flex', justifyContent:'center',alignItems:'center'}}>
<Card sx={{ width: 300 }}>
<CardActionArea>
<CardHeader
avatar={<Avatar src = {Logo}/>}
action={
<IconButton expand={expanded} onClick={handleExpandClick} aria-expanded={expanded} aria-label="show more">
<ExpandMoreIcon/>
</IconButton>
}
title="Educative"
subheader="Founded in 2015"
/>
<CardMedia component="img" height="200" image={GroupPhoto} alt="Educative Interns"/>
<Collapse in={expanded} timeout="auto">
<CardContent>
<Typography sx={{ fontSize: 15 }} color="text.secondary">
Software House
</Typography>
<Typography variant="h5">
Educative
</Typography>
<Typography sx={{ mb: 2 }} color="text.secondary">
TechEd Company
</Typography>
<Typography variant="body1">
Educating people with text based content.
</Typography>
</CardContent>
</Collapse>
</CardActionArea>
<CardActions sx={{justifyContent:'center'}}>
<Button variant = 'contained' size="large">Join</Button>
</CardActions>
</Card>
</Box>
);
}Once we click the "Run" button, a card is displayed in the "Output" tab. The card has an effect on it when it is clicked. This effect is achieved using the CardActionArea component. The code explanation is given below:
Lines 27–56: We wrap the
CardContentcomponent inside theCardActionAreacomponent that adds an effect to the card contents when they are clicked.
Conclusion
Incorporating a card in a web application allows us to organize the content in a visually appealing manner. Its customization features make it an invaluable tool to create user-friendly and engaging web pages.
Free Resources
