This product card HTML CSS tutorial shows you how to build a clean furniture product card with a category label, price, product name in a serif font, material info, and a circular dark cart button. The card uses rounded corners with overflow hidden so the product image stays clipped inside the card shape, and the DM Serif Display font on the product name gives it a premium feel against the DM Sans body text.
Final output:
Steps for Product Card HTML CSS #8:
1. First, link the DM Sans and DM Serif Display fonts from Google Fonts in the head.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=DM+Serif+Display:ital@0;1&display=swap" rel="stylesheet">Let’s start with a .product-card div. Inside it, add the product image and a .product-card-body div.
<div class="product-card">
<img src="orange-armchair.png" alt="">
<div class="product-card-body"></div>
</div>Then reset margins, set DM Sans as the font family, and style the card with a max-width, rounded corners, and a soft box-shadow. Set the overflow property to hidden so the image stays clipped inside the rounded corners.
* {
margin: 0;
box-sizing: border-box;
}
body {
font-family: "DM Sans", sans-serif;
}
.product-card {
max-width: 20rem;
border-radius: 1rem;
box-shadow: 0px 8px 40px 0px hsla(0, 0%, 0%, 0.09);
overflow: hidden;
}
.product-card img {
width: 100%;
}Output:
2. Fill in .product-card-body with a .product-card-body-top div containing the category and price, and a .product-card-body-bottom div containing the product name, material info, and a cart button.
<div class="product-card-body">
<div class="product-card-body-top">
<span>Furniture</span>
<span>$249.00 USD</span>
</div>
<div class="product-card-body-bottom">
<div>
<h3>Stalley Lounge</h3>
<span>Premium velvet · Oak frame</span>
</div>
<a href="#">
<!-- cart SVG icon -->
</a>
</div>
</div>Add some padding to .product-card-body. Then style .product-card-body-top with flexbox and the justify content property set to space-between so the category and price sit at opposite ends. Style the category with a small uppercase font in a muted gray, and the price with a slightly darker gray and a slightly larger font size so it reads as the more important piece of information.
.product-card .product-card-body {
padding: 1.25rem 1.5rem 1.5rem;
}
.product-card .product-card-body-top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
margin-bottom: .875rem;
}
.product-card .product-card-body-top span:first-child {
font-weight: 500;
font-size: .875rem;
line-height: 1.3;
letter-spacing: 0.88px;
text-transform: uppercase;
color: hsl(0, 0%, 67%);
}
.product-card .product-card-body-top span:last-child {
font-weight: 500;
font-size: 1rem;
line-height: 19.5px;
color: hsl(0, 0%, 33%);
}Output:
3. Now let’s style .product-card-body-bottom. Add a top border and some top padding to visually separate it from the category and price row above. Use flexbox with the justify content property set to space-between and the align items property set to center to push the product details and cart button to opposite ends.
Style the product name with the DM Serif Display font so it feels premium compared to the sans-serif text elsewhere on the card. And style the material info with a smaller muted color below the name.
.product-card .product-card-body-bottom {
padding-top: .875rem;
border-top: 1px solid hsl(0, 0%, 88%);
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.product-card .product-card-body-bottom h3 {
font-family: "DM Serif Display", serif;
font-size: 1.25rem;
line-height: 1.2;
color: hsl(0, 0%, 7%);
}
.product-card .product-card-body-bottom span {
margin-top: .375rem;
font-size: .875rem;
line-height: 1.5;
color: hsl(0, 0%, 63%);
}Style the cart button as a small dark circle with a box-shadow to lift it off the card. Use flexbox with the justify content and align items properties set to center to keep the cart icon centered inside it.
.product-card .product-card-body-bottom a {
width: 2.5rem;
height: 2.5rem;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
background-color: hsl(0, 0%, 7%);
border-radius: 50%;
box-shadow: 0px 4px 12px 0px hsla(0, 0%, 0%, 0.18);
}Output:
Final Output Code for HTML CSS Product Card #8:
HTML
<div class="product-card">
<img src="Orange-armchair.png" alt="">
<div class="product-card-body">
<div class="product-card-body-top">
<span>Furniture</span>
<span>$249.00 USD</span>
</div>
<div class="product-card-body-bottom">
<div>
<h3>Stalley Lounge</h3>
<span>Premium velvet · Oak frame</span>
</div>
<a href="#">
<svg width="18" height="18" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.5 2.5H3.3L5 9H11L12.5 4.5H4.8" stroke="white" stroke-width="1.4" stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M6.49844 12.8504C6.96788 12.8504 7.34844 12.4698 7.34844 12.0004C7.34844 11.5309 6.96788 11.1504 6.49844 11.1504C6.029 11.1504 5.64844 11.5309 5.64844 12.0004C5.64844 12.4698 6.029 12.8504 6.49844 12.8504Z"
fill="white" />
<path
d="M10.4984 12.8504C10.9679 12.8504 11.3484 12.4698 11.3484 12.0004C11.3484 11.5309 10.9679 11.1504 10.4984 11.1504C10.029 11.1504 9.64844 11.5309 9.64844 12.0004C9.64844 12.4698 10.029 12.8504 10.4984 12.8504Z"
fill="white" />
</svg>
</a>
</div>
</div>
</div>CSS
* {
margin: 0;
box-sizing: border-box;
}
body {
font-family: "DM Sans", sans-serif;
}
.product-card {
max-width: 20rem;
border-radius: 1rem;
box-shadow: 0px 8px 40px 0px hsla(0, 0%, 0%, 0.09);
overflow: hidden;
}
.product-card img {
width: 100%;
}
.product-card .product-card-body {
padding: 1.25rem 1.5rem 1.5rem;
}
.product-card .product-card-body-top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
margin-bottom: .875rem;
}
.product-card .product-card-body-top span:first-child {
font-weight: 500;
font-size: .875rem;
line-height: 1.3;
letter-spacing: 0.88px;
text-transform: uppercase;
color: hsl(0, 0%, 67%);
}
.product-card .product-card-body-top span:last-child {
font-weight: 500;
font-size: 1rem;
line-height: 19.5px;
color: hsl(0, 0%, 33%);
}
.product-card .product-card-body-bottom {
padding-top: .875rem;
border-top: 1px solid hsl(0, 0%, 88%);
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.product-card .product-card-body-bottom h3 {
font-family: "DM Serif Display", serif;
font-size: 1.25rem;
line-height: 1.2;
color: hsl(0, 0%, 7%);
}
.product-card .product-card-body-bottom span {
margin-top: .375rem;
font-size: .875rem;
line-height: 1.5;
color: hsl(0, 0%, 63%);
}
.product-card .product-card-body-bottom a {
width: 2.5rem;
height: 2.5rem;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
background-color: hsl(0, 0%, 7%);
border-radius: 50%;
box-shadow: 0px 4px 12px 0px hsla(0, 0%, 0%, 0.18);
}If you have any doubts or stuck somewhere, you can reach out through Coding Yaar's Discord server.
