Product overview item

Default

ETHN01

Papírová taška hnědá ExtraTWIST 22x10x28

Potisk

1 425 Kč Kč

1 ks 1 299 Kč Kč

999 999 Kč bez DPH

        {% include "@Components/items/product-overview-item/product-overview-item.twig" with {props: {
  id: "ETHN01",
  title: "Papírová taška hnědá ExtraTWIST 22x10x28",
  img: {
    src: "https://placehold.co/56x56",
    srcset: [
      "https://placehold.co/56x56 1x",
      "https://placehold.co/112x112 2x"
    ]
  },
  tags: [
    {
      title: "Potisk",
      icon: {
      src: "@Images/svg/printer.svg",
    },
    },
  ],
  color: {
    title: "Hnědá",
    name: "color-checkbox",
    colors: [
      "#CFAF8A"
    ],
  },
  price: {
    main_title: "1 ks",
    before: "1 425 Kč",
    main: "1 299 Kč"
  },
  total_price: "999 999",
}} %}

          <div class="i-product-overview d-flex align-items-center  gap-2" data-product-id="ETHN01">
      <div class="i-product-overview__image u-rounded-1 overflow-hidden flex-shrink-0">
      <div class="img u-posr overflow-hidden --cover --placeholder --ratio-1-1 d-block">
  <picture>
    
    <img src="https://placehold.co/56x56" alt="Papírová taška hnědá ExtraTWIST 22x10x28" width="56" height="56" loading="lazy" draggable="false" srcset="https://placehold.co/56x56 1x, https://placehold.co/112x112 2x">
  </picture>
</div>
    </div>
  
  <div class="i-product-overview__content d-flex flex-column gap-05 flex-grow-1">
          <div class="i-product-overview__id u-fw-500 u-fz-xs u-color-text-400">ETHN01</div>
    
    <div class="i-product-overview__title u-fz-sm u-clamp u-fw-600" title="Papírová taška hnědá ExtraTWIST 22x10x28">Papírová taška hnědá ExtraTWIST 22x10x28</div>

          <div class="i-product-overview__variants d-flex gap-1 flex-wrap align-items-center">
                      <label class="f-color u-posr u-rounded-full --sm --checkbox  --readonly" style="--background-color:conic-gradient(
              #CFAF8A
    0deg
    355deg
    )">
  
  <span class="f-color__visual d-flex align-items-center justify-content-center u-posa u-inset-0 u-rounded-full"></span>

  

</label>
        
                              
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-secondary-500  --icon-before   i-product-overview__tag">
      <span class="i-tag__title">Potisk</span>
        <div class="i-tag__icon">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --text">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#15324F" fill-rule="evenodd" d="M13.56 5.44A1.5 1.5 0 0 1 14 6.5V12h-2v2H4v-2H2V6.5A1.5 1.5 0 0 1 3.5 5H4V2h8v3h.5a1.5 1.5 0 0 1 1.06.44ZM11 3H5v2h6V3ZM5 13h6v-3H5v3Zm7-2h1V6.5a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5V11h1V9h8v2Zm0-3V7h-2v1h2Z" clip-rule="evenodd"/></svg>      </span>
    </div>
  </span>
                        </div>
      </div>

      <div class="d-flex flex-shrink-0 justify-content-end flex-column align-items-end gap-1">
      <div class="i-price p-1 d-flex flex-column justify-content-center flex-shrink-0 u-bg-primary-400">
      <div class="i-price__row i-price__before d-flex justify-content-end align-items-center gap-1">
      
      <span class="i-price__before u-fw-500 text-decoration-line-through u-color-secondary">
        1 425 Kč Kč
      </span>
    </div>
        <div class="i-price__row i-price__main d-flex justify-content-end align-items-end gap-1">

      
              <span class="i-price__title u-fz-md u-fw-700">1 ks</span>
      
      <span class="i-price__main u-fw-700">
        <span class="">
          1 299 Kč
        </span>
                  Kč              </span>
    </div>
  
  </div>
              <span class="u-fw-500 u-fz-xs d-inline">
          <span>999 999</span>
          Kč
          bez DPH
        </span>
          </div>

  
  </div>

Lightweight

Preview

Twig

Html

ETHN01

Papírová taška hnědá ExtraTWIST 22x10x28

Potisk

1 425 Kč Kč

1 ks 1 299 Kč Kč

999 999 Kč bez DPH

        {% include "@Components/items/product-overview-item/product-overview-item.twig" with {props: {
  id: "ETHN01",
  title: "Papírová taška hnědá ExtraTWIST 22x10x28",
  img: {
    src: "https://placehold.co/56x56",
    srcset: [
      "https://placehold.co/56x56 1x",
      "https://placehold.co/112x112 2x"
    ]
  },
  tags: [
    {
      title: "Potisk",
      icon: {
        src: "@Images/svg/printer.svg",
      },
    },
  ],
  color: {
    title: "Hnědá",
    name: "color-checkbox",
    colors: [
      "#CFAF8A"
    ],
  },
  price: {
    main_title: "1 ks",
    before: "1 425 Kč",
    main: "1 299 Kč"
  },
  total_price: "999 999",
}} %}

          <div class="i-product-overview d-flex align-items-center  gap-2" data-product-id="ETHN01">
      <div class="i-product-overview__image u-rounded-1 overflow-hidden flex-shrink-0">
      <div class="img u-posr overflow-hidden --cover --placeholder --ratio-1-1 d-block">
  <picture>
    
    <img src="https://placehold.co/56x56" alt="Papírová taška hnědá ExtraTWIST 22x10x28" width="56" height="56" loading="lazy" draggable="false" srcset="https://placehold.co/56x56 1x, https://placehold.co/112x112 2x">
  </picture>
</div>
    </div>
  
  <div class="i-product-overview__content d-flex flex-column gap-05 flex-grow-1">
          <div class="i-product-overview__id u-fw-500 u-fz-xs u-color-text-400">ETHN01</div>
    
    <div class="i-product-overview__title u-fz-sm u-clamp u-fw-600" title="Papírová taška hnědá ExtraTWIST 22x10x28">Papírová taška hnědá ExtraTWIST 22x10x28</div>

          <div class="i-product-overview__variants d-flex gap-1 flex-wrap align-items-center">
                      <label class="f-color u-posr u-rounded-full --sm --checkbox  --readonly" style="--background-color:conic-gradient(
              #CFAF8A
    0deg
    355deg
    )">
  
  <span class="f-color__visual d-flex align-items-center justify-content-center u-posa u-inset-0 u-rounded-full"></span>

  

</label>
        
                              
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-secondary-500  --icon-before   i-product-overview__tag">
      <span class="i-tag__title">Potisk</span>
        <div class="i-tag__icon">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --text">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#15324F" fill-rule="evenodd" d="M13.56 5.44A1.5 1.5 0 0 1 14 6.5V12h-2v2H4v-2H2V6.5A1.5 1.5 0 0 1 3.5 5H4V2h8v3h.5a1.5 1.5 0 0 1 1.06.44ZM11 3H5v2h6V3ZM5 13h6v-3H5v3Zm7-2h1V6.5a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5V11h1V9h8v2Zm0-3V7h-2v1h2Z" clip-rule="evenodd"/></svg>      </span>
    </div>
  </span>
                        </div>
      </div>

      <div class="d-flex flex-shrink-0 justify-content-end flex-column align-items-end gap-1">
      <div class="i-price p-1 d-flex flex-column justify-content-center flex-shrink-0 u-bg-primary-400">
      <div class="i-price__row i-price__before d-flex justify-content-end align-items-center gap-1">
      
      <span class="i-price__before u-fw-500 text-decoration-line-through u-color-secondary">
        1 425 Kč Kč
      </span>
    </div>
        <div class="i-price__row i-price__main d-flex justify-content-end align-items-end gap-1">

      
              <span class="i-price__title u-fz-md u-fw-700">1 ks</span>
      
      <span class="i-price__main u-fw-700">
        <span class="">
          1 299 Kč
        </span>
                  Kč              </span>
    </div>
  
  </div>
              <span class="u-fw-500 u-fz-xs d-inline">
          <span>999 999</span>
          Kč
          bez DPH
        </span>
          </div>

  
  </div>