create a blog section in react mui 5

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>
  );
}