product card badge sale discount new product card badge sale discount new promotion strikethrough product card with sale badge ecommerce card with discount label
Product Card With Badge
Fetch pattern JSON:
curl https://webspire.de/patterns/product-card/with-badge.json with-badge.html
<div class="ws-product-card grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
<div class="overflow-hidden rounded-xl border border-[var(--ws-product-card-border)] bg-[var(--ws-product-card-bg)] shadow-sm transition hover:shadow-md">
<div class="relative aspect-[4/3] bg-gray-100">
<span class="absolute left-3 top-3 rounded-full bg-emerald-500 px-2.5 py-0.5 text-xs font-semibold text-white">New</span>
</div>
<div class="p-4">
<h3 class="font-semibold text-[var(--ws-product-card-text)]">Wireless Headphones</h3>
<p class="mt-1 text-sm text-[var(--ws-product-card-text-soft)]">Premium noise-cancelling over-ear headphones with 30h battery.</p>
<div class="mt-3 flex items-center justify-between">
<span class="text-lg font-bold text-[var(--ws-product-card-text)]">$149.99</span>
<button type="button" class="rounded-lg bg-[var(--ws-product-card-action-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-product-card-action-text)] transition hover:opacity-90">Add to Cart</button>
</div>
</div>
</div>
<div class="overflow-hidden rounded-xl border border-[var(--ws-product-card-border)] bg-[var(--ws-product-card-bg)] shadow-sm transition hover:shadow-md">
<div class="relative aspect-[4/3] bg-gray-100">
<span class="absolute left-3 top-3 rounded-full bg-rose-500 px-2.5 py-0.5 text-xs font-semibold text-white">Sale -20%</span>
</div>
<div class="p-4">
<h3 class="font-semibold text-[var(--ws-product-card-text)]">Mechanical Keyboard</h3>
<p class="mt-1 text-sm text-[var(--ws-product-card-text-soft)]">Compact 75% layout with hot-swappable switches and RGB backlight.</p>
<div class="mt-3 flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="text-sm text-[var(--ws-product-card-text-soft)] line-through">$89.99</span>
<span class="text-lg font-bold text-rose-600">$71.99</span>
</div>
<button type="button" class="rounded-lg bg-[var(--ws-product-card-action-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-product-card-action-text)] transition hover:opacity-90">Add to Cart</button>
</div>
</div>
</div>
<div class="overflow-hidden rounded-xl border border-[var(--ws-product-card-border)] bg-[var(--ws-product-card-bg)] shadow-sm transition hover:shadow-md">
<div class="relative aspect-[4/3] bg-gray-100">
<span class="absolute left-3 top-3 rounded-full bg-emerald-500 px-2.5 py-0.5 text-xs font-semibold text-white">New</span>
</div>
<div class="p-4">
<h3 class="font-semibold text-[var(--ws-product-card-text)]">USB-C Hub</h3>
<p class="mt-1 text-sm text-[var(--ws-product-card-text-soft)]">7-in-1 adapter with HDMI, SD card reader, and 100W pass-through.</p>
<div class="mt-3 flex items-center justify-between">
<span class="text-lg font-bold text-[var(--ws-product-card-text)]">$39.99</span>
<button type="button" class="rounded-lg bg-[var(--ws-product-card-action-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-product-card-action-text)] transition hover:opacity-90">Add to Cart</button>
</div>
</div>
</div>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
productcardbadgesalediscountnew
Slots
| Name | Required | Description |
|---|---|---|
| badge | Yes | Promotional badge overlay (New, Sale, etc.). |
| image | Yes | Product image or placeholder area. |
| title | Yes | Product name heading. |
| description | No | Short product description. |
| price | Yes | Current price with optional strikethrough original. |
| action | Yes | Add to cart button. |
Product card with promotional badge overlays positioned on the image area. Supports “New” and “Sale” badges with strikethrough original pricing for discounted items.