Product Card in CSS

A product card displays an item with its image, title, price, and a call-to-action. These cards are a core part of any online store layout. You can build them easily with clean, responsive CSS.

1. Basic HTML Structure



    
    
        Wireless Headphones
        $49.99

2. CSS Styling

Style the card with borders, shadows, and layout:


.product-card {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    transition: transform 0.2s ease;
    background: white;
    max-width: 250px;
    text-align: center;
}

.product-card:hover {
    transform: translateY(-4px);
}

.product-card img {
    width: 100%;
    height: auto;
}

.product-info {
    padding: 1rem;
}

.product-info h3 {
    font-size: 1.25rem;
    margin: 0.5rem 0;
    color: #1f2937;
}

.product-info .price {
    font-weight: bold;
    color: #2563eb;
    margin-bottom: 1rem;
}

.product-info button {
    background-color: #2563eb;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
}

3. Display in a Grid

Use CSS Grid to show multiple product cards:


.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    padding: 2rem 0;
}

4. Addons: Badge & Ratings

You can add a badge (e.g., "New") or star ratings with icons:

Add a position: absolute; badge in top corner
Use ⭐ emojis or SVG for star ratings

Conclusion

Product cards are essential components in modern websites. With CSS, you can easily build stylish, interactive, and responsive product displays to enhance user engagement.

← Previous: Image Slider Next: DevTools for CSS →