Post slide item default

  • alt of image

    Historická tvrz v Nových Královicích se dočkala rekonstrukce a vyvolala i zvýšený zájem o bydlení

    26.3. 2021 Redakce

    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.

  •         {% 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: "https://source.unsplash.com/270x420/?tree",
        alt: "alt of image",
        isContain: true,
        ratio: "9-16",
        ratio_lg: "16-9",
        nativeLazyload: true,
        sources: [{
          srcset: "https://source.unsplash.com/290x160/?cat/?tree 1x,https://source.unsplash.com/580x320/?building/?giraffe 2x",
          media: "(max-width: 991px)"
        },{
          srcset: "https://source.unsplash.com/270x420/?tree 1x,https://source.unsplash.com/540x840/?giraffe 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: "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="https://source.unsplash.com/290x160/?cat/?tree 1x,https://source.unsplash.com/580x320/?building/?giraffe 2x" media="(max-width: 991px)">

  
        
  
  <source srcset="https://source.unsplash.com/270x420/?tree 1x,https://source.unsplash.com/540x840/?giraffe 2x" media="(min-width: 992px)">
    
    <img src="https://source.unsplash.com/270x420/?tree" alt="alt of image" loading="lazy" draggable="false">
  </picture>
</div>
      </a>
    </div>

          <div class="i-post-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-post-slide__content-col">
    <div class="i-post-slide__content">

      <header class="i-post-slide__header">
        <h3 class="i-post-slide__heading base-h4">
          <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>
        </h3>

        <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: "https://source.unsplash.com/200x200/?bird",
        ratio: "1-1",
        ratio_lg: "16-9",
        isContain: true,
        nativeLazyload: true,
        sources: [{
          srcset: "https://source.unsplash.com/290x160/?cat 1x,https://source.unsplash.com/580x320/?building 2x",
          media: "(max-width: 991px)"
          },
          {
          srcset: "https://source.unsplash.com/200x200/?bird 1x,https://source.unsplash.com/400x400/?castle 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: "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="https://source.unsplash.com/290x160/?cat 1x,https://source.unsplash.com/580x320/?building 2x" media="(max-width: 991px)">

  
        
  
  <source srcset="https://source.unsplash.com/200x200/?bird 1x,https://source.unsplash.com/400x400/?castle 2x" media="(min-width: 992px)">
    
    <img src="https://source.unsplash.com/200x200/?bird" alt="" loading="lazy" draggable="false">
  </picture>
</div>
      </a>
    </div>

          <div class="i-post-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-post-slide__content-col">
    <div class="i-post-slide__content">

      <header class="i-post-slide__header">
        <h3 class="i-post-slide__heading base-h4">
          <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>
        </h3>

        <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: "https://source.unsplash.com/270x420/?tree",
        alt: "alt of image",
        ratio: "3-2",
        ratio_lg: "3-2",
        isCover: true,
        nativeLazyload: true,
        sources: [{
          srcset: "https://source.unsplash.com/290x160/?cat/?tree 1x,https://source.unsplash.com/580x320/?building/?giraffe 2x",
          media: "(max-width: 991px)"
        },{
          srcset: "https://source.unsplash.com/270x420/?tree 1x,https://source.unsplash.com/540x840/?giraffe 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: "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="https://source.unsplash.com/290x160/?cat/?tree 1x,https://source.unsplash.com/580x320/?building/?giraffe 2x" media="(max-width: 991px)">

  
        
  
  <source srcset="https://source.unsplash.com/270x420/?tree 1x,https://source.unsplash.com/540x840/?giraffe 2x" media="(min-width: 992px)">
    
    <img src="https://source.unsplash.com/270x420/?tree" alt="alt of image" loading="lazy" draggable="false">
  </picture>
</div>
      </a>
    </div>

          <div class="i-post-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-post-slide__content-col">
    <div class="i-post-slide__content">

      <header class="i-post-slide__header">
        <h3 class="i-post-slide__heading base-h4">
          <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>
        </h3>

        <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`."
    }
  }
}