Gwecode.
Cards

Product Card

A shop-style card with an image area, title, description, price and an add to cart button.

live preview 
<div class="pcard-card">
  <div class="pcard-media">
    <svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#3b82f6" stroke-width="1.5">
      <rect x="3" y="3" width="18" height="18" rx="3"></rect>
      <circle cx="9" cy="9" r="2"></circle>
      <path d="M21 15l-5-5-4 4-3-3-4 4"></path>
    </svg>
  </div>
  <div class="pcard-body">
    <h3 class="pcard-title">Wireless Headphones</h3>
    <p class="pcard-desc">Noise cancelling with a 30 hour battery and plush ear cushions.</p>
    <div class="pcard-footer">
      <span class="pcard-price">$89.00</span>
      <button class="pcard-btn">Add to cart</button>
    </div>
  </div>
</div>
.pcard-card {
  box-sizing: border-box;
  width: 280px;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  font-family: system-ui, -apple-system, sans-serif;
}
.pcard-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 28px rgba(17, 24, 39, 0.12);
}
.pcard-media {
  height: 140px;
  background-color: #eff6ff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pcard-body {
  padding: 18px 20px 20px;
}
.pcard-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}
.pcard-desc {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.5;
  color: #6b7280;
}
.pcard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pcard-price {
  font-size: 17px;
  font-weight: 700;
  color: #111827;
}
.pcard-btn {
  background-color: #3b82f6;
  color: #ffffff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.pcard-btn:hover {
  background-color: #2f6fe0;
}