How to use Material UI's Card component

Key takeaways:

  • A Material UI Card is a container for displaying related content (text, images, buttons), used in applications like product profiles or event listings.

  • A simple card uses CardContent for text and CardActions for action buttons, organizing content efficiently.

  • Customize cards with an outline variant or add images using CardMedia, and create expandable sections for additional content.

  • Make cards clickable by wrapping them in CardActionArea, enabling interactivity for actions like navigation.

What is a 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 of using the Card component include product cards, user profile cards, event cards, recommendation cards, etc. In this Answer, we will look into Material UI’s Card component, its types, and customization in a React application.

Installing Material UI

Before using Material UI components, you need to install Material UI in your React project. Use the following npm or yarn command to add Material UI:

npm install @mui/material @emotion/react @emotion/styled

Or with yarn:

yarn add @mui/material @emotion/react @emotion/styled

Once installed, you can import the components into your application.

Now we will see how we can create a simple Card component using Material UI.

Creating a simple card with Material UI

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>
  );
}
Example code to create a simple card

Code explanation

  • Line 3: We import the Card component from @mui/material/Card module. The Card is the main component that wraps around the entire contents of the card.

  • Line 4: We import the CardContent component from @mui/material/CardContent. The CardContent is used to display the main contents of the card.

  • Line 5: We import the CardActions component from @mui/material/CardActions. The CardActions is used to display the action buttons and interactive elements of the card.

  • Line 12: We define the Card component and give it a maximum width (maxWidth) of 280 px.

  • Lines 13–26: We define the CardContent component and add all of the contents of the card in it using the Typography components.

  • Lines 27–29: We define the CardActions component and add the action buttons in it using the Button component.

Material UI outlined variant card

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>
Syntax to add an outline around the card component
import * as React from 'react';
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
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 variant = "outlined" 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>
  );
}
Outlined card component

Material UI image 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>
  );
}
Example code to create a complex card

Code explanation

  • Lines 2–7: We import the necessary components to create a complex card.

  • Line 17: We create a state variable expanded that controls the card’s expandable section.

  • Lines 19–21: We create the handleExpandClick function that controls the state of the expanded state variable.

  • Lines 26–35: We create the CardHeader component that is used to display contents on the top of the card. We pass in an avatar with the Avatar component (displayed on the left), an action with the IconButton component (displayed on the right), a title, and a subheader.

  • Line 36: We define the CardMedia component and pass in the path to the image using the src attribute.

  • Lines 38-53: We define the Collapse component that wraps around the content we want to make collapsible. It takes in the in attribute which controls the components collapsing state.

  • Lines 55–57: We define the CardAction component that contains the action elements like buttons.

Making the card clickable with 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>
  );
}
Code to create a clickable card component

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 CardContent component inside the CardActionArea component that adds an effect to the card contents when they are clicked.

Explore the following projects for hands-on practice in creating real-world applications with React. You can enhance these projects by incorporating Material-UI for a polished and visually appealing design.

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.

Frequently asked questions

Haven’t found what you were looking for? Contact Us

How do I import card from MUI?

Use the following code to import the card from MUI:

import { Card, CardContent, CardActions } from '@mui/material';

What are the use of cards in UI?

Cards are used to organize and display related content such as images, text, and actions in a clean, visually appealing way. Common use cases include product listings, user profiles, and event details.

How can we make an MUI card clickable?

Wrap the card content inside the CardActionArea component:

import { CardActionArea } from '@mui/material';
<CardActionArea>
  <CardContent>...</CardContent>
</CardActionArea>

What is stack in material UI?

Stack is a layout component in Material UI that arranges its children in a vertical or horizontal direction with consistent spacing between them. It simplifies alignment and spacing management in UI design.

Free Resources

Copyright ©2024 Educative, Inc. All rights reserved

Learn in-demand tech skills in half the time

PRODUCTS

Mock Interview

New

Courses

Skill Paths

Projects

Assessments

TRENDING TOPICS

Learn to Code

Tech Interview Prep

Generative AI

Data Science

Machine Learning

GitHub Students Scholarship

Early Access Courses

Blind 75

Layoffs

Pricing

For Individuals

Try for Free

Gift a Subscription

CONTRIBUTE

Become an Author

Become an Affiliate

Earn Referral Credits

RESOURCES

Blog

Cheatsheets

Webinars

Answers

ABOUT US

Our Team

Careers

Hiring

Frequently Asked Questions

Contact Us

Press

LEGAL

Privacy Policy

Cookie Policy

Terms of Service

Business Terms of Service

Data Processing Agreement

INTERVIEW PREP COURSES

Grokking the Modern System Design Interview

Grokking the Product Architecture Design Interview

Grokking the Coding Interview Patterns

Machine Learning System Design

Tiktok Streamline Icon: https://streamlinehq.com

Copyright ©2024 Educative, Inc. All rights reserved.

soc2