create a blog section in react mui 5

create a blog section in react mui 5

updated 09/08/23 By frontendshape

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

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

mui 5 blog section with image

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 slider example

react mui 5 sidebar example

react mui 5 404 page example

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