butter-kanglam-ui/_includes/modal.html

<div class="modal micromodal-slide" id="product-modal" aria-hidden="true">
  <div class="modal__overlay" tabindex="-1" data-micromodal-close>
    <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="product-modal-title">
      <header class="modal__header">
        <button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
      </header>
      <main class="modal__content" id="product-modal-content">
        <div class="modal__content__header">
          <div class="header__logo">
            <img src="{{ site.baseurl }}{{ page_data.modal.butter_app_logo }}" alt="{% t modal.butter_app_logo_alt %}" />
          </div>
          <div class="header__text">
            <h2 class="modal__title ls-40" id="product-modal-title">{% t modal.title %}</h2>
            <ul class="info__list">
              {% for item in site.translations[site.lang].modal.info_list %}
                <li>{{ item }}</li>
              {% endfor %}
            </ul>
          </div>
          <div class="header__btn">
            <a class="btn-main" href="{{ site.baseurl }}{{ page_data.modal.button_url }}">{% t modal.button_text %}</a>
          </div>
        </div>
        <div class="modal__content__description">
          <p class="content-text ls-40">{% t modal.text %}</p>
        </div>
        <div class="modal__content__slider">
          <div class="screens-slider">
            {% for slide in page_data.modal.slider_list %}
              <div class="slider-item">
                <img src="{{ site.baseurl }}{{ slide }}" alt="slider image" />
              </div>
            {% endfor %}
          </div>
        </div>
      </main>
      <footer class="modal__footer">
        <p class="ls-40">{% t modal.warning %}</p>
      </footer>
    </div>
  </div>
</div>