Post item default

  •         {% include "@Components/items/post-item/post-item.twig" with {props: {
  title: "What information is needed for shipping?",
  img: {
    src: "https://placehold.co/448x325",
    alt: "alt of image",
    srcset: [
      "https://placehold.co/448x325 1x",
      "https://placehold.co/896x650 2x"
    ]
  },
  url: "https://www.google.com/",
  tags: [
    {
      title: "Nakupováné",
      url: "#Nakupováné"
    },
    {
      title: "inspirace",
      url: "#inspirace"
    },
    {
      title: "tipy",
      url: "#tipy"
    }
  ],
  perex: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
  date: "26.3. 2021",
}} %}

      
  •           


<article class="i-post d-flex gap-1 flex-column --default px-2 py-2 h-100 u-border u-border--tertiary-500 u-rounded-3">
  <div class="i-post__image-col overflow-hidden flex-shrink-0 u-rounded-3">

          <a href="https://www.google.com/" class="i-post__image-link u-img-hover d-block h-100" title="What information is needed for shipping?">
        <div class="img u-posr overflow-hidden --cover --placeholder --ratio-4-3 h-100">
  <picture>
    
    <img src="" data-src="https://placehold.co/448x325" alt="" width="488" height="366" draggable="false" srcset="" data-srcset="https://placehold.co/448x325 1x, https://placehold.co/896x650 2x">
  </picture>
</div>
      </a>
    
  </div>

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

    <div class="i-post__content d-flex flex-column gap-1 h-100 gap-md-2">

      <header class="i-post__header">
        <h3 class="base-heading mb-0 u-fw-700 u-h4">
              <a class="i-post__heading-link u-clamp" href="https://www.google.com/" title="What information is needed for shipping?">What information is needed for shipping?</a>
          </h3>
      </header>

              <p class="i-post__perex u-clamp u-clamp-3 u-fz-md mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
      
      <footer class="i-post__footer d-flex gap-2 justify-content-between align-items-center mt-auto">

                  <div class="i-post__date u-fw-600 d-flex align-items-center gap-1">
              
  <span class="icon d-flex align-items-center justify-content-center  --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><g clip-path="url(#clip0_3547_98104)"><path fill="currentColor" d="M14.008 1.226c1.098 0 1.992.894 1.992 1.992v7.36L10.778 16H1.992A1.995 1.995 0 0 1 0 14.008V3.218C0 2.12.894 1.226 1.992 1.226h.583V0h1.532v1.226h7.786V0h1.532v1.226h.583Zm.46 8.276V6.069H1.532v7.939c0 .253.206.46.46.46h7.693v-2.974c0-1.098.894-1.992 1.992-1.992h2.79Zm0-4.966V3.218a.46.46 0 0 0-.46-.46h-.583v1.227h-1.532V2.759H4.107v1.226H2.575V2.759h-.583a.46.46 0 0 0-.46.46v1.317h12.935Zm-3.25 8.797 2.214-2.299h-1.754a.46.46 0 0 0-.46.46v1.84Z"/></g><defs><clipPath id="clip0_3547_98104"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>      </span>
            <span class="text-nowrap i-post__date-text">26.3. 2021</span>
          </div>
        
                  <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm    --icon-only" href='https://www.google.com/' title="What information is needed for shipping?">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M15 12.317V5h-1.789v6.907L2.264 1 1 2.265 11.983 13.21H4.814V15h7.502A2.69 2.69 0 0 0 15 12.317Z"/></svg>      </span>
    </span>
  
  </a>
        
      </footer>

    </div>

  </div>

</article>

Hero variant

  •         {% include "@Components/items/post-item/post-item.twig" with {props: {
  variant: "hero",
  title: "Important moments in life",
  variant: "column",
  img: {
    src: "https://placehold.co/696x391/?fashion",
    srcset: [
      "https://placehold.co/696x391/?fashion 1x",
      "https://placehold.co/1392x7822x"
    ]
  },
  tags: [
    {
      title: "moda",
      url: "#moda"
    },
    {
      title: "inspirace",
      url: "#inspirace"
    }
  ],
  perex: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
  date: "26.3. 2021",
}} %}

      
  •           


<article class="i-post d-flex gap-1 flex-column --hero px-1 px-lg-0 pt-0 pb-3 pb-lg-0">
  <div class="i-post__image-col overflow-hidden flex-shrink-0 u-rounded-3">

          <a href="#" class="i-post__image-link u-img-hover d-block h-100" title="Important moments in life">
        <div class="img u-posr overflow-hidden --cover --placeholder --ratio-16-9 h-100">
  <picture>
    
    <img src="" data-src="https://placehold.co/696x391/?fashion" alt="" width="696" height="391" draggable="false" srcset="" data-srcset="https://placehold.co/696x391/?fashion 1x, https://placehold.co/1392x7822x">
  </picture>
</div>
      </a>
    
  </div>

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

    <div class="i-post__content d-flex flex-column gap-1 h-100 gap-md-3">

      <header class="i-post__header">
        <h3 class="base-heading mb-0 u-fw-700 u-h3">
              <a class="i-post__heading-link u-clamp" href="#" title="Important moments in life">Important moments in life</a>
          </h3>
      </header>

              <p class="i-post__perex u-clamp u-clamp-3 u-fz-md mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
      
      <footer class="i-post__footer d-flex gap-2 justify-content-between align-items-center mt-auto">

                  <div class="i-post__date u-fw-600 d-flex align-items-center gap-1">
              
  <span class="icon d-flex align-items-center justify-content-center  --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><g clip-path="url(#clip0_3547_98104)"><path fill="currentColor" d="M14.008 1.226c1.098 0 1.992.894 1.992 1.992v7.36L10.778 16H1.992A1.995 1.995 0 0 1 0 14.008V3.218C0 2.12.894 1.226 1.992 1.226h.583V0h1.532v1.226h7.786V0h1.532v1.226h.583Zm.46 8.276V6.069H1.532v7.939c0 .253.206.46.46.46h7.693v-2.974c0-1.098.894-1.992 1.992-1.992h2.79Zm0-4.966V3.218a.46.46 0 0 0-.46-.46h-.583v1.227h-1.532V2.759H4.107v1.226H2.575V2.759h-.583a.46.46 0 0 0-.46.46v1.317h12.935Zm-3.25 8.797 2.214-2.299h-1.754a.46.46 0 0 0-.46.46v1.84Z"/></g><defs><clipPath id="clip0_3547_98104"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>      </span>
            <span class="text-nowrap i-post__date-text">26.3. 2021</span>
          </div>
        
                  <a href="#" class="d-flex gap-2 flex-wrap u-fw-600 u-color-text-500 align-items-center text-decoration-none">
            Celý článek

            <span class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm    --icon-only">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M15 12.317V5h-1.789v6.907L2.264 1 1 2.265 11.983 13.21H4.814V15h7.502A2.69 2.69 0 0 0 15 12.317Z"/></svg>      </span>
    </span>
  
  </span>
          </a>
        
      </footer>

    </div>

  </div>

</article>

Inline variant

  •         {% include "@Components/items/post-item/post-item.twig" with {props: {
  variant: "inline",
  title: "Important moments in life",
  variant: "column",
  img: {
    src: "https://placehold.co/448x325",
    alt: "alt of image",
    srcset: [
      "https://placehold.co/448x325 1x",
      "https://placehold.co/896x650 2x"
    ]
  },
  tags: [
    {
      title: "moda",
      url: "#moda"
    },
    {
      title: "inspirace",
      url: "#inspirace"
    }
  ],
  perex: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
  date: "26.3. 2021",
}} %}

      
  •           


<article class="i-post d-flex gap-1 flex-column --inline px-1  flex-md-row py-3">
  <div class="i-post__image-col overflow-hidden flex-shrink-0 u-rounded-3">

          <a href="#" class="i-post__image-link u-img-hover d-block h-100" title="Important moments in life">
        <div class="img u-posr overflow-hidden --cover --placeholder --ratio-4-3 h-100">
  <picture>
    
    <img src="" data-src="https://placehold.co/448x325" alt="" width="488" height="366" draggable="false" srcset="" data-srcset="https://placehold.co/448x325 1x, https://placehold.co/896x650 2x">
  </picture>
</div>
      </a>
    
  </div>

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

    <div class="i-post__content d-flex flex-column gap-1 h-100 gap-md-2">

      <header class="i-post__header">
        <h3 class="base-heading mb-0 u-fw-700 u-h4">
              <a class="i-post__heading-link u-clamp" href="#" title="Important moments in life">Important moments in life</a>
          </h3>
      </header>

              <p class="i-post__perex u-clamp u-clamp-3 u-fz-md mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
      
      <footer class="i-post__footer d-flex gap-2 justify-content-between align-items-center mt-auto">

                  <div class="i-post__date u-fw-600 d-flex align-items-center gap-1">
              
  <span class="icon d-flex align-items-center justify-content-center  --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><g clip-path="url(#clip0_3547_98104)"><path fill="currentColor" d="M14.008 1.226c1.098 0 1.992.894 1.992 1.992v7.36L10.778 16H1.992A1.995 1.995 0 0 1 0 14.008V3.218C0 2.12.894 1.226 1.992 1.226h.583V0h1.532v1.226h7.786V0h1.532v1.226h.583Zm.46 8.276V6.069H1.532v7.939c0 .253.206.46.46.46h7.693v-2.974c0-1.098.894-1.992 1.992-1.992h2.79Zm0-4.966V3.218a.46.46 0 0 0-.46-.46h-.583v1.227h-1.532V2.759H4.107v1.226H2.575V2.759h-.583a.46.46 0 0 0-.46.46v1.317h12.935Zm-3.25 8.797 2.214-2.299h-1.754a.46.46 0 0 0-.46.46v1.84Z"/></g><defs><clipPath id="clip0_3547_98104"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>      </span>
            <span class="text-nowrap i-post__date-text">26.3. 2021</span>
          </div>
        
                  <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm    --icon-only" href='#' title="Important moments in life">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M15 12.317V5h-1.789v6.907L2.264 1 1 2.265 11.983 13.21H4.814V15h7.502A2.69 2.69 0 0 0 15 12.317Z"/></svg>      </span>
    </span>
  
  </a>
        
      </footer>

    </div>

  </div>

</article>