Open In App

React MUI CardHeader API

Improve
Improve
Like Article
Like
Save
Share
Report

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.

The CardHeader is a component API provided by React MUI which allows us to customize the header for the Card Component. The card is the top-level component and the Card Header is written inside the Card component.

 Importing the CardHeader component, we can use the following statement:

import { CardHeader } from @mui/material;

Syntax:

<CardHeader 
      title = "some_title"
      subheader = "some_subheader"
/>

Props:

  • title: used to provide a certain title to the header. For example, title = “Sports”.
  • subheader: used to provide a certain subheader to the header. For example, subheader = “Cricket”.
  • avatar: used to provide a displayed avatar. It is the circular logo you see at the top right-hand of your google login.
  • action: to display an action in the header. For example, you see a dropdown list when you click on the menu.
  • classes: to change the CSS styles applied to the component.
  • component: The component used as the parent node. You can use HTML in strings or an actual component.
  • disableTypograhpy: to disable the text from being wrapped inside the Typography component. It is false by default.
  • subheaderTypographyProps: the props used in the Typography of the subheader, will be passed on to the subheader component (disableTypograhpy should be false).
  • sx: to change system CSS styles or add new CSS styles.
  • titleTypograhpyProps: the props used in the Typography of the title, will be passed on to the title component (disableTypograhpy should be false).

CSS: 

  • root: MuiCardHeader-root. This class is used to apply a style to the parent element.
  • avatar: MuiCardHeader-avatar. This class is used to apply a style to the avatar prop.
  • action: MuiCardHeader-action. This class is used to apply a style to the action prop.
  • content: MuiCardHeader-content. This class is used to apply a style to the content of the card.
  • title: MuiCardHeader-title. This class is used to apply a style to the title prop.
  • subheader: MuiCardHeader-subheader. This class is used to apply a style to the subheader prop.

Creating React Application:

Step 1: Create a folder called react-card-header. Open your command-prompt/shell, navigate to that folder and use the following command –

npx create-react-app .

Step 2: This will install all the necessary React JS starter files. Once the installation is complete, we need to install the Material UI. For the same, use the command –

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

This will install react material ui for us. Now, that we have all the necessary starter files, let us start.

Project Structure: Inside your src folder, create a components folder. Inside this components folder, create two files namely SportsCard.js and LinkedinPost.js. Finally, your folder structure will look like this –

Folder Structure

Example: Let us start with our first example. In this example, we will create a Sportscard with a top menu of cricket, football, and badminton. It is a static card. Inside your components folder, open SportsCard.js. In this example, we displaying a card with a sports menu.

SportsCard.js

Javascript




import React from 'react'
import { Card, CardHeader, CardContent, Typography, Button } from '@mui/material'
  
const SportsCard = () => {
    return (
        <div className="mui-card">
            <Card>
                <CardHeader
                    title="Sports"
                    subheader="Select a sport from the menu"
                    action={
                        <>
                            <Button>Cricket</Button>
                            <Button>Football</Button>
                            <Button>Badminton</Button>
                        </>
                    }
                />
                <hr />
                <CardContent>
                    <Typography variant="body1">
                        Lorem, ipsum dolor sit amet consectetur 
                        adipisicing elit.Nostrum odit sint adipisci ipsum. 
                        Rem assumenda corporis iste perferendis, 
                        aperiam cum libero magni tempore optio quas repellendus
                        molestiae, est quibusdam at voluptatum sint.
                    </Typography>
                </CardContent>
            </Card>
        </div>
    )
}
  
export default SportsCard


We have App.css inside the src folder, where, I have added some css to center the card and make it attractive. Below is the code for the same.

App.css

CSS




.mui-card {
    max-width: 40%;
    margin: auto;
    margin-top: 35px;
}
  
h1 {
    text-align: center;
    color: green;
}
  
h2 {
    text-align: center;
}
  
hr {
    width: 95%;
    margin: auto;
    color: rgb(116, 113, 113);
}


In App.js, we are simply rendering the SportsCard.js component.

App.js

Javascript




import './App.css';
import SportsCard from './components/SportsCard';
  
function App() {
    return (
        <>
            <SportsCard />
        </>
    );
}
  
export default App;


Open your command prompt and type in the command:

npm start

Output:

React MUI CardHeader API

React MUI CardHeader API

Example 2: Let’s move to our second example. In this example, we will create a LinkedIn post with a working-like button. Inside your components folder, create a file called LinkedinPost.js. In this example, we are creating a LinkedIn post, with a working like button.

LinkedinPost.js

Javascript




import React, { useState } from 'react'
import { Card, CardHeader, CardContent, Avatar, Typography, IconButton } 
from '@mui/material'
import ThumbUpIcon from '@mui/icons-material/ThumbUp';
  
  
const LinkedinPost = () => {
    const [color, setColor] = useState("default");
  
    const handleColor = () => {
        if (color === "default") {
            setColor("primary");
        }
        else if (color === "primary") {
            setColor("default");
        }
    }
  
    return (
        <div className="mui-card">
            <Card>
                <CardHeader
                    avatar={
                        <Avatar>P</Avatar>
                    }
                    title="Pranav Bapat"
                    subheader="Content Writer at GeeksForGeeks"
                    action={
                        <IconButton onClick={handleColor}>
                            <ThumbUpIcon color={color} />
                        </IconButton>
                    }
                />
                <CardContent>
                    <Typography variant="body2">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
                        Nisi, reiciendis sapiente. Ratione nobis aliquid magni 
                        consequuntur mollitia iure nesciunt nam perspiciatis nulla 
                        molestias sint ipsam sed, nihil doloribus dolore facere
                        architecto 
                        minima!
                    </Typography>
                </CardContent>
            </Card>
        </div>
    )
}
  
export default LinkedinPost


We have App.css inside the src folder, where, I have added some CSS to center the card and make it attractive. Below is the code for the same.

App.css

CSS




.mui-card {
    max-width: 40%;
    margin: auto;
    margin-top: 35px;
}
  
h1 {
    text-align: center;
    color: green;
}
  
h2 {
    text-align: center;
}
  
hr {
    width: 95%;
    margin: auto;
    color: rgb(116, 113, 113);
}


In App.js, we are simply rendering the SportsCard.js component.

App.js

Javascript




import './App.css';
import LinkedinPost from './components/LinkedinPost';
  
function App() {
    return (
        <>
            <LinkedinPost />
        </>
    );
}
  
export default App;


Now open your command-prompt/shell once more and type in the following command:

npm start

You will see the following output in your browser:

React MUI CardHeader API

React MUI CardHeader API

Reference:  https://mui.com/material-ui/api/card-header/



Last Updated : 10 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads