<div class="overview">
    <div class="overview__container">
        <div class="overview__row">
            <div class="overview__column">
                <div class="overview__column-container" data-information-column>
                    <div class="overview__title-container">
                        <h3 class="overview__title" data-title>Helmo Milano Jet Helm VAPENSIERO Helmo Milano Jet Helm VAPENSIERO Helmo Milano Jet Helm VAPENSIERO</h3>
                    </div>
                    <div class="overview__price">

                        <div class="price--large">

                            <div class="price__row">
                                <div class="price__column--regular-price">
                                    <div class="price-regular">
                                        <div class="price-regular__current">
                                            <div class="price-regular__current-price-inner">
                                                <div class="price-regular__current-currency--offer">CHF</div>
                                            </div>
                                            <div class="price-regular__current-price-inner">
                                                <div class="price-regular__current-value--offer">189.90</div>
                                            </div>
                                        </div>
                                        <div class="price-regular__list-price">
                                            <div class="price-regular__list-price-prefix">
                                                <del>statt</del>
                                            </div>
                                            <div class="price-regular__list-price-inner">
                                                <div class="price-regular__list-price-currency">
                                                    <del>CHF</del>
                                                </div>
                                                <div class="price-regular__list-price-value">
                                                    <del>215.90</del>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="price-regular__note">UVP exkl. 7.7% MwSt.</div>
                                </div>
                                <div class="price__column--bulk-price">
                                    <div class="price-bulk-price--large">
                                        <div class="price-bulk-price__row">
                                            <div class="price-bulk-price__column">

                                                <div class="price-bulk-price__amount-row" aria-hidden="true">
                                                    <div class="price-bulk-price__amount-column">
                                                        <div class="price-bulk-price__amount">
                                                            <span class="price__desktop-only">ab </span>3<span class="price__mobile-only">+</span>:
                                                        </div>
                                                    </div>
                                                    <div class="price-bulk-price__amount-column">
                                                        <div class="price-bulk-price__amount">
                                                            <span class="price__desktop-only">ab </span>10<span class="price__mobile-only">+</span>:
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="price-bulk-price__value-row">
                                                    <div class="price-bulk-price__value-column">
                                                        <span class="visually-hidden">ab 3: CHF 190.90</span>
                                                        <div class="price-bulk-price__currency" aria-hidden="true">CHF</div>
                                                        <div class="price-bulk-price__value" aria-hidden="true">191</div>
                                                    </div>
                                                    <div class="price-bulk-price__value-column">
                                                        <span class="visually-hidden">ab 10: CHF 185.90</span>
                                                        <div class="price-bulk-price__currency" aria-hidden="true">CHF</div>
                                                        <div class="price-bulk-price__value" aria-hidden="true">186</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="price-bulk-price__column">

                                                <div class="price-bulk-price__amount-row" aria-hidden="true">
                                                    <div class="price-bulk-price__amount-column">
                                                        <div class="price-bulk-price__amount">
                                                            <span class="price__desktop-only">ab </span>20<span class="price__mobile-only">+</span>:
                                                        </div>
                                                    </div>
                                                    <div class="price-bulk-price__amount-column">
                                                        <div class="price-bulk-price__amount">
                                                            <span class="price__desktop-only">ab </span>25<span class="price__mobile-only">+</span>:
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="price-bulk-price__value-row">
                                                    <div class="price-bulk-price__value-column">
                                                        <span class="visually-hidden">ab 20: CHF 180.90</span>
                                                        <div class="price-bulk-price__currency" aria-hidden="true">CHF</div>
                                                        <div class="price-bulk-price__value" aria-hidden="true">181</div>
                                                    </div>
                                                    <div class="price-bulk-price__value-column">
                                                        <span class="visually-hidden">ab 25: CHF 175.90</span>
                                                        <div class="price-bulk-price__currency" aria-hidden="true">CHF</div>
                                                        <div class="price-bulk-price__value" aria-hidden="true">176</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>

                        </div>

                        <div class="price--large-secondary">

                            <div class="price__row">
                                <div class="price__column--regular-price">
                                    <div class="price-regular">
                                        <div class="price-regular__current">
                                            <div class="price-regular__current-price-inner">
                                                <div class="price-regular__current-currency">CHF</div>
                                            </div>
                                            <div class="price-regular__current-price-inner">
                                                <div class="price-regular__current-value">115.90</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="price-regular__note">Preis exkl. 7.7% MwSt.</div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="overview__metadata-container">
                        <div class="overview__attributes">
                            <div class="attributes--large-bold">
                                <ul class="attributes__list">
                                    <li class="attributes__list-item">
                                        <div class="attributes__name">Art.-Nr.</div>
                                        <div class="attributes__value " title="8547625">
                                            8547625
                                        </div>
                                    </li>
                                    <li class="attributes__list-item">
                                        <div class="attributes__name">Marke</div>
                                        <div class="attributes__value has-single-line-ellipsis" title="UYN">
                                            <a class="attributes__attribute-link" href="#" title="UYN">UYN</a>
                                        </div>
                                    </li>
                                    <li class="attributes__list-item">
                                        <div class="attributes__name">Einsatzbereich</div>
                                        <div class="attributes__value has-single-line-ellipsis" title="Outdoor">
                                            <a class="attributes__attribute-link" href="#" title="Outdoor">Outdoor</a>
                                        </div>
                                    </li>
                                    <li class="attributes__list-item">
                                        <div class="attributes__name">Kategorie</div>
                                        <div class="attributes__value has-single-line-ellipsis" title="Schuhe">
                                            <a class="attributes__attribute-link" href="#" title="Schuhe">Schuhe</a>
                                        </div>
                                    </li>
                                    <li class="attributes__list-item">
                                        <div class="attributes__name">Kurzbezeichnung</div>
                                        <div class="attributes__value " title="XM1 run">
                                            XM1 run
                                        </div>
                                    </li>
                                    <li class="attributes__list-item">
                                        <div class="attributes__name">Lager</div>
                                        <div class="attributes__value ">
                                            <div class="stock">
                                                <button type="button" class="stock__toggle--available" data-info-tooltip-content="Verfügbar ab Juli 2020">
                                                    <span class="visually-hidden">Verfügbar ab Juli 2020</span>
                                                </button>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="attributes__list-item">
                                        <div class="attributes__name">Radgrösse</div>
                                        <div class="attributes__value " title="26 zoll">
                                            26 zoll
                                        </div>
                                    </li>
                                    <li class="attributes__list-item">
                                        <div class="attributes__name">Farbe</div>
                                        <div class="attributes__value " title="8/97 Hell-Lichtblond Cendré-Mahagoni">
                                            8/97 Hell-Lichtblond Cendré-Mahagoni
                                        </div>
                                    </li>
                                    <li class="attributes__list-item">
                                        <div class="attributes__name">Grösse</div>
                                        <div class="attributes__value " title="60ml">
                                            60ml
                                        </div>
                                    </li>
                                    <li class="attributes__list-item">
                                        <div class="attributes__name">ANZAHL LIST ITEMS</div>
                                        <div class="attributes__value " title="10 Stk">
                                            10 Stk
                                        </div>
                                    </li>
                                    <li class="attributes__list-item">
                                        <div class="attributes__name">Overflow</div>
                                        <div class="attributes__value " title="11 Stk">
                                            11 Stk
                                        </div>
                                    </li>
                                </ul>
                                <button type="button" class="button-content-toggle is-hidden" data-show-more-label="mehr anzeigen" data-show-less-label="weniger anzeigen" data-attributes-toggle-button="true">mehr anzeigen</button>
                            </div>
                        </div>
                    </div>
                    <div class="overview__features" data-features>
                        <div class="wysiwyg-content">
                            <ul>
                                <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</li>
                                <li>Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
                                <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</li>
                                <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</li>
                            </ul>
                        </div>
                    </div>
                    <button type="button" class="button-content-toggle is-hidden" data-show-more-label="mehr anzeigen" data-show-less-label="weniger anzeigen" data-overview-features-toggle-button="true">mehr anzeigen</button>
                </div>
            </div>
            <div class="overview__column">
                <div class="overview__column-container" data-slider-column>
                    <div class="overview__specials-and-logos">
                        <div class="overview__specials">
                            <div class="specials">

                                <div class="specials--large-horizontally  ">
                                    <button type="button" class="specials__toggle" data-info-tooltip-content="Sale" style="background-color: #e30a24;">
                                        <span class="visually-hidden">Sale</span>
                                        <span class="image ">
                                            <picture>
                                                <img src="/example-assets/images/specials/sale.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
                                            </picture>
                                        </span>

                                    </button>
                                    <button type="button" class="specials__toggle" data-info-tooltip-content="New" style="background-color: #333333;">
                                        <span class="visually-hidden">New</span>
                                        <span class="image ">
                                            <picture>
                                                <img src="/example-assets/images/specials/new.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
                                            </picture>
                                        </span>

                                    </button>
                                    <button type="button" class="specials__toggle" data-info-tooltip-content="Bestseller" style="background-color: #ef5800;">
                                        <span class="visually-hidden">Bestseller</span>
                                        <span class="image ">
                                            <picture>
                                                <img src="/example-assets/images/specials/fire.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
                                            </picture>
                                        </span>

                                    </button>
                                    <button type="button" class="specials__toggle" data-info-tooltip-content="Kauftipp" style="background-color: #44a0d9;">
                                        <span class="visually-hidden">Kauftipp</span>
                                        <span class="image ">
                                            <picture>
                                                <img src="/example-assets/images/specials/tip.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
                                            </picture>
                                        </span>

                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="overview__logos">
                            <div class="logos">
                                <div class="image ">
                                    <picture>
                                        <img src="/example-assets/images/logos/brand-logo.png" class="image__img logos__brand--large is-loading" alt="alt" srcset="/example-assets/images/logos/brand-logo.png 1x, /example-assets/images/logos/brand-logo.png 2x" onload="this.classList.remove('is-loading')" />
                                    </picture>
                                </div>

                                <div class="image ">
                                    <picture>
                                        <img src="/example-assets/images/logos/product-line-logo.jpg" class="image__img logos__productline--large is-loading" alt="alt" srcset="/example-assets/images/logos/product-line-logo.jpg 1x, /example-assets/images/logos/product-line-logo.jpg 2x" onload="this.classList.remove('is-loading')" />
                                    </picture>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="detail-slider">
                        <div class="detail-slider__container">
                            <div class="detail-slider__top-slider">
                                <div class="swiper">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide">
                                            <div class="image ">
                                                <picture>
                                                    <img src="/example-assets/images/detail-slider/image.jpg" class="image__img detail-slider__top-slider-image is-loading" alt="Test Produkt" srcset="/example-assets/images/detail-slider/image.jpg 1x, /example-assets/images/detail-slider/image.jpg 2x" onload="this.classList.remove('is-loading')" />
                                                </picture>
                                            </div>

                                        </div>
                                        <div class="swiper-slide">
                                            <div class="detail-slider__top-slider-video">
                                                <div class="video-player">
                                                    <div class="video-player__thumbnail-container" data-modal-id="video-modal-1038481761">
                                                        <div class="image ">
                                                            <picture>
                                                                <img src="https://img.youtube.com/vi/X6OByqtMDIo/maxresdefault.jpg" class="image__img video-player__thumbnail-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
                                                            </picture>
                                                        </div>

                                                        <div class="video-player__thumbnail-play-button"></div>
                                                    </div>
                                                </div>
                                                <script type="text/html" class="modal__placeholder" id="video-modal-1038481761-placeholder">
                                                    <aside class="modal modal--slide" id="video-modal-1038481761" aria-hidden="true" data-modal>
                                                        <div class="modal__overlay" tabindex="-1" data-modal-close data-modal-overlay>
                                                            <div class="modal__container--medium" role="dialog" aria-modal="true" aria-labelledby="video-modal-1038481761-title">
                                                                <div class="modal__container-inner">
                                                                    <header class="modal__header">
                                                                        <h3 class="modal__title" id="video-modal-1038481761-title"></h3>
                                                                        <div class="modal__close">
                                                                            <button class="button-icon--icon-regular -icon-close" type="button" name="close" value="close" data-modal-close="">
                                                                                <span class="visually-hidden"></span>
                                                                            </button>
                                                                        </div>
                                                                    </header>
                                                                    <main class="modal__content" id="video-modal-1038481761-content">

                                                                        <div class="video-player">
                                                                            <div class="video-player__youtube-container">
                                                                                <iframe class="video-player__youtube" src="https://www.youtube.com/embed/X6OByqtMDIo?iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1&autoplay=1" allowfullscreen allowtransparency allow="autoplay; fullscreen"></iframe>
                                                                            </div>
                                                                        </div>

                                                                    </main>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </aside>
                                                </script>
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="detail-slider__top-slider-video">
                                                <div class="video-player">
                                                    <div class="video-player__thumbnail-container" data-modal-id="video-modal-1331879179">
                                                        <div class="image ">
                                                            <picture>
                                                                <img src="/example-assets/images/video-player/poster.jpg" class="image__img video-player__thumbnail-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
                                                            </picture>
                                                        </div>

                                                        <div class="video-player__thumbnail-play-button"></div>
                                                    </div>
                                                </div>
                                                <script type="text/html" class="modal__placeholder" id="video-modal-1331879179-placeholder">
                                                    <aside class="modal modal--slide" id="video-modal-1331879179" aria-hidden="true" data-modal>
                                                        <div class="modal__overlay" tabindex="-1" data-modal-close data-modal-overlay>
                                                            <div class="modal__container--medium" role="dialog" aria-modal="true" aria-labelledby="video-modal-1331879179-title">
                                                                <div class="modal__container-inner">
                                                                    <header class="modal__header">
                                                                        <h3 class="modal__title" id="video-modal-1331879179-title"></h3>
                                                                        <div class="modal__close">
                                                                            <button class="button-icon--icon-regular -icon-close" type="button" name="close" value="close" data-modal-close="">
                                                                                <span class="visually-hidden"></span>
                                                                            </button>
                                                                        </div>
                                                                    </header>
                                                                    <main class="modal__content" id="video-modal-1331879179-content">

                                                                        <div class="video-player">
                                                                            <div class="video-player__video" data-plyr-provider="vimeo" data-plyr-embed-id="229479141" data-config="{'controls':true,'autoplay':true,'muted':true,'loop':{'active':false},'vimeo':{'muted':true,'background':true,'transparent':true}}"></div>
                                                                        </div>

                                                                    </main>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </aside>
                                                </script>
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="detail-slider__top-slider-video">
                                                <div class="video-player">
                                                    <div class="video-player__thumbnail-container" data-modal-id="video-modal-1395569878">
                                                        <div class="image ">
                                                            <picture>
                                                                <img src="/example-assets/images/video-player/poster.jpg" class="image__img video-player__thumbnail-image is-loading" alt="Test Produkt" onload="this.classList.remove('is-loading')" />
                                                            </picture>
                                                        </div>

                                                        <div class="video-player__thumbnail-play-button"></div>
                                                    </div>
                                                </div>
                                                <script type="text/html" class="modal__placeholder" id="video-modal-1395569878-placeholder">
                                                    <aside class="modal modal--slide" id="video-modal-1395569878" aria-hidden="true" data-modal>
                                                        <div class="modal__overlay" tabindex="-1" data-modal-close data-modal-overlay>
                                                            <div class="modal__container--medium" role="dialog" aria-modal="true" aria-labelledby="video-modal-1395569878-title">
                                                                <div class="modal__container-inner">
                                                                    <header class="modal__header">
                                                                        <h3 class="modal__title" id="video-modal-1395569878-title"></h3>
                                                                        <div class="modal__close">
                                                                            <button class="button-icon--icon-regular -icon-close" type="button" name="close" value="close" data-modal-close="">
                                                                                <span class="visually-hidden"></span>
                                                                            </button>
                                                                        </div>
                                                                    </header>
                                                                    <main class="modal__content" id="video-modal-1395569878-content">

                                                                        <div class="video-player">
                                                                            <span class="visually-hidden">Test Produkt</span>
                                                                            <p class="visually-hidden">Test Description</p>
                                                                            <video class="video-player__video" preload="auto" playsinline controls autoplay muted data-config="{'controls':true,'autoplay':true,'muted':true,'loop':{'active':false}}" poster="/example-assets/images/video-player/poster.jpg">
                                                                                <source src="/example-assets/videos/video-player/video.mp4" type="video/mp4">
                                                                            </video>
                                                                        </div>

                                                                    </main>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </aside>
                                                </script>
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="image ">
                                                <picture>
                                                    <img src="/example-assets/images/detail-slider/image.jpg" class="image__img detail-slider__top-slider-image is-loading" alt="Test Produkt" srcset="/example-assets/images/detail-slider/image.jpg 1x, /example-assets/images/detail-slider/image.jpg 2x" onload="this.classList.remove('is-loading')" />
                                                </picture>
                                            </div>

                                        </div>
                                        <div class="swiper-slide">
                                            <div class="image ">
                                                <picture>
                                                    <img src="/example-assets/images/detail-slider/image.jpg" class="image__img detail-slider__top-slider-image is-loading" alt="Test Produkt" srcset="/example-assets/images/detail-slider/image.jpg 1x, /example-assets/images/detail-slider/image.jpg 2x" onload="this.classList.remove('is-loading')" />
                                                </picture>
                                            </div>

                                        </div>
                                        <div class="swiper-slide">
                                            <div class="image ">
                                                <picture>
                                                    <img src="/example-assets/images/detail-slider/image.jpg" class="image__img detail-slider__top-slider-image is-loading" alt="Test Produkt" srcset="/example-assets/images/detail-slider/image.jpg 1x, /example-assets/images/detail-slider/image.jpg 2x" onload="this.classList.remove('is-loading')" />
                                                </picture>
                                            </div>

                                        </div>
                                        <div class="swiper-slide">
                                            <div class="image ">
                                                <picture>
                                                    <img src="/example-assets/images/detail-slider/image.jpg" class="image__img detail-slider__top-slider-image is-loading" alt="Test Produkt" srcset="/example-assets/images/detail-slider/image.jpg 1x, /example-assets/images/detail-slider/image.jpg 2x" onload="this.classList.remove('is-loading')" />
                                                </picture>
                                            </div>

                                        </div>
                                        <div class="swiper-slide">
                                            <div class="image ">
                                                <picture>
                                                    <img src="/example-assets/images/detail-slider/image.jpg" class="image__img detail-slider__top-slider-image is-loading" alt="Test Produkt" srcset="/example-assets/images/detail-slider/image.jpg 1x, /example-assets/images/detail-slider/image.jpg 2x" onload="this.classList.remove('is-loading')" />
                                                </picture>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <div class="detail-slider__top-slider-next"></div>
                                <div class="detail-slider__top-slider-prev"></div>
                            </div>
                            <div class="detail-slider__bottom-slider">
                                <div class="swiper">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide">
                                            <div class="detail-slider__bottom-slider-image-container">
                                                <div class="image ">
                                                    <picture>
                                                        <img src="/example-assets/images/detail-slider/thumb.png" class="image__img detail-slider__bottom-slider-image is-loading" alt="Test Produkt" srcset="/example-assets/images/detail-slider/thumb.png 1x, /example-assets/images/detail-slider/thumb.png 2x" onload="this.classList.remove('is-loading')" />
                                                    </picture>
                                                </div>

                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="detail-slider__bottom-slider-image-container--video">
                                                <div class="image ">
                                                    <picture>
                                                        <img src="https://img.youtube.com/vi/X6OByqtMDIo/maxresdefault.jpg" class="image__img detail-slider__bottom-slider-image is-loading" alt="Test Produkt" onload="this.classList.remove('is-loading')" />
                                                    </picture>
                                                </div>

                                                <div class="detail-slider__bottom-slider-thumbnail-play-button"></div>
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="detail-slider__bottom-slider-image-container--video">
                                                <div class="image ">
                                                    <picture>
                                                        <img src="/example-assets/images/detail-slider/thumb.png" class="image__img detail-slider__bottom-slider-image is-loading" alt="Test Produkt" onload="this.classList.remove('is-loading')" />
                                                    </picture>
                                                </div>

                                                <div class="detail-slider__bottom-slider-thumbnail-play-button"></div>
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="detail-slider__bottom-slider-image-container--video">
                                                <div class="image ">
                                                    <picture>
                                                        <img src="/example-assets/images/detail-slider/thumb.png" class="image__img detail-slider__bottom-slider-image is-loading" alt="Test Produkt" srcset="/example-assets/images/detail-slider/thumb.png 1x, /example-assets/images/detail-slider/thumb.png 2x" onload="this.classList.remove('is-loading')" />
                                                    </picture>
                                                </div>

                                                <div class="detail-slider__bottom-slider-thumbnail-play-button"></div>
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="detail-slider__bottom-slider-image-container">
                                                <div class="image ">
                                                    <picture>
                                                        <img src="/example-assets/images/detail-slider/thumb.png" class="image__img detail-slider__bottom-slider-image is-loading" alt="Test Produkt" srcset="/example-assets/images/detail-slider/thumb.png 1x, /example-assets/images/detail-slider/thumb.png 2x" onload="this.classList.remove('is-loading')" />
                                                    </picture>
                                                </div>

                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="detail-slider__bottom-slider-image-container">
                                                <div class="image ">
                                                    <picture>
                                                        <img src="/example-assets/images/detail-slider/thumb.png" class="image__img detail-slider__bottom-slider-image is-loading" alt="Test Produkt" srcset="/example-assets/images/detail-slider/thumb.png 1x, /example-assets/images/detail-slider/thumb.png 2x" onload="this.classList.remove('is-loading')" />
                                                    </picture>
                                                </div>

                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="detail-slider__bottom-slider-image-container">
                                                <div class="image ">
                                                    <picture>
                                                        <img src="/example-assets/images/detail-slider/thumb.png" class="image__img detail-slider__bottom-slider-image is-loading" alt="Test Produkt" srcset="/example-assets/images/detail-slider/thumb.png 1x, /example-assets/images/detail-slider/thumb.png 2x" onload="this.classList.remove('is-loading')" />
                                                    </picture>
                                                </div>

                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="detail-slider__bottom-slider-image-container">
                                                <div class="image ">
                                                    <picture>
                                                        <img src="/example-assets/images/detail-slider/thumb.png" class="image__img detail-slider__bottom-slider-image is-loading" alt="Test Produkt" srcset="/example-assets/images/detail-slider/thumb.png 1x, /example-assets/images/detail-slider/thumb.png 2x" onload="this.classList.remove('is-loading')" />
                                                    </picture>
                                                </div>

                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="detail-slider__bottom-slider-image-container">
                                                <div class="image ">
                                                    <picture>
                                                        <img src="/example-assets/images/detail-slider/thumb.png" class="image__img detail-slider__bottom-slider-image is-loading" alt="Test Produkt" srcset="/example-assets/images/detail-slider/thumb.png 1x, /example-assets/images/detail-slider/thumb.png 2x" onload="this.classList.remove('is-loading')" />
                                                    </picture>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="detail-slider__bottom-slider-next"></div>
                                <div class="detail-slider__bottom-slider-prev"></div>
                            </div>
                            <div class="detail-slider__meta--videos-and-images">
                                <div class="detail-slider__meta-left">6 Bilder</div>
                                <div class="detail-slider__meta-right">3 Videos</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="application/ld+json">
        {
            "@context": "http://schema.org",
            "@type": "Product",
            "name": "Helmo Milano Jet Helm VAPENSIERO Helmo Milano Jet Helm VAPENSIERO Helmo Milano Jet Helm VAPENSIERO",
            "description": "<ul><li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</li><li>Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li><li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</li><li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</li></ul>",
            "image": ["/example-assets/images/detail-slider/image.jpg", "/example-assets/images/detail-slider/image.jpg", "/example-assets/images/detail-slider/image.jpg", "/example-assets/images/detail-slider/image.jpg", "/example-assets/images/detail-slider/image.jpg", "/example-assets/images/detail-slider/image.jpg"],
            "offers": {
                "@type": "Offer",
                "price": "189.90",
                "priceCurrency": "CHF"
            }
        }
    </script>
</div>
{% include '@SharedComponents/modules/b2b-product-detail/components/overview/overview.twig' %}
{
  "headingLevel": "3",
  "title": "Helmo Milano Jet Helm VAPENSIERO Helmo Milano Jet Helm VAPENSIERO Helmo Milano Jet Helm VAPENSIERO",
  "slider": {
    "labels": {
      "amountOfImages": "6 Bilder",
      "amountOfVideos": "3 Videos"
    },
    "items": [
      {
        "thumbnail": {
          "alt": "Test Produkt",
          "src": "/example-assets/images/detail-slider/thumb.png",
          "src2x": "/example-assets/images/detail-slider/thumb.png"
        },
        "image": {
          "alt": "Test Produkt",
          "src": "/example-assets/images/detail-slider/image.jpg",
          "src2x": "/example-assets/images/detail-slider/image.jpg"
        }
      },
      {
        "thumbnail": {
          "alt": "Test Produkt",
          "src": "https://img.youtube.com/vi/X6OByqtMDIo/maxresdefault.jpg"
        },
        "youtube": {
          "id": "X6OByqtMDIo",
          "poster": "https://img.youtube.com/vi/X6OByqtMDIo/maxresdefault.jpg",
          "autoplay": false,
          "overlay": true
        }
      },
      {
        "thumbnail": {
          "alt": "Test Produkt",
          "src": "/example-assets/images/detail-slider/thumb.png"
        },
        "vimeo": {
          "id": "229479141",
          "poster": "/example-assets/images/video-player/poster.jpg",
          "autoplay": false,
          "overlay": true
        }
      },
      {
        "thumbnail": {
          "alt": "Test Produkt",
          "src": "/example-assets/images/detail-slider/thumb.png",
          "src2x": "/example-assets/images/detail-slider/thumb.png"
        },
        "video": {
          "title": "Test Produkt",
          "description": "Test Description",
          "mp4": "/example-assets/videos/video-player/video.mp4",
          "poster": "/example-assets/images/video-player/poster.jpg",
          "autoplay": false,
          "overlay": true
        }
      },
      {
        "thumbnail": {
          "alt": "Test Produkt",
          "src": "/example-assets/images/detail-slider/thumb.png",
          "src2x": "/example-assets/images/detail-slider/thumb.png"
        },
        "image": {
          "alt": "Test Produkt",
          "src": "/example-assets/images/detail-slider/image.jpg",
          "src2x": "/example-assets/images/detail-slider/image.jpg"
        }
      },
      {
        "thumbnail": {
          "alt": "Test Produkt",
          "src": "/example-assets/images/detail-slider/thumb.png",
          "src2x": "/example-assets/images/detail-slider/thumb.png"
        },
        "image": {
          "alt": "Test Produkt",
          "src": "/example-assets/images/detail-slider/image.jpg",
          "src2x": "/example-assets/images/detail-slider/image.jpg"
        }
      },
      {
        "thumbnail": {
          "alt": "Test Produkt",
          "src": "/example-assets/images/detail-slider/thumb.png",
          "src2x": "/example-assets/images/detail-slider/thumb.png"
        },
        "image": {
          "alt": "Test Produkt",
          "src": "/example-assets/images/detail-slider/image.jpg",
          "src2x": "/example-assets/images/detail-slider/image.jpg"
        }
      },
      {
        "thumbnail": {
          "alt": "Test Produkt",
          "src": "/example-assets/images/detail-slider/thumb.png",
          "src2x": "/example-assets/images/detail-slider/thumb.png"
        },
        "image": {
          "alt": "Test Produkt",
          "src": "/example-assets/images/detail-slider/image.jpg",
          "src2x": "/example-assets/images/detail-slider/image.jpg"
        }
      },
      {
        "thumbnail": {
          "alt": "Test Produkt",
          "src": "/example-assets/images/detail-slider/thumb.png",
          "src2x": "/example-assets/images/detail-slider/thumb.png"
        },
        "image": {
          "alt": "Test Produkt",
          "src": "/example-assets/images/detail-slider/image.jpg",
          "src2x": "/example-assets/images/detail-slider/image.jpg"
        }
      }
    ]
  },
  "logos": {
    "size": "large",
    "logos": {
      "brand": {
        "alt": "alt",
        "src": "/example-assets/images/logos/brand-logo.png",
        "src2x": "/example-assets/images/logos/brand-logo.png"
      },
      "productLine": {
        "alt": "alt",
        "src": "/example-assets/images/logos/product-line-logo.jpg",
        "src2x": "/example-assets/images/logos/product-line-logo.jpg"
      }
    }
  },
  "specials": {
    "variant": "large-horizontally",
    "items": [
      {
        "value": "Sale",
        "color": "#e30a24",
        "icon": "/example-assets/images/specials/sale.svg"
      },
      {
        "value": "New",
        "color": "#333333",
        "icon": "/example-assets/images/specials/new.svg"
      },
      {
        "value": "Bestseller",
        "color": "#ef5800",
        "icon": "/example-assets/images/specials/fire.svg"
      },
      {
        "value": "Kauftipp",
        "color": "#44a0d9",
        "icon": "/example-assets/images/specials/tip.svg"
      }
    ]
  },
  "price": {
    "variant": "large",
    "labels": {
      "from": "ab",
      "instead": "statt"
    },
    "price": {
      "currency": "CHF",
      "price": "189.90",
      "listPrice": "215.90",
      "note": "UVP exkl. 7.7% MwSt."
    },
    "bulkPrices": {
      "prices": {
        "3": {
          "currency": "CHF",
          "price": "190.90"
        },
        "10": {
          "currency": "CHF",
          "price": "185.90"
        },
        "20": {
          "currency": "CHF",
          "price": "180.90"
        },
        "25": {
          "currency": "CHF",
          "price": "175.90"
        }
      }
    }
  },
  "livePrice": {
    "variant": "large-secondary",
    "labels": {
      "from": "ab",
      "instead": "statt"
    },
    "price": {
      "currency": "CHF",
      "price": "115.90",
      "note": "Preis exkl. 7.7% MwSt."
    }
  },
  "attributes": {
    "variant": "large-bold",
    "labels": {
      "more": "mehr anzeigen",
      "less": "weniger anzeigen"
    },
    "attributes": [
      {
        "type": "text",
        "name": "Art.-Nr.",
        "value": "8547625"
      },
      {
        "type": "link",
        "name": "Marke",
        "value": "UYN",
        "href": "#"
      },
      {
        "type": "link",
        "name": "Einsatzbereich",
        "value": "Outdoor",
        "href": "#"
      },
      {
        "type": "link",
        "name": "Kategorie",
        "value": "Schuhe",
        "href": "#"
      },
      {
        "type": "text",
        "name": "Kurzbezeichnung",
        "value": "XM1 run"
      },
      {
        "type": "stock",
        "name": "Lager",
        "status": "available",
        "tooltip": "Verfügbar ab Juli 2020"
      },
      {
        "type": "text",
        "name": "Radgrösse",
        "value": "26 zoll"
      },
      {
        "type": "text",
        "name": "Farbe",
        "value": "8/97 Hell-Lichtblond Cendré-Mahagoni"
      },
      {
        "type": "text",
        "name": "Grösse",
        "value": "60ml"
      },
      {
        "type": "text",
        "name": "ANZAHL LIST ITEMS",
        "value": "10 Stk"
      },
      {
        "type": "text",
        "name": "Overflow",
        "value": "11 Stk"
      }
    ]
  },
  "features": {
    "value": "<ul><li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</li><li>Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li><li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</li><li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</li></ul>",
    "toggle": {
      "more": "mehr anzeigen",
      "less": "weniger anzeigen"
    }
  }
}
  • Content:
    import './overview.scss';
    import Overview, {selector as sel} from 'cando-cx-components-library/components/modules/b2b-product-detail/components/overview/overview';
    
    export default Overview;
    export const selector = sel;
  • URL: /components/raw/overview/overview.js
  • Filesystem Path: src/components/modules/b2b-product-detail/components/overview/overview.js
  • Size: 218 Bytes
  • Content:
    @import "~shared/base";
    @import "~cando-cx-components-library/components/modules/b2b-product-detail/components/overview/overview";
  • URL: /components/raw/overview/overview.scss
  • Filesystem Path: src/components/modules/b2b-product-detail/components/overview/overview.scss
  • Size: 130 Bytes

No notes defined.