Code Snippets:
Component: Modal
Open Modal with Contact Form 7
[contact-form-7 id="132" title="Contact form: Demo"]
[gravityform id="1" title="false" ajax="true"]
<div class="js-modal-open" data-modal="modal-demo">Open Modal</div>
<div class="modal" id="modal-demo">
<div class="modal__overlay"></div>
<div class="modal__inner">
<div class="modal__content">
<div class="modal__close js-modal-close">
<svg><use xlink:href="#close"></use></svg>
</div>
<div class="modal__content-inner">
content here
</div>
</div>
</div>
</div>
Component: Toggle
Collapsed content here
<a href="#" class="js-toggle" data-item="toggle-demo">Toggle Collapsed Element</a>
<div class="js-toggle-content" id="toggle-demo">
Collapsed content here
</div>
Component: Accordion
Accordion Title 1
Accordion Content 1
Accordion Title 2
Accordion Content 2
<div class="js-accordion">
<div class="js-accordion-item">
<div class="h5 js-accordion-title"><span>Accordion Title 1</span>
<svg width="16" height="16"><use xlink:href="#angle-down"></use></svg>
</div>
<div class="js-accordion-content"><p>Accordion Content 1</p></div>
</div>
<div class="js-accordion-item">
<div class="h5 js-accordion-title"><span>Accordion Title 2</span>
<svg width="16" height="16"><use xlink:href="#angle-down"></use></svg>
</div>
<div class="js-accordion-content"><p>Accordion Content 2</p></div>
</div>
</div>
Component: Tabs
• Horizontal Tabs
Tab Title 1
Tab Title 2
Tab Content 1
Tab Content 2
<div class="js-tabs tabs tabs--horizontal">
<div class="tabs__titles">
<div class="js-tab-title is-active" data-item="tab-1">Tab Title 1</div>
<div class="js-tab-title" data-item="tab-2">Tab Title 2</div>
</div>
<div class="tabs__contents">
<div class="js-tab-content is-active" id="tab-1"><strong>Tab Content 1</strong></div>
<div class="js-tab-content" id="tab-2"><strong>Tab Content 2</strong></div>
</div>
</div>
• Vertical Tabs
Tab Title 1
Tab Title 2
Tab Content 1
Tab Content 2
<div class="js-tabs tabs tabs--vertical">
<div class="tabs__titles">
<div class="js-tab-title is-active" data-item="tab-1">Tab Title 1</div>
<div class="js-tab-title" data-item="tab-2">Tab Title 2</div>
</div>
<div class="tabs__contents">
<div class="js-tab-content is-active" id="tab-1"><strong>Tab Content 1</strong></div>
<div class="js-tab-content" id="tab-2"><strong>Tab Content 2</strong></div>
</div>
</div>
Slider Swiper.js
Check Swiper Demos here.
Check Swiper API here.
<div class="swiper swiper-images">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="" alt="">
</div>
<div class="swiper-slide">
<img src="" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"><svg><use xlink:href="#angle-left"></use></svg></div>
<div class="swiper-button-next"><svg><use xlink:href="#angle-right"></use></svg></div>
</div>
<script>
demoSlider = document.querySelectorAll('.swiper-demo');
if (demoSlider) {
demoSlider.forEach(slider => {
const swiper = new Swiper(slider, {
loop: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: slider.parentNode.querySelector('.swiper-pagination'),
clickable: true,
},
navigation: {
nextEl: slider.parentNode.querySelector('.swiper-button-next'),
prevEl: slider.parentNode.querySelector('.swiper-button-prev'),
},
on: {
// lazy load images
slideChange: function () {
try {
lazyLoadInstance.update();
} catch (e) {
}
}
}
});
});
}
</script>
Fancybox
<!-- Video lightbox-->
<a data-fancybox="gallery" data-src="https://youtu.be/nqye02H_H6I">
<img src="https://lipsum.app/id/3/200x150" />
</a>
<!-- Image lightbox-->
<a data-fancybox="gallery" data-src="https://lipsum.app/id/4/1024x768">
<img src="https://lipsum.app/id/4/200x150" />
</a>