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>
);
}
react mui 5 blog section
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>
);
}
mui 5 blog section with image
