7
-
{% include "@Components/sections/estates-slide-section/estates-slide-section.twig" with { props: { title: "Nemovitosti", perex: "", headinglevel: "2", variant: "left", items: [ { img: { src: "images/examples/RFDP7_80v5A-312x312.jpeg", srcset: [ "images/examples/RFDP7_80v5A-312x312.jpeg 1x", "images/examples/RFDP7_80v5A-624x624.jpeg 2x" ], alt: "alt of image", ratio: "1-1" }, overview: { threeDimensioinal: true, video: true, photo: { count: "7" } }, badges: [ { title: "Nový", variant: "circle" }, { variant: "circle", color: "yellow", title: "Top" } ], ctaButton: { tag: "button", state: "active", tooltip: "Do oblíbených", icon: { path: "images/svg/favorite.svg", size: "", color: "" } }, id: "", headinglevel: "3", href: "#", title: "Aparózo Aparózo Aparózo Aparózo", price: { value: "8 850 000", currency: "Kč" } }, { img: { src: "images/examples/RFDP7_80v5A-312x312.jpeg", srcset: [ "images/examples/RFDP7_80v5A-312x312.jpeg 1x", "images/examples/RFDP7_80v5A-624x624.jpeg 2x" ], alt: "alt of image", ratio: "1-1" }, overview: { threeDimensioinal: true, video: true, photo: { count: "7" } }, badges: [ { title: "Nový", variant: "circle" }, { variant: "circle", color: "yellow", title: "Top" } ], ctaButton: { tag: "button", state: "active", tooltip: "Do oblíbených", icon: { path: "images/svg/favorite.svg", size: "", color: "" } }, id: "", headinglevel: "3", href: "#", title: "Aparózo Aparózo Aparózo Aparózo", price: { value: "8 850 000", currency: "Kč" } },{ img: { src: "images/examples/RFDP7_80v5A-312x312.jpeg", srcset: [ "images/examples/RFDP7_80v5A-312x312.jpeg 1x", "images/examples/RFDP7_80v5A-624x624.jpeg 2x" ], alt: "alt of image", ratio: "1-1" }, overview: { threeDimensioinal: true, video: true, photo: { count: "7" } }, badges: [ { title: "Nový", variant: "circle" }, { variant: "circle", color: "yellow", title: "Top" } ], ctaButton: { tag: "button", state: "active", tooltip: "Do oblíbených", icon: { path: "images/svg/favorite.svg", size: "", color: "" } }, id: "", headinglevel: "3", href: "#", title: "Aparózo Aparózo Aparózo Aparózo", price: { value: "8 850 000", currency: "Kč" } },{ img: { src: "images/examples/RFDP7_80v5A-312x312.jpeg", srcset: [ "images/examples/RFDP7_80v5A-312x312.jpeg 1x", "images/examples/RFDP7_80v5A-624x624.jpeg 2x" ], alt: "alt of image", ratio: "1-1" }, overview: { threeDimensioinal: true, video: true, photo: { count: "7" } }, badges: [ { title: "Nový", variant: "circle" }, { variant: "circle", color: "yellow", title: "Top" } ], ctaButton: { tag: "button", state: "active", tooltip: "Do oblíbených", icon: { path: "images/svg/favorite.svg", size: "", color: "" } }, id: "", headinglevel: "3", href: "#", title: "Aparózo Aparózo Aparózo Aparózo", price: { value: "8 850 000", currency: "Kč" } },{ img: { src: "images/examples/RFDP7_80v5A-312x312.jpeg", srcset: [ "images/examples/RFDP7_80v5A-312x312.jpeg 1x", "images/examples/RFDP7_80v5A-624x624.jpeg 2x" ], alt: "alt of image", ratio: "1-1" }, overview: { threeDimensioinal: true, video: true, photo: { count: "7" } }, badges: [ { title: "Nový", variant: "circle" }, { variant: "circle", color: "yellow", title: "Top" } ], ctaButton: { tag: "button", state: "active", tooltip: "Do oblíbených", icon: { path: "images/svg/favorite.svg", size: "", color: "" } }, id: "", headinglevel: "3", href: "#", title: "Aparózo Aparózo Aparózo Aparózo", price: { value: "8 850 000", currency: "Kč" } },{ img: { src: "images/examples/RFDP7_80v5A-312x312.jpeg", srcset: [ "images/examples/RFDP7_80v5A-312x312.jpeg 1x", "images/examples/RFDP7_80v5A-624x624.jpeg 2x" ], alt: "alt of image", ratio: "1-1" }, overview: { threeDimensioinal: true, video: true, photo: { count: "7" } }, badges: [ { title: "Nový", variant: "circle" }, { variant: "circle", color: "yellow", title: "Top" } ], ctaButton: { tag: "button", state: "active", tooltip: "Do oblíbených", icon: { path: "images/svg/favorite.svg", size: "", color: "" } }, id: "", headinglevel: "3", href: "#", title: "Aparózo Aparózo Aparózo Aparózo", price: { value: "8 850 000", currency: "Kč" } },{ img: { src: "images/examples/RFDP7_80v5A-312x312.jpeg", srcset: [ "images/examples/RFDP7_80v5A-312x312.jpeg 1x", "images/examples/RFDP7_80v5A-624x624.jpeg 2x" ], alt: "alt of image", ratio: "1-1" }, overview: { threeDimensioinal: true, video: true, photo: { count: "7" } }, badges: [ { title: "Nový", variant: "circle" }, { variant: "circle", color: "yellow", title: "Top" } ], ctaButton: { tag: "button", state: "active", tooltip: "Do oblíbených", icon: { path: "images/svg/favorite.svg", size: "", color: "" } }, id: "", headinglevel: "3", href: "#", title: "Aparózo Aparózo Aparózo Aparózo", price: { value: "8 850 000", currency: "Kč" } } ] } } %} -
<section class="base-section --spacing-md s-estates-slide"> <div class="base-section__container container"> <header class="base-header --left --size-md"> <div class="base-header__heading-wrapper"> <h2 class="base-header__heading base-h2">Nemovitosti</h2> </div> </header> <div class="s-estates-slide__container"> <div class="swiper s-estates-slide__slider"> <div class="swiper-wrapper"> <div class="swiper-slide swiper-slide__base-1" > <article class="i-estate-slide" id=""> <div class="i-estate-slide__image-block"> <a href="#" class="i-estate-slide__image-link u-img-hover"> <div class="img --ratio-1-1"> <picture> <img src="" data-src="images/examples/RFDP7_80v5A-312x312.jpeg" alt="alt of image" draggable="false" srcset="" data-srcset="images/examples/RFDP7_80v5A-312x312.jpeg 1x, images/examples/RFDP7_80v5A-624x624.jpeg 2x"> </picture> </div> </a> <div class="i-estate-slide__badges"> <div class="badge --circle"> <span class="badge__title">Nový</span> </div> <div class="badge --yellow --circle"> <span class="badge__title">Top</span> </div> </div> <div class="i-overview"><span class="icon --white --lg i-overview__videocamera"> <img src="images/svg/videocamera.svg" loading="lazy"> </span> <span class="icon --white --lg i-overview__camera"> <img src="images/svg/camera.svg" loading="lazy"> </span> <span class="i-overview__photo-count"> 7</span></div> <div class="i-estate-slide__cta-button"> <button class="cta-button --active --unlogged"> <div class="cta-button__wrapper"> <span class="icon"> <img src="images/svg/favorite-active.svg" loading="lazy"> </span> </div> <div class="tooltip">Do oblíbených</div> </button> </div> </div> <div class="i-estate-slide__content"> <header class="i-estate-slide__header"> <h3 class="i-estate-slide__heading base-h3"> <a href="#" title="Aparózo Aparózo Aparózo Aparózo" class="i-estate-slide__heading-link">Aparózo Aparózo Aparózo Aparózo</a> </h3> </header> <div class="i-estate-slide__price"> <span class="i-estate-slide__value">8 850 000</span> <span class="i-estate-slide__currency">Kč</span> </div> </div> </article> </div> <div class="swiper-slide swiper-slide__base-2" > <article class="i-estate-slide" id=""> <div class="i-estate-slide__image-block"> <a href="#" class="i-estate-slide__image-link u-img-hover"> <div class="img --ratio-1-1"> <picture> <img src="" data-src="images/examples/RFDP7_80v5A-312x312.jpeg" alt="alt of image" draggable="false" srcset="" data-srcset="images/examples/RFDP7_80v5A-312x312.jpeg 1x, images/examples/RFDP7_80v5A-624x624.jpeg 2x"> </picture> </div> </a> <div class="i-estate-slide__badges"> <div class="badge --circle"> <span class="badge__title">Nový</span> </div> <div class="badge --yellow --circle"> <span class="badge__title">Top</span> </div> </div> <div class="i-overview"><span class="icon --white --lg i-overview__videocamera"> <img src="images/svg/videocamera.svg" loading="lazy"> </span> <span class="icon --white --lg i-overview__camera"> <img src="images/svg/camera.svg" loading="lazy"> </span> <span class="i-overview__photo-count"> 7</span></div> <div class="i-estate-slide__cta-button"> <button class="cta-button --active --unlogged"> <div class="cta-button__wrapper"> <span class="icon"> <img src="images/svg/favorite-active.svg" loading="lazy"> </span> </div> <div class="tooltip">Do oblíbených</div> </button> </div> </div> <div class="i-estate-slide__content"> <header class="i-estate-slide__header"> <h3 class="i-estate-slide__heading base-h3"> <a href="#" title="Aparózo Aparózo Aparózo Aparózo" class="i-estate-slide__heading-link">Aparózo Aparózo Aparózo Aparózo</a> </h3> </header> <div class="i-estate-slide__price"> <span class="i-estate-slide__value">8 850 000</span> <span class="i-estate-slide__currency">Kč</span> </div> </div> </article> </div> <div class="swiper-slide swiper-slide__base-3" > <article class="i-estate-slide" id=""> <div class="i-estate-slide__image-block"> <a href="#" class="i-estate-slide__image-link u-img-hover"> <div class="img --ratio-1-1"> <picture> <img src="" data-src="images/examples/RFDP7_80v5A-312x312.jpeg" alt="alt of image" draggable="false" srcset="" data-srcset="images/examples/RFDP7_80v5A-312x312.jpeg 1x, images/examples/RFDP7_80v5A-624x624.jpeg 2x"> </picture> </div> </a> <div class="i-estate-slide__badges"> <div class="badge --circle"> <span class="badge__title">Nový</span> </div> <div class="badge --yellow --circle"> <span class="badge__title">Top</span> </div> </div> <div class="i-overview"><span class="icon --white --lg i-overview__videocamera"> <img src="images/svg/videocamera.svg" loading="lazy"> </span> <span class="icon --white --lg i-overview__camera"> <img src="images/svg/camera.svg" loading="lazy"> </span> <span class="i-overview__photo-count"> 7</span></div> <div class="i-estate-slide__cta-button"> <button class="cta-button --active --unlogged"> <div class="cta-button__wrapper"> <span class="icon"> <img src="images/svg/favorite-active.svg" loading="lazy"> </span> </div> <div class="tooltip">Do oblíbených</div> </button> </div> </div> <div class="i-estate-slide__content"> <header class="i-estate-slide__header"> <h3 class="i-estate-slide__heading base-h3"> <a href="#" title="Aparózo Aparózo Aparózo Aparózo" class="i-estate-slide__heading-link">Aparózo Aparózo Aparózo Aparózo</a> </h3> </header> <div class="i-estate-slide__price"> <span class="i-estate-slide__value">8 850 000</span> <span class="i-estate-slide__currency">Kč</span> </div> </div> </article> </div> <div class="swiper-slide swiper-slide__base-4" > <article class="i-estate-slide" id=""> <div class="i-estate-slide__image-block"> <a href="#" class="i-estate-slide__image-link u-img-hover"> <div class="img --ratio-1-1"> <picture> <img src="" data-src="images/examples/RFDP7_80v5A-312x312.jpeg" alt="alt of image" draggable="false" srcset="" data-srcset="images/examples/RFDP7_80v5A-312x312.jpeg 1x, images/examples/RFDP7_80v5A-624x624.jpeg 2x"> </picture> </div> </a> <div class="i-estate-slide__badges"> <div class="badge --circle"> <span class="badge__title">Nový</span> </div> <div class="badge --yellow --circle"> <span class="badge__title">Top</span> </div> </div> <div class="i-overview"><span class="icon --white --lg i-overview__videocamera"> <img src="images/svg/videocamera.svg" loading="lazy"> </span> <span class="icon --white --lg i-overview__camera"> <img src="images/svg/camera.svg" loading="lazy"> </span> <span class="i-overview__photo-count"> 7</span></div> <div class="i-estate-slide__cta-button"> <button class="cta-button --active --unlogged"> <div class="cta-button__wrapper"> <span class="icon"> <img src="images/svg/favorite-active.svg" loading="lazy"> </span> </div> <div class="tooltip">Do oblíbených</div> </button> </div> </div> <div class="i-estate-slide__content"> <header class="i-estate-slide__header"> <h3 class="i-estate-slide__heading base-h3"> <a href="#" title="Aparózo Aparózo Aparózo Aparózo" class="i-estate-slide__heading-link">Aparózo Aparózo Aparózo Aparózo</a> </h3> </header> <div class="i-estate-slide__price"> <span class="i-estate-slide__value">8 850 000</span> <span class="i-estate-slide__currency">Kč</span> </div> </div> </article> </div> <div class="swiper-slide swiper-slide__base-5" > <article class="i-estate-slide" id=""> <div class="i-estate-slide__image-block"> <a href="#" class="i-estate-slide__image-link u-img-hover"> <div class="img --ratio-1-1"> <picture> <img src="" data-src="images/examples/RFDP7_80v5A-312x312.jpeg" alt="alt of image" draggable="false" srcset="" data-srcset="images/examples/RFDP7_80v5A-312x312.jpeg 1x, images/examples/RFDP7_80v5A-624x624.jpeg 2x"> </picture> </div> </a> <div class="i-estate-slide__badges"> <div class="badge --circle"> <span class="badge__title">Nový</span> </div> <div class="badge --yellow --circle"> <span class="badge__title">Top</span> </div> </div> <div class="i-overview"><span class="icon --white --lg i-overview__videocamera"> <img src="images/svg/videocamera.svg" loading="lazy"> </span> <span class="icon --white --lg i-overview__camera"> <img src="images/svg/camera.svg" loading="lazy"> </span> <span class="i-overview__photo-count"> 7</span></div> <div class="i-estate-slide__cta-button"> <button class="cta-button --active --unlogged"> <div class="cta-button__wrapper"> <span class="icon"> <img src="images/svg/favorite-active.svg" loading="lazy"> </span> </div> <div class="tooltip">Do oblíbených</div> </button> </div> </div> <div class="i-estate-slide__content"> <header class="i-estate-slide__header"> <h3 class="i-estate-slide__heading base-h3"> <a href="#" title="Aparózo Aparózo Aparózo Aparózo" class="i-estate-slide__heading-link">Aparózo Aparózo Aparózo Aparózo</a> </h3> </header> <div class="i-estate-slide__price"> <span class="i-estate-slide__value">8 850 000</span> <span class="i-estate-slide__currency">Kč</span> </div> </div> </article> </div> <div class="swiper-slide swiper-slide__base-6" > <article class="i-estate-slide" id=""> <div class="i-estate-slide__image-block"> <a href="#" class="i-estate-slide__image-link u-img-hover"> <div class="img --ratio-1-1"> <picture> <img src="" data-src="images/examples/RFDP7_80v5A-312x312.jpeg" alt="alt of image" draggable="false" srcset="" data-srcset="images/examples/RFDP7_80v5A-312x312.jpeg 1x, images/examples/RFDP7_80v5A-624x624.jpeg 2x"> </picture> </div> </a> <div class="i-estate-slide__badges"> <div class="badge --circle"> <span class="badge__title">Nový</span> </div> <div class="badge --yellow --circle"> <span class="badge__title">Top</span> </div> </div> <div class="i-overview"><span class="icon --white --lg i-overview__videocamera"> <img src="images/svg/videocamera.svg" loading="lazy"> </span> <span class="icon --white --lg i-overview__camera"> <img src="images/svg/camera.svg" loading="lazy"> </span> <span class="i-overview__photo-count"> 7</span></div> <div class="i-estate-slide__cta-button"> <button class="cta-button --active --unlogged"> <div class="cta-button__wrapper"> <span class="icon"> <img src="images/svg/favorite-active.svg" loading="lazy"> </span> </div> <div class="tooltip">Do oblíbených</div> </button> </div> </div> <div class="i-estate-slide__content"> <header class="i-estate-slide__header"> <h3 class="i-estate-slide__heading base-h3"> <a href="#" title="Aparózo Aparózo Aparózo Aparózo" class="i-estate-slide__heading-link">Aparózo Aparózo Aparózo Aparózo</a> </h3> </header> <div class="i-estate-slide__price"> <span class="i-estate-slide__value">8 850 000</span> <span class="i-estate-slide__currency">Kč</span> </div> </div> </article> </div> <div class="swiper-slide swiper-slide__base-7" > <article class="i-estate-slide" id=""> <div class="i-estate-slide__image-block"> <a href="#" class="i-estate-slide__image-link u-img-hover"> <div class="img --ratio-1-1"> <picture> <img src="" data-src="images/examples/RFDP7_80v5A-312x312.jpeg" alt="alt of image" draggable="false" srcset="" data-srcset="images/examples/RFDP7_80v5A-312x312.jpeg 1x, images/examples/RFDP7_80v5A-624x624.jpeg 2x"> </picture> </div> </a> <div class="i-estate-slide__badges"> <div class="badge --circle"> <span class="badge__title">Nový</span> </div> <div class="badge --yellow --circle"> <span class="badge__title">Top</span> </div> </div> <div class="i-overview"><span class="icon --white --lg i-overview__videocamera"> <img src="images/svg/videocamera.svg" loading="lazy"> </span> <span class="icon --white --lg i-overview__camera"> <img src="images/svg/camera.svg" loading="lazy"> </span> <span class="i-overview__photo-count"> 7</span></div> <div class="i-estate-slide__cta-button"> <button class="cta-button --active --unlogged"> <div class="cta-button__wrapper"> <span class="icon"> <img src="images/svg/favorite-active.svg" loading="lazy"> </span> </div> <div class="tooltip">Do oblíbených</div> </button> </div> </div> <div class="i-estate-slide__content"> <header class="i-estate-slide__header"> <h3 class="i-estate-slide__heading base-h3"> <a href="#" title="Aparózo Aparózo Aparózo Aparózo" class="i-estate-slide__heading-link">Aparózo Aparózo Aparózo Aparózo</a> </h3> </header> <div class="i-estate-slide__price"> <span class="i-estate-slide__value">8 850 000</span> <span class="i-estate-slide__currency">Kč</span> </div> </div> </article> </div> </div> <div class="s-estates-slide__bottom-wrapper"> <a class="link --black" href="#"> </a> <div class="swiper-arrows"> <div class="swiper-arrows__arrow swiper-button-prev"> <span class="icon"> <img src="images/svg/arrow-small-left-white.svg" loading="lazy"> </span> </div> <div class="swiper-arrows__arrow swiper-button-next"> <span class="icon"> <img src="images/svg/arrow-small-right-white.svg" alt="Další" loading="lazy"> </span> </div> </div> </div> </div> </div> </div> </section>
Schema
{
"props": {
"title": {
"type": "string",
"description": "Title of the component"
},
"perex": {
"type": "string",
"description": "Perex of the component"
},
"variant": {
"type": "string",
"description": "left | center(default)"
},
"headingLevel": {
"type": "number",
"description": "heading level | 2(default)"
},
"items": {
"type": "array of objects",
"description": "All props are documented by the component `estate-slide-item`."
}
}
}