How To Create Product Lightning Card UI Design Using LWC?
.png "How To Create Product Lightning Card UI Design Using LWC?")
In this blog, you will learn how you can create product lightning card UI design in lightning web component.
Sample Code
LWC.html
<template>
<lightning-card>
<div class="card">
<div class="imgBox">
<img src="https://o.remove.bg/downloads/38e8d5e4-cb1e-4ce3-80f3-958c1bbe62b5/acg-air-zoom-gaiadome-gore-tex-shoes-2t1Qbv-removebg-preview.png"/>
</div>
<div class="details">
<h3>Nike ACG Air Zoom </h3>
<h4>Product Details</h4>
<p>Warning: this boot will take you places. Forged from heavy-duty materials, they include GORE-TEX technology and large lugs finely tuned to steep mountain slopes.Put simply, they're specifically designed for whatever you want to do out there—hike, backpack or simply explore.</p>
<ul class="size">
<li>36</li>
<li>38</li>
<li>40</li>
<li>42</li>
<li>44</li>
</ul>
<div class="group">
<h2><sup>₹</sup>20,000<small>.00</small></h2>
<a href="#">Buy Now</a>
</div>
</div>
</div>
</lightning-card>
</template>
LWC.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>55.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__HomePage</target>
<target>lightning__AppPage</target>
<target>lightning__Tab</target>
</targets>
</LightningComponentBundle>
LWC.css
*{
margin:0;
padding:0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(#4ba9e9,#4ba9e9 50%,#fff 50%, #fff 100%);
}
.card{
background: linear-gradient(#4ba9e9,#4ba9e9 50%,#fff 50%, #fff 100%);
position: relative;
width: 300px;
height: 380px;
background: #000;
box-shadow: 0 15px 45px rgba(0, 0, 0, 0.1);
display: flex;
overflow: hidden;
transition: 0.5s ease-in-out;
}
.card:hover{
width: 600px;
}
.card .imgBox{
position: relative;
min-width: 300px;
height: 100%;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
z-index: 2;
}
.card .imgBox img{
min-width: 25px;
transition: 0.5s ease-in-out;
}
.card:hover .imgBox img{
transform: rotate(-35deg) translateX(-20px);
}
.card .details{
position: relative;
left: 0;
min-width: 300px;
height: 100%;
background: #4ba9e9;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
flex-direction: column;
z-index: 1;
transition: 0.5s ease-in-out;
}
/* .card:hover .details{
left: 300px;
} */
.card .details::before{
content: '';
position: absolute;
width: 0;
height: 0;
left: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #fff;
}
.card .details h3{
color: #fff;
text-transform: uppercase;
font-weight: 600;
font-size: 1.5em;
line-height: 1em;
}
.card .details h4{
color: #fff;
text-transform: uppercase;
font-weight: 600;
font-size: 0.9em;
line-height: 1em;
margin-top: 20px;
margin-bottom: 10px;
}
.card .details p{
color: #fff;
opacity: 0.85;
font-size: 0.8em;
margin-top: 10px;
margin-bottom: 20px;
}
.card .details .size{
display: flex;
gap: 10px;
}
.card .details .size li{
list-style: none;
color: #fff;
font-size: 0.9em;
width: 40px;
height: 40px;
border: 2px solid #fff;
display: flex;
justify-content: center;
align-items: center;
font-weight: 500;
}
.card .details .size li:hover{
color: #4ba9e9;
background: #fff;
opacity: 1;
}
.card .details .group{
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
}
.card .details .group h2{
color: #fff;
font-weight: 600;
font-size: 2em;
padding-right: 25px;
}
.card .details .group h2 sup{
font-weight: 300;
}
.card .details .group h2 small{
font-size: 0.75em;
}
.card .details .group a{
display: inline-flex;
padding: 10px 25px;
background: #fff;
text-decoration: none;
text-transform: uppercase;
font-weight: 500;
color:#4ba9e9;
padding-left: 25px;
}
GitHub Link : Click Here
Demo
Posted By :
Date :
Date :
Follow Us