<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">CHF</div>
</div>
<div class="price-regular__current-price-inner">
<div class="price-regular__current-value">189.90</div>
</div>
</div>
</div>
<div class="price-regular__note">UVP inkl. 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>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</li>
<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>
<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>
<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 class="overview__icons-awards">
<ul class="icons-awards">
<li class="icons-awards__list-item">
<button type="button" class="icons-awards__toggle" data-info-tooltip-content="Beheizbar">
<span class="visually-hidden">Beheizbar</span>
<span class="image ">
<picture>
<img src="/example-assets/images/icons/icon1.png" class="image__img icons-awards__image is-loading" alt="Beheizbar" onload="this.classList.remove('is-loading')" />
</picture>
</span>
</button>
</li>
<li class="icons-awards__list-item">
<button type="button" class="icons-awards__toggle" data-info-tooltip-content="Super soft">
<span class="visually-hidden">Super soft</span>
<span class="image ">
<picture>
<img src="/example-assets/images/icons/icon2.png" class="image__img icons-awards__image is-loading" alt="Super soft" onload="this.classList.remove('is-loading')" />
</picture>
</span>
</button>
</li>
<li class="icons-awards__list-item">
<button type="button" class="icons-awards__toggle" data-info-tooltip-content="Etwas ganz besonderes">
<span class="visually-hidden">Etwas ganz besonderes</span>
<span class="image ">
<picture>
<img src="/example-assets/images/icons/icon3.png" class="image__img icons-awards__image is-loading" alt="Etwas ganz besonderes" onload="this.classList.remove('is-loading')" />
</picture>
</span>
</button>
</li>
<li class="icons-awards__list-item">
<button type="button" class="icons-awards__toggle" data-info-tooltip-content="Waterproof">
<span class="visually-hidden">Waterproof</span>
<span class="image ">
<picture>
<img src="/example-assets/images/icons/icon4.png" class="image__img icons-awards__image is-loading" alt="Waterproof" onload="this.classList.remove('is-loading')" />
</picture>
</span>
</button>
</li>
<li class="icons-awards__list-item">
<button type="button" class="icons-awards__toggle" data-info-tooltip-content="Stretch">
<span class="visually-hidden">Stretch</span>
<span class="image ">
<picture>
<img src="/example-assets/images/icons/icon5.png" class="image__img icons-awards__image is-loading" alt="Stretch" onload="this.classList.remove('is-loading')" />
</picture>
</span>
</button>
</li>
<li class="icons-awards__list-item">
<button type="button" class="icons-awards__toggle" data-info-tooltip-content="Beheizbar">
<span class="visually-hidden">Beheizbar</span>
<span class="image ">
<picture>
<img src="/example-assets/images/icons/icon1.png" class="image__img icons-awards__image is-loading" alt="Beheizbar" onload="this.classList.remove('is-loading')" />
</picture>
</span>
</button>
</li>
<li class="icons-awards__list-item">
<button type="button" class="icons-awards__toggle" data-info-tooltip-content="Beheizbar">
<span class="visually-hidden">Beheizbar</span>
<span class="image ">
<picture>
<img src="/example-assets/images/icons/icon1.png" class="image__img icons-awards__image is-loading" alt="Beheizbar" onload="this.classList.remove('is-loading')" />
</picture>
</span>
</button>
</li>
<li class="icons-awards__list-item">
<button type="button" class="icons-awards__toggle" data-info-tooltip-content="Super soft">
<span class="visually-hidden">Super soft</span>
<span class="image ">
<picture>
<img src="/example-assets/images/icons/icon2.png" class="image__img icons-awards__image is-loading" alt="Super soft" onload="this.classList.remove('is-loading')" />
</picture>
</span>
</button>
</li>
<li class="icons-awards__list-item">
<button type="button" class="icons-awards__toggle" data-info-tooltip-content="Etwas ganz besonderes">
<span class="visually-hidden">Etwas ganz besonderes</span>
<span class="image ">
<picture>
<img src="/example-assets/images/icons/icon3.png" class="image__img icons-awards__image is-loading" alt="Etwas ganz besonderes" onload="this.classList.remove('is-loading')" />
</picture>
</span>
</button>
</li>
<li class="icons-awards__list-item">
<button type="button" class="icons-awards__toggle" data-info-tooltip-content="Waterproof">
<span class="visually-hidden">Waterproof</span>
<span class="image ">
<picture>
<img src="/example-assets/images/icons/icon4.png" class="image__img icons-awards__image is-loading" alt="Waterproof" onload="this.classList.remove('is-loading')" />
</picture>
</span>
</button>
</li>
<li class="icons-awards__list-item">
<button type="button" class="icons-awards__toggle" data-info-tooltip-content="Stretch">
<span class="visually-hidden">Stretch</span>
<span class="image ">
<picture>
<img src="/example-assets/images/icons/icon5.png" class="image__img icons-awards__image is-loading" alt="Stretch" onload="this.classList.remove('is-loading')" />
</picture>
</span>
</button>
</li>
<li class="icons-awards__list-item">
<button type="button" class="icons-awards__toggle" data-info-tooltip-content="Beheizbar">
<span class="visually-hidden">Beheizbar</span>
<span class="image ">
<picture>
<img src="/example-assets/images/icons/icon1.png" class="image__img icons-awards__image is-loading" alt="Beheizbar" onload="this.classList.remove('is-loading')" />
</picture>
</span>
</button>
</li>
</ul>
</div>
</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-1674690955">
<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-1674690955-placeholder"></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-1918460402">
<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-1918460402-placeholder"></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-514341480">
<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-514341480-placeholder">
<aside class="modal modal--slide" id="video-modal-514341480" 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-514341480-title">
<div class="modal__container-inner">
<header class="modal__header">
<h3 class="modal__title" id="video-modal-514341480-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-514341480-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"></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",
"note": "UVP inkl. 7.7% MwSt."
}
},
"features": {
"value": "<ul><li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</li><li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</li><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><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><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"
}
},
"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"
}
]
},
"iconsAwards": [
{
"value": "Beheizbar",
"image": {
"src": "/example-assets/images/icons/icon1.png",
"alt": "Beheizbar"
}
},
{
"value": "Super soft",
"image": {
"src": "/example-assets/images/icons/icon2.png",
"alt": "Super soft"
}
},
{
"value": "Etwas ganz besonderes",
"image": {
"src": "/example-assets/images/icons/icon3.png",
"alt": "Etwas ganz besonderes"
}
},
{
"value": "Waterproof",
"image": {
"src": "/example-assets/images/icons/icon4.png",
"alt": "Waterproof"
}
},
{
"value": "Stretch",
"image": {
"src": "/example-assets/images/icons/icon5.png",
"alt": "Stretch"
}
},
{
"value": "Beheizbar",
"image": {
"src": "/example-assets/images/icons/icon1.png",
"alt": "Beheizbar"
}
},
{
"value": "Beheizbar",
"image": {
"src": "/example-assets/images/icons/icon1.png",
"alt": "Beheizbar"
}
},
{
"value": "Super soft",
"image": {
"src": "/example-assets/images/icons/icon2.png",
"alt": "Super soft"
}
},
{
"value": "Etwas ganz besonderes",
"image": {
"src": "/example-assets/images/icons/icon3.png",
"alt": "Etwas ganz besonderes"
}
},
{
"value": "Waterproof",
"image": {
"src": "/example-assets/images/icons/icon4.png",
"alt": "Waterproof"
}
},
{
"value": "Stretch",
"image": {
"src": "/example-assets/images/icons/icon5.png",
"alt": "Stretch"
}
},
{
"value": "Beheizbar",
"image": {
"src": "/example-assets/images/icons/icon1.png",
"alt": "Beheizbar"
}
}
]
}
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;
@import "~shared/base";
@import "~cando-cx-components-library/components/modules/b2b-product-detail/components/overview/overview";
No notes defined.