In this tutorial, we will create blog section in react with material ui (mui 5). We will see blogs post card, blog section with image example with react material UI 5.
Install & Setup Vite + React + Typescript + MUI 5
React Material UI 5 Blog Section Example
1. Create react mui 5 simple blog section using react-mui Container, Grid, Box, Avatar, Typography, Button, component and ArrowForward mui icon.
import {
Container,
Grid,
Box,
Avatar,
Typography,
Button,
} from "@mui/material";
import { ArrowForward } from "@mui/icons-material";
const blogData = [
{
title: "React with MUI 5 Blog 1 Section",
description:
"It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using.",
author: "Jimmy",
authorImg: "https://via.placeholder.com/150",
},
{
title: "React with MUI 5 Blog 2 Section",
description:
"It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using.",
author: "Jhon",
authorImg: "https://via.placeholder.com/150",
},
];
export default function Blog() {
return (
<Container sx={{ py: { xs: 8, lg: 16 } }}>
<Box
sx={{
mx: "auto",
mb: { lg: 16, sm: 8 },
maxWidth: "sm",
textAlign: "center",
}}
>
<Typography
variant="h2"
component="h2"
mb={4}
sx={{ fontWeight: "extrabold" }}
>
Our Blog
</Typography>
<Typography variant="body1" color="text.secondary">
We use an agile approach to test assumptions and connect with the
needs of your audience early and often.
</Typography>
</Box>
<Grid container spacing={8}>
{blogData.map((data, i) => (
<Grid item lg={6} key={i}>
<Box
sx={{
p: 6,
border: 1,
borderColor: "grey.200",
borderRadius: 1,
boxShadow: 1,
}}
>
<Typography
variant="h4"
component="h2"
mb={2}
sx={{ fontWeight: "bold" }}
>
{data.title}
</Typography>
<Typography variant="body2" color="text.secondary" mb={5}>
{data.description}
</Typography>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}}
>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Avatar
src={data.authorImg}
sx={{ width: 28, height: 28, mr: 1 }}
/>
<Typography variant="subtitle1">{data.author}</Typography>
</Box>
<Button endIcon={<ArrowForward />} color="primary" size="small">
Read more
</Button>
</Box>
</Box>
</Grid>
))}
</Grid>
</Container>
);
}
2. react mui 5 blog section with image.
import {
Avatar,
Box,
Card,
CardContent,
CardMedia,
Container,
Grid,
Typography,
} from "@mui/material";
const blogPosts = [
{
title: "Title 1",
description: "Description for blog post 1",
author: "Author 1",
imageUrl: "https://via.placeholder.com/150",
avatarUrl: "https://via.placeholder.com/150",
date: "14 days ago",
},
{
title: "Title 2",
description: "Description for blog post 2",
author: "Author 2",
imageUrl: "https://via.placeholder.com/150",
avatarUrl: "https://via.placeholder.com/150",
date: "14 days ago",
},
];
export default function BlogSection() {
return (
<Container>
<Box sx={{ my: 5, textAlign: "center" }}>
<Typography variant="h4" component="h2" gutterBottom>
Our Blog
</Typography>
<Typography variant="subtitle1" color="text.secondary">
We share our best ideas in our blog
</Typography>
</Box>
<Grid container spacing={4}>
{blogPosts.map((post, index) => (
<Grid item xs={12} md={6} key={index}>
<Card sx={{ display: "flex" }}>
<CardMedia
component="img"
sx={{ width: 151 }}
image={post.imageUrl}
alt={post.title}
/>
<Box sx={{ display: "flex", flexDirection: "column" }}>
<CardContent sx={{ flex: "1 0 auto" }}>
<Typography component="h5" variant="h5">
{post.title}
</Typography>
<Typography variant="subtitle1" color="text.secondary">
{post.description}
</Typography>
</CardContent>
<Box sx={{ display: "flex", alignItems: "center", p: 1 }}>
<Avatar alt={post.author} src={post.avatarUrl} />
<Box sx={{ ml: 1 }}>
<Typography variant="subtitle2">{post.author}</Typography>
<Typography variant="subtitle2" color="text.secondary">
{post.date}
</Typography>
</Box>
</Box>
</Box>
</Card>
</Grid>
))}
</Grid>
</Container>
);
}
Related Posts
create a chat ui in react with mui 5
create a footer in react mui 5
create a responsive navbar in react with mui 5
react mui 5 search bar example
react mui 5 login page example
react mui 5 image list example
react mui 5 toggle switch example
react mui 5 registration form example
react mui 5 contact us page example
react mui 5 loading skeleton example
react mui 5 gradient button example
react mui 5 social media icons example
react mui 5 snackbar toast notification example
how to use autocomplete react mui 5
dynamically multiple input fields in react mui 5
how to use dropdown menu in react mui 5
how to use background image in react mui 5
how to use pricing table in react mui 5
how to use dark mode in react mui 5
how to use file upload in react mui 5
how to use sticky navbar in react mui 5
how to use box shadow in react mui 5
how to use multi step form in react mui 5
how to use loading button in react mui 5