Product Card

<div class="product-card">

  <div class="product-image">
    <span class="product-badge">NEW</span>
    <div class="product-placeholder">⌁</div>
  </div>

  <div class="product-content">

    <span class="product-category">Accessories</span>

    <h2>Wireless Headphones</h2>

    <div class="product-rating">
      <span>★★★★★</span>
      <small>(128)</small>
    </div>

    <p>
      Clean sound, lightweight design and comfortable
      everyday listening.
    </p>

    <div class="product-bottom">

      <div class="product-price">
        <strong>$79</strong>
        <span>$99</span>
      </div>

      <button class="product-cart-btn">
        Add to Cart
      </button>

    </div>

  </div>

</div>

.product-card{
  width:100%;
  max-width:360px;
  overflow:hidden;
  background:#08111f;
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  color:#ffffff;
  box-shadow:0 18px 45px rgba(0,0,0,.28);
  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.product-card:hover{
  transform:translateY(-7px);
  border-color:rgba(34,211,238,.45);
  box-shadow:
    0 26px 55px rgba(0,0,0,.35),
    0 0 28px rgba(34,211,238,.12);
}

.product-image{
  height:190px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(
      circle at 30% 30%,
      rgba(34,211,238,.18),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      #0b1728,
      #101b31
    );
}

.product-badge{
  position:absolute;
  top:16px;
  left:16px;
  padding:6px 10px;
  border-radius:999px;
  background:#22d3ee;
  color:#04101b;
  font-size:10px;
  font-weight:800;
  letter-spacing:1px;
}

.product-placeholder{
  width:90px;
  height:90px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:linear-gradient(
    135deg,
    #22d3ee,
    #8b5cf6
  );
  color:#ffffff;
  font-size:38px;
  box-shadow:0 0 35px rgba(139,92,246,.28);
}

.product-content{
  padding:24px;
}

.product-category{
  display:block;
  margin-bottom:8px;
  color:#22d3ee;
  font-size:11px;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
}

.product-card h2{
  margin:0 0 10px;
  color:#ffffff;
  font-size:22px;
}

.product-rating{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
}

.product-rating span{
  color:#fbbf24;
  font-size:13px;
  letter-spacing:1px;
}

.product-rating small{
  color:#7f93ad;
  font-size:11px;
}

.product-card p{
  margin:0 0 22px;
  color:#9fb3cc;
  font-size:14px;
  line-height:1.6;
}

.product-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.product-price{
  display:flex;
  align-items:center;
  gap:8px;
}

.product-price strong{
  color:#ffffff;
  font-size:22px;
}

.product-price span{
  color:#6f829b;
  font-size:13px;
  text-decoration:line-through;
}

.product-cart-btn{
  padding:10px 14px;
  border:0;
  border-radius:9px;
  background:linear-gradient(
    90deg,
    #22d3ee,
    #8b5cf6
  );
  color:#ffffff;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.product-cart-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(139,92,246,.25);
}

How This Product Card Works

The Product Card combines product information, pricing, a rating, and an Add to Cart button inside a compact layout. The published component uses HTML and CSS only, so the hover effects are handled without JavaScript.

The main .product-card container uses width: 100% with max-width: 360px. This lets the card shrink inside smaller layouts while keeping its maximum width controlled. The dark #08111f background is paired with a subtle semi-transparent border, 20px rounded corners, and a soft shadow. overflow: hidden keeps the visual header neatly clipped to the card’s rounded edges.

Hovering over the card applies transform: translateY(-7px), which moves the whole component slightly upward. The border also changes to a cyan tint, while the shadow becomes larger and gains a subtle cyan glow. These properties use .3s ease transitions, so the changes happen smoothly. For more detail on this behavior, see the MDN CSS transitions documentation.

The .product-image section is 190px tall and uses Flexbox to center its content. Instead of loading a real product image, the published component creates the visual area with a radial cyan highlight and a dark linear gradient. A circular .product-placeholder sits in the center. It measures 90px by 90px, uses a cyan-to-purple gradient, and displays a decorative ⌁ character at 38px.

A NEW badge appears in the upper-left corner of the image section. The .product-badge is positioned absolutely with top: 16px and left: 16px. Its 999px border radius creates the pill shape, while the cyan background and dark text make it easy to distinguish from the header.

The lower .product-content area uses 24px padding. It begins with an uppercase Accessories category label in cyan, followed by the Wireless Headphones title at 22px. The rating row uses Flexbox to keep the five yellow stars and (128) review count aligned horizontally.

The product description uses a muted #9fb3cc color, a 14px font size, and 1.6 line height. Below it, .product-bottom uses justify-content: space-between to place the pricing information on one side and the Add to Cart button on the other.

The current price is displayed at 22px, while the older $99 price is smaller, muted, and crossed out with text-decoration: line-through. This makes the $79 price visually dominant.

The Add to Cart button uses a cyan-to-purple gradient with a 9px border radius. Its own hover state moves it upward by 2px and adds a purple-tinted shadow. That button transition runs slightly faster at .2s ease.

Customizing This Product Card

The existing structure includes several values and text fields that can be adjusted to fit a different product or store design.

• Change max-width: 360px to make the card wider or narrower.
• Replace the NEW badge text and Accessories category with your own product information.
• Change Wireless Headphones, the description, rating count, $79 current price, and $99 previous price.
• Adjust the 190px product visual height or the 90px circular placeholder dimensions.
• Replace the cyan #22d3ee and purple #8b5cf6 colors used throughout the component.
• Change the 20px card radius or 9px button radius to match your interface style.
• Increase or reduce translateY(-7px) to control the card hover movement.
• Adjust the .3s card transition or .2s button transition to change the interaction speed.

Where to Use This Product Card

This component works well wherever a product needs to be summarized in a compact space with pricing and a clear purchase action.

• E-commerce product grids.
• Featured product sections on homepages.
• Electronics and accessories stores.
• Product recommendation areas.
• Sale and promotional sections.
• Marketplace listing pages.
• Landing pages featuring a specific item.

Because the component does not include JavaScript, the Add to Cart button is only a styled interface element in the published version. Real cart behavior would need to be connected separately. For a product card with more interactive visual behavior, the Interactive Matcha Product Switcher Card is a related CodeRipple component worth exploring.

Frequently Asked Questions

Does the Product Card use JavaScript?

No. The published component contains HTML and CSS only. Its card movement and button hover effect are controlled entirely through CSS selectors and transitions.

Does the Add to Cart button actually add a product to a cart?

No. The button is present as part of the interface, but there is no JavaScript attached to it. The published component does not contain cart logic or click handling.

How does the card hover effect work?

The .product-card:hover selector applies translateY(-7px), changes the border color, and increases the box shadow. These properties transition over .3s ease for a smooth response.

Does the card contain a real product image?

No. The current version uses a CSS gradient background and a circular .product-placeholder containing the ⌁ character. There is no <img> element in the published markup.

The Product Card provides a clean structure for product previews while keeping the implementation lightweight, with CSS handling both the card hover effect and button interaction.