butter-kanglam-ui/_includes/modal.html
2021-09-17 09:26:31 -05:00

42 lines
1.9 KiB
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_data.logo[0] }}" alt="{{ page_data.modal_data.logo[1] }}" />
</div>
<div class="header__text">
<h2 class="modal__title ls-40" id="product-modal-title">{{ page_data.modal_data.title }}</h2>
<ul class="info__list">
{% for item in page_data.modal_data.info_list %}
<li>{{ item }}</li>
{% endfor %}
</ul>
</div>
<div class="header__btn">
<a class="btn-main" href="{{ page_data.modal_data.button_url }}">{{ page_data.modal_data.button_text | upcase }}</a>
</div>
</div>
<div class="modal__content__description">
<p class="content-text ls-40">{{ page_data.modal_data.text }}</p>
</div>
<div class="modal__content__slider">
<div class="screens-slider">
{% for slide in page_data.modal_data.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">{{ page_data.modal_data.warning | markdownify | remove: '<p>' | remove: '</p>' }}</p>
</footer>
</div>
</div>
</div>