Stylebook

id: w-s-23
figma

Defaultní výpis kategorií

V e-shopu můžete využít možnosti rychlého nákupu tašek od 100 ks po 20 000 ks, a to včetně potisku až v 6 přímých barvách nebo plnobarevně ve CMYK. Na výběr máme papírové tašky několika barev i rozměrů.

% Tašky v akci

% Tašky v akci

% Tašky v akci

% Tašky v akci

% Tašky v akci

% Tašky v akci

Bílé / hnědé tašky kroucené ucho

Bílé / hnědé tašky ploché ucho

        {% include "@Components/sections/category-list-section/category-list-section.twig" with {props: {
  header: {
    heading: {
      title: "Defaultní výpis kategorií",
      level: 1,
      style: "h2",
    },
    perex: "V e-shopu můžete využít možnosti rychlého nákupu tašek od 100 ks po 20 000 ks, a to včetně potisku až v 6 přímých barvách nebo plnobarevně ve CMYK. Na výběr máme papírové tašky několika barev i rozměrů.",
  },
  grid: {
    size: null,
    items: category_layout_items,
  },
}} %}

          

<section class="base-section  s-categories-list">
  <div class="base-section__container container">
    
    <header class="base-header d-flex flex-column gap-3 text-center align-items-center">

  
      <h1 class="base-heading mb-0 u-fw-700 u-h2">
            Defaultní výpis kategorií
      </h1>
  
      <div class="base-header__description entry-content mb-0">V e-shopu můžete využít možnosti rychlého nákupu tašek od 100 ks po 20 000 ks, a to včetně potisku až v 6 přímých barvách nebo plnobarevně ve CMYK. Na výběr máme papírové tašky několika barev i rozměrů.</div>
  
  
  

</header>
    <div class="g-category row g-2">
      <div class="g-categories__cell col-xl-3 col-lg-4 col-md-6">
      
  
<a href="#" title="% Tašky v akci" class="i-category d-flex h-100 flex-row overflow-hidden text-decoration-none position-relative  --secondary flex-md-column">
  <div class="i-category__image">
          <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 h-100">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/8k4gve7.png" alt="% Tašky v akci" width="340" height="219" draggable="false">
  </picture>
</div>
      </div>

  <div class="
          i-category__content
          d-flex flex-row flex-nowrap justify-content-between align-items-center gap-2 p-1
          align-items-md-start px-md-3 pb-md-3 pt-md-0
        ">
          <h3 class="i-category__title u-clamp u-h4" title="% Tašky v akci">% Tašky v akci</h4>
    
          <div class="i-category__cta">
        <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 --xs    --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>
      </div>
    
  </div>

      <span class="i-category__icon position-absolute">
        
  <span class="icon d-flex align-items-center justify-content-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M24 12a5.494 5.494 0 0 0-1.92-4.175 5.5 5.5 0 0 0-5.905-5.905 5.498 5.498 0 0 0-8.352 0 5.501 5.501 0 0 0-5.905 5.905A5.494 5.494 0 0 0-.002 12c0 1.617.708 3.136 1.92 4.175a5.496 5.496 0 0 0 1.595 4.31 5.515 5.515 0 0 0 4.31 1.595 5.498 5.498 0 0 0 8.352 0 5.497 5.497 0 0 0 5.905-5.905A5.494 5.494 0 0 0 24 12Zm-3.546 2.904-.55.37.127.65a3.498 3.498 0 0 1-4.107 4.106l-.65-.126-.37.549a3.5 3.5 0 0 1-5.807 0l-.37-.549-.65.126a3.502 3.502 0 0 1-4.106-4.106l.127-.65-.55-.37a3.5 3.5 0 0 1 0-5.808l.55-.37-.127-.65A3.498 3.498 0 0 1 8.078 3.97l.649.126.37-.549a3.5 3.5 0 0 1 5.808 0l.37.549.649-.126a3.501 3.501 0 0 1 4.107 4.106l-.127.65.55.37a3.5 3.5 0 0 1 0 5.808ZM9 10a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm7 5a1 1 0 1 1-2.001 0 1 1 0 0 1 2 0Zm-.434-7-4.8 8H8.434l4.8-8h2.332Z"/></svg>      </span>
    </span>
  </a>
    </div>
      <div class="g-categories__cell col-xl-3 col-lg-4 col-md-6">
      
  
<a href="#" title="% Tašky v akci" class="i-category d-flex h-100 flex-row overflow-hidden text-decoration-none position-relative   flex-md-column">
  <div class="i-category__image">
          <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 h-100">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/8k4gve7.png" alt="% Tašky v akci" width="340" height="219" draggable="false">
  </picture>
</div>
      </div>

  <div class="
          i-category__content
          d-flex flex-row flex-nowrap justify-content-between align-items-center gap-2 p-1
          align-items-md-start px-md-3 pb-md-3 pt-md-0
        ">
          <h3 class="i-category__title u-clamp u-h4" title="% Tašky v akci">% Tašky v akci</h4>
    
          <div class="i-category__cta">
        <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 --xs    --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>
      </div>
    
  </div>

  </a>
    </div>
      <div class="g-categories__cell col-xl-3 col-lg-4 col-md-6">
      
  
<a href="#" title="% Tašky v akci" class="i-category d-flex h-100 flex-row overflow-hidden text-decoration-none position-relative   flex-md-column">
  <div class="i-category__image">
          <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 h-100">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/8k4gve7.png" alt="% Tašky v akci" width="340" height="219" draggable="false">
  </picture>
</div>
      </div>

  <div class="
          i-category__content
          d-flex flex-row flex-nowrap justify-content-between align-items-center gap-2 p-1
          align-items-md-start px-md-3 pb-md-3 pt-md-0
        ">
          <h3 class="i-category__title u-clamp u-h4" title="% Tašky v akci">% Tašky v akci</h4>
    
          <div class="i-category__cta">
        <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 --xs    --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>
      </div>
    
  </div>

  </a>
    </div>
      <div class="g-categories__cell col-xl-3 col-lg-4 col-md-6">
      
  
<a href="#" title="% Tašky v akci" class="i-category d-flex h-100 flex-row overflow-hidden text-decoration-none position-relative   flex-md-column">
  <div class="i-category__image">
          <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 h-100">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/8k4gve7.png" alt="% Tašky v akci" width="340" height="219" draggable="false">
  </picture>
</div>
      </div>

  <div class="
          i-category__content
          d-flex flex-row flex-nowrap justify-content-between align-items-center gap-2 p-1
          align-items-md-start px-md-3 pb-md-3 pt-md-0
        ">
          <h3 class="i-category__title u-clamp u-h4" title="% Tašky v akci">% Tašky v akci</h4>
    
          <div class="i-category__cta">
        <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 --xs    --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>
      </div>
    
  </div>

  </a>
    </div>
      <div class="g-categories__cell col-xl-3 col-lg-4 col-md-6">
      
  
<a href="#" title="% Tašky v akci" class="i-category d-flex h-100 flex-row overflow-hidden text-decoration-none position-relative   flex-md-column">
  <div class="i-category__image">
          <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 h-100">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/8k4gve7.png" alt="% Tašky v akci" width="340" height="219" draggable="false">
  </picture>
</div>
      </div>

  <div class="
          i-category__content
          d-flex flex-row flex-nowrap justify-content-between align-items-center gap-2 p-1
          align-items-md-start px-md-3 pb-md-3 pt-md-0
        ">
          <h3 class="i-category__title u-clamp u-h4" title="% Tašky v akci">% Tašky v akci</h4>
    
          <div class="i-category__cta">
        <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 --xs    --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>
      </div>
    
  </div>

  </a>
    </div>
      <div class="g-categories__cell col-xl-3 col-lg-4 col-md-6">
      
  
<a href="#" title="% Tašky v akci" class="i-category d-flex h-100 flex-row overflow-hidden text-decoration-none position-relative  --primary flex-md-column">
  <div class="i-category__image">
          <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 h-100">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/8k4gve7.png" alt="% Tašky v akci" width="340" height="219" draggable="false">
  </picture>
</div>
      </div>

  <div class="
          i-category__content
          d-flex flex-row flex-nowrap justify-content-between align-items-center gap-2 p-1
          align-items-md-start px-md-3 pb-md-3 pt-md-0
        ">
          <h3 class="i-category__title u-clamp u-h4" title="% Tašky v akci">% Tašky v akci</h4>
    
          <div class="i-category__cta">
        <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 --xs    --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>
      </div>
    
  </div>

      <span class="i-category__icon position-absolute">
        
  <span class="icon d-flex align-items-center justify-content-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M7.707 9.293a.999.999 0 1 1-1.414 1.414.999.999 0 1 1 1.414-1.414Zm14.473 3.631-1.24 1.281a2.758 2.758 0 0 1-.745 2.527l-6.244 6.449a2.75 2.75 0 0 1-1.962.82c-.737 0-1.43-.288-1.95-.809L1.025 14.18l1.009-9.123 9.137-1.25 8.663 8.663.92-.95a.762.762 0 0 0 .012-1.084l-8.331-8.329-7.255.937-.256-1.983 8.229-1.063 9.026 9.026a2.762 2.762 0 0 1 0 3.901v-.001Zm-3.4 1.321-8.322-8.32-6.607.903-.731 6.617 8.333 8.333a.775.775 0 0 0 1.072 0l6.244-6.449a.762.762 0 0 0 .012-1.084Z"/></svg>      </span>
    </span>
  </a>
    </div>
      <div class="g-categories__cell col-xl-3 col-lg-4 col-md-6">
      
  
<a href="#" title="Bílé / hnědé tašky kroucené ucho" class="i-category d-flex h-100 flex-row overflow-hidden text-decoration-none position-relative  --primary flex-md-column">
  <div class="i-category__image">
          <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 h-100">
  <picture>
    
    <img src="" data-src="https://placehold.co/340x219" alt="Bílé / hnědé tašky kroucené ucho" width="340" height="219" draggable="false" srcset="" data-srcset="https://placehold.co/340x219 1x, https://placehold.co/680x438 2x">
  </picture>
</div>
      </div>

  <div class="
          i-category__content
          d-flex flex-row flex-nowrap justify-content-between align-items-center gap-2 p-1
          align-items-md-start px-md-3 pb-md-3 pt-md-0
        ">
          <h3 class="i-category__title u-clamp u-h4" title="Bílé / hnědé tašky kroucené ucho">Bílé / hnědé tašky kroucené ucho</h4>
    
          <div class="i-category__cta">
        <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 --xs    --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>
      </div>
    
  </div>

  </a>
    </div>
      <div class="g-categories__cell col-xl-3 col-lg-4 col-md-6">
      
  
<a href="#" title="Bílé / hnědé tašky ploché ucho" class="i-category d-flex h-100 flex-row overflow-hidden text-decoration-none position-relative   flex-md-column">
  <div class="i-category__image">
          <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 h-100">
  <picture>
    
    <img src="" data-src="https://placehold.co/340x219" alt="Bílé / hnědé tašky ploché ucho" width="340" height="219" draggable="false" srcset="" data-srcset="https://placehold.co/340x219 1x, https://placehold.co/680x438 2x">
  </picture>
</div>
      </div>

  <div class="
          i-category__content
          d-flex flex-row flex-nowrap justify-content-between align-items-center gap-2 p-1
          align-items-md-start px-md-3 pb-md-3 pt-md-0
        ">
          <h3 class="i-category__title u-clamp u-h4" title="Bílé / hnědé tašky ploché ucho">Bílé / hnědé tašky ploché ucho</h4>
    
          <div class="i-category__cta">
        <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 --xs    --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>
      </div>
    
  </div>

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

    </div>
</section>

Compact výpis kategorií

V e-shopu můžete využít možnosti rychlého nákupu tašek od 100 ks po 20 000 ks, a to včetně potisku až v 6 přímých barvách nebo plnobarevně ve CMYK. Na výběr máme papírové tašky několika barev i rozměrů.

% Tašky v akci

% Tašky v akci

% Tašky v akci

% Tašky v akci

% Tašky v akci

% Tašky v akci

Bílé / hnědé tašky kroucené ucho

Bílé / hnědé tašky ploché ucho

        {% include "@Components/sections/category-list-section/category-list-section.twig" with {props: {
  header: {
    heading: {
      title: "Compact výpis kategorií",
      level: 1,
      style: "h2",
    },
    perex: "V e-shopu můžete využít možnosti rychlého nákupu tašek od 100 ks po 20 000 ks, a to včetně potisku až v 6 přímých barvách nebo plnobarevně ve CMYK. Na výběr máme papírové tašky několika barev i rozměrů.",
  },
  grid: {
    size: "compact",
    items: category_layout_items,
  },
}} %}

          

<section class="base-section  s-categories-list">
  <div class="base-section__container container">
    
    <header class="base-header d-flex flex-column gap-3 text-center align-items-center">

  
      <h1 class="base-heading mb-0 u-fw-700 u-h2">
            Compact výpis kategorií
      </h1>
  
      <div class="base-header__description entry-content mb-0">V e-shopu můžete využít možnosti rychlého nákupu tašek od 100 ks po 20 000 ks, a to včetně potisku až v 6 přímých barvách nebo plnobarevně ve CMYK. Na výběr máme papírové tašky několika barev i rozměrů.</div>
  
  
  

</header>
    <div class="g-category row g-2 --compact">
      <div class="g-categories__cell col-xl-3 col-lg-4 col-md-6">
      

<a href="#" title="% Tašky v akci" class="i-category d-flex h-100 flex-row overflow-hidden text-decoration-none position-relative --compact --secondary">
  <div class="i-category__image">
          <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 h-100">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/8k4gve7.png" alt="% Tašky v akci" width="112" height="84" draggable="false">
  </picture>
</div>
      </div>

  <div class="
          i-category__content
          d-flex flex-row flex-nowrap justify-content-between align-items-center gap-2 p-1
          
        ">
          <h3 class="i-category__title u-clamp u-h4" title="% Tašky v akci">% Tašky v akci</h4>
    
    
  </div>

      <span class="i-category__icon position-absolute">
        
  <span class="icon d-flex align-items-center justify-content-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M24 12a5.494 5.494 0 0 0-1.92-4.175 5.5 5.5 0 0 0-5.905-5.905 5.498 5.498 0 0 0-8.352 0 5.501 5.501 0 0 0-5.905 5.905A5.494 5.494 0 0 0-.002 12c0 1.617.708 3.136 1.92 4.175a5.496 5.496 0 0 0 1.595 4.31 5.515 5.515 0 0 0 4.31 1.595 5.498 5.498 0 0 0 8.352 0 5.497 5.497 0 0 0 5.905-5.905A5.494 5.494 0 0 0 24 12Zm-3.546 2.904-.55.37.127.65a3.498 3.498 0 0 1-4.107 4.106l-.65-.126-.37.549a3.5 3.5 0 0 1-5.807 0l-.37-.549-.65.126a3.502 3.502 0 0 1-4.106-4.106l.127-.65-.55-.37a3.5 3.5 0 0 1 0-5.808l.55-.37-.127-.65A3.498 3.498 0 0 1 8.078 3.97l.649.126.37-.549a3.5 3.5 0 0 1 5.808 0l.37.549.649-.126a3.501 3.501 0 0 1 4.107 4.106l-.127.65.55.37a3.5 3.5 0 0 1 0 5.808ZM9 10a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm7 5a1 1 0 1 1-2.001 0 1 1 0 0 1 2 0Zm-.434-7-4.8 8H8.434l4.8-8h2.332Z"/></svg>      </span>
    </span>
  </a>
    </div>
      <div class="g-categories__cell col-xl-3 col-lg-4 col-md-6">
      

<a href="#" title="% Tašky v akci" class="i-category d-flex h-100 flex-row overflow-hidden text-decoration-none position-relative --compact">
  <div class="i-category__image">
          <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 h-100">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/8k4gve7.png" alt="% Tašky v akci" width="112" height="84" draggable="false">
  </picture>
</div>
      </div>

  <div class="
          i-category__content
          d-flex flex-row flex-nowrap justify-content-between align-items-center gap-2 p-1
          
        ">
          <h3 class="i-category__title u-clamp u-h4" title="% Tašky v akci">% Tašky v akci</h4>
    
    
  </div>

  </a>
    </div>
      <div class="g-categories__cell col-xl-3 col-lg-4 col-md-6">
      

<a href="#" title="% Tašky v akci" class="i-category d-flex h-100 flex-row overflow-hidden text-decoration-none position-relative --compact">
  <div class="i-category__image">
          <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 h-100">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/8k4gve7.png" alt="% Tašky v akci" width="112" height="84" draggable="false">
  </picture>
</div>
      </div>

  <div class="
          i-category__content
          d-flex flex-row flex-nowrap justify-content-between align-items-center gap-2 p-1
          
        ">
          <h3 class="i-category__title u-clamp u-h4" title="% Tašky v akci">% Tašky v akci</h4>
    
    
  </div>

  </a>
    </div>
      <div class="g-categories__cell col-xl-3 col-lg-4 col-md-6">
      

<a href="#" title="% Tašky v akci" class="i-category d-flex h-100 flex-row overflow-hidden text-decoration-none position-relative --compact">
  <div class="i-category__image">
          <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 h-100">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/8k4gve7.png" alt="% Tašky v akci" width="112" height="84" draggable="false">
  </picture>
</div>
      </div>

  <div class="
          i-category__content
          d-flex flex-row flex-nowrap justify-content-between align-items-center gap-2 p-1
          
        ">
          <h3 class="i-category__title u-clamp u-h4" title="% Tašky v akci">% Tašky v akci</h4>
    
    
  </div>

  </a>
    </div>
      <div class="g-categories__cell col-xl-3 col-lg-4 col-md-6">
      

<a href="#" title="% Tašky v akci" class="i-category d-flex h-100 flex-row overflow-hidden text-decoration-none position-relative --compact">
  <div class="i-category__image">
          <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 h-100">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/8k4gve7.png" alt="% Tašky v akci" width="112" height="84" draggable="false">
  </picture>
</div>
      </div>

  <div class="
          i-category__content
          d-flex flex-row flex-nowrap justify-content-between align-items-center gap-2 p-1
          
        ">
          <h3 class="i-category__title u-clamp u-h4" title="% Tašky v akci">% Tašky v akci</h4>
    
    
  </div>

  </a>
    </div>
      <div class="g-categories__cell col-xl-3 col-lg-4 col-md-6">
      

<a href="#" title="% Tašky v akci" class="i-category d-flex h-100 flex-row overflow-hidden text-decoration-none position-relative --compact --primary">
  <div class="i-category__image">
          <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 h-100">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/8k4gve7.png" alt="% Tašky v akci" width="112" height="84" draggable="false">
  </picture>
</div>
      </div>

  <div class="
          i-category__content
          d-flex flex-row flex-nowrap justify-content-between align-items-center gap-2 p-1
          
        ">
          <h3 class="i-category__title u-clamp u-h4" title="% Tašky v akci">% Tašky v akci</h4>
    
    
  </div>

      <span class="i-category__icon position-absolute">
        
  <span class="icon d-flex align-items-center justify-content-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M7.707 9.293a.999.999 0 1 1-1.414 1.414.999.999 0 1 1 1.414-1.414Zm14.473 3.631-1.24 1.281a2.758 2.758 0 0 1-.745 2.527l-6.244 6.449a2.75 2.75 0 0 1-1.962.82c-.737 0-1.43-.288-1.95-.809L1.025 14.18l1.009-9.123 9.137-1.25 8.663 8.663.92-.95a.762.762 0 0 0 .012-1.084l-8.331-8.329-7.255.937-.256-1.983 8.229-1.063 9.026 9.026a2.762 2.762 0 0 1 0 3.901v-.001Zm-3.4 1.321-8.322-8.32-6.607.903-.731 6.617 8.333 8.333a.775.775 0 0 0 1.072 0l6.244-6.449a.762.762 0 0 0 .012-1.084Z"/></svg>      </span>
    </span>
  </a>
    </div>
      <div class="g-categories__cell col-xl-3 col-lg-4 col-md-6">
      

<a href="#" title="Bílé / hnědé tašky kroucené ucho" class="i-category d-flex h-100 flex-row overflow-hidden text-decoration-none position-relative --compact --primary">
  <div class="i-category__image">
          <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 h-100">
  <picture>
    
    <img src="" data-src="https://placehold.co/340x219" alt="Bílé / hnědé tašky kroucené ucho" width="112" height="84" draggable="false" srcset="" data-srcset="https://placehold.co/340x219 1x, https://placehold.co/680x438 2x">
  </picture>
</div>
      </div>

  <div class="
          i-category__content
          d-flex flex-row flex-nowrap justify-content-between align-items-center gap-2 p-1
          
        ">
          <h3 class="i-category__title u-clamp u-h4" title="Bílé / hnědé tašky kroucené ucho">Bílé / hnědé tašky kroucené ucho</h4>
    
    
  </div>

  </a>
    </div>
      <div class="g-categories__cell col-xl-3 col-lg-4 col-md-6">
      

<a href="#" title="Bílé / hnědé tašky ploché ucho" class="i-category d-flex h-100 flex-row overflow-hidden text-decoration-none position-relative --compact">
  <div class="i-category__image">
          <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 h-100">
  <picture>
    
    <img src="" data-src="https://placehold.co/340x219" alt="Bílé / hnědé tašky ploché ucho" width="112" height="84" draggable="false" srcset="" data-srcset="https://placehold.co/340x219 1x, https://placehold.co/680x438 2x">
  </picture>
</div>
      </div>

  <div class="
          i-category__content
          d-flex flex-row flex-nowrap justify-content-between align-items-center gap-2 p-1
          
        ">
          <h3 class="i-category__title u-clamp u-h4" title="Bílé / hnědé tašky ploché ucho">Bílé / hnědé tašky ploché ucho</h4>
    
    
  </div>

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

    </div>
</section>