7
Overview item
Default
-
-
{% include "@Components/items/estate-slide-item/estate-slide-item.twig" with { props: { img: { src: "https://source.unsplash.com/312x312/?fashion", nativeLazyload: true, srcset: [ "https://source.unsplash.com/FV3GConVSss/312x312 1x", "https://source.unsplash.com/FV3GConVSss/624x624 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", tooltip:"Do oblíbených", icon: { path: "svg/favorite.svg", } }, headinglevel: "3", href: "#", title: "Aparózo Aparózo Aparózo Aparózo", price: { value: "8 850 000", currency: "Kč" }, } } %} -
<article class="i-estate-slide"> <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="https://source.unsplash.com/312x312/?fashion" alt="alt of image" loading="lazy" draggable="false" srcset="https://source.unsplash.com/FV3GConVSss/312x312 1x, https://source.unsplash.com/FV3GConVSss/624x624 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"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.5 13"><defs><style>.cls-1{fill:none;stroke:#0062ab;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>video</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><rect class="cls-1" x="0.75" y="0.75" width="12.38" height="11.5" rx="2.06" ry="2.06"/><path class="cls-1" d="M13.12,7.6l3.8,3.05a1.13,1.13,0,0,0,1.83-.87V3.22a1.13,1.13,0,0,0-1.83-.87L13.12,5.4"/></g></g></svg> </span> <span class="icon --white --lg i-overview__camera"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.5 17.5"><defs><style>.cls-1{fill:none;stroke:#0062ab;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>foto</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><path class="cls-1" d="M13.65,8a4.21,4.21,0,0,1-5.54,5.54A3.86,3.86,0,0,1,6,11.43,4.21,4.21,0,0,1,11.51,5.9,3.82,3.82,0,0,1,13.65,8Z"/><path class="cls-1" d="M18.75,5.43v9.64a1.68,1.68,0,0,1-1.68,1.68H2.43A1.68,1.68,0,0,1,.75,15.07V5.43A1.68,1.68,0,0,1,2.43,3.75H4.75L6.3,1.09A.7.7,0,0,1,6.89.75h5.67a.66.66,0,0,1,.58.33l1.61,2.67h2.32A1.68,1.68,0,0,1,18.75,5.43Z"/></g></g></svg> </span> <span class="i-overview__photo-count"> 7</span></div> <div class="i-estate-slide__cta-button"> <button class="cta-button"> <div class="cta-button__wrapper"> <span class="icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.5 17.5"><defs><style>.cls-1{fill:none;stroke:#0062ab;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>oblibene</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><path class="cls-1" d="M13.45.75c3.17,0,5.3,3,5.3,5.75,0,5.64-8.84,10.25-9,10.25s-9-4.61-9-10.25C.75,3.73,2.88.75,6.05.75a4.71,4.71,0,0,1,3.51,1.5.26.26,0,0,0,.38,0A4.71,4.71,0,0,1,13.45.75Z"/></g></g></svg> </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>
Active
-
7
-
{% include "@Components/items/estate-slide-item/estate-slide-item.twig" with { props: { img: { src: "https://source.unsplash.com/312x312/?fashion", nativeLazyload: true, srcset: [ "https://source.unsplash.com/FV3GConVSss/312x312 1x", "https://source.unsplash.com/FV3GConVSss/624x624 2x" ], alt: "alt of image", ratio: "1-1" }, overview: { threeDimensioinal: true, video: true, photo: { count: "7" } }, ctaButton: { tag: "button", state:"active", tooltip:"Do oblíbených", icon: { path: "svg/favorite.svg", } }, id: "", headinglevel: "3", href: "#", title: "Aparózo Aparózo Aparózo Aparózo", badges: [ { title: "Nový", variant: "circle" }, { variant: "circle", color: "yellow", title: "Top" } ], price: { value: "8 850 000", currency: "Kč" } } } %} -
<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="https://source.unsplash.com/312x312/?fashion" alt="alt of image" loading="lazy" draggable="false" srcset="https://source.unsplash.com/FV3GConVSss/312x312 1x, https://source.unsplash.com/FV3GConVSss/624x624 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"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.5 13"><defs><style>.cls-1{fill:none;stroke:#0062ab;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>video</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><rect class="cls-1" x="0.75" y="0.75" width="12.38" height="11.5" rx="2.06" ry="2.06"/><path class="cls-1" d="M13.12,7.6l3.8,3.05a1.13,1.13,0,0,0,1.83-.87V3.22a1.13,1.13,0,0,0-1.83-.87L13.12,5.4"/></g></g></svg> </span> <span class="icon --white --lg i-overview__camera"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.5 17.5"><defs><style>.cls-1{fill:none;stroke:#0062ab;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>foto</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><path class="cls-1" d="M13.65,8a4.21,4.21,0,0,1-5.54,5.54A3.86,3.86,0,0,1,6,11.43,4.21,4.21,0,0,1,11.51,5.9,3.82,3.82,0,0,1,13.65,8Z"/><path class="cls-1" d="M18.75,5.43v9.64a1.68,1.68,0,0,1-1.68,1.68H2.43A1.68,1.68,0,0,1,.75,15.07V5.43A1.68,1.68,0,0,1,2.43,3.75H4.75L6.3,1.09A.7.7,0,0,1,6.89.75h5.67a.66.66,0,0,1,.58.33l1.61,2.67h2.32A1.68,1.68,0,0,1,18.75,5.43Z"/></g></g></svg> </span> <span class="i-overview__photo-count"> 7</span></div> <div class="i-estate-slide__cta-button"> <button class="cta-button --active"> <div class="cta-button__wrapper"> <span class="icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.5 17.5"><defs><style>.cls-1{fill:none;stroke:#0062ab;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>oblibene</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><path class="cls-1" d="M13.45.75c3.17,0,5.3,3,5.3,5.75,0,5.64-8.84,10.25-9,10.25s-9-4.61-9-10.25C.75,3.73,2.88.75,6.05.75a4.71,4.71,0,0,1,3.51,1.5.26.26,0,0,0,.38,0A4.71,4.71,0,0,1,13.45.75Z"/></g></g></svg> </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>
Schema
{
"props": {
"img": {
"type": "object",
"description": "same as img/img.twig"
},
"badges": {
"type": "array",
"badge": {
"type": "string",
"description": "Component badge"
}
},
"overview": {
"threeDimensioinal": {
"type": "boolean",
"description": "Set if should include three dimensional"
},
"video": {
"type": "boolean",
"description": "Set if should include video"
},
"count": {
"type": "string",
"description": "Count of photos"
}
},
"ctaButton": {
"extraClass": {
"type": "string",
"description": "Extra class of button"
},
"url": {
"type": "string",
"description": "Url address (default # if tag is a)"
},
"state": {
"type": "string",
"description": "active"
},
"tag": {
"type": "string",
"description": "a | button | span (default)"
},
"tooltip": {
"type": "string",
"description": "Content of tooltip"
},
"icon": {
"type": "object",
"props": {
"src": {
"type": "string",
"description": "path to icon"
},
"size": {
"type": "string",
"description": "lg (default) | sm"
},
"color": {
"type": "string",
"description": "black (default) | primary | white"
}
}
}
},
"id": {
"type": "string",
"description": "black (default) | primary | white"
},
"headinglevel": {
"type": "string",
"description": "Set level of heading"
},
"href": {
"type": "string",
"description": "Set path"
},
"title": {
"type": "string",
"description": "Title of subject"
},
"price": {
"value": {
"type": "string",
"description": "Value of subject"
},
"currency": {
"type": "string",
"description": "Currency of value"
}
}
}
}