Component Library
Sign out

Horizontal Scroller 

<div style="text-align:left">
    <!-- For ACL demo purposes, not for use in production -->
    <div style="margin: 50px">
        <div style="font-weight: bold; font-size: 16px">Responsive</div>
        <div style="font-size: 14px">The component will be responsive if not provided with a max-width.</div>
    </div>
    <!-- END * For ACL demo purposes, not for use in production * END-->

    <div class="acl-horizontal-scroller acl-horizontal-scroller-demo">
        <div class="acl-horizontal-scroller__arrow acl-horizontal-scroller__arrow--left acl-horizontal-scroller__arrow--disabled acl-horizontal-scroller__arrow--hidden">
            <i class="aforza-icons animated fadeIn">acl_arrow_left</i>
        </div>
        <div class="acl-horizontal-scroller__items">
            <div class="acl-horizontal-scroller__item">
                <div class="acl-result-card acl-result-card--border-teal acl-result-card--rounded-edges acl-result-card__hover--background-grey" style="width: 330px; ">

                    <div class="acl-result-card__column">
                        <div class="acl-result-card__enhanced-icon">
                            <div class="acl-result-card__enhanced-icon-background">
                                <i class="aforza-icons animated fadeIn">acl_promo_badge</i>
                            </div>
                            <div class="acl-result-card__enhanced-icon-foreground acl-result-card__icon--teal">
                                <i class="aforza-icons animated fadeIn">acl_promo_symbol</i>
                            </div>
                        </div>
                    </div>

                    <div class="acl-result-card__column acl-result-card__column--text-left acl-result-card__padding--left-small">
                        <div class="acl-result-card__text acl-result-card__text--bold">
                            Applied <span class="acl-result-card__text acl-result-card__text--teal acl-result-card__padding--left-small acl-result-card__text--uppercase">10%
                                off</span>
                        </div>

                    </div>

                    <div class="acl-result-card__column">
                        <div class="acl-result-card__hover-content">
                            <div class="acl-result-card__remove">
                                <i class="aforza-icons acl-result-card__icon--grey acl-result-card__hover--grey">acl_delete</i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="acl-horizontal-scroller__item">
                <div class="acl-result-card acl-result-card--border-teal acl-result-card--rounded-edges acl-result-card__hover--background-grey" style="width: 330px; ">

                    <div class="acl-result-card__column">
                        <div class="acl-result-card__enhanced-icon">
                            <div class="acl-result-card__enhanced-icon-background">
                                <i class="aforza-icons animated fadeIn">acl_promo_badge</i>
                            </div>
                            <div class="acl-result-card__enhanced-icon-foreground acl-result-card__icon--teal">
                                <i class="aforza-icons animated fadeIn">acl_promo_symbol</i>
                            </div>
                        </div>
                    </div>

                    <div class="acl-result-card__column acl-result-card__column--text-left acl-result-card__padding--left-small">
                        <div class="acl-result-card__text acl-result-card__text--bold">
                            Applied <span class="acl-result-card__text acl-result-card__text--teal acl-result-card__padding--left-small acl-result-card__text--uppercase">25%
                                off</span>
                        </div>

                    </div>

                    <div class="acl-result-card__column">
                        <div class="acl-result-card__hover-content">
                            <div class="acl-result-card__remove">
                                <i class="aforza-icons acl-result-card__icon--grey acl-result-card__hover--grey">acl_delete</i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="acl-horizontal-scroller__item">
                <div class="acl-result-card acl-result-card--border-teal acl-result-card--rounded-edges acl-result-card__hover--background-grey" style="width: 330px; ">

                    <div class="acl-result-card__column">
                        <div class="acl-result-card__enhanced-icon">
                            <div class="acl-result-card__enhanced-icon-background">
                                <i class="aforza-icons animated fadeIn">acl_promo_badge</i>
                            </div>
                            <div class="acl-result-card__enhanced-icon-foreground acl-result-card__icon--teal">
                                <i class="aforza-icons animated fadeIn">acl_promo_symbol</i>
                            </div>
                        </div>
                    </div>

                    <div class="acl-result-card__column acl-result-card__column--text-left acl-result-card__padding--left-small">
                        <div class="acl-result-card__text acl-result-card__text--bold">
                            <span class="acl-result-card__text acl-result-card__text--teal acl-result-card__padding--right-small acl-result-card__text--uppercase">$5</span>when
                            you buy 50 Duke's drinks
                        </div>

                    </div>

                    <div class="acl-result-card__column">
                        <div class="acl-result-card__hover-content">
                            <div class="acl-result-card__remove">
                                <i class="aforza-icons acl-result-card__icon--grey acl-result-card__hover--grey">acl_delete</i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="acl-horizontal-scroller__item">
                <div class="acl-result-card acl-result-card--border-teal acl-result-card--rounded-edges acl-result-card__hover--background-grey" style="width: 330px; ">

                    <div class="acl-result-card__column">
                        <div class="acl-result-card__enhanced-icon">
                            <div class="acl-result-card__enhanced-icon-background">
                                <i class="aforza-icons animated fadeIn">acl_promo_badge</i>
                            </div>
                            <div class="acl-result-card__enhanced-icon-foreground acl-result-card__icon--teal">
                                <i class="aforza-icons animated fadeIn">acl_promo_symbol</i>
                            </div>
                        </div>
                    </div>

                    <div class="acl-result-card__column acl-result-card__column--text-left acl-result-card__padding--left-small">
                        <div class="acl-result-card__text acl-result-card__text--bold">
                            <span class="acl-result-card__text acl-result-card__text--teal acl-result-card__padding--right-small acl-result-card__text--uppercase">SET</span>
                            Carvill's Whiskey Sour to <span class="acl-result-card__text acl-result-card__text--teal acl-result-card__padding--left-small acl-result-card__text--uppercase">£27,000</span>
                        </div>

                    </div>

                    <div class="acl-result-card__column">
                        <div class="acl-result-card__hover-content">
                            <div class="acl-result-card__remove">
                                <i class="aforza-icons acl-result-card__icon--grey acl-result-card__hover--grey">acl_delete</i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="acl-horizontal-scroller__item">
                <div class="acl-result-card acl-result-card--border-teal acl-result-card--rounded-edges acl-result-card__hover--background-grey" style="width: 330px; ">

                    <div class="acl-result-card__column">
                        <div class="acl-result-card__enhanced-icon">
                            <div class="acl-result-card__enhanced-icon-background">
                                <i class="aforza-icons animated fadeIn">acl_promo_badge</i>
                            </div>
                            <div class="acl-result-card__enhanced-icon-foreground acl-result-card__icon--teal">
                                <i class="aforza-icons animated fadeIn">acl_promo_symbol</i>
                            </div>
                        </div>
                    </div>

                    <div class="acl-result-card__column acl-result-card__column--text-left acl-result-card__padding--left-small">
                        <div class="acl-result-card__text acl-result-card__text--bold">
                            Applied <span class="acl-result-card__text acl-result-card__text--teal acl-result-card__padding--left-small">Get
                                Second
                                Half Price</span>
                        </div>

                    </div>

                    <div class="acl-result-card__column">
                        <div class="acl-result-card__hover-content">
                            <div class="acl-result-card__remove">
                                <i class="aforza-icons acl-result-card__icon--grey acl-result-card__hover--grey">acl_delete</i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="acl-horizontal-scroller__item">
                <div class="acl-result-card acl-result-card--border-teal acl-result-card--rounded-edges acl-result-card__hover--background-grey" style="width: 330px; ">

                    <div class="acl-result-card__column">
                        <div class="acl-result-card__enhanced-icon">
                            <div class="acl-result-card__enhanced-icon-background">
                                <i class="aforza-icons animated fadeIn">acl_promo_badge</i>
                            </div>
                            <div class="acl-result-card__enhanced-icon-foreground acl-result-card__icon--teal">
                                <i class="aforza-icons animated fadeIn">acl_promo_symbol</i>
                            </div>
                        </div>
                    </div>

                    <div class="acl-result-card__column acl-result-card__column--text-left acl-result-card__padding--left-small">
                        <div class="acl-result-card__text acl-result-card__text--bold">
                            <span class="acl-result-card__text acl-result-card__text--teal acl-result-card__padding--right-extra-small acl-result-card__text--uppercase">SET
                            </span>
                            Carvill's Cabernet Sauvignon<span class="acl-result-card__text acl-result-card__text--teal acl-result-card__padding--left-small acl-result-card__text--uppercase">
                                $400</span>
                        </div>

                    </div>

                    <div class="acl-result-card__column">
                        <div class="acl-result-card__hover-content">
                            <div class="acl-result-card__remove">
                                <i class="aforza-icons acl-result-card__icon--grey acl-result-card__hover--grey">acl_delete</i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="acl-horizontal-scroller__item">
                <div class="acl-result-card acl-result-card--border-teal acl-result-card--rounded-edges acl-result-card__hover--background-grey" style="width: 330px; ">

                    <div class="acl-result-card__column">
                        <div class="acl-result-card__enhanced-icon">
                            <div class="acl-result-card__enhanced-icon-background">
                                <i class="aforza-icons animated fadeIn">acl_promo_badge</i>
                            </div>
                            <div class="acl-result-card__enhanced-icon-foreground acl-result-card__icon--teal">
                                <i class="aforza-icons animated fadeIn">acl_promo_symbol</i>
                            </div>
                        </div>
                    </div>

                    <div class="acl-result-card__column acl-result-card__column--text-left acl-result-card__padding--left-small">
                        <div class="acl-result-card__text acl-result-card__text--bold">
                            Applied <span class="acl-result-card__text acl-result-card__text--teal acl-result-card__padding--left-small acl-result-card__text--uppercase">Free
                                Wine Aerator </span>
                        </div>

                    </div>

                    <div class="acl-result-card__column">
                        <div class="acl-result-card__hover-content">
                            <div class="acl-result-card__remove">
                                <i class="aforza-icons acl-result-card__icon--grey acl-result-card__hover--grey">acl_delete</i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="acl-horizontal-scroller__item">
                <div class="acl-result-card acl-result-card--border-teal acl-result-card--rounded-edges acl-result-card__hover--background-grey" style="width: 330px; ">

                    <div class="acl-result-card__column">
                        <div class="acl-result-card__enhanced-icon">
                            <div class="acl-result-card__enhanced-icon-background">
                                <i class="aforza-icons animated fadeIn">acl_promo_badge</i>
                            </div>
                            <div class="acl-result-card__enhanced-icon-foreground acl-result-card__icon--teal">
                                <i class="aforza-icons animated fadeIn">acl_promo_symbol</i>
                            </div>
                        </div>
                    </div>

                    <div class="acl-result-card__column acl-result-card__column--text-left acl-result-card__padding--left-small">
                        <div class="acl-result-card__text acl-result-card__text--bold">
                            Applied <span class="acl-result-card__text acl-result-card__text--teal acl-result-card__padding--left-small acl-result-card__text--uppercase">80%
                                off</span>
                        </div>

                    </div>

                    <div class="acl-result-card__column">
                        <div class="acl-result-card__hover-content">
                            <div class="acl-result-card__remove">
                                <i class="aforza-icons acl-result-card__icon--grey acl-result-card__hover--grey">acl_delete</i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="acl-horizontal-scroller__item">
                <div class="acl-result-card acl-result-card--border-teal acl-result-card--rounded-edges acl-result-card__hover--background-grey" style="width: 330px; ">

                    <div class="acl-result-card__column">
                        <div class="acl-result-card__enhanced-icon">
                            <div class="acl-result-card__enhanced-icon-background">
                                <i class="aforza-icons animated fadeIn">acl_promo_badge</i>
                            </div>
                            <div class="acl-result-card__enhanced-icon-foreground acl-result-card__icon--teal">
                                <i class="aforza-icons animated fadeIn">acl_promo_symbol</i>
                            </div>
                        </div>
                    </div>

                    <div class="acl-result-card__column acl-result-card__column--text-left acl-result-card__padding--left-small">
                        <div class="acl-result-card__text acl-result-card__text--bold">
                            Applied <span class="acl-result-card__text acl-result-card__text--teal acl-result-card__padding--left-small acl-result-card__text--uppercase">Additional
                                Items 10% off</span>
                        </div>

                    </div>

                    <div class="acl-result-card__column">
                        <div class="acl-result-card__hover-content">
                            <div class="acl-result-card__remove">
                                <i class="aforza-icons acl-result-card__icon--grey acl-result-card__hover--grey">acl_delete</i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="acl-horizontal-scroller__item">
                <div class="acl-result-card acl-result-card--border-teal acl-result-card--rounded-edges acl-result-card__hover--background-grey" style="width: 330px; ">

                    <div class="acl-result-card__column">
                        <div class="acl-result-card__enhanced-icon">
                            <div class="acl-result-card__enhanced-icon-background">
                                <i class="aforza-icons animated fadeIn">acl_promo_badge</i>
                            </div>
                            <div class="acl-result-card__enhanced-icon-foreground acl-result-card__icon--teal">
                                <i class="aforza-icons animated fadeIn">acl_promo_symbol</i>
                            </div>
                        </div>
                    </div>

                    <div class="acl-result-card__column acl-result-card__column--text-left acl-result-card__padding--left-small">
                        <div class="acl-result-card__text acl-result-card__text--bold">
                            Applied <span class="acl-result-card__text acl-result-card__text--teal acl-result-card__padding--left-small acl-result-card__text--uppercase">5%
                                off</span>
                        </div>

                    </div>

                    <div class="acl-result-card__column">
                        <div class="acl-result-card__hover-content">
                            <div class="acl-result-card__remove">
                                <i class="aforza-icons acl-result-card__icon--grey acl-result-card__hover--grey">acl_delete</i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="acl-horizontal-scroller__arrow acl-horizontal-scroller__arrow--right acl-horizontal-scroller__arrow--hidden">
            <i class="aforza-icons animated fadeIn">acl_arrow_right</i>
        </div>
    </div>

    <!-- For ACL demo purposes, not for use in production -->
    <div style="margin: 50px">
        <div style="font-weight: bold; font-size: 16px">Fixed Width</div>
        <div style="font-size: 14px">When provided with a max-width the scroller will respect the provided value and
            calucate scrolls accordingly. </div>
    </div>
    <!-- END * For ACL demo purposes, not for use in production * END-->
    <div class="acl-horizontal-scroller acl-horizontal-scroller-demo2" style="max-width: 745px">
        <div class="acl-horizontal-scroller__arrow acl-horizontal-scroller__arrow--left acl-horizontal-scroller__arrow--disabled acl-horizontal-scroller__arrow--hidden">
            <i class="aforza-icons animated fadeIn">acl_arrow_left</i>
        </div>
        <div class="acl-horizontal-scroller__items">

            <div class="acl-horizontal-scroller__item">
                <div class="acl-product-promotion__item" style="min-width:210px; margin-top: 13px;; margin-top: 13px;">
                    <div class="acl-product-promotion__image-icon acl-product-promotion__image-icon--yellow">
                        <i class="aforza-icons animated fadeIn">acl_popular_product_badge</i>
                    </div>
                    <img class="acl-product-promotion__image" src="/assets/img/product-ex-1.png" />
                    <div class="acl-product-promotion__item-details">
                        <div class="acl-product-promotion__name">
                            Product Name / Detail 500ml (20 Pack)
                        </div>
                        <div class="acl-product-promotion__price">
                            <div class="acl-product-promotion__cost">
                                <span class="acl-product-promotion__currency">£</span>2.30 each
                            </div>
                            <div class="acl-product-promotion__chip acl-product-promotion__chip--yellow">
                                Popular
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="acl-horizontal-scroller__item">
                <div class="acl-product-promotion__item" style="min-width:210px; margin-top: 13px;; margin-top: 13px;">
                    <div class="acl-product-promotion__image-icon acl-product-promotion__image-icon--teal">
                        <i class="aforza-icons animated fadeIn">acl_recyclable_product_badge</i>
                    </div>
                    <img class="acl-product-promotion__image" src="/assets/img/product-ex-2.png" />
                    <div class="acl-product-promotion__item-details">
                        <div class="acl-product-promotion__name">
                            Product Name / Detail 500ml (10 Pack)
                        </div>
                        <div class="acl-product-promotion__price">
                            <div class="acl-product-promotion__cost">
                                <span class="acl-product-promotion__currency">£</span>1.30 each
                            </div>
                            <div class="acl-product-promotion__chip acl-product-promotion__chip--teal">
                                Recyclable
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="acl-horizontal-scroller__item">
                <div class="acl-product-promotion__item" style="min-width:210px; margin-top: 13px;; margin-top: 13px;">
                    <div class="acl-product-promotion__image-icon acl-product-promotion__image-icon--yellow">
                        <i class="aforza-icons animated fadeIn">acl_popular_product_badge</i>
                    </div>
                    <img class="acl-product-promotion__image" src="/assets/img/product-ex-3.png" />
                    <div class="acl-product-promotion__item-details">
                        <div class="acl-product-promotion__name">
                            Product Name / Detail 500ml (20 Pack)
                        </div>
                        <div class="acl-product-promotion__price">
                            <div class="acl-product-promotion__cost">
                                <span class="acl-product-promotion__currency">£</span>2.30 each
                            </div>
                            <div class="acl-product-promotion__chip acl-product-promotion__chip--yellow">
                                Popular
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="acl-horizontal-scroller__item">
                <div class="acl-product-promotion__item" style="min-width:210px; margin-top: 13px;; margin-top: 13px;">
                    <div class="acl-product-promotion__image-icon acl-product-promotion__image-icon--yellow">
                        <i class="aforza-icons animated fadeIn">acl_popular_product_badge</i>
                    </div>
                    <img class="acl-product-promotion__image" src="/assets/img/product-ex-4.png" />
                    <div class="acl-product-promotion__item-details">
                        <div class="acl-product-promotion__name">
                            Product Name / Detail 500ml (30 Pack)
                        </div>
                        <div class="acl-product-promotion__price">
                            <div class="acl-product-promotion__cost">
                                <span class="acl-product-promotion__currency">£</span>3.30 each
                            </div>
                            <div class="acl-product-promotion__chip acl-product-promotion__chip--yellow">
                                Popular
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="acl-horizontal-scroller__arrow acl-horizontal-scroller__arrow--right acl-horizontal-scroller__arrow--hidden">
            <i class="aforza-icons animated fadeIn">acl_arrow_right</i>
        </div>
    </div>

    <!-- For ACL demo purposes, not for use in production -->
    <div style="margin: 50px">
        <div style="font-weight: bold; font-size: 16px">Media Example</div>
        <div style="font-size: 14px">The component can handle any HTML component.</div>
    </div>
    <!-- END * For ACL demo purposes, not for use in production * END-->
    <div class="acl-horizontal-scroller acl-horizontal-scroller-demo3" style="max-width: 640px">
        <div class="acl-horizontal-scroller__arrow acl-horizontal-scroller__arrow--left acl-horizontal-scroller__arrow--disabled acl-horizontal-scroller__arrow--hidden">
            <i class="aforza-icons animated fadeIn">acl_arrow_left</i>
        </div>
        <div class="acl-horizontal-scroller__items">
            <div class="acl-horizontal-scroller__item"><iframe width="560" height="315" src="https://www.youtube.com/embed/cx9GZGOIVJc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
            <div class="acl-horizontal-scroller__item"><iframe width="560" height="315" src="https://www.youtube.com/embed/6dtCc04HJLI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
            <div class="acl-horizontal-scroller__item"><iframe width="560" height="315" src="https://www.youtube.com/embed/zI58W6n0MjA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
            <div class="acl-horizontal-scroller__item"><iframe width="560" height="315" src="https://www.youtube.com/embed/FCJfNK17_1E" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>

        </div>
        <div class="acl-horizontal-scroller__arrow acl-horizontal-scroller__arrow--right acl-horizontal-scroller__arrow--hidden">
            <i class="aforza-icons animated fadeIn">acl_arrow_right</i>
        </div>
    </div>

    <!-- For ACL demo purposes, not for use in production -->
    <div style="margin: 50px">
        <div style="font-weight: bold; font-size: 16px">Content Less Than MaxWidth</div>
        <div style="font-size: 14px">If the content of the scroller element does not require scrolling the left and right
            arrows will be hidden.</div>
    </div>
    <!-- END * For ACL demo purposes, not for use in production * END-->
    <div class="acl-horizontal-scroller acl-horizontal-scroller-demo4" style="max-width: 640px">
        <div class="acl-horizontal-scroller__arrow acl-horizontal-scroller__arrow--left acl-horizontal-scroller__arrow--disabled acl-horizontal-scroller__arrow--hidden">
            <i class="aforza-icons animated fadeIn">acl_arrow_left</i>
        </div>
        <div class="acl-horizontal-scroller__items">
            <div class="acl-horizontal-scroller__item">
                <div class="acl-horizontal-scroller acl-horizontal-scroller-demo3" style="max-width: 640px">
                    <div class="acl-horizontal-scroller__arrow acl-horizontal-scroller__arrow--left acl-horizontal-scroller__arrow--disabled acl-horizontal-scroller__arrow--hidden">
                        <i class="aforza-icons animated fadeIn">acl_arrow_left</i>
                    </div>
                    <div class="acl-horizontal-scroller__items">
                        <div class="acl-horizontal-scroller__item">
                            <div style="width: 226px;margin:20px">
                                <div class="acl-contact-card acl-contact-card--shadow">
                                    <img src="https://placem.at/people" class="acl-contact-card__avatar" />
                                    <div class="acl-contact-card__name">Amanda Martin</div>
                                    <div class="acl-contact-card__location">South-East Manchester,UK</div>

                                    <div class="acl-contact-card__divider"></div>
                                    <div class="acl-contact-card__contact-item">
                                        <div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_email</i></div>
                                        <a href="mailto:lizzie_higgins@astra.com" class="acl-contact-card__link" title="lizzie_higgins@astra.com">lizzie_higgins@astra.com
                                        </a>
                                    </div>
                                    <div class="acl-contact-card__contact-item">
                                        <div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_phone</i></div>
                                        <a href="tel:03025168623" class="acl-contact-card__link">03025168623
                                        </a>
                                    </div>
                                    <div class="acl-contact-card__divider"></div>
                                    <div class="acl-contact-card__chat-items">
                                        <div class="acl-contact-card__contact-item">
                                            <div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_whatsapp</i></div>
                                            <a href="#" class="acl-contact-card__link">WhatsApp
                                            </a>
                                        </div>
                                        <div class="acl-contact-card__divider acl-contact-card__divider--vertical"></div>
                                        <div class="acl-contact-card__contact-item">
                                            <div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_chatter</i></div>
                                            <a href="#" class="acl-contact-card__link">Chatter
                                            </a>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="acl-horizontal-scroller__item">
                            <div style="width: 226px; margin:20px">
                                <div class="acl-contact-card acl-contact-card--shadow">
                                    <img src="https://placem.at/people" class="acl-contact-card__avatar" />
                                    <div class="acl-contact-card__name">Amanda Martin</div>
                                    <div class="acl-contact-card__location">South-East Manchester,UK</div>

                                    <div class="acl-contact-card__divider"></div>
                                    <div class="acl-contact-card__contact-item">
                                        <div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_email</i></div>
                                        <a href="mailto:lizzie_higgins@astra.com" class="acl-contact-card__link" title="lizzie_higgins@astra.com">lizzie_higgins@astra.com
                                        </a>
                                    </div>
                                    <div class="acl-contact-card__contact-item">
                                        <div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_phone</i></div>
                                        <a href="tel:03025168623" class="acl-contact-card__link">03025168623
                                        </a>
                                    </div>
                                    <div class="acl-contact-card__divider"></div>
                                    <div class="acl-contact-card__chat-items">
                                        <div class="acl-contact-card__contact-item">
                                            <div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_whatsapp</i></div>
                                            <a href="#" class="acl-contact-card__link">WhatsApp
                                            </a>
                                        </div>
                                        <div class="acl-contact-card__divider acl-contact-card__divider--vertical"></div>
                                        <div class="acl-contact-card__contact-item">
                                            <div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_chatter</i></div>
                                            <a href="#" class="acl-contact-card__link">Chatter
                                            </a>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="acl-horizontal-scroller__arrow acl-horizontal-scroller__arrow--right acl-horizontal-scroller__arrow--hidden">
                        <i class="aforza-icons animated fadeIn">acl_arrow_right</i>
                    </div>
                </div>

            </div>

        </div>
        <div class="acl-horizontal-scroller__arrow acl-horizontal-scroller__arrow--right acl-horizontal-scroller__arrow--hidden">
            <i class="aforza-icons animated fadeIn">acl_arrow_right</i>
        </div>
    </div>
</div>

<script>
    // Demo One
    const scrollerEl = document.querySelector('.acl-horizontal-scroller-demo');
    const horizontalScroller = new acl.ACLHorizontalScroller(scrollerEl);
    // Demo 2
    const scrollerEl2 = document.querySelector('.acl-horizontal-scroller-demo2');
    const horizontalScroller2 = new acl.ACLHorizontalScroller(scrollerEl2);
    // Demo 3
    const scrollerEl3 = document.querySelector('.acl-horizontal-scroller-demo3');
    const horizontalScroller3 = new acl.ACLHorizontalScroller(scrollerEl3);
    // Demo 4
    const scrollerEl4 = document.querySelector('.acl-horizontal-scroller-demo4');
    const horizontalScroller4 = new acl.ACLHorizontalScroller(scrollerEl4);
</script>
 
<div style="text-align:left">
  <!-- For ACL demo purposes, not for use in production -->
  <div style="margin: 50px">
    <div style="font-weight: bold; font-size: 16px">Responsive</div>
    <div style="font-size: 14px">The component will be responsive if not provided with a max-width.</div>
  </div>
  <!-- END * For ACL demo purposes, not for use in production * END-->

  <div class="acl-horizontal-scroller acl-horizontal-scroller-demo">
    <div
      class="acl-horizontal-scroller__arrow acl-horizontal-scroller__arrow--left acl-horizontal-scroller__arrow--disabled acl-horizontal-scroller__arrow--hidden">
      <i class="aforza-icons animated fadeIn">acl_arrow_left</i>
    </div>
    <div class="acl-horizontal-scroller__items">
      <div class="acl-horizontal-scroller__item">
        <div
          class="acl-result-card acl-result-card--border-teal acl-result-card--rounded-edges acl-result-card__hover--background-grey"
          style="width: 330px; ">

          <div class="acl-result-card__column">
            <div class="acl-result-card__enhanced-icon">
              <div class="acl-result-card__enhanced-icon-background">
                <i class="aforza-icons animated fadeIn">acl_promo_badge</i>
              </div>
              <div class="acl-result-card__enhanced-icon-foreground acl-result-card__icon--teal">
                <i class="aforza-icons animated fadeIn">acl_promo_symbol</i>
              </div>
            </div>
          </div>

          <div class="acl-result-card__column acl-result-card__column--text-left acl-result-card__padding--left-small">
            <div class="acl-result-card__text acl-result-card__text--bold">
              Applied <span
                class="acl-result-card__text acl-result-card__text--teal acl-result-card__padding--left-small acl-result-card__text--uppercase">10%
                off</span>
            </div>

          </div>

          <div class="acl-result-card__column">
            <div class="acl-result-card__hover-content">
              <div class="acl-result-card__remove">
                <i class="aforza-icons acl-result-card__icon--grey acl-result-card__hover--grey">acl_delete</i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="acl-horizontal-scroller__item">
        <div
          class="acl-result-card acl-result-card--border-teal acl-result-card--rounded-edges acl-result-card__hover--background-grey"
          style="width: 330px; ">

          <div class="acl-result-card__column">
            <div class="acl-result-card__enhanced-icon">
              <div class="acl-result-card__enhanced-icon-background">
                <i class="aforza-icons animated fadeIn">acl_promo_badge</i>
              </div>
              <div class="acl-result-card__enhanced-icon-foreground acl-result-card__icon--teal">
                <i class="aforza-icons animated fadeIn">acl_promo_symbol</i>
              </div>
            </div>
          </div>

          <div class="acl-result-card__column acl-result-card__column--text-left acl-result-card__padding--left-small">
            <div class="acl-result-card__text acl-result-card__text--bold">
              Applied <span
                class="acl-result-card__text acl-result-card__text--teal acl-result-card__padding--left-small acl-result-card__text--uppercase">25%
                off</span>
            </div>

          </div>

          <div class="acl-result-card__column">
            <div class="acl-result-card__hover-content">
              <div class="acl-result-card__remove">
                <i class="aforza-icons acl-result-card__icon--grey acl-result-card__hover--grey">acl_delete</i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="acl-horizontal-scroller__item">
        <div
          class="acl-result-card acl-result-card--border-teal acl-result-card--rounded-edges acl-result-card__hover--background-grey"
          style="width: 330px; ">

          <div class="acl-result-card__column">
            <div class="acl-result-card__enhanced-icon">
              <div class="acl-result-card__enhanced-icon-background">
                <i class="aforza-icons animated fadeIn">acl_promo_badge</i>
              </div>
              <div class="acl-result-card__enhanced-icon-foreground acl-result-card__icon--teal">
                <i class="aforza-icons animated fadeIn">acl_promo_symbol</i>
              </div>
            </div>
          </div>

          <div class="acl-result-card__column acl-result-card__column--text-left acl-result-card__padding--left-small">
            <div class="acl-result-card__text acl-result-card__text--bold">
              <span
                class="acl-result-card__text acl-result-card__text--teal acl-result-card__padding--right-small acl-result-card__text--uppercase">$5</span>when
              you buy 50 Duke's drinks
            </div>

          </div>

          <div class="acl-result-card__column">
            <div class="acl-result-card__hover-content">
              <div class="acl-result-card__remove">
                <i class="aforza-icons acl-result-card__icon--grey acl-result-card__hover--grey">acl_delete</i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="acl-horizontal-scroller__item">
        <div
          class="acl-result-card acl-result-card--border-teal acl-result-card--rounded-edges acl-result-card__hover--background-grey"
          style="width: 330px; ">

          <div class="acl-result-card__column">
            <div class="acl-result-card__enhanced-icon">
              <div class="acl-result-card__enhanced-icon-background">
                <i class="aforza-icons animated fadeIn">acl_promo_badge</i>
              </div>
              <div class="acl-result-card__enhanced-icon-foreground acl-result-card__icon--teal">
                <i class="aforza-icons animated fadeIn">acl_promo_symbol</i>
              </div>
            </div>
          </div>

          <div class="acl-result-card__column acl-result-card__column--text-left acl-result-card__padding--left-small">
            <div class="acl-result-card__text acl-result-card__text--bold">
              <span
                class="acl-result-card__text acl-result-card__text--teal acl-result-card__padding--right-small acl-result-card__text--uppercase">SET</span>
              Carvill's Whiskey Sour to <span
                class="acl-result-card__text acl-result-card__text--teal acl-result-card__padding--left-small acl-result-card__text--uppercase">£27,000</span>
            </div>

          </div>

          <div class="acl-result-card__column">
            <div class="acl-result-card__hover-content">
              <div class="acl-result-card__remove">
                <i class="aforza-icons acl-result-card__icon--grey acl-result-card__hover--grey">acl_delete</i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="acl-horizontal-scroller__item">
        <div
          class="acl-result-card acl-result-card--border-teal acl-result-card--rounded-edges acl-result-card__hover--background-grey"
          style="width: 330px; ">

          <div class="acl-result-card__column">
            <div class="acl-result-card__enhanced-icon">
              <div class="acl-result-card__enhanced-icon-background">
                <i class="aforza-icons animated fadeIn">acl_promo_badge</i>
              </div>
              <div class="acl-result-card__enhanced-icon-foreground acl-result-card__icon--teal">
                <i class="aforza-icons animated fadeIn">acl_promo_symbol</i>
              </div>
            </div>
          </div>

          <div class="acl-result-card__column acl-result-card__column--text-left acl-result-card__padding--left-small">
            <div class="acl-result-card__text acl-result-card__text--bold">
              Applied <span
                class="acl-result-card__text acl-result-card__text--teal acl-result-card__padding--left-small">Get
                Second
                Half Price</span>
            </div>

          </div>

          <div class="acl-result-card__column">
            <div class="acl-result-card__hover-content">
              <div class="acl-result-card__remove">
                <i class="aforza-icons acl-result-card__icon--grey acl-result-card__hover--grey">acl_delete</i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="acl-horizontal-scroller__item">
        <div
          class="acl-result-card acl-result-card--border-teal acl-result-card--rounded-edges acl-result-card__hover--background-grey"
          style="width: 330px; ">

          <div class="acl-result-card__column">
            <div class="acl-result-card__enhanced-icon">
              <div class="acl-result-card__enhanced-icon-background">
                <i class="aforza-icons animated fadeIn">acl_promo_badge</i>
              </div>
              <div class="acl-result-card__enhanced-icon-foreground acl-result-card__icon--teal">
                <i class="aforza-icons animated fadeIn">acl_promo_symbol</i>
              </div>
            </div>
          </div>

          <div class="acl-result-card__column acl-result-card__column--text-left acl-result-card__padding--left-small">
            <div class="acl-result-card__text acl-result-card__text--bold">
              <span
                class="acl-result-card__text acl-result-card__text--teal acl-result-card__padding--right-extra-small acl-result-card__text--uppercase">SET
              </span>
              Carvill's Cabernet Sauvignon<span
                class="acl-result-card__text acl-result-card__text--teal acl-result-card__padding--left-small acl-result-card__text--uppercase">
                $400</span>
            </div>

          </div>

          <div class="acl-result-card__column">
            <div class="acl-result-card__hover-content">
              <div class="acl-result-card__remove">
                <i class="aforza-icons acl-result-card__icon--grey acl-result-card__hover--grey">acl_delete</i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="acl-horizontal-scroller__item">
        <div
          class="acl-result-card acl-result-card--border-teal acl-result-card--rounded-edges acl-result-card__hover--background-grey"
          style="width: 330px; ">

          <div class="acl-result-card__column">
            <div class="acl-result-card__enhanced-icon">
              <div class="acl-result-card__enhanced-icon-background">
                <i class="aforza-icons animated fadeIn">acl_promo_badge</i>
              </div>
              <div class="acl-result-card__enhanced-icon-foreground acl-result-card__icon--teal">
                <i class="aforza-icons animated fadeIn">acl_promo_symbol</i>
              </div>
            </div>
          </div>

          <div class="acl-result-card__column acl-result-card__column--text-left acl-result-card__padding--left-small">
            <div class="acl-result-card__text acl-result-card__text--bold">
              Applied <span
                class="acl-result-card__text acl-result-card__text--teal acl-result-card__padding--left-small acl-result-card__text--uppercase">Free
                Wine Aerator </span>
            </div>

          </div>

          <div class="acl-result-card__column">
            <div class="acl-result-card__hover-content">
              <div class="acl-result-card__remove">
                <i class="aforza-icons acl-result-card__icon--grey acl-result-card__hover--grey">acl_delete</i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="acl-horizontal-scroller__item">
        <div
          class="acl-result-card acl-result-card--border-teal acl-result-card--rounded-edges acl-result-card__hover--background-grey"
          style="width: 330px; ">

          <div class="acl-result-card__column">
            <div class="acl-result-card__enhanced-icon">
              <div class="acl-result-card__enhanced-icon-background">
                <i class="aforza-icons animated fadeIn">acl_promo_badge</i>
              </div>
              <div class="acl-result-card__enhanced-icon-foreground acl-result-card__icon--teal">
                <i class="aforza-icons animated fadeIn">acl_promo_symbol</i>
              </div>
            </div>
          </div>

          <div class="acl-result-card__column acl-result-card__column--text-left acl-result-card__padding--left-small">
            <div class="acl-result-card__text acl-result-card__text--bold">
              Applied <span
                class="acl-result-card__text acl-result-card__text--teal acl-result-card__padding--left-small acl-result-card__text--uppercase">80%
                off</span>
            </div>

          </div>

          <div class="acl-result-card__column">
            <div class="acl-result-card__hover-content">
              <div class="acl-result-card__remove">
                <i class="aforza-icons acl-result-card__icon--grey acl-result-card__hover--grey">acl_delete</i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="acl-horizontal-scroller__item">
        <div
          class="acl-result-card acl-result-card--border-teal acl-result-card--rounded-edges acl-result-card__hover--background-grey"
          style="width: 330px; ">

          <div class="acl-result-card__column">
            <div class="acl-result-card__enhanced-icon">
              <div class="acl-result-card__enhanced-icon-background">
                <i class="aforza-icons animated fadeIn">acl_promo_badge</i>
              </div>
              <div class="acl-result-card__enhanced-icon-foreground acl-result-card__icon--teal">
                <i class="aforza-icons animated fadeIn">acl_promo_symbol</i>
              </div>
            </div>
          </div>

          <div class="acl-result-card__column acl-result-card__column--text-left acl-result-card__padding--left-small">
            <div class="acl-result-card__text acl-result-card__text--bold">
              Applied <span
                class="acl-result-card__text acl-result-card__text--teal acl-result-card__padding--left-small acl-result-card__text--uppercase">Additional
                Items 10% off</span>
            </div>

          </div>

          <div class="acl-result-card__column">
            <div class="acl-result-card__hover-content">
              <div class="acl-result-card__remove">
                <i class="aforza-icons acl-result-card__icon--grey acl-result-card__hover--grey">acl_delete</i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="acl-horizontal-scroller__item">
        <div
          class="acl-result-card acl-result-card--border-teal acl-result-card--rounded-edges acl-result-card__hover--background-grey"
          style="width: 330px; ">

          <div class="acl-result-card__column">
            <div class="acl-result-card__enhanced-icon">
              <div class="acl-result-card__enhanced-icon-background">
                <i class="aforza-icons animated fadeIn">acl_promo_badge</i>
              </div>
              <div class="acl-result-card__enhanced-icon-foreground acl-result-card__icon--teal">
                <i class="aforza-icons animated fadeIn">acl_promo_symbol</i>
              </div>
            </div>
          </div>

          <div class="acl-result-card__column acl-result-card__column--text-left acl-result-card__padding--left-small">
            <div class="acl-result-card__text acl-result-card__text--bold">
              Applied <span
                class="acl-result-card__text acl-result-card__text--teal acl-result-card__padding--left-small acl-result-card__text--uppercase">5%
                off</span>
            </div>

          </div>

          <div class="acl-result-card__column">
            <div class="acl-result-card__hover-content">
              <div class="acl-result-card__remove">
                <i class="aforza-icons acl-result-card__icon--grey acl-result-card__hover--grey">acl_delete</i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="acl-horizontal-scroller__arrow acl-horizontal-scroller__arrow--right acl-horizontal-scroller__arrow--hidden">
      <i class="aforza-icons animated fadeIn">acl_arrow_right</i>
    </div>
  </div>

  <!-- For ACL demo purposes, not for use in production -->
  <div style="margin: 50px">
    <div style="font-weight: bold; font-size: 16px">Fixed Width</div>
    <div style="font-size: 14px">When provided with a max-width the scroller will respect the provided value and
      calucate scrolls accordingly. </div>
  </div>
  <!-- END * For ACL demo purposes, not for use in production * END-->
  <div class="acl-horizontal-scroller acl-horizontal-scroller-demo2" style="max-width: 745px">
    <div
      class="acl-horizontal-scroller__arrow acl-horizontal-scroller__arrow--left acl-horizontal-scroller__arrow--disabled acl-horizontal-scroller__arrow--hidden">
      <i class="aforza-icons animated fadeIn">acl_arrow_left</i>
    </div>
    <div class="acl-horizontal-scroller__items">

      <div class="acl-horizontal-scroller__item">
        <div class="acl-product-promotion__item" style="min-width:210px; margin-top: 13px;; margin-top: 13px;">
          <div class="acl-product-promotion__image-icon acl-product-promotion__image-icon--yellow">
            <i class="aforza-icons animated fadeIn">acl_popular_product_badge</i>
          </div>
          <img class="acl-product-promotion__image" src="/assets/img/product-ex-1.png" />
          <div class="acl-product-promotion__item-details">
            <div class="acl-product-promotion__name">
              Product Name / Detail 500ml (20 Pack)
            </div>
            <div class="acl-product-promotion__price">
              <div class="acl-product-promotion__cost">
                <span class="acl-product-promotion__currency">£</span>2.30 each
              </div>
              <div class="acl-product-promotion__chip acl-product-promotion__chip--yellow">
                Popular
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="acl-horizontal-scroller__item">
        <div class="acl-product-promotion__item" style="min-width:210px; margin-top: 13px;; margin-top: 13px;">
          <div class="acl-product-promotion__image-icon acl-product-promotion__image-icon--teal">
            <i class="aforza-icons animated fadeIn">acl_recyclable_product_badge</i>
          </div>
          <img class="acl-product-promotion__image" src="/assets/img/product-ex-2.png" />
          <div class="acl-product-promotion__item-details">
            <div class="acl-product-promotion__name">
              Product Name / Detail 500ml (10 Pack)
            </div>
            <div class="acl-product-promotion__price">
              <div class="acl-product-promotion__cost">
                <span class="acl-product-promotion__currency">£</span>1.30 each
              </div>
              <div class="acl-product-promotion__chip acl-product-promotion__chip--teal">
                Recyclable
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="acl-horizontal-scroller__item">
        <div class="acl-product-promotion__item" style="min-width:210px; margin-top: 13px;; margin-top: 13px;">
          <div class="acl-product-promotion__image-icon acl-product-promotion__image-icon--yellow">
            <i class="aforza-icons animated fadeIn">acl_popular_product_badge</i>
          </div>
          <img class="acl-product-promotion__image" src="/assets/img/product-ex-3.png" />
          <div class="acl-product-promotion__item-details">
            <div class="acl-product-promotion__name">
              Product Name / Detail 500ml (20 Pack)
            </div>
            <div class="acl-product-promotion__price">
              <div class="acl-product-promotion__cost">
                <span class="acl-product-promotion__currency">£</span>2.30 each
              </div>
              <div class="acl-product-promotion__chip acl-product-promotion__chip--yellow">
                Popular
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="acl-horizontal-scroller__item">
        <div class="acl-product-promotion__item" style="min-width:210px; margin-top: 13px;; margin-top: 13px;">
          <div class="acl-product-promotion__image-icon acl-product-promotion__image-icon--yellow">
            <i class="aforza-icons animated fadeIn">acl_popular_product_badge</i>
          </div>
          <img class="acl-product-promotion__image" src="/assets/img/product-ex-4.png" />
          <div class="acl-product-promotion__item-details">
            <div class="acl-product-promotion__name">
              Product Name / Detail 500ml (30 Pack)
            </div>
            <div class="acl-product-promotion__price">
              <div class="acl-product-promotion__cost">
                <span class="acl-product-promotion__currency">£</span>3.30 each
              </div>
              <div class="acl-product-promotion__chip acl-product-promotion__chip--yellow">
                Popular
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="acl-horizontal-scroller__arrow acl-horizontal-scroller__arrow--right acl-horizontal-scroller__arrow--hidden">
      <i class="aforza-icons animated fadeIn">acl_arrow_right</i>
    </div>
  </div>

  <!-- For ACL demo purposes, not for use in production -->
  <div style="margin: 50px">
    <div style="font-weight: bold; font-size: 16px">Media Example</div>
    <div style="font-size: 14px">The component can handle any HTML component.</div>
  </div>
  <!-- END * For ACL demo purposes, not for use in production * END-->
  <div class="acl-horizontal-scroller acl-horizontal-scroller-demo3" style="max-width: 640px">
    <div
      class="acl-horizontal-scroller__arrow acl-horizontal-scroller__arrow--left acl-horizontal-scroller__arrow--disabled acl-horizontal-scroller__arrow--hidden">
      <i class="aforza-icons animated fadeIn">acl_arrow_left</i>
    </div>
    <div class="acl-horizontal-scroller__items">
      <div class="acl-horizontal-scroller__item"><iframe width="560" height="315"
          src="https://www.youtube.com/embed/cx9GZGOIVJc" title="YouTube video player" frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen></iframe></div>
      <div class="acl-horizontal-scroller__item"><iframe width="560" height="315"
          src="https://www.youtube.com/embed/6dtCc04HJLI" title="YouTube video player" frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen></iframe></div>
      <div class="acl-horizontal-scroller__item"><iframe width="560" height="315"
          src="https://www.youtube.com/embed/zI58W6n0MjA" title="YouTube video player" frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen></iframe></div>
      <div class="acl-horizontal-scroller__item"><iframe width="560" height="315"
          src="https://www.youtube.com/embed/FCJfNK17_1E" title="YouTube video player" frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen></iframe></div>

    </div>
    <div
      class="acl-horizontal-scroller__arrow acl-horizontal-scroller__arrow--right acl-horizontal-scroller__arrow--hidden">
      <i class="aforza-icons animated fadeIn">acl_arrow_right</i>
    </div>
  </div>

  <!-- For ACL demo purposes, not for use in production -->
  <div style="margin: 50px">
    <div style="font-weight: bold; font-size: 16px">Content Less Than MaxWidth</div>
    <div style="font-size: 14px">If the content of the scroller element does not require scrolling the left and right
      arrows will be hidden.</div>
  </div>
  <!-- END * For ACL demo purposes, not for use in production * END-->
  <div class="acl-horizontal-scroller acl-horizontal-scroller-demo4" style="max-width: 640px">
    <div
      class="acl-horizontal-scroller__arrow acl-horizontal-scroller__arrow--left acl-horizontal-scroller__arrow--disabled acl-horizontal-scroller__arrow--hidden">
      <i class="aforza-icons animated fadeIn">acl_arrow_left</i>
    </div>
    <div class="acl-horizontal-scroller__items">
      <div class="acl-horizontal-scroller__item">
        <div class="acl-horizontal-scroller acl-horizontal-scroller-demo3" style="max-width: 640px">
          <div
            class="acl-horizontal-scroller__arrow acl-horizontal-scroller__arrow--left acl-horizontal-scroller__arrow--disabled acl-horizontal-scroller__arrow--hidden">
            <i class="aforza-icons animated fadeIn">acl_arrow_left</i>
          </div>
          <div class="acl-horizontal-scroller__items">
            <div class="acl-horizontal-scroller__item">
              <div style="width: 226px;margin:20px">
                <div class="acl-contact-card acl-contact-card--shadow">
                  <img src="https://placem.at/people" class="acl-contact-card__avatar" />
                  <div class="acl-contact-card__name">Amanda Martin</div>
                  <div class="acl-contact-card__location">South-East Manchester,UK</div>

                  <div class="acl-contact-card__divider"></div>
                  <div class="acl-contact-card__contact-item">
                    <div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_email</i></div>
                    <a href="mailto:lizzie_higgins@astra.com" class="acl-contact-card__link"
                      title="lizzie_higgins@astra.com">lizzie_higgins@astra.com
                    </a>
                  </div>
                  <div class="acl-contact-card__contact-item">
                    <div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_phone</i></div>
                    <a href="tel:03025168623" class="acl-contact-card__link">03025168623
                    </a>
                  </div>
                  <div class="acl-contact-card__divider"></div>
                  <div class="acl-contact-card__chat-items">
                    <div class="acl-contact-card__contact-item">
                      <div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_whatsapp</i></div>
                      <a href="#" class="acl-contact-card__link">WhatsApp
                      </a>
                    </div>
                    <div class="acl-contact-card__divider acl-contact-card__divider--vertical"></div>
                    <div class="acl-contact-card__contact-item">
                      <div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_chatter</i></div>
                      <a href="#" class="acl-contact-card__link">Chatter
                      </a>
                    </div>
                  </div>

                </div>
              </div>
            </div>
            <div class="acl-horizontal-scroller__item">
              <div style="width: 226px; margin:20px">
                <div class="acl-contact-card acl-contact-card--shadow">
                  <img src="https://placem.at/people" class="acl-contact-card__avatar" />
                  <div class="acl-contact-card__name">Amanda Martin</div>
                  <div class="acl-contact-card__location">South-East Manchester,UK</div>

                  <div class="acl-contact-card__divider"></div>
                  <div class="acl-contact-card__contact-item">
                    <div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_email</i></div>
                    <a href="mailto:lizzie_higgins@astra.com" class="acl-contact-card__link"
                      title="lizzie_higgins@astra.com">lizzie_higgins@astra.com
                    </a>
                  </div>
                  <div class="acl-contact-card__contact-item">
                    <div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_phone</i></div>
                    <a href="tel:03025168623" class="acl-contact-card__link">03025168623
                    </a>
                  </div>
                  <div class="acl-contact-card__divider"></div>
                  <div class="acl-contact-card__chat-items">
                    <div class="acl-contact-card__contact-item">
                      <div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_whatsapp</i></div>
                      <a href="#" class="acl-contact-card__link">WhatsApp
                      </a>
                    </div>
                    <div class="acl-contact-card__divider acl-contact-card__divider--vertical"></div>
                    <div class="acl-contact-card__contact-item">
                      <div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_chatter</i></div>
                      <a href="#" class="acl-contact-card__link">Chatter
                      </a>
                    </div>
                  </div>

                </div>
              </div>
            </div>
          </div>
          <div
            class="acl-horizontal-scroller__arrow acl-horizontal-scroller__arrow--right acl-horizontal-scroller__arrow--hidden">
            <i class="aforza-icons animated fadeIn">acl_arrow_right</i>
          </div>
        </div>

      </div>


    </div>
    <div
      class="acl-horizontal-scroller__arrow acl-horizontal-scroller__arrow--right acl-horizontal-scroller__arrow--hidden">
      <i class="aforza-icons animated fadeIn">acl_arrow_right</i>
    </div>
  </div>
</div>

<script>
  // Demo One
  const scrollerEl = document.querySelector('.acl-horizontal-scroller-demo');
  const horizontalScroller = new acl.ACLHorizontalScroller(scrollerEl);

  // Demo 2
  const scrollerEl2 = document.querySelector('.acl-horizontal-scroller-demo2');
  const horizontalScroller2 = new acl.ACLHorizontalScroller(scrollerEl2);

  // Demo 3
  const scrollerEl3 = document.querySelector('.acl-horizontal-scroller-demo3');
  const horizontalScroller3 = new acl.ACLHorizontalScroller(scrollerEl3);

  // Demo 4
  const scrollerEl4 = document.querySelector('.acl-horizontal-scroller-demo4');
  const horizontalScroller4 = new acl.ACLHorizontalScroller(scrollerEl4);
</script>
 
/* No context defined. */
  • Content: 
    .acl-horizontal-scroller {
    padding: 1rem;
    background: $white;
    border-radius: 5px;
    padding-left: 1rem;
    padding-right: 1rem;
    display: flex;
    align-items: center;

    &__items {
        display: flex;
        gap: 1rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;

        &::-webkit-scrollbar {
            display: none;
        }
    }

    &__item {
        scroll-snap-align: start;
        border-radius: 5px;
    }

    &__arrow {
        background-color: $teal;
        border-radius: 50%;
        display: flex;
        cursor: pointer;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        height: 100%;
        min-width: 26px;
        user-select: none;

        i {
            color: $white;
            font-size: 10px;
            padding: 8px;
        }

        &--left {
            margin-right: 10px;
        }

        &--right {
            margin-left: 10px;
        }

        &--disabled {
            cursor: initial;
            background-color: $light-grey;
        }

        &--hidden {
            display: none;
        }
    }
}
  • URL: /components/raw/horizontal-scroller/acl-horizontal-scroller.scss
  • Filesystem Path: src/components/horizontal-scroller/acl-horizontal-scroller.scss
  • Size: 1.2 KB
  • Content: 
    import { ResizeObserver } from '@juggle/resize-observer';

class ACLHorizontalScroller {
    constructor(scrollerEl, itemEls) {
        this.scrollerEl = scrollerEl;

        this.selector = Object.freeze({
            ITEMS_CONTAINER: 'acl-horizontal-scroller__items',
            ITEM: 'acl-horizontal-scroller__item',
            ARROW: 'acl-horizontal-scroller__arrow',
        });

        this.modifier = Object.freeze({
            DISABLED: '--disabled',
            HIDDEN: '--hidden',
            LEFT: '--left',
            RIGHT: '--right',
        });

        this.listeners = {
            leftArrowMouseDown: false,
            rightArrowMouseDown: false,
            mouseDownTimer: '',
        };

        this.itemsContainer = this.scrollerEl.querySelector(`.${this.selector.ITEMS_CONTAINER}`);
        this.items = itemEls ? itemEls : this.scrollerEl.querySelectorAll(`.${this.selector.ITEM}`);
        this.itemsArray = Array.from(this.items);
        this.leftArrow = this.scrollerEl.querySelector(`.${this.selector.ARROW}${this.modifier.LEFT}`);
        this.rightArrow = this.scrollerEl.querySelector(`.${this.selector.ARROW}${this.modifier.RIGHT}`);
        this.handleEventListeners();
        this.showArrows();
    }

    updateItems(itemEls) {
        this.items = itemEls;
        this.itemsArray = Array.from(this.items);
    }

    nextItem() {
        const scrollAmount = this.getFirstVisibleItemWidth();
        this.horizontalScroll(this.itemsContainer, 'right', 25, 10, scrollAmount);
    }

    previousItem() {
        const scrollAmount = this.getFirstVisibleItemWidth();
        this.horizontalScroll(this.itemsContainer, 'left', 25, 10, scrollAmount);
    }

    scrollToStart() {
        this.itemsContainer.scrollLeft = 0;
    }

    scrollToEnd() {
        this.itemsContainer.scrollLeft = this.itemsContainer.scrollWidth;
    }

    showArrows() {
        if (this.itemsContainer.scrollWidth > this.itemsContainer.clientWidth) {
            this.leftArrow.classList.remove(`${this.selector.ARROW}${this.modifier.HIDDEN}`);
            this.rightArrow.classList.remove(`${this.selector.ARROW}${this.modifier.HIDDEN}`);
        } else {
            this.leftArrow.classList.add(`${this.selector.ARROW}${this.modifier.HIDDEN}`);
            this.rightArrow.classList.add(`${this.selector.ARROW}${this.modifier.HIDDEN}`);
        }
    }

    handleEventListeners() {
        this.leftArrow.addEventListener('click', () => {
            this.debounce(this.previousItem(), 500);
        });

        this.rightArrow.addEventListener('click', () => {
            this.debounce(this.nextItem(), 500);
        });

        this.leftArrow.addEventListener('mousedown', () => {
            this.leftArrowMouseDown = true;
            this.listeners.mouseDownTimer = setTimeout(() => {
                this.leftArrowMouseDown ? this.scrollToStart() : '';
                this.leftArrowMouseDown = false;
            }, 300);
        });

        this.rightArrow.addEventListener('mousedown', () => {
            this.rightArrowMouseDown = true;
            this.listeners.mouseDownTimer = setTimeout(() => {
                this.rightArrowMouseDown ? this.scrollToEnd() : '';
                this.rightArrowMouseDown = false;
            }, 300);
        });

        this.leftArrow.addEventListener('mouseup', () => {
            this.leftArrowMouseDown = false;
            clearTimeout(this.listeners.mouseDownTimer);
        });

        this.rightArrow.addEventListener('mouseup', () => {
            this.leftArrowMouseDown = false;
            clearTimeout(this.listeners.mouseDownTimer);
        });

        this.itemsContainer.addEventListener('scroll', () => {
            if (this.itemsContainer.scrollLeft === 0) {
                this.leftArrow.classList.add(`${this.selector.ARROW}${this.modifier.DISABLED}`);
            } else if (
                this.itemsContainer.scrollLeft ===
                this.itemsContainer.scrollWidth - this.itemsContainer.clientWidth
            ) {
                this.rightArrow.classList.add(`${this.selector.ARROW}${this.modifier.DISABLED}`);
            } else {
                this.leftArrow.classList.remove(`${this.selector.ARROW}${this.modifier.DISABLED}`);
                this.rightArrow.classList.remove(`${this.selector.ARROW}${this.modifier.DISABLED}`);
            }
        });

        new ResizeObserver(() => {
            this.showArrows();
        }).observe(this.itemsContainer);
    }

    getFirstVisibleItemWidth() {
        let itemWidth;
        this.itemsArray.every(item => {
            const isItemInView = this.isItemInView(item);
            if (isItemInView) {
                itemWidth = item.offsetWidth;
                return false;
            }
            return true;
        });
        return itemWidth;
    }

    isItemInView(item) {
        const rect = item.getBoundingClientRect();
        const itemLeft = rect.left;
        const itemRight = rect.right;
        const isVisible = itemLeft >= 0 && itemRight <= window.innerWidth;
        return isVisible;
    }

    horizontalScroll(element, direction, speed, distance, step) {
        let scrollAmount = 0;
        if (step != undefined) {
            const slideTimer = setInterval(function() {
                if (direction == 'left') {
                    element.scrollLeft -= step;
                } else {
                    element.scrollLeft += step;
                }
                scrollAmount += step;

                if (scrollAmount >= distance) {
                    window.clearInterval(slideTimer);
                }
            }, speed);
        }
    }

    debounce(func, delay) {
        let timer = 0;
        return function debouncedFn() {
            if (Date.now() - timer > delay) {
                func();
            }
            timer = Date.now();
        };
    }
}

export { ACLHorizontalScroller };
  • URL: /components/raw/horizontal-scroller/index.js
  • Filesystem Path: src/components/horizontal-scroller/index.js
  • Size: 5.9 KB
  • Handle: @horizontal-scroller
  • Preview:
  • Filesystem Path: src/components/horizontal-scroller/horizontal-scroller.hbs

No notes defined.