Dimensions modal

id:
figma

Open

Jak fungují rozměry ?

Rozměry tašek jsou udávány v cm (šířka x hloubka x výška), např. 22x10x35.

Šířka tašky

Rozměr spodní hrany tašky na přední straně. Šířku měříme zleva doprava na složené tašce.

Hloubka tašky

Složené dno na zadní straně tašky definuje její hloubku. Hloubku měříme na dně složené tašky.

Výška tašky

Rozměr boční hrany tašky na přední straně. Výšku měříme zespoda nahoru na složené tašce. Výška tašky je vždy uvedena bez uší.

        {% set modal_id = "dimmensions-modal" %}

{% include "@Components/button/button.twig" with {props: {
    title: "Open",
    data: {
      "modal-target": modal_id
    }
  }
} %}

{% include "@Components/modals/dimesions-modal/dimesions-modal.twig" with {props: {
  modal_id: modal_id
}} %}

          
<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" href='#' data-modal-target="dimmensions-modal">
      <span class="btn__title u-z-index-1">
      Open
    </span>
      
  
  </a>

  <div class="c-modal   --hidden" id="dimmensions-modal">
  <div class="c-modal__dialog">

    <div class="c-modal__content u-rounded-4">
      <div class="c-modal__inner d-flex flex-column">

                  <header class="c-modal__header d-flex flex-column gap-1">
            <h2 class="u-h3 c-modal__heading">Jak fungují rozměry ?</h2>
                          <p class="c-modal__perex">Rozměry tašek jsou udávány v cm (šířka x hloubka x výška), např. 22x10x35.</p>
                      </header>
        
        <div class="c-modal__body ">
              <div class="c-modal__dimesions-content">
      <div class="d-flex gap-2">
        <div class="c-modal__dimesions-img flex-shrink-0">
          <div class="img u-posr overflow-hidden">
  <picture>
    
    <img src="" data-src="/images/content/dimensions/width.svg" alt="Ilustrace šířky tašky" width="63" height="80" draggable="false">
  </picture>
</div>
        </div>
        <div class="d-flex flex-column">
          <h3 class="u-fz-xl mb-1">Šířka tašky</h3>
          <p>Rozměr spodní hrany tašky na přední straně. Šířku měříme zleva doprava na&nbsp;složené tašce.</p>
        </div>
      </div>
      <div class="w-100 u-border-top u-border--tertiary-500 pb-5 mt-5"></div>

      <div class="d-flex gap-2">
        <div class="c-modal__dimesions-img flex-shrink-0">
          <div class="img u-posr overflow-hidden">
  <picture>
    
    <img src="" data-src="/images/content/dimensions/depth.svg" alt="Ilustrace hloubky tašky" width="63" height="80" draggable="false">
  </picture>
</div>
        </div>
        <div class="d-flex flex-column">
          <h3 class="u-fz-xl mb-1">Hloubka tašky</h3>
          <p>Složené dno na zadní straně tašky definuje její hloubku. Hloubku měříme na dně složené tašky.</p>
        </div>
      </div>
      <div class="w-100 u-border-top u-border--tertiary-500 pb-5 mt-5"></div>

      <div class="d-flex gap-2">
        <div class="c-modal__dimesions-img flex-shrink-0">
          <div class="img u-posr overflow-hidden">
  <picture>
    
    <img src="" data-src="/images/content/dimensions/height.svg" alt="Ilustrace výšky tašky" width="80" height="64" draggable="false">
  </picture>
</div>
        </div>
        <div class="d-flex flex-column">
          <h3 class="u-fz-xl mb-1">Výška tašky</h3>
          <p>Rozměr boční hrany tašky na přední straně. Výšku měříme zespoda nahoru na&nbsp;složené tašce. Výška tašky je vždy uvedena bez uší.</p>
        </div>
      </div>
    </div>
          </div>

        
        <div class="c-modal__button-container">
          <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --transparent --sm    --icon-only     c-modal__close c-modal__close-cross" aria-label="close modal">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#15324F" fill-rule="evenodd" d="M10.869 12 5.435 6.565l1.13-1.13L12 10.867l5.435-5.434 1.13 1.131L13.133 12l5.434 5.434-1.131 1.131L12 13.131l-5.434 5.434-1.131-1.13L10.869 12Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>
        </div>

      </div>
    </div>

  </div>

</div>