• Posts list section title

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, maxime?

  •         {% include "@Components/sections/posts-list-section/posts-list-section.twig" with {props: {
  header: {
    title: "Posts list section title",
    perex: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, maxime?",
  },
  items: [
    {
      title: "I went to fashion week in the metaverse",
      img: {
        src: "https://source.unsplash.com/688x459/?fashion",
        srcset: [
          "https://source.unsplash.com/688x459/?fashion 1x",
          "https://source.unsplash.com/1376x918/?fashion 2x"
        ],
        ratio: "3-2"
      },
      tags: [
        "Fashion",
        "Inspiration"
      ],
      perex: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
      date: "26.3. 2021"
    },
    {
      title: "Was this the worst night in Oscars fashion history?",
      img: {
        src: "https://source.unsplash.com/208x140/?clothes",
        srcset: [
          "https://source.unsplash.com/208x140/?clothes 1x",
          "https://source.unsplash.com/416x280/?clothes 2x"
        ],
        ratio: "3-2"
      },
      tags: [
        "Shopping",
        "Inspiration",
        "Tips"
      ],
      perex: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
      date: "17.11. 2021"
    }
  ]
}} %}

      
  •           



<section class="base-section   s-posts-list">
  <div class="base-section__container">
    <div class="base-section__content-wrapper">
          <header class="base-header --left">
  <h1 class="base-heading base-h2">Posts list section title</h1>

      <p class="base-header__paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, maxime?</p>
  </header>
    <ul class="g-posts-list">
      <li class="g-posts-list__item">
      <article class="i-post">
  <div class="i-post__image-col">

    <div class="i-post__image">
      <a href="#" class="i-post-image-link u-img-hover">
        <div class="img   --ratio-3-2">
  <picture>
    
    <img src="" data-src="https://source.unsplash.com/688x459/?fashion" alt="" draggable="false" srcset="" data-srcset="https://source.unsplash.com/688x459/?fashion 1x, https://source.unsplash.com/1376x918/?fashion 2x">
  </picture>
</div>
      </a>
    </div>

  </div>

  <div class="i-post__content-col">

    <div class="i-post__content">

      <header class="i-post__header">
        <h3 class="i-post__heading">
          <a href="#" title="I went to fashion week in the metaverse" class="i-post__heading-link">I went to fashion week in the metaverse</a>
        </h3>
                  <p class="i-post__perex">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
              </header>

              <div class="g-tags g-base">
      <span class="i-tag">Fashion</span>
      <span class="i-tag">Inspiration</span>
  </div>
      
      <footer class="i-post__footer">

                  <div class="i-post__date">
            <span class="icon">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm216 248c0 118.7-96.1 216-216 216-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216zm-148.9 88.3l-81.2-59c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h14c6.6 0 12 5.4 12 12v146.3l70.5 51.3c5.4 3.9 6.5 11.4 2.6 16.8l-8.2 11.3c-3.9 5.3-11.4 6.5-16.8 2.6z"/></svg></span>
            <span>
              26.3. 2021
            </span>
          </div>
        
        <a class="link --black  --animation-right" href="#">
  <span class="link__title">Read more</span>

      <div class="link__icon">
      <span class="icon  --sm">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M17.525 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L205.947 256 10.454 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L34.495 36.465c-4.686-4.687-12.284-4.687-16.97 0z"/></svg></span>
    </div>
  </a>
      </footer>

    </div>

  </div>

</article>
    </li>
      <li class="g-posts-list__item">
      <article class="i-post">
  <div class="i-post__image-col">

    <div class="i-post__image">
      <a href="#" class="i-post-image-link u-img-hover">
        <div class="img   --ratio-3-2">
  <picture>
    
    <img src="" data-src="https://source.unsplash.com/208x140/?clothes" alt="" draggable="false" srcset="" data-srcset="https://source.unsplash.com/208x140/?clothes 1x, https://source.unsplash.com/416x280/?clothes 2x">
  </picture>
</div>
      </a>
    </div>

  </div>

  <div class="i-post__content-col">

    <div class="i-post__content">

      <header class="i-post__header">
        <h3 class="i-post__heading">
          <a href="#" title="Was this the worst night in Oscars fashion history?" class="i-post__heading-link">Was this the worst night in Oscars fashion history?</a>
        </h3>
                  <p class="i-post__perex">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
              </header>

              <div class="g-tags g-base">
      <span class="i-tag">Shopping</span>
      <span class="i-tag">Inspiration</span>
      <span class="i-tag">Tips</span>
  </div>
      
      <footer class="i-post__footer">

                  <div class="i-post__date">
            <span class="icon">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm216 248c0 118.7-96.1 216-216 216-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216zm-148.9 88.3l-81.2-59c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h14c6.6 0 12 5.4 12 12v146.3l70.5 51.3c5.4 3.9 6.5 11.4 2.6 16.8l-8.2 11.3c-3.9 5.3-11.4 6.5-16.8 2.6z"/></svg></span>
            <span>
              17.11. 2021
            </span>
          </div>
        
        <a class="link --black  --animation-right" href="#">
  <span class="link__title">Read more</span>

      <div class="link__icon">
      <span class="icon  --sm">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M17.525 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L205.947 256 10.454 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L34.495 36.465c-4.686-4.687-12.284-4.687-16.97 0z"/></svg></span>
    </div>
  </a>
      </footer>

    </div>

  </div>

</article>
    </li>
  </ul>
    <div class="g-pagination --right">
  <ul class="pagination ">

  
  
  </ul>
</div>
      </div>
  </div>
</section>

  • Posts section grid title

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, maxime?

  •         {% include "@Components/sections/posts-list-section/posts-list-section.twig" with {props: {
  header:{
    title: "Posts section grid title",
    perex: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, maxime?"
  },
  extra_class: "--loading",
  items: [
    {
      title: "I went to fashion week in the metaverse",
      img: {
        src: "https://source.unsplash.com/688x459/?fashion",
        srcset: [
          "https://source.unsplash.com/688x459/?fashion 1x",
          "https://source.unsplash.com/1376x918/?fashion 2x"
        ],
        ratio: "3-2"
      },
      tags: [
        "Fashion",
        "Inspiration"
      ],
      perex: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
      date: "26.3. 2021"
    },
    {
      title: "Was this the worst night in Oscars fashion history?",
      img: {
        src: "https://source.unsplash.com/208x140/?clothes",
        srcset: [
          "https://source.unsplash.com/208x140/?clothes 1x",
          "https://source.unsplash.com/416x280/?clothes 2x"
        ],
        ratio: "3-2"
      },
      tags: [
        "Shopping",
        "Inspiration",
        "Tips"
      ],
      perex: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
      date: "17.11. 2021"
    }
  ]
}} %}

      
  •           



<section class="base-section   s-posts-list  --loading">
  <div class="base-section__container">
    <div class="base-section__content-wrapper">
          <header class="base-header --left">
  <h1 class="base-heading base-h2">Posts section grid title</h1>

      <p class="base-header__paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, maxime?</p>
  </header>
    <ul class="g-posts-list">
      <li class="g-posts-list__item">
      <article class="i-post">
  <div class="i-post__image-col">

    <div class="i-post__image">
      <a href="#" class="i-post-image-link u-img-hover">
        <div class="img   --ratio-3-2">
  <picture>
    
    <img src="" data-src="https://source.unsplash.com/688x459/?fashion" alt="" draggable="false" srcset="" data-srcset="https://source.unsplash.com/688x459/?fashion 1x, https://source.unsplash.com/1376x918/?fashion 2x">
  </picture>
</div>
      </a>
    </div>

  </div>

  <div class="i-post__content-col">

    <div class="i-post__content">

      <header class="i-post__header">
        <h3 class="i-post__heading">
          <a href="#" title="I went to fashion week in the metaverse" class="i-post__heading-link">I went to fashion week in the metaverse</a>
        </h3>
                  <p class="i-post__perex">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
              </header>

              <div class="g-tags g-base">
      <span class="i-tag">Fashion</span>
      <span class="i-tag">Inspiration</span>
  </div>
      
      <footer class="i-post__footer">

                  <div class="i-post__date">
            <span class="icon">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm216 248c0 118.7-96.1 216-216 216-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216zm-148.9 88.3l-81.2-59c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h14c6.6 0 12 5.4 12 12v146.3l70.5 51.3c5.4 3.9 6.5 11.4 2.6 16.8l-8.2 11.3c-3.9 5.3-11.4 6.5-16.8 2.6z"/></svg></span>
            <span>
              26.3. 2021
            </span>
          </div>
        
        <a class="link --black  --animation-right" href="#">
  <span class="link__title">Read more</span>

      <div class="link__icon">
      <span class="icon  --sm">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M17.525 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L205.947 256 10.454 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L34.495 36.465c-4.686-4.687-12.284-4.687-16.97 0z"/></svg></span>
    </div>
  </a>
      </footer>

    </div>

  </div>

</article>
    </li>
      <li class="g-posts-list__item">
      <article class="i-post">
  <div class="i-post__image-col">

    <div class="i-post__image">
      <a href="#" class="i-post-image-link u-img-hover">
        <div class="img   --ratio-3-2">
  <picture>
    
    <img src="" data-src="https://source.unsplash.com/208x140/?clothes" alt="" draggable="false" srcset="" data-srcset="https://source.unsplash.com/208x140/?clothes 1x, https://source.unsplash.com/416x280/?clothes 2x">
  </picture>
</div>
      </a>
    </div>

  </div>

  <div class="i-post__content-col">

    <div class="i-post__content">

      <header class="i-post__header">
        <h3 class="i-post__heading">
          <a href="#" title="Was this the worst night in Oscars fashion history?" class="i-post__heading-link">Was this the worst night in Oscars fashion history?</a>
        </h3>
                  <p class="i-post__perex">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
              </header>

              <div class="g-tags g-base">
      <span class="i-tag">Shopping</span>
      <span class="i-tag">Inspiration</span>
      <span class="i-tag">Tips</span>
  </div>
      
      <footer class="i-post__footer">

                  <div class="i-post__date">
            <span class="icon">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm216 248c0 118.7-96.1 216-216 216-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216zm-148.9 88.3l-81.2-59c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h14c6.6 0 12 5.4 12 12v146.3l70.5 51.3c5.4 3.9 6.5 11.4 2.6 16.8l-8.2 11.3c-3.9 5.3-11.4 6.5-16.8 2.6z"/></svg></span>
            <span>
              17.11. 2021
            </span>
          </div>
        
        <a class="link --black  --animation-right" href="#">
  <span class="link__title">Read more</span>

      <div class="link__icon">
      <span class="icon  --sm">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M17.525 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L205.947 256 10.454 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L34.495 36.465c-4.686-4.687-12.284-4.687-16.97 0z"/></svg></span>
    </div>
  </a>
      </footer>

    </div>

  </div>

</article>
    </li>
  </ul>
    <div class="g-pagination --right">
  <ul class="pagination ">

  
  
  </ul>
</div>
      </div>
  </div>
</section>

Schema