AFW Pattern Lab

Product Card 

<div class="product-card ">
    <div class="product-card__picture">
        <a href="#">
            <img src="../../images/product/0194274_FLYN-2PC.jpg_400.jpeg" alt="Product Image">
        </a>
        <button class="product-card__wishlist">
            <i class="wishlist-off far fa-heart" aria-hidden="true"></i>
            <i class="wishlist-on fas fa-heart" aria-hidden="true"></i>
        </button>
    </div>
    <div class="product-card__details">
        <h3 class="product-card__title">
            <a href="#">Fynnegan Outdoor Loveseat with Table (Set of 2)</a>
        </h3>
        <div class="product-card__info">
            <div class="product-card__prices">
                <span class="price actual-price">$198.00</span>
                <span class="price old-price">$178.00</span>
            </div>
            <div class="product-card__rating">
                <i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i>
                <a href="#">(8 Reviews)</a>
            </div>
            <div class="product-card__buttons"></div>
        </div>
    </div>
</div>
 
<div class="product-card {{modifierClasses}}">
    <div class="product-card__picture">
        {% if image -%}
        <a href="#">
            <img src="{{image.src|path}}" alt="{{image.alt}}">
        </a>
        {%- endif %}
        <button class="product-card__wishlist">
            <i class="wishlist-off far fa-heart" aria-hidden="true"></i>
            <i class="wishlist-on fas fa-heart" aria-hidden="true"></i>
        </button>
    </div>
    <div class="product-card__details">
        <h3 class="product-card__title">
            <a href="#">{{title}}</a>
        </h3>
        <div class="product-card__info">
            <div class="product-card__prices">
                {% if actualPrice -%}
                <span class="price actual-price">{{actualPrice}}</span>
                {%- endif %}
                {% if oldPrice -%}
                <span class="price old-price">{{oldPrice}}</span>
                {%- endif %}
            </div>
            <div class="product-card__rating">
                {% for i in range(0,rating.average) -%}
                <i class="fas fa-star" aria-hidden="true"></i>
                {%- endfor %}
                <a href="#">({{rating.count}} Reviews)</a>
            </div>
            <div class="product-card__buttons"></div>
        </div>
    </div>
</div>
 
{
  "title": "Fynnegan Outdoor Loveseat with Table (Set of 2)",
  "oldPrice": "$178.00",
  "actualPrice": "$198.00",
  "rating": {
    "count": 8,
    "average": 5
  },
  "image": {
    "src": "/images/product/0194274_FLYN-2PC.jpg_400.jpeg",
    "alt": "Product Image"
  }
}
  • Content: 
    .product-card {
    $this: &;

    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    border-radius: rem(8px);
    border: rem(1px) dashed $color-sky-light;
    padding: rem(15px);
    margin: rem(16px);

    &__picture {
        position: relative;
    }

    &__title {
        margin: 0;
        padding: rem(2px) 0;

        a {
            color: $color-primary-text;
            font-size: rem(16px);
            font-weight: 600;
            text-decoration: none;

            &:hover {
                color: $color-primary-blue;
            }
        }
    }

    &__wishlist {
        background: none;
        border: none;
        color: #E8A698;
        font-size: rem(21px);
        margin: 0;
        padding: 0;
        position: absolute;
        bottom: rem(6px);
        right: rem(7px);

        .wishlist-off,
        .wishlist-on {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .wishlist-on {
            display: none;
        }

        &:hover {
            cursor: pointer;

            .wishlist-on {
                display: block;
            }
        }
    }

    &__prices {
        font-size: rem(14px);
        font-weight: 500;

        .old-price {
            font-size: rem(12px);
            text-decoration: line-through;
        }
    }

    &__rating {
        font-size: rem(13px);
        margin-top: rem(5px);

        .fa-star {
            color: $color-stars;
        }

        a {
            color: $color-gray-dark;
            text-decoration: none;

            &:hover {
                color: $color-primary-blue;
            }
        }
    }
}
  • URL: /components/raw/product-card/product-card.scss
  • Filesystem Path: source/patterns/molecules/product-card/product-card.scss
  • Size: 1.8 KB

No notes defined.