How to Style a Card Container Component
Hi, and welcome back to the React Course. In the last guide, we threw in these styles right here, the header styles, which look super clean and very close to our design, if not exactly the same.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

Now in this guide, we are going to throw in the card styles. You see where the blue is? We're just going to reformat that or restyle it to look exactly like this or as close as we can get it.

large

Let's head over to our code, and let's think about this. We need this to be rounded a bit, and I think we may have added that. No, we haven't. Sorry for going everywhere. We need to be round it a bit, we need the background color to be white, and then we need a box-shadow that goes beneath it. This is pretty simple. We just have to close out our console, and then we need to go to our card here in our main.scss.

What I'd like to do is, let's see. We already have the box-shadow and the border-radius it actually looks like, but it looks like we have a background color on our inputs. That's what the card is looking like. Let's get rid of that let's just comment this out for now, and let's actually copy this and put it right here on the card itself.

main.scss

.card {
    min-height: 736px;
    max-height: 994px;
    width: 1240px;
    box-shadow: 0 4px 30px 0 rgba(0,0,0,.06);
    border-radius: 7px;

    display: grid;
    grid-template-rows: 1fr 50px;
    background-color: skyblue;

    &__inputs {
        // background-color: skyblue;
        display: grid;
        grid-template-rows: repeat(4, 1fr);
        grid-template-columns: repeat(4, 1fr);

        justify-items: center;
        align-items: center;
    }
}

Then let's go to the app in the browser. Now you'll see that background color is on the card itself, and since we already out at the border-radius you can see that now.

large

I'm going to go to Firefox, and I want to look at this in the element. Just to see where inputs are leading. I'm going to layout, and select the card and that's our card grid. Now for card inputs is a different grid, but the width is exactly the same as our card without the border-radius.

large

Basically, it's the exact same dimensions as our card except for without the border-radius, so that's why we weren't seeing the border-radius when the background color was on the inputs. OK, so now we just need to make it white, and then I think we should be good. Let's go over here, and let's say instead of skyblue let's say white.

main.scss

.card {
    min-height: 736px;
    max-height: 994px;
    width: 1240px;
    box-shadow: 0 4px 30px 0 rgba(0,0,0,.06);
    border-radius: 7px;

    display: grid;
    grid-template-rows: 1fr 50px;
    background-color: white;

    &__inputs {
        // background-color: skyblue;
        display: grid;
        grid-template-rows: repeat(4, 1fr);
        grid-template-columns: repeat(4, 1fr);

        justify-items: center;
        align-items: center;
    }
}

That looks pretty clean. I'm going to close out of the deal here, and you'll see that we have our box-shadow here which is looking pretty nice. That looks good to me. So what I'd like to do next is actually instead of going to the styles on the button, since the inputs are more visible and they're above our card here, let's do the inputs first.

We're going to style the input, put in the padding we need, put in the line we need, and make it look like what we see in the design. So we'll do the inputs in the next guide, and then after that, we will proceed to add in the styles for the Generate button, then the clear button, and then we'll be done.

Let's go ahead and commit our code. Let's say command + j, and in the terminal let's say git status, git add ., and I'm going to say git commit -m "styled the card component". Okay, let's hop on to the next video.

Resources