React MUI Card Surface

React MUI is a UI library that provides fully-loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google.

In this article, we’ll be discussing React MUI Card Surface. A card component contains content and actions about a single subject. A card is a surface that displays content and actions on a single topic.

MUI Card Surface Variants: The card surface has a default version. Other variants are given below.

• Basic Card: This is the default card in react mui.
  • Outlined Card: In this variant, an outlined card will be rendered.
• Complex Interaction: In this variant, the card is expandable.
• Media: This card consists of images and links.
• Primary action: This variant allows the users to interact with the whole card component and trigger the primary or main action.
• UI Control: This card consists of icons, text, UI controls, etc.
• API: The APIs of the Card component are listed below:
  • <Card />
  • <CardActionArea />
  • <CardActions />
  • <CardContent />
  • <CardHeader />
  • <CardMedia />
  • <Collapse />
  • <Paper />

Syntax:

<Card>
    ...
<Card>

Step 1: To create a react app, you need to install react modules through the npm command.

npm create-react-app project name

Step 2: After creating your react project, move into the folder to perform different operations.

cd project name

Step 3: After creating the ReactJS application, Install the required module using the following command:

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

Project Structure:

Step to Run Application:

npm start

Example 1: Below example demonstrates the React MUI card surface component.

Javascript

import React from "react";
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";

function App() {
    return (
        <div>
            <div style={{
                textAlign: "center",
                color: "green"
            }}>
                <h1>GeeksforGeeks</h1>
                <h2>React MUI Card Surface</h2>
            </div>

            <center>
                <Card sx={{ width: 300 }}>
                    <CardContent>
                        <Typography
                            sx=
                            {{
                                fontSize: 24,
                                fontWeight: 'bold',
                                color: 'green'
                            }}
                            color="text.secondary"
                        >
                            GeeksforGeeks
                        </Typography>
                        <Typography>
                            No.1 platform for coding in world.
                        </Typography>
                    </CardContent>
                    <CardActions>
                        <Button size="small" sx=
                            {{
                                backgroundColor: 'green',
                                color: "white"
                            }}>
                            Visit
                        </Button>
                    </CardActions>
                </Card>
            </center>
        </div>
    );
}

export default App;

Output:

Example 2: Below example demonstrates the React MUI card surface component with media and primary action. In the given example, a card consists of an image and also allows users to interact with the entirety of its surface to trigger its main action, be it an expansion, a link to another screen, or some other behavior.

Javascript

import React from "react";
import Card from "@mui/material/Card";
import CardActions from "@mui/material/CardActions";
import CardContent from "@mui/material/CardContent";
import CardActionArea from "@mui/material/CardActionArea";
import CardMedia from "@mui/material/CardMedia";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";

function App() {
    return (
        <div>
            <div style={{ textAlign: "center", color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>React MUI Card Surface</h2>
            </div>

            <center>
                <Card sx={{ maxWidth: 345 }}>
                    <CardActionArea >
                        <CardMedia
                            component="img"
                            height="140"
                            image=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png"
                            alt="gfg"
                        />
                        <CardContent>
                            <Typography gutterBottom variant="h5"
                                component="div">
                                GeeksforGeeks
                            </Typography>
                            <Typography variant="body2"
                                color="text.secondary">
                                A Computer Science portal for geeks.
                                It contains well written, well
                                thought and well explained computer
                                science and programming articles.
                            </Typography>
                        </CardContent>
                    </CardActionArea>
                    <CardActions>
                        <Button size="medium" color="success">
                            Visit
                        </Button>
                    </CardActions>
                </Card>
            </center>
        </div>
    );
}

export default App;

Output:

Reference: https://mui.com/material-ui/react-card/