Modal

Default with block/slot content usage

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 --primary" href='#' data-modal-target="modal-example-01">    <span class="btn__title">Open</span>
  
  </a>

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

    <div class="c-modal__content">
      <div class="c-modal__inner">

        
        <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 --outline --small   --icon-only c-modal__close c-modal__close-cross">
      <span class="btn__icon">

      <span class="icon  --sm">
  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><path d="M8.542 7l5.234-5.235a.767.767 0 000-1.083l-.458-.458a.768.768 0 00-1.083 0L7 5.458 1.766.224a.767.767 0 00-1.083 0l-.459.46a.766.766 0 000 1.083L5.459 7 .224 12.234a.768.768 0 000 1.083l.459.459a.767.767 0 001.083 0L7 8.541l5.234 5.234a.76.76 0 00.541.224.76.76 0 00.541-.224l.459-.459a.768.768 0 000-1.083z"/></svg></span>
    </span>
  </button>
        </div>
      </div>
    </div>
  </div>
</div>

Modal with header

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 --primary" href='#' data-modal-target="modal-example-02">    <span class="btn__title">Open</span>
  
  </a>

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

    <div class="c-modal__content">
      <div class="c-modal__inner">

                  <header class="c-modal__header">
            <h2 class="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 --outline --small   --icon-only c-modal__close c-modal__close-cross">
      <span class="btn__icon">

      <span class="icon  --sm">
  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><path d="M8.542 7l5.234-5.235a.767.767 0 000-1.083l-.458-.458a.768.768 0 00-1.083 0L7 5.458 1.766.224a.767.767 0 00-1.083 0l-.459.46a.766.766 0 000 1.083L5.459 7 .224 12.234a.768.768 0 000 1.083l.459.459a.767.767 0 001.083 0L7 8.541l5.234 5.234a.76.76 0 00.541.224.76.76 0 00.541-.224l.459-.459a.768.768 0 000-1.083z"/></svg></span>
    </span>
  </button>
        </div>
      </div>
    </div>
  </div>
</div>

Size XL (Large)

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 --primary" href='#' data-modal-target="modal-example-03">    <span class="btn__title">Open</span>
  
  </a>

  <div class="c-modal --size-xl  --hidden" id="modal-example-03">
  <div class="c-modal__dialog">

    <div class="c-modal__content">
      <div class="c-modal__inner">

                  <header class="c-modal__header">
            <h2 class="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 --outline --small   --icon-only c-modal__close c-modal__close-cross">
      <span class="btn__icon">

      <span class="icon  --sm">
  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><path d="M8.542 7l5.234-5.235a.767.767 0 000-1.083l-.458-.458a.768.768 0 00-1.083 0L7 5.458 1.766.224a.767.767 0 00-1.083 0l-.459.46a.766.766 0 000 1.083L5.459 7 .224 12.234a.768.768 0 000 1.083l.459.459a.767.767 0 001.083 0L7 8.541l5.234 5.234a.76.76 0 00.541.224.76.76 0 00.541-.224l.459-.459a.768.768 0 000-1.083z"/></svg></span>
    </span>
  </button>
        </div>
      </div>
    </div>
  </div>
</div>

Size SM (Small)

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 --primary" href='#' data-modal-target="modal-example-04">    <span class="btn__title">Open</span>
  
  </a>

  <div class="c-modal --size-sm  --hidden" id="modal-example-04">
  <div class="c-modal__dialog">

    <div class="c-modal__content">
      <div class="c-modal__inner">

                  <header class="c-modal__header">
            <h2 class="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 --outline --small   --icon-only c-modal__close c-modal__close-cross">
      <span class="btn__icon">

      <span class="icon  --sm">
  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><path d="M8.542 7l5.234-5.235a.767.767 0 000-1.083l-.458-.458a.768.768 0 00-1.083 0L7 5.458 1.766.224a.767.767 0 00-1.083 0l-.459.46a.766.766 0 000 1.083L5.459 7 .224 12.234a.768.768 0 000 1.083l.459.459a.767.767 0 001.083 0L7 8.541l5.234 5.234a.76.76 0 00.541.224.76.76 0 00.541-.224l.459-.459a.768.768 0 000-1.083z"/></svg></span>
    </span>
  </button>
        </div>
      </div>
    </div>
  </div>
</div>

Modal with footer and buttons

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",
      extraClass: "c-modal__close",
    }} %}
    {% include "@Components/button/button.twig" with {props: {
      title: "Confirm",
    }} %}

  {% endblock %}
{% endembed %}

          <a class="btn --primary" href='#' data-modal-target="modal-example-05">    <span class="btn__title">Open</span>
  
  </a>

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

    <div class="c-modal__content">
      <div class="c-modal__inner">

                  <header class="c-modal__header">
            <h2 class="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 --right">
                <a class="btn --outline" href='#'>    <span class="btn__title">Close</span>
  
  </a>
    <a class="btn --primary" href='#'>    <span class="btn__title">Confirm</span>
  
  </a>

            </footer>
        
        <div class="c-modal__button-container">
          <button class="btn --outline --small   --icon-only c-modal__close c-modal__close-cross">
      <span class="btn__icon">

      <span class="icon  --sm">
  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><path d="M8.542 7l5.234-5.235a.767.767 0 000-1.083l-.458-.458a.768.768 0 00-1.083 0L7 5.458 1.766.224a.767.767 0 00-1.083 0l-.459.46a.766.766 0 000 1.083L5.459 7 .224 12.234a.768.768 0 000 1.083l.459.459a.767.767 0 001.083 0L7 8.541l5.234 5.234a.76.76 0 00.541.224.76.76 0 00.541-.224l.459-.459a.768.768 0 000-1.083z"/></svg></span>
    </span>
  </button>
        </div>
      </div>
    </div>
  </div>
</div>