Post slide item default
-
-
{% include "@Components/items/post-slide-item/post-slide-item.twig" with { props: { title: "Historická tvrz v Nových Královicích se dočkala rekonstrukce a vyvolala i zvýšený zájem o bydlení", perex: "Třípatrová, dvacet metrů vysoká tvrz, stojí v Královicích pravděpodobně od začátku 13. století. Jako své sídelní místo ji s přilehlými dvorci postupně užívali majitelé panství. Po druhé světové válce další využití nenašla a dostala se na seznam kriticky ohrožených památek. V 80. letech sice vznikl projekt na její záchranu, ale v podstatě se jen zabránilo definitivní zkáze. Po revoluci byl celý dvůr neúspěšně privatizován, z tvrze postupně mizela okna i dveře, propadly se vnitřní stropy a vypadalo to, že Královice svou dominantu nadobro ztratí. Záchrana přišla až v roce 2014 se současným majitelem, který práce na rekonstrukci projednával s NPÚ a o šest let později úspěšně dokončil.", img: { src: "images/examples/tree-270x420.jpeg", alt: "alt of image", isContain: true, ratio: "9-16", ratio_lg: "16-9", nativeLazyload: true, sources: [{ srcset: "images/examples/tree-290x160.jpeg 1x,images/examples/building-580x320.jpeg/?giraffe 2x", media: "(max-width: 991px)" },{ srcset: "images/examples/tree-270x420.jpeg 1x,images/examples/giraffe-540x840.jpeg 2x", media: "(min-width: 992px)" }]}, url: "https://www.google.com/", date: "26.3. 2021", author: "Redakce", button: { title: "Celý článek", }, ctaButton: { tag: "button", tooltip:"Do oblíbených", icon: { path: "images/svg/favorite.svg", size: "", color: "" } } } } %} -
<article class="i-post-slide"> <div class="i-post-slide__image-col"> <div class="i-post-slide__image"> <a href="https://www.google.com/" class="i-post-slide-image-link u-img-hover"> <div class="img --contain --ratio-9-16 --ratio-lg-16-9"> <picture> <source srcset="images/examples/tree-290x160.jpeg 1x,images/examples/building-580x320.jpeg/?giraffe 2x" media="(max-width: 991px)"> <source srcset="images/examples/tree-270x420.jpeg 1x,images/examples/giraffe-540x840.jpeg 2x" media="(min-width: 992px)"> <img src="images/examples/tree-270x420.jpeg" alt="alt of image" loading="lazy" draggable="false"> </picture> </div> </a> </div> <div class="i-post-slide__cta-button"> <button class="cta-button --unlogged"> <div class="cta-button__wrapper"> <span class="icon"> <img src="images/svg/favorite.svg" loading="lazy"> </span> </div> <div class="tooltip">Do oblíbených</div> </button> </div> </div> <div class="i-post-slide__content-col"> <div class="i-post-slide__content"> <header class="i-post-slide__header"> <h2 class="i-post-slide__heading base-h2"> <a href="https://www.google.com/" title="Historická tvrz v Nových Královicích se dočkala rekonstrukce a vyvolala i zvýšený zájem o bydlení" class="i-post-slide__heading-link">Historická tvrz v Nových Královicích se dočkala rekonstrukce a vyvolala i zvýšený zájem o bydlení</a> </h2> <div class="i-post-slide__origin"> <span class="i-post-slide__date"> 26.3. 2021 </span> <span>Redakce</span> </div> <p class="i-post-slide__perex">Třípatrová, dvacet metrů vysoká tvrz, stojí v Královicích pravděpodobně od začátku 13. století. Jako své sídelní místo ji s přilehlými dvorci postupně užívali majitelé panství. Po druhé světové válce další využití nenašla a dostala se na seznam kriticky ohrožených památek. V 80. letech sice vznikl projekt na její záchranu, ale v podstatě se jen zabránilo definitivní zkáze. Po revoluci byl celý dvůr neúspěšně privatizován, z tvrze postupně mizela okna i dveře, propadly se vnitřní stropy a vypadalo to, že Královice svou dominantu nadobro ztratí. Záchrana přišla až v roce 2014 se současným majitelem, který práce na rekonstrukci projednával s NPÚ a o šest let později úspěšně dokončil.</p> </header> <footer class="i-post-slide__footer"> <a class="btn --outline" href='https://www.google.com/'> <span class="btn__title ">Celý článek</span> </a> </footer> </div> </div> </article>
Post slide item compact variant
-
-
{% include "@Components/items/post-slide-item/post-slide-item.twig" with { props: { title: "Termín pro podání přiznání k dani z nemovitosti se posouvá do 1. dubna 2021", variant: "compact", url: "https://www.google.com/", img: { src: "images/examples/bird-200x200.jpeg", ratio: "1-1", ratio_lg: "16-9", isContain: true, nativeLazyload: true, sources: [{ srcset: "images/examples/cat-290x160.jpeg 1x,images/examples/building-580x320.jpeg 2x", media: "(max-width: 991px)" }, { srcset: "images/examples/bird-200x200.jpeg 1x,images/examples/castle-400x400.jpeg 2x", media: "(min-width: 992px)" }]}, date: "26.3. 2021", button: { title: "Celý článek", }, ctaButton: { tag: "button", state:"active", tooltip:"Do oblíbených", icon: { path: "images/svg/favorite.svg", size: "", color: "" } } } } %} -
<article class="i-post-slide --compact"> <div class="i-post-slide__image-col"> <div class="i-post-slide__image"> <a href="https://www.google.com/" class="i-post-slide-image-link u-img-hover"> <div class="img --contain --ratio-1-1 --ratio-lg-16-9"> <picture> <source srcset="images/examples/cat-290x160.jpeg 1x,images/examples/building-580x320.jpeg 2x" media="(max-width: 991px)"> <source srcset="images/examples/bird-200x200.jpeg 1x,images/examples/castle-400x400.jpeg 2x" media="(min-width: 992px)"> <img src="images/examples/bird-200x200.jpeg" alt="" loading="lazy" draggable="false"> </picture> </div> </a> </div> <div class="i-post-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-post-slide__content-col"> <div class="i-post-slide__content"> <header class="i-post-slide__header"> <h2 class="i-post-slide__heading base-h2"> <a href="https://www.google.com/" title="Termín pro podání přiznání k dani z nemovitosti se posouvá do 1. dubna 2021" class="i-post-slide__heading-link">Termín pro podání přiznání k dani z nemovitosti se posouvá do 1. dubna 2021</a> </h2> <div class="i-post-slide__origin"> <span class="i-post-slide__date"> 26.3. 2021 </span> </div> </header> <footer class="i-post-slide__footer"> <a class="btn --outline" href='https://www.google.com/'> <span class="btn__title ">Celý článek</span> </a> </footer> </div> </div> </article>
Post slide item full variant
-
-
{% include "@Components/items/post-slide-item/post-slide-item.twig" with { props: { title: "Historická tvrz v Nových Královicích se dočkala rekonstrukce a vyvolala i zvýšený zájem o bydlení", perex: "Třípatrová, dvacet metrů vysoká tvrz, stojí v Královicích pravděpodobně od začátku 13. století. Jako své sídelní místo ji s přilehlými dvorci postupně užívali majitelé panství.", variant: "full", img: { src: "images/examples/tree-270x420.jpeg", alt: "alt of image", ratio: "3-2", ratio_lg: "3-2", isCover: true, nativeLazyload: true, sources: [{ srcset: "images/examples/tree-290x160.jpeg 1x, images/examples/building-580x320.jpeg 2x", media: "(max-width: 991px)" },{ srcset: "images/examples/tree-270x420.jpeg 1x, images/examples/giraffe-540x840.jpeg 2x", media: "(min-width: 992px)" }]}, url: "https://www.google.com/", date: "26.3. 2021", author: "Redakce", ctaButton: { tag: "button", tooltip:"Do oblíbených", icon: { path: "images/svg/favorite.svg", size: "", color: "" } } } } %} -
<article class="i-post-slide --full"> <div class="i-post-slide__image-col"> <div class="i-post-slide__image"> <a href="https://www.google.com/" class="i-post-slide-image-link u-img-hover"> <div class="img --ratio-3-2 --ratio-lg-3-2"> <picture> <source srcset="images/examples/tree-290x160.jpeg 1x, images/examples/building-580x320.jpeg 2x" media="(max-width: 991px)"> <source srcset="images/examples/tree-270x420.jpeg 1x, images/examples/giraffe-540x840.jpeg 2x" media="(min-width: 992px)"> <img src="images/examples/tree-270x420.jpeg" alt="alt of image" loading="lazy" draggable="false"> </picture> </div> </a> </div> <div class="i-post-slide__cta-button"> <button class="cta-button --unlogged"> <div class="cta-button__wrapper"> <span class="icon"> <img src="images/svg/favorite.svg" loading="lazy"> </span> </div> <div class="tooltip">Do oblíbených</div> </button> </div> </div> <div class="i-post-slide__content-col"> <div class="i-post-slide__content"> <header class="i-post-slide__header"> <h2 class="i-post-slide__heading base-h2"> <a href="https://www.google.com/" title="Historická tvrz v Nových Královicích se dočkala rekonstrukce a vyvolala i zvýšený zájem o bydlení" class="i-post-slide__heading-link">Historická tvrz v Nových Královicích se dočkala rekonstrukce a vyvolala i zvýšený zájem o bydlení</a> </h2> <div class="i-post-slide__origin"> <span class="i-post-slide__date"> 26.3. 2021 </span> <span>Redakce</span> </div> <p class="i-post-slide__perex">Třípatrová, dvacet metrů vysoká tvrz, stojí v Královicích pravděpodobně od začátku 13. století. Jako své sídelní místo ji s přilehlými dvorci postupně užívali majitelé panství.</p> </header> </div> </div> </article>
Schema
{
"props": {
"variant": {
"type": "string",
"description": "compact | undefined | full"
},
"title": {
"type": "string",
"description": "Title of the component"
},
"perex": {
"type": "string",
"description": "Perex of the component"
},
"img": {
"type": "object",
"description": "All props are documented by the component `img`."
},
"url": {
"type": "string",
"description": "# (default)"
},
"date": {
"type": "string",
"description": "Date of the post"
},
"author": {
"type": "string",
"description": "Author of the post"
},
"button":{
"title": {
"type": "string",
"description": "titile of button"
}
},
"extraClass": {
"type": "string",
"description": "Addiotional class to the component"
},
"ctaButton": {
"type": "object",
"description": "All props are documented by the component `cta-button`."
}
}
}