1. Image Slider
HTML code:
<div class="typoImageSlider" style="max-width: 500px;">
<div class="js-typoImageSlider">
<ul>
<li>
<img src="https://best.aonetemplate.com/img/cms/ts-slide-1.jpg" width="500" height="220" alt="Slide 1" />
</li>
<li>
<img src="https://best.aonetemplate.com/img/cms/ts-slide-2.jpg" width="500" height="220" alt="Slide 2" />
</li>
<li>
<img src="https://best.aonetemplate.com/img/cms/ts-slide-3.jpg" width="500" height="220" alt="Slide 3" />
</li>
</ul>
</div>
<div class="scrollArrows">
<i class="material-icons left">chevron_left</i>
<i class="material-icons right">chevron_right</i>
</div>
</div>2. Modal Box
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim lectus, egestas in velit a, interdum malesuada neque. Vivamus quam tellus, vestibulum eget purus ut, ornare facilisis mi. Maecenas vehicula ipsum id odio sagittis auctor. Etiam vulputate vulputate risus a sollicitudin. Phasellus at finibus augue, eu accumsan arcu. Quisque ultricies, sapien quis suscipit mollis, dui tortor lacinia eros, ut cursus nisi ante vel neque. Mauris vel libero eu nibh placerat sagittis nec ut augue. Sed vel neque quis ex pellentesque molestie. Maecenas scelerisque viverra diam, a gravida leo fringilla sed.
Aenean finibus risus vitae vestibulum sagittis. Proin mauris purus, vestibulum id nunc eu, viverra molestie eros. Proin faucibus ut lacus sit amet finibus. Mauris quis risus purus. Quisque vestibulum sed lectus id ultricies. Cras imperdiet, eros sit amet ultrices tincidunt, lorem velit commodo nibh, vel laoreet libero mauris eleifend metus. Etiam tristique libero id ex aliquet dignissim. Duis convallis in erat id interdum. Donec maximus iaculis nisl, quis vulputate magna pretium in.
HTML code:
<div class="typoModalBox">
<a href="#modalBoxID" class="btn btn-primary js-typoModalBox"> Launch modal content </a>
<div id="modalBoxID" class="modalContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim lectus, egestas in velit a, interdum malesuada neque. Vivamus quam tellus, vestibulum eget purus ut, ornare facilisis mi. Maecenas vehicula ipsum id odio sagittis auctor. Etiam vulputate vulputate risus a sollicitudin. Phasellus at finibus augue, eu accumsan arcu. Quisque ultricies, sapien quis suscipit mollis, dui tortor lacinia eros, ut cursus nisi ante vel neque. Mauris vel libero eu nibh placerat sagittis nec ut augue. Sed vel neque quis ex pellentesque molestie. Maecenas scelerisque viverra diam, a gravida leo fringilla sed.</p>
<p>Aenean finibus risus vitae vestibulum sagittis. Proin mauris purus, vestibulum id nunc eu, viverra molestie eros. Proin faucibus ut lacus sit amet finibus. Mauris quis risus purus. Quisque vestibulum sed lectus id ultricies. Cras imperdiet, eros sit amet ultrices tincidunt, lorem velit commodo nibh, vel laoreet libero mauris eleifend metus. Etiam tristique libero id ex aliquet dignissim. Duis convallis in erat id interdum. Donec maximus iaculis nisl, quis vulputate magna pretium in.</p>
</div>
</div>3. Toggle Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porttitor consectetur dignissim. Suspendisse volutpat pulvinar ullamcorper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi eu auctor ligula. In facilisis diam in dictum iaculis. Pellentesque sit amet dolor at elit consequat eleifend fermentum ut est. Suspendisse potenti. Maecenas iaculis sollicitudin risus, a sagittis nisl volutpat quis. Morbi rutrum nulla condimentum, laoreet quam quis, hendrerit quam. Integer molestie vestibulum luctus.
Nulla consequat magna ante, ut viverra sem tincidunt a. Sed in massa non libero tristique dictum. Sed et pretium turpis. Praesent sit amet ante iaculis tellus laoreet tempus. Vestibulum facilisis ultrices lacus, vitae sagittis velit sodales eu. Donec vel porttitor purus. Pellentesque nec leo dapibus, rutrum nisl nec, bibendum tortor. Cras scelerisque diam nisl. Nunc eu venenatis magna. Mauris ut commodo diam, id ornare nisi. Sed faucibus tellus ac ante iaculis, vitae ullamcorper urna accumsan. Quisque aliquam nunc at ornare sodales. In ultricies purus quam, ut lacinia nisl blandit eu. Sed non iaculis lorem. Aliquam eu hendrerit nibh, pharetra tincidunt nulla.
Morbi ornare sodales varius. In euismod mollis pellentesque. Sed dignissim luctus libero, a eleifend neque scelerisque id. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Nam commodo facilisis erat, quis pellentesque lorem dictum eu. Ut id augue eu diam vulputate ornare a nec purus. Phasellus condimentum sem lacus, sed aliquam ex rutrum nec. Nulla enim eros, malesuada a maximus ac, egestas vitae nisi.
Aenean commodo mi leo, eget sagittis purus condimentum et. Praesent quis nibh ac mauris posuere lacinia at non odio. Nulla et sem sit amet ante sollicitudin pellentesque sed vitae augue. Nulla facilisi. Sed cursus eleifend turpis, vel ultrices arcu accumsan nec. Maecenas facilisis lacus massa, in sodales eros commodo nec. Quisque non tortor interdum, ultrices urna nec, aliquet risus. In hac habitasse platea dictumst. Etiam eget nisl varius nisi mollis egestas eu id arcu. Curabitur massa est, molestie in purus quis, molestie porta sapien. Phasellus mattis velit ac tellus suscipit, sed placerat velit scelerisque. Etiam interdum pulvinar mi in fermentum. Sed eleifend tellus et neque vehicula vulputate at quis est.
Phasellus eu mauris suscipit, elementum diam sed, tristique risus. Nunc suscipit ultricies pharetra. Curabitur vel accumsan augue. Donec posuere sem a dui pellentesque, non fermentum nunc rutrum. Curabitur placerat vehicula massa, non interdum mi mollis non. Cras aliquam quam metus, vitae tempus sapien viverra at. Phasellus congue turpis nec mi suscipit dapibus. Aenean in leo odio. Nulla facilisi.
HTML code:
<div class="typoShowMoreContent">
<div class="js-typoShowMoreContent">
<div class="descSmall" style="height: 100px;">
<div class="descFull">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porttitor consectetur dignissim. Suspendisse volutpat pulvinar ullamcorper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi eu auctor ligula. In facilisis diam in dictum iaculis. Pellentesque sit amet dolor at elit consequat eleifend fermentum ut est. Suspendisse potenti. Maecenas iaculis sollicitudin risus, a sagittis nisl volutpat quis. Morbi rutrum nulla condimentum, laoreet quam quis, hendrerit quam. Integer molestie vestibulum luctus.</p>
<p>Nulla consequat magna ante, ut viverra sem tincidunt a. Sed in massa non libero tristique dictum. Sed et pretium turpis. Praesent sit amet ante iaculis tellus laoreet tempus. Vestibulum facilisis ultrices lacus, vitae sagittis velit sodales eu. Donec vel porttitor purus. Pellentesque nec leo dapibus, rutrum nisl nec, bibendum tortor. Cras scelerisque diam nisl. Nunc eu venenatis magna. Mauris ut commodo diam, id ornare nisi. Sed faucibus tellus ac ante iaculis, vitae ullamcorper urna accumsan. Quisque aliquam nunc at ornare sodales. In ultricies purus quam, ut lacinia nisl blandit eu. Sed non iaculis lorem. Aliquam eu hendrerit nibh, pharetra tincidunt nulla.</p>
<p>Morbi ornare sodales varius. In euismod mollis pellentesque. Sed dignissim luctus libero, a eleifend neque scelerisque id. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Nam commodo facilisis erat, quis pellentesque lorem dictum eu. Ut id augue eu diam vulputate ornare a nec purus. Phasellus condimentum sem lacus, sed aliquam ex rutrum nec. Nulla enim eros, malesuada a maximus ac, egestas vitae nisi.</p>
<p>Aenean commodo mi leo, eget sagittis purus condimentum et. Praesent quis nibh ac mauris posuere lacinia at non odio. Nulla et sem sit amet ante sollicitudin pellentesque sed vitae augue. Nulla facilisi. Sed cursus eleifend turpis, vel ultrices arcu accumsan nec. Maecenas facilisis lacus massa, in sodales eros commodo nec. Quisque non tortor interdum, ultrices urna nec, aliquet risus. In hac habitasse platea dictumst. Etiam eget nisl varius nisi mollis egestas eu id arcu. Curabitur massa est, molestie in purus quis, molestie porta sapien. Phasellus mattis velit ac tellus suscipit, sed placerat velit scelerisque. Etiam interdum pulvinar mi in fermentum. Sed eleifend tellus et neque vehicula vulputate at quis est.</p>
<p>Phasellus eu mauris suscipit, elementum diam sed, tristique risus. Nunc suscipit ultricies pharetra. Curabitur vel accumsan augue. Donec posuere sem a dui pellentesque, non fermentum nunc rutrum. Curabitur placerat vehicula massa, non interdum mi mollis non. Cras aliquam quam metus, vitae tempus sapien viverra at. Phasellus congue turpis nec mi suscipit dapibus. Aenean in leo odio. Nulla facilisi.</p>
</div>
</div>
<div class="descToggle">
<a href="#expand" class="expand">Show More<i class="material-icons">expand_more</i></a>
<a href="#collapse" class="collapse">Show Less<i class="material-icons">expand_less</i></a>
</div>
</div>
</div>4. Lightbox Gallery
HTML code:
<div class="typoLightboxGallery">
<ul class="js-typoLightboxGallery">
<li>
<a href="https://best.aonetemplate.com/img/cms/tg-large-1.jpg" title="Image 1">
<img src="https://best.aonetemplate.com/img/cms/tg-thumb-1.jpg" width="120" height="120" />
</a>
</li>
<li>
<a href="https://best.aonetemplate.com/img/cms/tg-large-2.jpg" title="Image 2">
<img src="https://best.aonetemplate.com/img/cms/tg-thumb-2.jpg" alt="" width="120" height="120" />
</a>
</li>
<li>
<a href="https://best.aonetemplate.com/img/cms/tg-large-3.jpg" title="Image 3">
<img src="https://best.aonetemplate.com/img/cms/tg-thumb-3.jpg" alt="" width="120" height="120" />
</a>
</li>
<li>
<a href="https://best.aonetemplate.com/img/cms/tg-large-4.jpg" title="Image 4">
<img src="https://best.aonetemplate.com/img/cms/tg-thumb-4.jpg" alt="" width="120" height="120" />
</a>
</li>
<li>
<a href="https://best.aonetemplate.com/img/cms/tg-large-5.jpg" title="Image 5">
<img src="https://best.aonetemplate.com/img/cms/tg-thumb-5.jpg" alt="" width="120" height="120" />
</a>
</li>
</ul>
</div>