- id: w-s-13
-
-
{% include "@Components/sections/hero-slider-section/hero-slider-section.twig" with {props: { group: { items: hero_slider_sample, variant: "left", }, }} %} -
<section class="base-section s-hero-slider"> <div class="base-section__container container"> <div class="s-hero-slider__slider u-posr"> <div class="swiper g-hero-slider --loading"> <div class="swiper-wrapper"> <div class="swiper-slide"> <article class="i-hero-slide u-posr --left"> <div class="i-hero-slide__image"> <div class="img u-posr overflow-hidden --cover --placeholder"> <picture> <source srcset="" data-srcset="https://placehold.co/378x155 1x, https://placehold.co/756x310 2x" media="(max-width: 425px)"> <img src="" data-src="https://placehold.co/1408x528" alt="Nakupujte u nás!" width="1408" height="528" draggable="false" srcset="" data-srcset="https://placehold.co/1408x528 1x, https://placehold.co/2816x1056 2x"> </picture> </div> </div> <div class="i-hero-slide__body p-4 u-posa d-flex flex-column gap-2 u-translate-middle-y u-top-50-p"> <h2 class="base-heading mb-0 u-fw-700 u-h2"> Nakupujte u nás! </h2> <div class="i-hero-slide__description"> Lodivodem postižena radar nímž brázdil kulturním v prostředí houževnatost i populace, za kontrakt. </div> <div class="i-hero-slide__footer mt-4"> <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --full-width-mobile" href='#'> <span class="btn__title u-z-index-1"> Zobrazit produkty </span> </a> </div> </div> </article> </div> <div class="swiper-slide"> <article class="i-hero-slide u-posr --left"> <div class="i-hero-slide__image"> <div class="img u-posr overflow-hidden --cover --placeholder"> <picture> <source srcset="" data-srcset="https://placehold.co/378x155 1x, https://placehold.co/756x310 2x" media="(max-width: 425px)"> <img src="" data-src="https://placehold.co/1408x528" alt="Nová řada služeb" width="1408" height="528" draggable="false" srcset="" data-srcset="https://placehold.co/1408x528 1x, https://placehold.co/2816x1056 2x"> </picture> </div> </div> <div class="i-hero-slide__body p-4 u-posa d-flex flex-column gap-2 u-translate-middle-y u-top-50-p"> <h2 class="base-heading mb-0 u-fw-700 u-h2"> Nová řada služeb </h2> <div class="i-hero-slide__description"> Do co území ságy naděje po modifikovanou. Stálých ne věřit zamrzlé, </div> <div class="i-hero-slide__footer mt-4"> <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --full-width-mobile" href='#'> <span class="btn__title u-z-index-1"> Zobrazit produkty </span> </a> </div> </div> </article> </div> <div class="swiper-slide"> <article class="i-hero-slide u-posr --left"> <div class="i-hero-slide__image"> <div class="img u-posr overflow-hidden --cover --placeholder"> <picture> <source srcset="" data-srcset="https://placehold.co/378x155 1x, https://placehold.co/756x310 2x" media="(max-width: 425px)"> <img src="" data-src="https://placehold.co/1408x528" alt="Budoucnost jsme my!" width="1408" height="528" draggable="false" srcset="" data-srcset="https://placehold.co/1408x528 1x, https://placehold.co/2816x1056 2x"> </picture> </div> </div> <div class="i-hero-slide__body p-4 u-posa d-flex flex-column gap-2 u-translate-middle-y u-top-50-p"> <h2 class="base-heading mb-0 u-fw-700 u-h2"> Budoucnost jsme my! </h2> <div class="i-hero-slide__description"> Do co území ságy naděje po modifikovanou. Stálých ne věřit zamrzlé, </div> <div class="i-hero-slide__footer mt-4"> <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --full-width-mobile" href='#'> <span class="btn__title u-z-index-1"> Zobrazit produkty </span> </a> </div> </div> </article> </div> </div> <div class="g-hero-slider__pagination swiper-pagination mt-3"></div> </div> <div class="g-hero-slider__buttons d-flex u-z-index-1 justify-content-between w-100 u-posa u-translate-middle-y u-top-50-p u-left-0 pe-none"> <span class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --xs --animation-left --icon-only g-hero-slider__button --prev pe-auto"> <span class="btn__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg> </span> </span> </span> <span class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --xs --animation-right --icon-only g-hero-slider__button --next pe-auto"> <span class="btn__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg> </span> </span> </span> </div> </div> </div> </section>
-
-
{% include "@Components/sections/hero-slider-section/hero-slider-section.twig" with {props: { group: { items: hero_slider_sample, variant: "center", }, }} %} -
<section class="base-section s-hero-slider"> <div class="base-section__container container"> <div class="s-hero-slider__slider u-posr"> <div class="swiper g-hero-slider --loading"> <div class="swiper-wrapper"> <div class="swiper-slide"> <article class="i-hero-slide u-posr --center"> <div class="i-hero-slide__image"> <div class="img u-posr overflow-hidden --cover --placeholder"> <picture> <source srcset="" data-srcset="https://placehold.co/378x155 1x, https://placehold.co/756x310 2x" media="(max-width: 425px)"> <img src="" data-src="https://placehold.co/1408x528" alt="Nakupujte u nás!" width="1408" height="528" draggable="false" srcset="" data-srcset="https://placehold.co/1408x528 1x, https://placehold.co/2816x1056 2x"> </picture> </div> </div> <div class="i-hero-slide__body p-4 u-posa d-flex flex-column gap-2 u-translate-middle-y u-top-50-p"> <h2 class="base-heading mb-0 u-fw-700 u-h2"> Nakupujte u nás! </h2> <div class="i-hero-slide__description"> Lodivodem postižena radar nímž brázdil kulturním v prostředí houževnatost i populace, za kontrakt. </div> <div class="i-hero-slide__footer mt-4"> <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --full-width-mobile" href='#'> <span class="btn__title u-z-index-1"> Zobrazit produkty </span> </a> </div> </div> </article> </div> <div class="swiper-slide"> <article class="i-hero-slide u-posr --center"> <div class="i-hero-slide__image"> <div class="img u-posr overflow-hidden --cover --placeholder"> <picture> <source srcset="" data-srcset="https://placehold.co/378x155 1x, https://placehold.co/756x310 2x" media="(max-width: 425px)"> <img src="" data-src="https://placehold.co/1408x528" alt="Nová řada služeb" width="1408" height="528" draggable="false" srcset="" data-srcset="https://placehold.co/1408x528 1x, https://placehold.co/2816x1056 2x"> </picture> </div> </div> <div class="i-hero-slide__body p-4 u-posa d-flex flex-column gap-2 u-translate-middle-y u-top-50-p"> <h2 class="base-heading mb-0 u-fw-700 u-h2"> Nová řada služeb </h2> <div class="i-hero-slide__description"> Do co území ságy naděje po modifikovanou. Stálých ne věřit zamrzlé, </div> <div class="i-hero-slide__footer mt-4"> <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --full-width-mobile" href='#'> <span class="btn__title u-z-index-1"> Zobrazit produkty </span> </a> </div> </div> </article> </div> <div class="swiper-slide"> <article class="i-hero-slide u-posr --center"> <div class="i-hero-slide__image"> <div class="img u-posr overflow-hidden --cover --placeholder"> <picture> <source srcset="" data-srcset="https://placehold.co/378x155 1x, https://placehold.co/756x310 2x" media="(max-width: 425px)"> <img src="" data-src="https://placehold.co/1408x528" alt="Budoucnost jsme my!" width="1408" height="528" draggable="false" srcset="" data-srcset="https://placehold.co/1408x528 1x, https://placehold.co/2816x1056 2x"> </picture> </div> </div> <div class="i-hero-slide__body p-4 u-posa d-flex flex-column gap-2 u-translate-middle-y u-top-50-p"> <h2 class="base-heading mb-0 u-fw-700 u-h2"> Budoucnost jsme my! </h2> <div class="i-hero-slide__description"> Do co území ságy naděje po modifikovanou. Stálých ne věřit zamrzlé, </div> <div class="i-hero-slide__footer mt-4"> <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --full-width-mobile" href='#'> <span class="btn__title u-z-index-1"> Zobrazit produkty </span> </a> </div> </div> </article> </div> </div> <div class="g-hero-slider__pagination swiper-pagination mt-3"></div> </div> <div class="g-hero-slider__buttons d-flex u-z-index-1 justify-content-between w-100 u-posa u-translate-middle-y u-top-50-p u-left-0 pe-none"> <span class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --xs --animation-left --icon-only g-hero-slider__button --prev pe-auto"> <span class="btn__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg> </span> </span> </span> <span class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --xs --animation-right --icon-only g-hero-slider__button --next pe-auto"> <span class="btn__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg> </span> </span> </span> </div> </div> </div> </section>
-
-
{% include "@Components/sections/hero-slider-section/hero-slider-section.twig" with {props: { group: { items: hero_slider_sample, variant: "right", }, }} %} -
<section class="base-section s-hero-slider"> <div class="base-section__container container"> <div class="s-hero-slider__slider u-posr"> <div class="swiper g-hero-slider --loading"> <div class="swiper-wrapper"> <div class="swiper-slide"> <article class="i-hero-slide u-posr --right"> <div class="i-hero-slide__image"> <div class="img u-posr overflow-hidden --cover --placeholder"> <picture> <source srcset="" data-srcset="https://placehold.co/378x155 1x, https://placehold.co/756x310 2x" media="(max-width: 425px)"> <img src="" data-src="https://placehold.co/1408x528" alt="Nakupujte u nás!" width="1408" height="528" draggable="false" srcset="" data-srcset="https://placehold.co/1408x528 1x, https://placehold.co/2816x1056 2x"> </picture> </div> </div> <div class="i-hero-slide__body p-4 u-posa d-flex flex-column gap-2 u-translate-middle-y u-top-50-p"> <h2 class="base-heading mb-0 u-fw-700 u-h2"> Nakupujte u nás! </h2> <div class="i-hero-slide__description"> Lodivodem postižena radar nímž brázdil kulturním v prostředí houževnatost i populace, za kontrakt. </div> <div class="i-hero-slide__footer mt-4"> <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --full-width-mobile" href='#'> <span class="btn__title u-z-index-1"> Zobrazit produkty </span> </a> </div> </div> </article> </div> <div class="swiper-slide"> <article class="i-hero-slide u-posr --right"> <div class="i-hero-slide__image"> <div class="img u-posr overflow-hidden --cover --placeholder"> <picture> <source srcset="" data-srcset="https://placehold.co/378x155 1x, https://placehold.co/756x310 2x" media="(max-width: 425px)"> <img src="" data-src="https://placehold.co/1408x528" alt="Nová řada služeb" width="1408" height="528" draggable="false" srcset="" data-srcset="https://placehold.co/1408x528 1x, https://placehold.co/2816x1056 2x"> </picture> </div> </div> <div class="i-hero-slide__body p-4 u-posa d-flex flex-column gap-2 u-translate-middle-y u-top-50-p"> <h2 class="base-heading mb-0 u-fw-700 u-h2"> Nová řada služeb </h2> <div class="i-hero-slide__description"> Do co území ságy naděje po modifikovanou. Stálých ne věřit zamrzlé, </div> <div class="i-hero-slide__footer mt-4"> <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --full-width-mobile" href='#'> <span class="btn__title u-z-index-1"> Zobrazit produkty </span> </a> </div> </div> </article> </div> <div class="swiper-slide"> <article class="i-hero-slide u-posr --right"> <div class="i-hero-slide__image"> <div class="img u-posr overflow-hidden --cover --placeholder"> <picture> <source srcset="" data-srcset="https://placehold.co/378x155 1x, https://placehold.co/756x310 2x" media="(max-width: 425px)"> <img src="" data-src="https://placehold.co/1408x528" alt="Budoucnost jsme my!" width="1408" height="528" draggable="false" srcset="" data-srcset="https://placehold.co/1408x528 1x, https://placehold.co/2816x1056 2x"> </picture> </div> </div> <div class="i-hero-slide__body p-4 u-posa d-flex flex-column gap-2 u-translate-middle-y u-top-50-p"> <h2 class="base-heading mb-0 u-fw-700 u-h2"> Budoucnost jsme my! </h2> <div class="i-hero-slide__description"> Do co území ságy naděje po modifikovanou. Stálých ne věřit zamrzlé, </div> <div class="i-hero-slide__footer mt-4"> <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --full-width-mobile" href='#'> <span class="btn__title u-z-index-1"> Zobrazit produkty </span> </a> </div> </div> </article> </div> </div> <div class="g-hero-slider__pagination swiper-pagination mt-3"></div> </div> <div class="g-hero-slider__buttons d-flex u-z-index-1 justify-content-between w-100 u-posa u-translate-middle-y u-top-50-p u-left-0 pe-none"> <span class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --xs --animation-left --icon-only g-hero-slider__button --prev pe-auto"> <span class="btn__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg> </span> </span> </span> <span class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --xs --animation-right --icon-only g-hero-slider__button --next pe-auto"> <span class="btn__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg> </span> </span> </span> </div> </div> </div> </section>
-
-
{% include "@Components/sections/hero-slider-section/hero-slider-section.twig" with {props: { group: { items: hero_slider_sample[:1], variant: "left", }, }} %} -
<section class="base-section s-hero-slider"> <div class="base-section__container container"> <div class="s-hero-slider__slider u-posr"> <article class="i-hero-slide u-posr --left"> <div class="i-hero-slide__image"> <div class="img u-posr overflow-hidden --cover --placeholder"> <picture> <source srcset="" data-srcset="https://placehold.co/378x155 1x, https://placehold.co/756x310 2x" media="(max-width: 425px)"> <img src="" data-src="https://placehold.co/1408x528" alt="Nakupujte u nás!" width="1408" height="528" draggable="false" srcset="" data-srcset="https://placehold.co/1408x528 1x, https://placehold.co/2816x1056 2x"> </picture> </div> </div> <div class="i-hero-slide__body p-4 u-posa d-flex flex-column gap-2 u-translate-middle-y u-top-50-p"> <h2 class="base-heading mb-0 u-fw-700 u-h2"> Nakupujte u nás! </h2> <div class="i-hero-slide__description"> Lodivodem postižena radar nímž brázdil kulturním v prostředí houževnatost i populace, za kontrakt. </div> <div class="i-hero-slide__footer mt-4"> <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --full-width-mobile" href='#'> <span class="btn__title u-z-index-1"> Zobrazit produkty </span> </a> </div> </div> </article> </div> </div> </section>