Index Core
      button link base-header base-section base-heading counter img icon modal footer pagination header photogallery cart-navigation listing-navigation listing-switch tabs
    Sections
      posts-grid-section post-detail-section posts-list-section usps-section banner-section faq-section signpost-section text-and-media-section events-section calendar-section contact-form-section steps-section newsletter-section hero-slider-section documents-section persons-section testimonials-section pricetable-section priceplan-section jobs-section error-404-section breadcrumbs-section content-section category-list-section intro-section registration-section seo-section team-image-section gallery-section cart-steps-section products-listing-section basket-thank-you-section address-section product-info-section order-detail-section order-section ordered-products-section product-detail individual-print-section filters-section company-references-section person-references-section numbers-section timeline-section contact-boxes-section reviews-section print-configuration-footer-section print-configuration-price-section user-configurations-section products-slider-section
    Items
      post-item tag-item alert-item category-item partner-item information-item content-toggle-item product-item product-overview-item price-item availability-item progress-item total-price-item cart-item tooltip-item order-info-item product-order-item print-info-item comparator-item print-variant-item
    Fields
      text-field password-field file-field textarea single-select-field single-select-inline-field checkbox-field checkbox-select-field switch-field date-field color-field radio-box-field address-box-field range-slider-field
    Forms
      contact-form newsletter-form registration-form discount-form address-form user-info-form review-form send-cv-form print-configuration-form
    Widgets
      cart-overview-widget
    Modals
      dimesions-modal print-info-modal product-out-of-stock-modal wishlist-share-modal print-method-modal send-cv-modal edit-comparator-name-modal print-configuration-modal delete-comparator-modal delete-comparator-product-modal delete-configuration-modal
    Aside
      documents-aside delivery-aside user-panel-aside

Modal

  • id: w-c-7

How it works

    Modal need to have unique id To open modal. Add to wanted element data-target="id-of-your-modal"
  • css class for closing the modal c-modal__close
      (Close element needs to be inside of modal element)
  • usecase: if you need different element to close the modal. For example close button. usecase: I need to reinit modals listeners after fetch request
      import from modal.ts -> init function and call again when needed

Default with block/slot content usage

    Preview Twig Html
  • Open
    my exmaple content 01 Go away
  •         {% include "@Components/button/button.twig" with {props: {
        title: "Open",
        data: {
          "modal-target": "modal-example-01"
        }
      }
    } %}
    
    {% embed "@Components/modal/modal.twig" with {props: {id: "modal-example-01"}} %}
      {% block content %}
        my exmaple content 01
        <a href="https://www.seznam.cz/">Go away</a>
      {% endblock %}
    {% endembed %}
    
          
  •           <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="modal-example-01">
          <span class="btn__title u-z-index-1">
          Open
        </span>
          
      
      </a>
    
      <div class="c-modal   --hidden" id="modal-example-01">
      <div class="c-modal__dialog">
    
        <div class="c-modal__content u-rounded-4">
          <div class="c-modal__inner d-flex flex-column">
    
            
            <div class="c-modal__body ">
                  my exmaple content 01
        <a href="https://www.seznam.cz/">Go away</a>
              </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>
    
            

Modal with header

    Preview Twig Html
  • Open

    Example title

    modal with header
  •         {% include "@Components/button/button.twig" with {props: {
        title: "Open",
        data: {
          "modal-target": "modal-example-02"
        }
      }
    } %}
    
    {% embed "@Components/modal/modal.twig" with {props: {
      id: "modal-example-02",
      header: {
        title: "Example title",
      }
      }} %}
      {% block content %}
        modal with header
      {% endblock %}
    {% endembed %}
    
          
  •           <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="modal-example-02">
          <span class="btn__title u-z-index-1">
          Open
        </span>
          
      
      </a>
    
      <div class="c-modal   --hidden" id="modal-example-02">
      <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">Example title</h2>
                          </header>
            
            <div class="c-modal__body ">
                  modal with header
              </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>
    
            

Size XL (Large)

    Preview Twig Html
  • Open

    Example title

    large modal

    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.

  •         {% include "@Components/button/button.twig" with {props: {
        title: "Open",
        data: {
          "modal-target": "modal-example-03"
        }
      }
    } %}
    
    {% embed "@Components/modal/modal.twig" with {props: {
      id: "modal-example-03",
      size: "xl",
      header: {
        title: "Example title",
      }
      }} %}
      {% block content %}
        <h3>large modal</h3>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.</p>
      {% endblock %}
    {% endembed %}
    
          
  •           <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="modal-example-03">
          <span class="btn__title u-z-index-1">
          Open
        </span>
          
      
      </a>
    
      <div class="c-modal --size-xl  --hidden" id="modal-example-03">
      <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">Example title</h2>
                          </header>
            
            <div class="c-modal__body ">
                  <h3>large modal</h3>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.</p>
              </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>
    
            

Size SM (Small)

    Preview Twig Html
  • Open

    Example title

    Small modal

    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.

    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.

    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.

  •         {% include "@Components/button/button.twig" with {props: {
        title: "Open",
        data: {
          "modal-target": "modal-example-04"
        }
      }
    } %}
    
    {% embed "@Components/modal/modal.twig" with {props: {
      id: "modal-example-04",
      size: "sm",
      header: {
        title: "Example title",
      }
      }} %}
      {% block content %}
        <h3>Small modal</h3>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.</p>
      {% endblock %}
    {% endembed %}
    
          
  •           <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="modal-example-04">
          <span class="btn__title u-z-index-1">
          Open
        </span>
          
      
      </a>
    
      <div class="c-modal --size-sm  --hidden" id="modal-example-04">
      <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">Example title</h2>
                          </header>
            
            <div class="c-modal__body ">
                  <h3>Small modal</h3>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.</p>
              </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>
    
            

Modal with footer and buttons

    Preview Twig Html
  • Open

    Modal with footer and buttons

    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.

    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.

    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.

    You can add c-modal__close class to button to envoke closing modal

    Close Confirm
  •         {% include "@Components/button/button.twig" with {props: {
        title: "Open",
        data: {
          "modal-target": "modal-example-05"
        }
      }
    } %}
    
    {% embed "@Components/modal/modal.twig" with {props: {
      id: "modal-example-05",
      header: {
        title: "Modal with footer and buttons",
      },
      footer: {
        align: "right",
      }
      }} %}
    
      {% block content %}
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.</p>
        <p>You can add c-modal__close class to button to envoke closing modal</p>
      {% endblock %}
    
      {% block footer %}
        {% include "@Components/button/button.twig" with {props: {
          title: "Close",
          variant: "outline",
          extra_class: "c-modal__close",
        }} %}
        {% include "@Components/button/button.twig" with {props: {
          title: "Confirm",
        }} %}
    
      {% endblock %}
    {% endembed %}
    
          
  •           <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="modal-example-05">
          <span class="btn__title u-z-index-1">
          Open
        </span>
          
      
      </a>
    
      <div class="c-modal   --hidden" id="modal-example-05">
      <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">Modal with footer and buttons</h2>
                          </header>
            
            <div class="c-modal__body ">
                  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad pariatur veritatis error ut aliquam. Magni esse ut nisi, atque optio voluptatem sequi fuga illo sit. Totam rerum ad temporibus quis.</p>
        <p>You can add c-modal__close class to button to envoke closing modal</p>
              </div>
    
                      <footer class="c-modal__footer d-flex flex-shrink-0 flex-wrap gap-2 align-items-center --right">
                    <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline          c-modal__close" href='#'>
          <span class="btn__title u-z-index-1">
          Close
        </span>
          
      
      </a>
        <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='#'>
          <span class="btn__title u-z-index-1">
          Confirm
        </span>
          
      
      </a>
    
                </footer>
            
            <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>
    
            

Open or close modal by javascript eventlisteners

          const modal = document.querySelector(".your-precious-modal")

modal?.dispatchEvent(new Event("open"))
modal?.dispatchEvent(new Event("close"))