Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

Material UI Card: How to Create Functional and Beautiful Cards

In the context of Material UI, a card is a fundamental UI element used for organizing and presenting related information and actions within a border. The concept of cards in user interfaces is metaphorically derived from physical cards: they resemble tangible cards, providing a clear visual boundary and conveying a sense of contained information.

The material UI (MUI) Card is a component for organizing and displaying groups of related information and actions.

Material UI cards are wrappers for a variety of contents, including:

  • User profile card

  • Product card

  • Gallery cards etc.

In this article, we’ll learn how to create cards with Material UI Card. We’ll go through simple cards, interactive cards, and cards for a simple blog page. Let’s start!

What is Material UI?

Material UI is an open-source React component library that implements Google’s Material design. These components’ design follows Google’s Material Design guidelines. This ensures a consistent and visually appealing user interface across different platforms and devices.

Material UI consists of an extensive library of prebuilt components and tools with customizable options to help developers implement modern designs with ease. This library simplifies the process of creating modern and responsive web applications. Material UI emphasizes clean design, smooth animations, and a focus on user experience.

What is Material UI Card?

Material UI cards are a versatile and visually appealing way to present information and actions within a web application. They provide developers with powerful tools to create user interfaces that are both functional and aesthetically pleasing, following the principles of Material Design.

To add a Material UI card component to your project, you need to install Material UI by running one of the following commands.

npm install @mui/material @emotion/react @emotion/styled
or
yarn add @mui/material @emotion/react @emotion/styled
or
pnpm add @mui/material @emotion/react @emotion/styled

In order to use the font Icon component or the prebuilt SVG Material Icons (such as those found in the icon demos), you must first install the Material Icons font. You can do so with npm, yarn, or with the Google Web Fonts CDN.

npm install @mui/icons-material
or
yarn add @mui/icons-material
or 
pnpm add @mui/icons-material

For more information on Material UI cards, check the Material UI docs.

PS: Engineers waste time building and styling components when working on a project, writing repetitive markup adds time to the project and is a mundane, boring task for engineers. PureCode.ai uses AI to generate a large selection of custom, styled UI components for different projects and component types.

What is the Difference Between Paper and Card in Material UI?

In Material UI, both paper and card components display content and a group of UI elements. However, there are a few differences:
Card component:

  1. Card components can contain a more complex structural layout, suitable for displaying detailed content.

  2. Card components have a slight shadow or elevation, providing a visual hierarchy that makes them stand out.

  3. We seldom use card components to create interactive content using buttons, icons, and other interactive elements, thereby enhancing user experience.

Paper component:

  1. The paper component provides a simpler container for basic content grouping.

  2. The simplicity of the paper component makes it suitable in various contexts and for a wide variety of applications.

  3. The paper component has no shadow or elevation and may appear flat.

Building a Basic Card with Material UI Card

Creating a basic card component typically involves organizing detailed textual information into related content, which can be displayed in a structured and visually appealing manner on a webpage or a mobile application. The code provided below serves as an example of how to create a basic Material UI card component:

import {
  Card,
  CardActions,
  CardContent,
  Button,
  Typography
} from "@mui/material";
import "./styles.css";

const BasicCard = () => {
  return (
    <Card sx={{ maxWidth: 400 }}>
      <CardContent>
        <Typography
          sx={{ fontSize: 24, mb: 2, textAlign: "center" }}
          variant="h2"
          color="text.secondary"
          gutterBottom
        >
          Quote of the Day
        </Typography>
        <Typography
          sx={{ fontSize: 18, mb: 1.5 }}
          variant="h5"
          color="text.secondary"
        >
          “I am not afraid of storms, for I am learning how to sail my ship.”
        </Typography>
        <Typography sx={{ mb: 1 }} variant="body2">
          “Little Women” by Louisa May Alcott.
        </Typography>
      </CardContent>
      <CardActions>
        <Button size="small">Read More</Button>
      </CardActions>
    </Card>
  );
};

const App = () => {
  return (
    <div className="App">
      <h1>Basic card</h1>
      <BasicCard />
    </div>
  );
}

export default App

The preceding code example will produce the result below:

A basic card implementation

Building a Basic Outlined Card with a Material UI Card

An outlined card uses a clear boundary to enhance readability by highlighting detailed information within the card, thereby distinguishing it from other cards. Creating outlined cards in material UI involves setting the value of the Card component variant prop to outlined. The syntax below is that of an outlined card component:

<Card variant="outlined">{card}</Card>

Let’s build a basic outlined 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';

const bull = (
  <Box
    component="span"
    sx={{ display: 'inline-block', mx: '2px', transform: 'scale(0.8)' }}
  >
    •
  </Box>
);

const card = (
  <React.Fragment>
    <CardContent>
      <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
        Word of the Day
      </Typography>
      <Typography variant="h5" component="div">
        be{bull}nev{bull}o{bull}lent
      </Typography>
      <Typography sx={{ mb: 1.5 }} color="text.secondary">
        adjective
      </Typography>
      <Typography variant="body2">
        well meaning and kindly.
        <br />
        {'"a benevolent smile"'}
      </Typography>
    </CardContent>
    <CardActions>
      <Button size="small">Learn More</Button>
    </CardActions>
  </React.Fragment>
);

export default function OutlinedCard() {
  return (
    <Box sx={{ minWidth: 275 }}>
      <Card variant="outlined">{card}</Card>
    </Box>
  );
}

This is what an outlined card component look like;

MUI Outlined Card Component

What are the Components of Material UI Card?

Material UI card is made up of a list of components such as:

  • CardActionArea

  • CardActions

  • CardContent

  • CardHeader

  • CardMedia

CardActionArea

The CardActionArea component in Material UI is used to make an area within a card clickable, by wrapping contents within a card that should be interactive. The code snippet below shows how to use CardActionArea in combination with a Card component:

import { CardActionArea } from '@mui/material';
import Card from '@mui/material/Card';

<Card>
    <CardActionArea>
      { /* Card Contents */}
    </CardActionArea>
</Card>

CardHeader

The Material UI CardHeader provides context to a card by adding a header. It can be used to display a title, an avatar, a subheader, and an action within a card. The example code below shows how to use a CardHeader component.

import { CardHeader, Avatar, IconButton } from '@mui/material';
import Card from '@mui/material/Card';

<Card>
    <CardHeader
        avatar={<Avatar aria-label="card-name">C</Avatar>}
        title="Card Title"
        subheader="Subheader"
        action={<IconButton aria-label="settings"></IconButton>}
    />
</Card>

CardMedia

The CardMedia component in Material UI provides a way to add images, videos, icons, and other media within a card. Below is the example code for using a CardMedia component:

  <Card>
    <CardMedia
      style={{ paddingTop: "24px" }}
      image="./background.png"
      title="Background image"
    />
  </Card>

CardContent

The CardContent component is used to wrap the core contents of the Card component. The code snippet below illustrates how to use the CardContent component:

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

<Card>
    <CardContent>
      { /* Card Contents */}
    </CardContent>
</Card>

CardActions

In material UI, the CardActions component is used to add card actions. The code snippet below shows how to use CardActions in combination with a Card component:

import { CardActions, Button } from '@mui/material';
import Card from '@mui/material/Card';
<Card>
    <CardActions>
        <Button>Click here</Button>
    </CardActions>
</Card>

Adding Interactions to Cards

In Material-UI cards, interactive actions play a crucial role in enhancing user experience by enabling users to engage with content quickly and easily without having to scroll.
Here is a sample code:

import { useState } from "react";
import { styled } from "@mui/material/styles";
import {
  Card,
  Box,
  IconButton,
  CardHeader,
  Avatar,
  CardContent,
  Typography,
  Collapse
} from "@mui/material";
import {
  FavoriteBorderRounded,
  ShareOutlined,
  MoreVert
} from "@mui/icons-material";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";

const ExpandMore = styled((props) => {
  const { expand, ...other } = props;
  return <IconButton {...other} />;
})(({ theme, expand }) => ({
  transform: !expand ? "rotate(0deg)" : "rotate(180deg)",
  marginLeft: "auto",
  transition: theme.transitions.create("transform", {
    duration: theme.transitions.duration.shortest
  })
}));

const InteractiveCard = () => {
  const [expanded, setExpanded] = useState(false);

  const expandedHandler = () => {
    setExpanded((prev) => !prev);
  };

  return (
    <Card sx={{ maxWidth: 400, width: "100%" }}>
      <CardHeader
        avatar={
          <Avatar sx={{ backgroundColor: "darkblue" }} aria-label="recipe">
            T
          </Avatar>
        }
        action={
          <IconButton aria-label="settings">
            <MoreVert />
          </IconButton>
        }
        title="Software Technologies"
        subheader="TypeScript"
      />
      <CardContent>
        <Typography>
          TypeScript code converts to JavaScript, which runs anywhere JavaScript
          runs: In a browser, on Node.js or Deno and in your apps
        </Typography>
        <Collapse in={expanded} timeout="auto" unmountOnExit>
          <Typography>
            TypeScript stands in an unusual relationship to JavaScript.
            TypeScript offers all of JavaScript’s features, and an additional
            layer on top of these: TypeScript’s type system. For example,
            JavaScript provides language primitives like string and number, but
            it doesn’t check that you’ve consistently assigned these. TypeScript
            does.
          </Typography>
        </Collapse>
      </CardContent>
      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          mt: "1rem"
        }}
      >
        <Box>
          <IconButton>
            <FavoriteBorderRounded />
          </IconButton>
          <IconButton>
            <ShareOutlined />
          </IconButton>
        </Box>

        <ExpandMore
          expand={expanded}
          onClick={expandedHandler}
          aria-expanded={expanded}
          aria-label="show more"
        >
          <ExpandMoreIcon />
        </ExpandMore>
      </Box>
    </Card>
  );
};

function App() {
  return (
    <div className="App">
      <h1>Interactive card</h1>
      <InteractiveCard />
    </div>
  );
}

export default App;

In the code snippet above, the Card component represents the Material-UI card. Inside the CardContent component, there are Typography components for displaying text content and a Collapse component for hiding the rest of the text content. The IconButton component and ExpandMore component are used to create an interactive action.

Interactive card component

In this case, when the ExpandMoreIcon is clicked, it triggers an onClick event that displays the rest of the content.

Interactive card component when ExpandMoreIcon is clicked

By incorporating interactive actions like buttons within Material-UI cards, users can easily perform actions without navigating to other parts of the application. This approach enhances user engagement, making the user interface more intuitive and user-friendly. It’s essential to design these interactions carefully, ensuring they align with the overall user experience goals of your application.

Adding Images to Cards

When trying to add an image to a card, the CardMedia component comes in handy. The code example below shows how to use the CardMedia component to display images:

import * as React from "react";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import CardMedia from "@mui/material/CardMedia";
import Typography from "@mui/material/Typography";

export default function MediaCard() {
  return (
    <Card sx={{ maxWidth: 345 }}>
      <CardMedia
        sx={{ height: 140 }}
        image="https://images.unsplash.com/photo-1515463138280-67d1dcbf317f?auto=format&fit=crop&q=80&w=2069&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        title="Graphical illustration of a water droplet"
      />
      <CardContent>
        <Typography>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi
          culpa voluptatibus blanditiis nostrum eum id voluptatem nisi aut quam
          deserunt!
        </Typography>
      </CardContent>
    </Card>
  );
}

The result should look like this;

Adding images to cards

Adding Primary Action to Cards in Material UI

Primary action on a card involves interacting with the card itself, be it a link to another screen or some other action. For example, the code below is for a meal card with a clickable image and title:

import Card from "@mui/material/Card";
import { CardActionArea, CardMedia, Typography } from "@mui/material";

const PrimaryAction = () => {
  return (
    <Card style={{ margin: 90 }}>
      <CardActionArea>
        <CardMedia
          style={{ paddingTop: "50%" }}
          image="https://images.unsplash.com/photo-1513104890138-7c749659a591?auto=format&fit=crop&q=80&w=2070&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
          alt="Pizza image"
        />
        <Typography sx={{ fontSize: 16, padding: 2 }}>Pizza</Typography>
      </CardActionArea>
    </Card>
  );
};

export default PrimaryAction;

The result should look like this;

Adding Primary Action to Cards in Material UI

Adding Supplemental Actions Within Cards in Material UI

Material UI card supplemental actions are additional interactive elements within the card such as:

  • icons

  • text

  • UI controls etc.

They are usually placed at the bottom of the card. The example code is shown below:

import {
  Card,
  CardActions,
  Button,
  Box,
  IconButton,
  CardMedia
} from "@mui/material";
import { FavoriteBorderRounded, ShareOutlined } from "@mui/icons-material";
import "./styles.css";

const SupplementalCard = () => {
  return (
    <Card sx={{ maxWidth: 400, width: "100%" }}>
      <CardMedia
        image="https://res.cloudinary.com/da8vqkdmt/image/upload/v1669118095/cld-sample-4.jpg"
        alt="Grilled fish with cooked vegetable and fork on a plate"
        sx={{ height: 150, backgroundColor: "cyan" }}
        component="img"
      />

      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-around",
          mt: "1rem"
        }}
      >
        <CardActions>
          <Button size="small">learn More</Button>
        </CardActions>

        <Box>
          <IconButton>
            <FavoriteBorderRounded />
          </IconButton>
          <IconButton>
            <ShareOutlined />
          </IconButton>
        </Box>
      </Box>
    </Card>
  );
};

function App() {
  return (
    <div className="App">
      <h1>Supplemental card</h1>
      <SupplementalCard />
    </div>
  );
}

export default App;

The demo code above showcases how to add more interactive elements to a card to support multiple actions. Here’s the result:

Plate of cooked meat with cooked vegetable

Building a Simple Blog Card Component

Material UI Card component significantly simplifies the development process of an engaging blog page. This Card component provides an excellent way to style and display content visually, making it more engaging. Below is a simple example code:

import { useState } from "react";
import {
  Card,
  CardActions,
  Button,
  Box,
  IconButton,
  CardHeader,
  Avatar,
  CardContent,
  Typography,
  Collapse
} from "@mui/material";
import {
  FavoriteBorderRounded,
  ShareOutlined,
  MoreVert
} from "@mui/icons-material";

const BlogCard = () => {
  const [expanded, setExpanded] = useState(false);

  const expandedHandler = () => {
    setExpanded((prev) => !prev);
  };

  return (
    <Card sx={{ maxWidth: 400, width: "100%" }}>
      <CardHeader
        avatar={
          <Avatar sx={{ backgroundColor: "darkblue" }} aria-label="recipe">
            T
          </Avatar>
        }
        action={
          <IconButton aria-label="settings">
            <MoreVert />
          </IconButton>
        }
        title="Software Technologies"
        subheader="TypeScript"
      />
      <CardContent>
        <Typography>
          TypeScript code converts to JavaScript, which runs anywhere JavaScript
          runs: In a browser, on Node.js or Deno and in your apps
        </Typography>
        <Collapse in={expanded} timeout="auto" unmountOnExit>
          <Typography>
            TypeScript stands in an unusual relationship to JavaScript.
            TypeScript offers all of JavaScript’s features, and an additional
            layer on top of these: TypeScript’s type system. For example,
            JavaScript provides language primitives like string and number, but
            it doesn’t check that you’ve consistently assigned these. TypeScript
            does.
          </Typography>
        </Collapse>
      </CardContent>
      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          mt: "1rem"
        }}
      >
        <CardActions>
          <Button onClick={expandedHandler} size="small">
            {expanded ? "Read Less" : "Read More"}
          </Button>
        </CardActions>

        <Box>
          <IconButton>
            <FavoriteBorderRounded />
          </IconButton>
          <IconButton>
            <ShareOutlined />
          </IconButton>
        </Box>
      </Box>
    </Card>
  );
};

export default function App() {
  return (
    <div className="App">
      <h1>Blog post card</h1>
      <BlogCard />
    </div>
  );
}

This is what the result of the blog card looks like when viewed on the browser;

Blog post card

Final Thought on Material UI Card Component

This article illustrated the significance of creating a beautiful and engaging user interface with Material UI. We learned ways to create different cards in Material UI depending on the complexity, and the differences between Card and Paper components in Material UI. We also dived into how to create simple cards, interactive cards, cards with primary actions, supplementary action cards, and cards for a simple blog page.

The flexibility and customization options offered by Material-UI make it a popular choice for building a modern, responsive, and engaging user interface.

Real World Examples with Material UI Card

There are a few examples of how the Material-UI Card component can be used to display relevant and actionable information, thereby enhancing the user experience. These examples include:

  1. Product Cards: Displaying product information, including images, description, price, and action buttons for completing the purchase of the product.

  2. Article Cards: Showing articles or blog posts with a preview of the content, including the title, author, publication date, and a brief summary, and interacting with an action button to show the rest of the content in the card or link to another page.

  3. User Profile Cards: Displaying user information, such as profile picture, name, bio, and social media links.

  4. Media Cards: Showing multimedia content like images, videos, or audio files with captions and additional interactive elements to control the visual or auditory detail of the media content within the card.

  5. Dashboard Cards: Displaying summarized data or statistics in a dashboard format, providing a visual representation of key metrics.

  6. Notification Cards: Showing notifications or alerts to users, with a brief message and actions like dismissing or acknowledging the notification.

  7. Event Cards: Displaying event details, including the event name, date, time, location, a brief description, and supplementary action elements that link to another page for more details about the event.

  8. Portfolio Cards: Showcasing portfolio items for artists, photographers, designers, or other creatives, including images, project descriptions, and links to more information.

  9. Testimonial Cards: Displaying customer testimonials or reviews with the customer’s name, profile picture, and feedback.

  10. Contact Cards: Providing contact information for individuals or businesses, including name, phone number, email address, and location.

More Examples

  1. Recipe Cards: Displaying cooking recipes with pictures, ingredients, steps, and cooking tips.

  2. Weather Cards: Displaying weather information for specific locations, including temperature, weather conditions, and forecasts.

  3. Place Cards: Displaying information about places of interest, including images, descriptions, addresses, and contact details.

  4. Quiz Cards: Creating interactive quizzes or surveys with questions and options presented in a card format.

  5. Error/Warning Cards: Displaying error messages or warnings to users in case of invalid inputs or unsuccessful actions.

  6. Gallery Cards: Showcasing a collection of images or multimedia items including features like image previews, titles, and descriptions, making them suitable for applications that display galleries or multimedia content.

  7. Poll Cards: Conducting polls or surveys with multiple options presented as cards, allowing users to select their choice.

References

For your reference, you can also check out the below YouTube video to learn more about the Material UI card component.

PureCode.ai can cater for your code development process. It will save you valuable time and effort on a project by providing customized, and ready-to-use components which will allow you to prioritize more important and thought-intensive tasks to speed up the development of your user interface.

Shadrach Abba

Shadrach Abba