Alt Text Welcome to part-7 of the series. Let’s start from where we left. We will update our PostList.js to use the props which were passed to it.

PostList.jsPostList.js

We also need to add the css for it as postlist.module.css in the css folder. Add the below styles in it as of now.

postlist.module.csspostlist.module.css

Now, our home page will show three PostCard components as we have three posts currently.

PostCardPostCard

Next, we will work on the PostCard component to show nice styles for each post.

Update the PostCard.js file as below. We are destructuring the props which we had received from the PostList component and using it to get the different parts.

PostCard.jsPostCard.js

Next, create a file postcard.module.css inside the css folder and add the below styles in it.

    .card {
        margin-bottom: 2rem;
        background: var(--mainWhite);
        padding: 1rem;
        text-align: center;
    }
    .info {
        padding: 1rem 0;
    }
    .info h2 {
        font-size: 30px;
        text-transform: capitalize;
        margin-bottom: 10px;
    }
    .info h6 {
        color: var(--darkGrey);
        text-transform: capitalize;
    }
    .info p {
        padding: 20px 0 30px 0;
        text-align: left;
    }
    .link {
        border: 1px solid var(--mainBlack);
        padding: 4px 8px;
        display: inline-block;
        color: var(--mainBlack);
        text-decoration: none;
        text-transform: capitalize;
        transition: all 0.3s ease-in-out;
    }
    .link:hover {
        background: var(--mainBlack);
        color: var(--mainWhite);
    }
    [@media](http://twitter.com/media) screen and (min-width: 776px) {
        .card {
            display: grid;
            grid-template-columns: 350px 1fr;
        }
        .info {
            display: flex;
            align-items: center;
            padding: 0 1.5rem;
        }
        .image > div {
            height: 250px;
        }
    }

Next, i will also remove those borders from home.module.css file, as they were only for reference

home.module.csshome.module.css

This will display our home page as below in the browser on large screens.

large screenslarge screens

It will look like below in small screens.

Small screenSmall screen

This completes part-7 of the series.

You can find the code for the same in this github repo.

This post is also available on DEV.