AFW Pattern Lab

Product Tile Grid 

<div class="product-tile-grid container">
    <div class="product-tile-grid__inner row">
        <div class="product-tile-grid__slider col-12 col-md-7">
            <div class="product-tile-grid__slider__inner">
                <div class="slick-slider">
                    <div class="slick-slide">
                        <a class="product-tile" href="#">
                            <figure class="product-tile__image">
                                <img src="../../images/product/0189579_P114-835.jpg_400.jpeg" alt="">
                            </figure>
                            <span>Aute nulla nulla eiusmod sunt mollit</span>
                        </a>
                    </div>
                    <div class="slick-slide">
                        <a class="product-tile" href="#">
                            <figure class="product-tile__image">
                                <img src="../../images/product/0177720_P008-813.jpg_400.jpeg" alt="">
                            </figure>
                            <span>Consequat adipisicing cupidatat</span>
                        </a>
                    </div>
                    <div class="slick-slide">
                        <a class="product-tile" href="#">
                            <figure class="product-tile__image">
                                <img src="../../images/product/0191856_P505-821-HEAD-ON.jpeg_400.jpeg" alt="">
                            </figure>
                            <span>Veniam velit minim</span>
                        </a>
                    </div>
                    <div class="slick-slide">
                        <a class="product-tile" href="#">
                            <figure class="product-tile__image">
                                <img src="../../images/product/0186013_15186_1.jpg_400.jpeg" alt="">
                            </figure>
                            <span>Aliqua Consectetur</span>
                        </a>
                    </div>
                    <div class="slick-slide">
                        <a class="product-tile" href="#">
                            <figure class="product-tile__image">
                                <img src="../../images/product/0194274_FLYN-2PC.jpg_400.jpeg" alt="">
                            </figure>
                            <span>Ullamco minim anim culpa.</span>
                        </a>
                    </div>
                    <div class="slick-slide">
                        <a class="product-tile" href="#">
                            <figure class="product-tile__image">
                                <img src="../../images/product/0189579_P114-835.jpg_400.jpeg" alt="">
                            </figure>
                            <span>Ullamco minim anim culpa.</span>
                        </a>
                    </div>
                    <div class="slick-slide">
                        <a class="product-tile" href="#">
                            <figure class="product-tile__image">
                                <img src="../../images/product/0189579_P114-835.jpg_400.jpeg" alt="">
                            </figure>
                            <span>Ullamco minim anim culpa.</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="product-tile-grid__primary col-12 col-md-5">
            <figure>

                <img src="/images/0190889_living-room-furniture_600.jpeg" alt="Anim laborum ad do culpa.">

                <h4>
                    <span>Shop All</span>
                    <span>Pariatur cupidatat</span>
                    <i class="far fa-circle-right" aria-hidden="true"></i>
                </h4>
            </figure>
        </div>

    </div>
</div>
 
<div class="product-tile-grid{% if onRight %} product-tile-grid--right{% endif %} container">
    <div class="product-tile-grid__inner row">
        {%- if onRight -%}
        <div class="product-tile-grid__primary col-12 col-md-5">
            <figure>
                {% if image %}
                    <img src="{{image.src|path}}" alt="{{image.alt}}">
                {% endif %}
                <h4>
                    <span>Shop All</span>
                    <span>{{title}}</span>
                    <i class="far fa-circle-right" aria-hidden="true"></i>
                </h4>
            </figure>
        </div>
        <div class="product-tile-grid__slider col-12 col-md-7">
            <div class="product-tile-grid__slider__inner">
                {% if slides -%}
                <div class="slick-slider">
                    {% for slide in slides %}
                    <div class="slick-slide">
                        {% render '@product-tile', slide, true %}
                    </div>
                    {% endfor %}
                </div>                    
                {%- endif %}
            </div>
        </div>
        {%- else -%}
        <div class="product-tile-grid__slider col-12 col-md-7">
            <div class="product-tile-grid__slider__inner">
                <div class="slick-slider">
                    {% for slide in slides -%}
                    <div class="slick-slide">
                        {% render '@product-tile', slide, true %}
                    </div>
                    {%- endfor %}
                </div>
            </div>
        </div>
        <div class="product-tile-grid__primary col-12 col-md-5">
            <figure>
                {% if image %}
                    <img src="{{image.src}}" alt="{{image.alt}}">
                {% endif %}
                <h4>
                    <span>Shop All</span>
                    <span>{{title}}</span>
                    <i class="far fa-circle-right" aria-hidden="true"></i>
                </h4>
            </figure>
        </div>
        {% endif %}
    </div>
</div>
 
{
  "on-right": true,
  "title": "Pariatur cupidatat",
  "image": {
    "src": "/images/0190889_living-room-furniture_600.jpeg",
    "alt": "Anim laborum ad do culpa."
  },
  "slides": [
    {
      "image": {
        "src": "/images/product/0189579_P114-835.jpg_400.jpeg",
        "alt": null
      },
      "href": "#",
      "title": "Aute nulla nulla eiusmod sunt mollit"
    },
    {
      "image": {
        "src": "/images/product/0177720_P008-813.jpg_400.jpeg",
        "alt": null
      },
      "href": "#",
      "title": "Consequat adipisicing cupidatat"
    },
    {
      "image": {
        "src": "/images/product/0191856_P505-821-HEAD-ON.jpeg_400.jpeg",
        "alt": null
      },
      "href": "#",
      "title": "Veniam velit minim"
    },
    {
      "image": {
        "src": "/images/product/0186013_15186_1.jpg_400.jpeg",
        "alt": null
      },
      "href": "#",
      "title": "Aliqua Consectetur"
    },
    {
      "image": {
        "src": "/images/product/0194274_FLYN-2PC.jpg_400.jpeg",
        "alt": null
      },
      "href": "#",
      "title": "Ullamco minim anim culpa."
    },
    {
      "image": {
        "src": "/images/product/0189579_P114-835.jpg_400.jpeg",
        "alt": null
      },
      "href": "#",
      "title": "Ullamco minim anim culpa."
    },
    {
      "image": {
        "src": "/images/product/0189579_P114-835.jpg_400.jpeg",
        "alt": null
      },
      "href": "#",
      "title": "Ullamco minim anim culpa."
    }
  ]
}
  • Content: 
    $(document).ready(() => {
    $('.product-tile-grid .slick-slider').slick({
        dots: true,
        swipe: false,
        arrows: true,
        // prevArrow: '<button type="button" class="slick-prev"><i class="far fa-chevron-left" aria-hidden="true"></i></button>',
        // nextArrow: '<button type="button" class="slick-next"><i class="far fa-chevron-right" aria-hidden="true"></i></button>',
        // slidesToShow: 1,
        // slidesToScroll: 1,
        rows: 3,
        slidesPerRow: 2,
    })
})
  • URL: /components/raw/product-tile-grid/product-tile-grid.js
  • Filesystem Path: source/patterns/organisms/product-tile-grid/product-tile-grid.js
  • Size: 510 Bytes
  • Content: 
    .product-tile-grid {
    $this: &;

    margin-bottom: rem(32px);

    &__inner {
        align-items: stretch;
    }

    &__primary {
        cursor: pointer;
        position: relative;
        z-index: 0;

        figure {
            border-radius: rem(4px);
            height: 100%;
            overflow: hidden;
            position: relative;
            z-index: 0;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            h4 {
                display: inline-flex;
                font-weight: 400;
                flex-direction: column;
                line-height: 1.15;
                margin: 0;
                position: absolute;
                bottom: rem(20px);
                left: rem(20px);
                text-shadow: rgba(0, 0, 0, 0.9) rem(1px) 0 7px;
                transition: left 333ms ease-out;

                > span {
                    color: $color-white;

                    &:first-of-type {
                        font-size: rem(17px);
                    }

                    &:last-of-type {
                        font-size: rem(24px);
                    }
                }

                i {
                    color: $color-white;
                    position: absolute;
                    left: 100%;
                    bottom: rem(5px);
                    margin-left: rem(4.8px);
                }
            }

            &:hover {
                h4 {
                    left: rem(35px);
                    transition: left 333ms linear;
                }
            }
        }
    }

    &__slider {
        position: relative;
        z-index: 1;
        
        &__inner {
            background: $color-sky-light;
            border-radius: rem(4px);
            padding: rem(20px) rem(20px) 0;
            height: 100%;
        }
        
        .slick-slider {
            height: 100%;
        }

        .slick-slide {
            padding: rem(4px);
        }

        .slick-prev,
        .slick-next {
            background: rgba($color-white, 0.5);
            border-radius: rem(25px);
            width: rem(50px);
            height: rem(50px);
            z-index: 10;

            &:before {
                color: $color-gray-dark;
                display: block;
                font-family: $font-family-icons;
            }

            &:hover {
                background: rgba($color-white, 0.75);

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

        .slick-prev {
            &:before {
                content: '\f053';
            }
        }

        .slick-next {
            &:before {
                content: '\f054'
            }
        }

        .slick-dots {
            bottom: rem(4px);
            margin: rem(16px) 0;

            li {
                margin: 0;
                padding: rem(4px) 0;
                width: auto;
                height: auto;

                button {
                    background: rgba($color-primary-blue, 0.10);
                    border-radius: rem(4px);
                    width: rem(75px);
                    height: rem(4px);
                    padding: 0;

                    &:before {
                        display: none;
                    }
                }

                &.slick-active {
                    button {
                        background: $color-primary-blue;
                    }
                }
            }
        }
    }

    &--right {
        #{$this}__primary {
            @include media-md-up {
                padding-right: 0;
            }
        }

        #{$this}__slider {
            @include media-md-up {
                padding-left: 0;
            }
        }
    }

    &:not(#{$this}--right) {
        #{$this}__primary {
            @include media-md-up {
                padding-left: 0;
            }
        }
        
        #{$this}__slider {
            @include media-md-up {
                padding-right: 0;
            }
        }
    }
}
  • URL: /components/raw/product-tile-grid/product-tile-grid.scss
  • Filesystem Path: source/patterns/organisms/product-tile-grid/product-tile-grid.scss
  • Size: 4.1 KB

No notes defined.