How to Create a Card in Material UI ?
To create a card in Material UI, you can use the ‘Card’ component along with other components like ‘CardHeader’, ‘CardContent’, and ‘CardActions’ to structure content. Customize it with styles and props for a sleek, responsive design that fits your application seamlessly.
Installation
npm install @mui/material @emotion/react @emotion/styled
The below table illustrates the terms alongside their descriptions.
Term | Description |
---|---|
@mui/material | Package containing Material UI components. |
@emotion/react | Required for styling components with Emotion. |
@emotion/styled | Required for styling components with Emotion. |
Features
- Versatile Card Components: Material UI offers a variety of card components with different layouts and styles, suitable for various content presentations.
- Customization Options: Cards can be easily customized with props such as elevation, background color, and border-radius to match your design requirements.
- Content Structure: Cards support flexible content structures, allowing you to include text, images, buttons, and other elements within the card.
- Interactive Elements: Incorporate interactive elements like buttons or links within the card to enable user actions or navigation.
Example
import React from 'react';
import { Card, CardContent, Typography, Button } from '@mui/material';
function MyCard() {
return (
<Card elevation={3}>
<CardContent>
<Typography variant="h5" component="div">
Card Title
</Typography>
<Typography variant="body2">
This is a sample card content. You can add any text or components here.
</Typography>
<Button variant="contained" color="primary">
Learn More
</Button>
</CardContent>
</Card>
);
}
export default MyCard;
Contact Us