From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Rendering cart item card

Rendering cart item card - Next.js Tutorial

From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Start my 1-month free trial Buy for my team

Rendering cart item card

“

In the cart items section, we will create the card on the cart item. So I will create a div. And we'll say class name wfull, bg-white, shadow-md and rounded-xl. Now inside the card, I will add the product image. So I will say image with class name w60, h60, object cover with rounded lxl and margin auto. Then the src will be prod img.jpg, alt will be product and width and height giving 0, sizes I will keep 100vw. Now let's save and check and the image is rendered inside the card. Now I will add the product name and the product type. So we will say dev class name flex flex call and we will create a division class name flex justify between we will put an h1 class name text to excel font medium. Here I will say product name and putting a division with custom class product type label and giving the text product type. Let's save and check and the data is rendered but it is below the image. I want to place them next to the image and for that I will use the grid system by adding styles to the…

Contents