Post item default

  •         {% include "@Components/items/post-item/post-item.twig" with {props: {
      title: "What information is needed for shipping?",
      img: {
        src: "https://source.unsplash.com/P8PlK2nGwqA/208x140",
        alt: "alt of image",
        ratio: "3-2",
        srcset: [
          "https://source.unsplash.com/P8PlK2nGwqA/208x140 1x",
          "https://source.unsplash.com/P8PlK2nGwqA/416x280 2x"
        ]
      },
      url: "https://www.google.com/",
      tags: [
        "inspiration"
      ],
      perex: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
      date: "26.3. 2021",
    }
  }
%}

      
  •           <article class="i-post">
  <div class="i-post__image-col">

    <div class="i-post__image">
      <a href="https://www.google.com/" class="i-post-image-link u-img-hover">
        <div class="img   --ratio-3-2">
  <picture>
    
    <img src="" data-src="https://source.unsplash.com/P8PlK2nGwqA/208x140" alt="alt of image" draggable="false" srcset="" data-srcset="https://source.unsplash.com/P8PlK2nGwqA/208x140 1x, https://source.unsplash.com/P8PlK2nGwqA/416x280 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="https://www.google.com/" title="What information is needed for shipping?" class="i-post__heading-link">What information is needed for shipping?</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">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="https://www.google.com/">
  <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>

Post item column variant

  •         {% include "@Components/items/post-item/post-item.twig" with {props: {
      title: "Important moments in life",
      variant: "column",
      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",
    }
  }
%}

      
  •           <article class="i-post --column">
  <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="Important moments in life" class="i-post__heading-link">Important moments in life</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>

Schema