Guide to Creating Cards with Material UI Card

December 24, 2022
Amazing Agu
React.js

The Fastest Way to Build React UI

Convert Figma designs to production-ready React.js code. Build stunning apps and landing pages faster than your peers and competitors.

Introduction

Just like physical cards, cards in User Interface (UI) designs contain information about a particular subject. It is an organized way of presenting content in a web application.

Note that we can convert our UI designs to code from Figma using the CopyCat Figma Plugin. It is a very useful tool and saves a lot of time.

This article is a guide on how to create cards in Material UI. Let us jump in!

What is Material UI Card?

Material UI has a Card component. It can contain a header (card title), a body, a background image, and action buttons.

What is the difference between Card and Paper in Material UI?

Material UI which is a component library in React has many components. A component that works similarly to a Card is Paper. They can be mistaken for each other but below are the differences between them.

CardPaper
Named after physical cardsNamed after physical sheets of paper
Extends the Paper componentDoesn’t extend any component, instead serves as a base for the Card component
Used with its child components (e.g CardActions, CardMedia, etc)Doesn’t have any specific child components
Has a set shadow or elevationDoesn’t have a set shadow or elevation

In other words, Paper is the base from which the Card component is built. This also shows that Papers are more dynamic than Cards. This article focuses on Cards.

Getting Started

This article assumes the reader has a basic knowledge of React JS as those are not covered here. Here is a quick guide to setting up React JS using Vite.

Install and Setup Material UI

We install Material UI by running the following command in the terminal.

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

Building a Basic Card Component

To build a basic card component, we need to import the Card component from the Material UI along with other children’s card elements we need. Here’s an example below:

import { Avatar, Card, CardHeader, CardContent, Typography } from '@mui/material'

function CardDemo() {
    return (
        <Card sx={{ maxWidth: '25rem', margin: '3rem auto'}}>
            <CardHeader
                avatar={<Avatar>C</Avatar>}
                title="Simple Card"
                subheader="Created 12/10/22"
            />
            <CardContent>
                <Typography paragraph>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi culpa voluptatibus blanditiis nostrum eum id voluptatem nisi aut quam deserunt!</Typography>
            </CardContent>
        </Card>
    )
}

export default CardDemo

The code above will display the following on the screen:

https://images.surferseo.art/a5263a23-a120-4a28-b8a9-444b4051ff14.png

How to add a background image to Material UI Card

Material UI Cards can contain some media apart from text such as an image, a video, an iframe and so much more. All these are possible using a component called CardMedia.

To add a background image, we use an image as our card media. The example code below illustrates it better.

import { Card, CardContent, CardMedia, Typography } from '@mui/material'

function CardDemo() {
    return (
        <Card sx={{ maxWidth: '25rem', margin: '3rem auto'}}>
            <CardMedia
                component="img"
                height="200"
                src="<https://loremflickr.com/400/200/tokyo>"
                alt="A Random picture found with the keyword Tokyo"
            />
            <CardContent>
                <Typography paragraph>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi culpa voluptatibus blanditiis nostrum eum id voluptatem nisi aut quam deserunt!</Typography>
            </CardContent>
        </Card>
    )
}

export default CardDemo

The above component will produce the below result:

CardMedia Component

Apart from these, there are many other functionalities we can add to a Material UI Card for it to display information in an elegant way.

Conclusion

In this article, we’ve learned about creating cards in Material UI and what their purpose is. We also learned the difference between Card and Paper components in Material UI.

Finally, don’t forget to check out the CopyCat Figma Plugin if you’re looking for how to increase your productivity in front development.

Resources

Here are further resources on the topic:

Some interesting reads from our blogs:

Related Articles

  • React.js

    Getting Started with React Select: A Comprehensive Guide

    Introduction to React Select In regular HTML, you have the select tag that allows you to create a dropdown list or a menu of options. In modern web applications or websites today, using the regular HTML select element itself puts…

    December 24, 2022
  • React.js

    How to Work with Material UI Data Grid Component in React

    Introduction Material UI is a popular user interface package for React. It offers a number of components that follow Google's material design principles. The Material UI data grid, which is used to display and work with tabular data, is one…

    December 24, 2022

Convert Figma To React

Convert Figma designs to production-ready React.js code. Build stunning apps and landing pages faster than your peers and competitors.

Convert Design to Code