Product Card with Discount Tag

Highlight sales and promotions effectively with this product card featuring a prominent discount tag and a "before and after" price display.

This component builds on the standard product card, adding visual elements designed to attract customer attention and communicate value clearly.

Screenshot of three product cards, each with a red discount tag and a sale price.

Get Source Code Preview

About this Component

This card is similar to the standard product card, but it adds two features for promotional pricing. The first is an absolutely positioned badge overlaid on the image. The second is a styled price block showing both the new sale price and the old, struck-through price. This provides an immediate, clear visual indicator of a discount.

Features

Promotional Tag: A bright, eye-catching badge is positioned over the product image to instantly signal a sale.
Discounted Price Display: Clearly shows the new, lower price alongside the original price, which has a strikethrough effect for clarity.
Semantic Pricing: The original price is wrapped in a del tag, which semantically indicates deleted or "old" content.
Standard Product Features: Retains all the features of a standard product card, including the responsive layout and separate call-to-action button.

Code Breakdown

HTML Structure

The card begins with a div with the class .pdc-discount-tag; this element will be positioned over the image. In the footer, the prices are grouped within a .pdc-price-wrapper. The sale price is in a span, while the original price uses the del element to achieve the semantic strikethrough.

CSS Styling

The main card (.pdc-card) is given position: relative. This allows the .pdc-discount-tag, which has position: absolute, to be positioned relative to the card's corners using the top and left properties. In the price block, the original price class (.pdc-original-price) is styled with text-decoration: line-through and a muted color to de-emphasize it, making the new sale price stand out more prominently.

Code

Here is the complete, self-contained code. You can customize the discount tag's text (e.g., "Sale", "-25%") and update the pricing as needed for your products.

<style>
/* This is an optional body style to provide a background for the page */
body {
    background-color: #f9fafb;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* === Grid Container for the Cards === */
.cards-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem;
}

/* === Product Card w/ Discount Styles === */
.pdc-card {
    --pdc-card-radius: 12px;
    --pdc-card-shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.07);

position: relative; /* Context for the discount tag */
    background-color: #ffffff;
    border-radius: var(--pdc-card-radius);
    box-shadow: var(--pdc-card-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.pdc-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
}

.pdc-card a.pdc-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* Discount Tag */
.pdc-discount-tag {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background-color: #dc2626; /* Red */
    color: #ffffff;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    font-size: 1rem;
    font-weight: 600;
    z-index: 10;
}

/* Image container */
.pdc-card-image-container {
    position: relative;
    background-color: #f3f4f6;
}

.pdc-card-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
}

/* Product details */
.pdc-card-content {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Pushes footer to the bottom */
}

.pdc-card-category {
    font-size: 0.8rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.pdc-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}

/* Price and Action button footer */
.pdc-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-top: 1px solid #f3f4f6;
    margin-top: 1rem;
}

.pdc-price-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pdc-sale-price {
    font-size: 1.2rem;
    font-weight: 700;
    color: #be123c; /* A darker red */
}

.pdc-original-price {
    font-size: 0.9rem;
    color: #9ca3af;
    text-decoration: line-through;
}

.pdc-cta {
    background-color: #1f2937;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 500;
    border: none;
    border-radius: 8px;
    padding: 0.6rem 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.pdc-cta:hover {
    background-color: #374151;
}

</style>

<div class="cards-grid-container">

<article class="pdc-card">
        <div class="pdc-discount-tag">-25%</div>
        <a href="#" class="pdc-card-link">
            <div class="pdc-card-image-container">
                 
                <img src="https://placehold.co/600x600/38bdf8/ffffff/png?text=Jacket" alt="Stylish waterproof jacket." class="pdc-card-image">
            </div>
            <div class="pdc-card-content">
                <span class="pdc-card-category">Apparel</span>
                <h3 class="pdc-card-title">Explorer Tech Jacket</h3>
            </div>
        </a>
        <footer class="pdc-card-footer">
            <div class="pdc-price-wrapper">
                <span class="pdc-sale-price">$149.99</span>
                <del class="pdc-original-price">$199.99</del>
            </div>
            <button type="button" class="pdc-cta">Add to Cart</button>
        </footer>
    </article>

<article class="pdc-card">
        <div class="pdc-discount-tag">Sale</div>
        <a href="#" class="pdc-card-link">
            <div class="pdc-card-image-container">
                 
                <img src="https://placehold.co/600x600/34d399/ffffff/png?text=Backpack" alt="Durable travel backpack." class="pdc-card-image">
            </div>
            <div class="pdc-card-content">
                <span class="pdc-card-category">Bags</span>
                <h3 class="pdc-card-title">Nomad Travel Backpack</h3>
            </div>
        </a>
        <footer class="pdc-card-footer">
            <div class="pdc-price-wrapper">
                <span class="pdc-sale-price">$89.99</span>
                <del class="pdc-original-price">$120.00</del>
            </div>
            <button type="button" class="pdc-cta">Add to Cart</button>
        </footer>
    </article>

<article class="pdc-card">
        <div class="pdc-discount-tag">-40%</div>
        <a href="#" class="pdc-card-link">
            <div class="pdc-card-image-container">
                
                <img src="https://placehold.co/600x600/fb923c/ffffff/png?text=Boots" alt="Leather hiking boots." class="pdc-card-image">
            </div>
            <div class="pdc-card-content">
                <span class="pdc-card-category">Footwear</span>
                <h3 class="pdc-card-title">Ridgeline Hiking Boots</h3>
            </div>
        </a>
        <footer class="pdc-card-footer">
            <div class="pdc-price-wrapper">
                <span class="pdc-sale-price">$108.00</span>
                <del class="pdc-original-price">$180.00</del>
            </div>
            <button type="button" class="pdc-cta">Add to Cart</button>
        </footer>
    </article>

</div>

View Output