Stylebook

Články, rady, tipy a návody
- 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í.
- 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í.
- 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í.
nahoru

1

...

3

4

5
Načíst další

        {% include "@Components/sections/posts-section/posts-section.twig" with { props: {
  title: "Články, rady, tipy a návody",
  dropdown: {
    variant: "small",
    options: [
      {
        title: "Výchozí řazení",
        selected: true
      }, {
        title: "Nejlépe hodnocené"
      }, {
        title: "Nejprve nejstarší"
      }, {
        title: "Nejprve nejnovější"
      }
    ]
  },
  search_field: {
    placeholder: "Hledat ve článkcích",
    button:{
      title: "Hledej"
    }
  },
  posts: [
    {
      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: ""
        }
      }
    },
    {
      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: ""
        }
      }
    },
    {
      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: ""
        }
      }
    }
  ],
  pagination_title: "nahoru",
  pagination_color: "primary",
  button_title_pagination: "Načíst další"
} } %}

          






<section class="base-section  --spacing-md    s-posts">
  <div class="base-section__container container">
    
    <header class="base-header --left">
      <h2 class="base-header__heading base-h1">Články, rady, tipy a návody</h2>
    </header>
    
<div class="f-search">
  <div class="f-wrap">
    
  <span class="f-input__wrapper position-relative">
        <input class="f-base --background-gray-100" type="search" id="test" placeholder="Hledat ve článkcích">
      </span>

</div>
  <div class="f-search__button">
    <button class="btn --conversion  --icon-before" type="submit">    <span class="btn__title">Hledej</span>
  
      <span class="btn__icon">
      <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs></defs><g transform="translate(0 517.576)"><path class="a" d="M15.731-503.136l-2.146-2.138a7.607,7.607,0,0,0,1.624-4.7,7.641,7.641,0,0,0-7.6-7.6,7.641,7.641,0,0,0-7.6,7.6,7.641,7.641,0,0,0,7.6,7.6,7.606,7.606,0,0,0,4.7-1.624l2.138,2.146a.91.91,0,0,0,.646.269.91.91,0,0,0,.645-.269A.91.91,0,0,0,16-502.49a.91.91,0,0,0-.269-.646ZM1.85-509.956a5.8,5.8,0,0,1,5.77-5.77,5.8,5.8,0,0,1,5.77,5.77,5.8,5.8,0,0,1-5.77,5.77A5.8,5.8,0,0,1,1.85-509.956Z"/></g></svg>

  </span>
    </span>
  </button>
  </div>

  </div>
    <div class="dropdown__wrapper --small">

  <select class="form-control dropdown" name="choices-single-no-sorting" >

    
          <option value=""  selected="selected"  >Výchozí řazení</option>
          <option value=""  >Nejlépe hodnocené</option>
          <option value=""  >Nejprve nejstarší</option>
          <option value=""  >Nejprve nejnovější</option>
    
  </select>

</div>
    <ul class="g-posts">
      <li class="">
      <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>
    </li>
      <li class="">
      <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>
    </li>
      <li class="">
      <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>
    </li>
  </ul>
    
<div class="g-pagination__wrapper">
  <a class="link --primary --icon-before --animation-zoom" href="#" href="#">
  <span class="link__title">
    <span class="link__title-wrap">nahoru</span>
  </span>

      <div class="link__icon">
      <span class="icon  --sm">
  <svg id="Group" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <g id="Group-2" data-name="Group">
    <path id="Path" d="M0,0H24V24H0Z" fill="none"/>
    <path id="Path-2" data-name="Path" d="M18,0,9,9,0,0" transform="translate(3 7.5)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
  </g>
</svg>

  </span>
    </div>
  </a>

  <ul class="pagination">
      <li>
      <a class="pagination-arrow --disabled --previous"" href="#">
  <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5.5 9.5"><defs><style>.cls-1{fill:none;stroke:#0062ab;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>small right</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><polyline class="cls-1" points="0.75 8.75 4.75 4.75 0.75 0.75"/></g></g></svg>
  </span>
</a>
    </li>
  
      <li>
      <div class="i-pagination__wrapper">

  <a class="i-pagination">

          <span>
        1
      </span>
    
  </a>

  </div>
    </li>
      <li>
          <div class="i-pagination__wrapper">

  <select class="form-control i-pagination__select" id="idecko" name="choices-single-no-sorting">

                  <option value="#">50</option>
              <option value="#">51</option>
              <option value="#">52</option>
              <option value="#">53</option>
              <option value="#">54</option>
              <option value="#">55</option>
              <option value="#">56</option>
      
    
  </select>

      <label class="i-pagination" for="idecko">...</label>
  </div>
    </li>
      <li>
      <div class="i-pagination__wrapper">

  <a class="i-pagination">

          <span>
        3
      </span>
    
  </a>

  </div>
    </li>
      <li>
      <div class="i-pagination__wrapper">

  <a class="i-pagination  --active">

          <span>
        4
      </span>
    
  </a>

  </div>
    </li>
      <li>
      <div class="i-pagination__wrapper">

  <a class="i-pagination">

          <span>
        5
      </span>
    
  </a>

  </div>
    </li>
  
      <li>
      <a class="pagination-arrow  --next" href="#">
  <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5.5 9.5"><defs><style>.cls-1{fill:none;stroke:#0062ab;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>small right</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><polyline class="cls-1" points="0.75 8.75 4.75 4.75 0.75 0.75"/></g></g></svg>
  </span>
</a>
    </li>
  </ul>
</div>
  <div class="g-pagination__button">
    <a class="btn --conversion" href='#'>    <span class="btn__title">Načíst další</span>
  
  </a>
  </div>

    </div>
</section>

Schema

    {
  "props": {
    "title": {
      "type": "string",
      "description": "Title of the component"
    },
    "perex": {
      "type": "string",
      "description": "Perex of the component"
    },
    "search": {
      "type": "string",
      "description": "Search field of the component"
    },
    "dropdown": {
      "type": "Array of objects",
      "description": "All props are documented by the component 'dropdown'"
    },
    "items": {
      "type": "array of objects",
      "description": "All props are documented by the component `post-slide-item`."
    },
    "paggination": {
      "type": "string",
      "description": "Pagination of component"
    }
  }
}