Modal

A classic modal overlay, in which you can include any content you want. It works best in desktop view and can be used for making pop-ups and sign-in window.

To use modal component, you need to make use of four classes, modal, modal__background, modal__content and modal__close.

Add any content you want inside modal__content, also use padding classes as per your needs. Enter a value from 10 | 20 | 30 | 40 | 50 to set width of the modal visible region in '%'.

Wrap modal container with modal__open class to control dynamic behaviour.

<div class="modal flex-ct-ct">
<div class="modal__background"></div>
<div class="modal__content md-s" wide="20">
    <h1 class="sm">Modal</h1>
    <p class="sm"> This is a sample text to show you how modal can be used to
          showcase a small message as a pop-up
    </p>
  </div>
<span class="modal__close"><i class="fas fa-times-circle"></i></span>
</div>