Category item

Default

  •         {% include "@Components/items/category-item/category-item.twig" with {props: {
  title: "% Tašky v akci",
  url: "#",
  img: {
    "src": "https://i.imgur.com/8k4gve7.png"
  }
}} %}

      
  •           
  
<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>

Default with icon

  •         {% include "@Components/items/category-item/category-item.twig" with {props: {
  title: "% Tašky v akci",
  url: "#",
  img: {
    "src": "https://i.imgur.com/8k4gve7.png"
  },
  icon: {
    "src": "@Images/svg/percent.svg"
  }
}} %}

      
  •           
  
<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>

      <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>

Primary color variant

  •         {% include "@Components/items/category-item/category-item.twig" with {props: {
  title: "% Tašky v akci",
  url: "#",
  color: "primary",
  img: {
    "src": "https://i.imgur.com/8k4gve7.png"
  },
  icon: {
    "src": "@Images/svg/percent.svg"
  }
}} %}

      
  •           
  
<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="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>

Secondary color variant

  •         {% include "@Components/items/category-item/category-item.twig" with {props: {
  title: "% Tašky v akci",
  url: "#",
  color: "secondary",
  img: {
    "src": "https://i.imgur.com/8k4gve7.png"
  },
  icon: {
    "src": "@Images/svg/percent.svg"
  }
}} %}

      
  •           
  
<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>

Compact category item

Default

  •         {% include "@Components/items/category-item/category-item.twig" with {props: {
  title: "% Tašky v akci",
  size: "compact",
  url: "#",
  img: {
    "src": "https://i.imgur.com/8k4gve7.png"
  }
}} %}

      
  •           

<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>

Default with icon

  •         {% include "@Components/items/category-item/category-item.twig" with {props: {
  title: "% Tašky v akci",
  size: "compact",
  url: "#",
  img: {
    "src": "https://i.imgur.com/8k4gve7.png"
  },
  icon: {
    "src": "@Images/svg/percent.svg"
  }
}} %}

      
  •           

<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>

      <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>

Primary color variant

  •         {% include "@Components/items/category-item/category-item.twig" with {props: {
  title: "% Tašky v akci",
  url: "#",
  color: "primary",
  size: "compact",
  img: {
    "src": "https://i.imgur.com/8k4gve7.png"
  },
  icon: {
    "src": "@Images/svg/percent.svg"
  }
}} %}

      
  •           

<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="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>

Secondary color variant

  •         {% include "@Components/items/category-item/category-item.twig" with {props: {
  title: "% Tašky v akci",
  url: "#",
  color: "secondary",
  size: "compact",
  img: {
    "src": "https://i.imgur.com/8k4gve7.png"
  },
  icon: {
    "src": "@Images/svg/percent.svg"
  }
}} %}

      
  •           

<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>