CSS Product Cards

Last Updated:

February 8, 2023

CSS product cards are used to showcase products in an interactive and visually appealing way. They can include different design elements such as images, descriptions, and pricing information. CSS product cards can be used to display e-commerce products on websites.

Sample product card HTML CSS

Plain white t-shirt

Top Flatlay style photo of a plain white t-shirt, Have a fresh shirt all week.

6 colors

$256

<div class="sample-product-card">
    <div class="card-image">
      <img src="https://source.unsplash.com/elbKS4DY21g" alt="card image" />
    </div>
    <div class="card-detail">
      <h3>Plain white t-shirt</h3>
      <p class="description">
        Top Flatlay style photo of a plain white t-shirt, Have a fresh shirt all week.
      </p>
      <div class="bottom-detail">
        <p class="color">6 colors</p>
        <p class="price">$256</p>
      </div>
    </div>
</div>

.sample-product-card {
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    background-color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    text-decoration: none;
}
.sample-product-card .card-image {
    max-height: 400px;
    overflow: hidden;
}
.sample-product-card .card-image img {
    width: 100%;
    height: auto;
}
.sample-product-card .card-detail {
    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
    padding: 1rem;
}
.sample-product-card .card-detail h3{
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.25rem;
    color: #000;
    margin-bottom: 0.5rem;
}
.sample-product-card .card-detail .description {
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 300;
    color: #6b7280;
}
.sample-product-card .card-detail .bottom-detail {
    margin-top: 0.5rem;
}
.sample-product-card .card-detail .bottom-detail .color{
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 300;
    font-style: italic;
    color: #6b7280;
    margin: 0;
}
.sample-product-card .card-detail .bottom-detail .price {
    color: #000;
    font-size: 1rem;
    margin: 0;
}
.sample-product-card:hover .card-image {
    opacity: .75;
}

.sample-product-card {
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    background-color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    .card-image {
        max-height: 400px;
        overflow: hidden;
        img {
            width: 100%;
            height: auto;
        }
    }
    .card-detail {
        display: flex;
        flex-direction: column;
        flex: 1 1 0%;
        padding: 1rem;
        h3 {
            font-weight: 500;
            font-size: 1rem;
            line-height: 1.25rem;
            color: #000;
            margin-bottom: 0.5rem;
        }
        .description {
            font-size: .875rem;
            line-height: 1.25rem;
            font-weight: 300;
            color: #6b7280;
        }
        .bottom-detail {
            margin-top: 0.5rem;
            .color {
                font-size: .875rem;
                line-height: 1.25rem;
                font-weight: 300;
                font-style: italic;
                color: #6b7280;
                margin: 0;
            }
            .price {
                color: #000;
                font-size: 1rem;
                margin: 0;
            }
        }
    }
    &:hover {
        .card-image {
            opacity: .75;
        }
    }
}