Out-of-stock Product Card

Clearly communicate when a product is unavailable with this "out of stock" card template.

Managing customer expectations is vital in e-commerce. This card uses multiple visual cues to make a product's unavailable status clear at a glance, preventing users from attempting to purchase an item that isn't in stock.

Screenshot showing an out-of-stock product card next to a regular one for comparison.

Get Source Code Preview

About this Component

This component applies a set of styles via a single modifier class (.is-out-of-stock) to visually alter a standard product card. This approach makes it easy to toggle the out-of-stock state dynamically on your website.

Features

Grayscale Image: The CSS filter: grayscale(100%) property is used to desaturate the product image, providing a strong visual cue that it is inactive.
Disabled CTA: The "Add to Cart" button is updated with the HTML disabled attribute, which makes it non-interactive and allows for specific "disabled" styling in CSS.
Text Overlay: A semi-transparent overlay with the text "Out of Stock" is applied on top of the image for an explicit message.
Disabled Links: Both the main product link and the card's cursor are disabled with CSS to prevent clicks. You can remove this functionality if required.

Code Breakdown

HTML Structure

To apply the out-of-stock state, you add the .is-out-of-stock class to the main article element. In the HTML, the only other required change is to add the disabled attribute to the CTA button and optionally change its text. For better accessibility, the main product link can be given tabindex="-1" to remove it from keyboard navigation.

CSS Styling

All the "out of stock" styles are scoped under the .is-out-of-stock modifier class. This makes the code modular and easy to manage.

The image's desaturation is done with filter.
The text overlay is created with a CSS pseudo-element (::after) on the image container. This pseudo-element has its content property set to "Out of Stock" and is centered using Flexbox.
The disabled button's appearance is targeted using the .is-out-of-stock class context, applying muted colors and setting cursor: not-allowed.
Similarly, the main product link is made unclickable by setting pointer-events: none. This can be removed to make it clickable.

Code

Here's the complete code. Simply add the .is-out-of-stock class to any product card and set its button to disabled to apply the effect.

<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 (base styles are the same) === */
.oos-card {
    --oos-card-radius: 12px;
    --oos-card-shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.07);

background-color: #ffffff;
    border-radius: var(--oos-card-radius);
    box-shadow: var(--oos-card-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Link container for image and title */
.oos-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

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

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

/* Content block styling */
.oos-card-content {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Pushes footer to the bottom */
}

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

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

/* Footer with price and CTA */
.oos-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-top: 1px solid #f3f4f6;
    margin-top: 1rem;
}

.oos-card-price {
    font-size: 1.2rem;
    font-weight: 700;
    color: #111827;
}

/* === OUT OF STOCK MODIFIERS === */

/* Add the 'is-out-of-stock' class to the main .oos-card element */
.oos-card.is-out-of-stock {
    background-color: #f9fafb; /* Slightly muted background */
    cursor: not-allowed;
}

.oos-card.is-out-of-stock .oos-card-link {
    pointer-events: none; /* Disables click on the main link */
}

/* Grayscale the image */
.oos-card.is-out-of-stock .oos-card-image {
    filter: grayscale(100%);
}

/* Out of Stock Overlay */
.oos-card.is-out-of-stock .oos-card-image-container::after {
    content: 'Out of Stock';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.7);
    font-size: 2rem;
    font-weight: 600;
    color: #374151;
    z-index: 1;
}

/* Disabled button state */
.oos-card.is-out-of-stock .oos-cta {
    background-color: #d1d5db; /* Gray background */
    color: #6b7280;
    cursor: not-allowed;
}

.oos-card.is-out-of-stock .oos-cta:hover {
    background-color: #d1d5db;
}

</style>

<div class="cards-grid-container">
    
    <article class="oos-card is-out-of-stock">
        <a href="#" class="oos-card-link" tabindex="-1">
            <div class="oos-card-image-container">
                 
                <img src="https://placehold.co/600x600/ef4444/ffffff/png?text=Jacket" alt="A red waterproof jacket." class="oos-card-image">
            </div>
            <div class="oos-card-content">
                <span class="oos-card-category">Apparel</span>
                <h3 class="oos-card-title">Explorer Tech Jacket</h3>
            </div>
        </a>
        <footer class="oos-card-footer">
            <span class="oos-card-price">$199.99</span>
            <button type="button" class="oos-cta" disabled>Out of Stock</button>
        </footer>
    </article>
    
    
     <article class="oos-card">
        <a href="#" class="oos-card-link">
            <div class="oos-card-image-container">
                 
                <img src="https://placehold.co/600x600/3b82f6/ffffff/png?text=Backpack" alt="A blue travel backpack." class="oos-card-image">
            </div>
            <div class="oos-card-content">
                <span class="oos-card-category">Bags</span>
                <h3 class="oos-card-title">Nomad Travel Backpack</h3>
            </div>
        </a>
        <footer class="oos-card-footer">
            <span class="oos-card-price">$120.00</span>
            <button type="button" class="oos-cta">Add to Cart</button>
        </footer>
    </article>

</div>

View Output