UI Kit
<!-- Gallery Default Grid with Gutters -->
<div class="row">
<div class="col-md-4 col-sm-6">
<a class="gallery-item mb-30" href="path-to-big-image" data-fancybox="gallery1" data-options='{"caption": "Gallery Image Caption"}'>
<img src="path-to-thumbnail-image" alt="Gallery Image"/>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a class="gallery-item mb-30" href="path-to-big-image" data-fancybox="gallery1" data-options='{"caption": "Gallery Image Caption"}'>
<img src="path-to-thumbnail-image" alt="Gallery Image"/>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a class="gallery-item type-video mb-30" href="https://www.youtube.com/watch?v=VideoID&amp;autoplay=1&amp;rel=0&amp;controls=0&amp;showinfo=0" data-fancybox="gallery1" data-width="1000" data-height="563">
<img src="path-to-thumbnail-image" alt="Gallery Image"/>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a class="gallery-item mb-30" href="path-to-big-image" data-fancybox="gallery1" data-options='{"caption": "Gallery Image Caption"}'>
<img src="path-to-thumbnail-image" alt="Gallery Image"/></a>
</div>
<div class="col-md-4 col-sm-6">
<a class="gallery-item type-video mb-30" href="https://vimeo.com/VideoID?color=ac32e4" data-fancybox="gallery1" data-width="1000" data-height="563">
<img src="path-to-thumbnail-image" alt="Gallery Image"/>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a class="gallery-item mb-30" href="path-to-big-image" data-fancybox="gallery1" data-options='{"caption": "Gallery Image Caption"}'>
<img src="path-to-thumbnail-image" alt="Gallery Image"/>
</a>
</div>
</div>//- Gallery Default Grid with Gutters
.row
.col-md-4.col-sm-6
a(href="path-to-big-image" data-fancybox="gallery1" data-options='{"caption": "Gallery Image Caption"}').gallery-item.mb-30
+image("path-to-thumbnail-image", "Gallery Image")
.col-md-4.col-sm-6
a(href="path-to-big-image" data-fancybox="gallery1" data-options='{"caption": "Gallery Image Caption"}').gallery-item.mb-30
+image("path-to-thumbnail-image", "Gallery Image")
.col-md-4.col-sm-6
a(href="https://www.youtube.com/watch?v=VideoID&autoplay=1&rel=0&controls=0&showinfo=0" data-fancybox="gallery1" data-width="1000" data-height="563").gallery-item.type-video.mb-30
+image("path-to-thumbnail-image", "Gallery Image")
.col-md-4.col-sm-6
a(href="path-to-big-image" data-fancybox="gallery1" data-options='{"caption": "Gallery Image Caption"}').gallery-item.mb-30
+image("path-to-thumbnail-image", "Gallery Image")
.col-md-4.col-sm-6
a(href="https://vimeo.com/VideoID?color=ac32e4" data-fancybox="gallery1" data-width="1000" data-height="563").gallery-item.type-video.mb-30
+image("path-to-thumbnail-image", "Gallery Image")
.col-md-4.col-sm-6
a(href="path-to-big-image" data-fancybox="gallery1" data-options='{"caption": "Gallery Image Caption"}').gallery-item.mb-30
+image("path-to-thumbnail-image", "Gallery Image")<!-- Gallery with Captions -->
<div class="row">
<div class="col-md-4 col-sm-6">
<figure class="figure mb-30">
<a class="gallery-item figure-img" href="path-to-big-image" data-fancybox="gallery2" data-options='{"caption": "Gallery Image Caption"}'>
<img src="path-to-thumbnail-image" alt="Gallery Image"/>
</a>
<figcaption class="figure-caption">Image caption (left)</figcaption>
</figure>
</div>
<div class="col-md-4 col-sm-6">
<figure class="figure mb-30">
<a class="gallery-item figure-img" href="path-to-big-image" data-fancybox="gallery2" data-options='{"caption": "Gallery Image Caption"}'>
<img src="path-to-thumbnail-image" alt="Gallery Image"/>
</a>
<figcaption class="figure-caption text-center">Image caption (center)</figcaption>
</figure>
</div>
<div class="col-md-4 col-sm-6">
<figure class="figure mb-30">
<a class="gallery-item type-video figure-img" href="https://www.youtube.com/watch?v=VideoID&amp;autoplay=1&amp;rel=0&amp;controls=0&amp;showinfo=0" data-fancybox="gallery2" data-width="1000" data-height="563">
<img src="path-to-thumbnail-image" alt="Gallery Image"/>
</a>
<figcaption class="figure-caption text-right">Image caption (right)</figcaption>
</figure>
</div>
</div>//- Gallery with Captions
.row
.col-md-4.col-sm-6
figure.figure.mb-30
a(href="path-to-big-image" data-fancybox="gallery2" data-options='{"caption": "Gallery Image Caption"}').gallery-item.figure-img
+image("path-to-thumbnail-image", "Gallery Image")
figcaption.figure-caption Image caption (left)
.col-md-4.col-sm-6
figure.figure.mb-30
a(href="path-to-big-image" data-fancybox="gallery2" data-options='{"caption": "Gallery Image Caption"}').gallery-item.figure-img
+image("path-to-thumbnail-image", "Gallery Image")
figcaption.figure-caption.text-center Image caption (center)
.col-md-4.col-sm-6
figure.figure.mb-30
a(href="https://www.youtube.com/watch?v=VideoID&autoplay=1&rel=0&controls=0&showinfo=0" data-fancybox="gallery2" data-width="1000" data-height="563").gallery-item.type-video.figure-img
+image("path-to-thumbnail-image", "Gallery Image")
figcaption.figure-caption.text-right Image caption (right)<!-- Gallery Default Grid No Gutters -->
<div class="row no-gutters">
<div class="col-md-4 col-sm-6">
<a class="gallery-item" href="path-to-big-image" data-fancybox="gallery1" data-options='{"caption": "Gallery Image Caption"}'>
<img src="path-to-thumbnail-image" alt="Gallery Image"/>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a class="gallery-item" href="path-to-big-image" data-fancybox="gallery1" data-options='{"caption": "Gallery Image Caption"}'>
<img src="path-to-thumbnail-image" alt="Gallery Image"/>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a class="gallery-item type-video" href="https://www.youtube.com/watch?v=VideoID&amp;autoplay=1&amp;rel=0&amp;controls=0&amp;showinfo=0" data-fancybox="gallery1" data-width="1000" data-height="563">
<img src="path-to-thumbnail-image" alt="Gallery Image"/>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a class="gallery-item" href="path-to-big-image" data-fancybox="gallery1" data-options='{"caption": "Gallery Image Caption"}'>
<img src="path-to-thumbnail-image" alt="Gallery Image"/></a>
</div>
<div class="col-md-4 col-sm-6">
<a class="gallery-item type-video" href="https://vimeo.com/VideoID?color=ac32e4" data-fancybox="gallery1" data-width="1000" data-height="563">
<img src="path-to-thumbnail-image" alt="Gallery Image"/>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a class="gallery-item" href="path-to-big-image" data-fancybox="gallery1" data-options='{"caption": "Gallery Image Caption"}'>
<img src="path-to-thumbnail-image" alt="Gallery Image"/>
</a>
</div>
</div>//- Gallery Default Grid No Gutters
.row.no-gutters
.col-md-4.col-sm-6
a(href="path-to-big-image" data-fancybox="gallery1" data-options='{"caption": "Gallery Image Caption"}').gallery-item
+image("path-to-thumbnail-image", "Gallery Image")
.col-md-4.col-sm-6
a(href="path-to-big-image" data-fancybox="gallery1" data-options='{"caption": "Gallery Image Caption"}').gallery-item
+image("path-to-thumbnail-image", "Gallery Image")
.col-md-4.col-sm-6
a(href="https://www.youtube.com/watch?v=VideoID&autoplay=1&rel=0&controls=0&showinfo=0" data-fancybox="gallery1" data-width="1000" data-height="563").gallery-item.type-video
+image("path-to-thumbnail-image", "Gallery Image")
.col-md-4.col-sm-6
a(href="path-to-big-image" data-fancybox="gallery1" data-options='{"caption": "Gallery Image Caption"}').gallery-item
+image("path-to-thumbnail-image", "Gallery Image")
.col-md-4.col-sm-6
a(href="https://vimeo.com/VideoID?color=ac32e4" data-fancybox="gallery1" data-width="1000" data-height="563").gallery-item.type-video
+image("path-to-thumbnail-image", "Gallery Image")
.col-md-4.col-sm-6
a(href="path-to-big-image" data-fancybox="gallery1" data-options='{"caption": "Gallery Image Caption"}').gallery-item
+image("path-to-thumbnail-image", "Gallery Image")<!-- Gallery Masonry Grid with Gutters -->
<div class="isotope-grid cols-3">
<div class="gutter-sizer"></div>
<div class="grid-sizer"></div>
<div class="grid-item">
<a class="gallery-item type-video" href="https://vimeo.com/VideID?color=ac32e4" data-fancybox="gallery4" data-width="1000" data-height="563">
<img src="path-to-thumbnail-image" alt="Gallery Image"/>
</a>
</div>
<div class="grid-item">
<a class="gallery-item" href="path-to-big-image" data-fancybox="gallery4" data-options='{"caption": "Gallery Image Caption"}'>
<img src="path-to-thumbnail-image" alt="Gallery Image"/>
</a>
</div>
<div class="grid-item">
<a class="gallery-item" href="path-to-big-image" data-fancybox="gallery4" data-options='{"caption": "Gallery Image Caption"}'>
<img src="path-to-thumbnail-image" alt="Gallery Image"/>
</a>
</div>
<div class="grid-item">
<a class="gallery-item" href="path-to-big-image" data-fancybox="gallery4" data-options='{"caption": "Gallery Image Caption"}'>
<img src="path-to-thumbnail-image" alt="Gallery Image"/>
</a>
</div>
<div class="grid-item">
<a class="gallery-item" href="path-to-big-image" data-fancybox="gallery4" data-options='{"caption": "Gallery Image Caption"}'>
<img src="path-to-thumbnail-image" alt="Gallery Image"/>
</a>
</div>
<div class="grid-item">
<a class="gallery-item type-video" href="https://www.youtube.com/watch?v=VideoID&amp;autoplay=1&amp;rel=0&amp;controls=0&amp;showinfo=0" data-fancybox="gallery4" data-width="1000" data-height="563">
<img src="path-to-thumbnail-image" alt="Gallery Image"/>
</a>
</div>
</div>//- Gallery Masonry Grid with Gutters
.isotope-grid.cols-3
.gutter-sizer
.grid-sizer
.grid-item
a(href="https://vimeo.com/VideoID?color=ac32e4" data-fancybox="gallery4" data-width="1000" data-height="563").gallery-item.type-video
+image("path-to-thumbnail-image", "Gallery Image")
.grid-item
a(href="path-to-big-image" data-fancybox="gallery4" data-options='{"caption": "Gallery Image Caption"}').gallery-item
+image("path-to-thumbnail-image", "Gallery Image")
.grid-item
a(href="path-to-big-image" data-fancybox="gallery4" data-options='{"caption": "Gallery Image Caption"}').gallery-item
+image("path-to-thumbnail-image", "Gallery Image")
.grid-item
a(href="path-to-big-image" data-fancybox="gallery4" data-options='{"caption": "Gallery Image Caption"}').gallery-item
+image("path-to-thumbnail-image", "Gallery Image")
.grid-item
a(href="path-to-big-image" data-fancybox="gallery4" data-options='{"caption": "Gallery Image Caption"}').gallery-item
+image("path-to-thumbnail-image", "Gallery Image")
.grid-item
a(href="https://www.youtube.com/watch?v=VideoID&autoplay=1&rel=0&controls=0&showinfo=0" data-fancybox="gallery4" data-width="1000" data-height="563").gallery-item.type-video
+image("path-to-thumbnail-image", "Gallery Image")<!-- Gallery Masonry Grid No Gutters -->
<div class="isotope-grid grid-no-gutters cols-3">
<div class="gutter-sizer"></div>
<div class="grid-sizer"></div>
<div class="grid-item">
<a class="gallery-item type-video" href="https://vimeo.com/VideID?color=ac32e4" data-fancybox="gallery4" data-width="1000" data-height="563">
<img src="path-to-thumbnail-image" alt="Gallery Image"/>
</a>
</div>
<div class="grid-item">
<a class="gallery-item" href="path-to-big-image" data-fancybox="gallery4" data-options='{"caption": "Gallery Image Caption"}'>
<img src="path-to-thumbnail-image" alt="Gallery Image"/>
</a>
</div>
<div class="grid-item">
<a class="gallery-item" href="path-to-big-image" data-fancybox="gallery4" data-options='{"caption": "Gallery Image Caption"}'>
<img src="path-to-thumbnail-image" alt="Gallery Image"/>
</a>
</div>
<div class="grid-item">
<a class="gallery-item" href="path-to-big-image" data-fancybox="gallery4" data-options='{"caption": "Gallery Image Caption"}'>
<img src="path-to-thumbnail-image" alt="Gallery Image"/>
</a>
</div>
<div class="grid-item">
<a class="gallery-item" href="path-to-big-image" data-fancybox="gallery4" data-options='{"caption": "Gallery Image Caption"}'>
<img src="path-to-thumbnail-image" alt="Gallery Image"/>
</a>
</div>
<div class="grid-item">
<a class="gallery-item type-video" href="https://www.youtube.com/watch?v=VideoID&amp;autoplay=1&amp;rel=0&amp;controls=0&amp;showinfo=0" data-fancybox="gallery4" data-width="1000" data-height="563">
<img src="path-to-thumbnail-image" alt="Gallery Image"/>
</a>
</div>
</div>//- Gallery Masonry Grid No Gutters
.isotope-grid.grid-no-gutters.cols-3
.gutter-sizer
.grid-sizer
.grid-item
a(href="https://vimeo.com/VideoID?color=ac32e4" data-fancybox="gallery4" data-width="1000" data-height="563").gallery-item.type-video
+image("path-to-thumbnail-image", "Gallery Image")
.grid-item
a(href="path-to-big-image" data-fancybox="gallery4" data-options='{"caption": "Gallery Image Caption"}').gallery-item
+image("path-to-thumbnail-image", "Gallery Image")
.grid-item
a(href="path-to-big-image" data-fancybox="gallery4" data-options='{"caption": "Gallery Image Caption"}').gallery-item
+image("path-to-thumbnail-image", "Gallery Image")
.grid-item
a(href="path-to-big-image" data-fancybox="gallery4" data-options='{"caption": "Gallery Image Caption"}').gallery-item
+image("path-to-thumbnail-image", "Gallery Image")
.grid-item
a(href="path-to-big-image" data-fancybox="gallery4" data-options='{"caption": "Gallery Image Caption"}').gallery-item
+image("path-to-thumbnail-image", "Gallery Image")
.grid-item
a(href="https://www.youtube.com/watch?v=VideoID&autoplay=1&rel=0&controls=0&showinfo=0" data-fancybox="gallery4" data-width="1000" data-height="563").gallery-item.type-video
+image("path-to-thumbnail-image", "Gallery Image")<!-- Gallery inside Carousel -->
<div class="owl-carousel" data-owl-carousel='{ "nav": false, "dots": true, "loop": true, "margin": 30, "center": true, "responsive": {"0":{"items":1},"630":{"items":2},"991":{"items":3},"1200":{"items":3}} }'>
<a class="gallery-item" href="path-to-big-image" data-fancybox="gallery6" data-options='{"caption": "Gallery Image Caption"}'>
<img src="path-to-thumbnail-image" alt="Gallery Image"/>
</a>
<a class="gallery-item" href="path-to-big-image" data-fancybox="gallery6" data-options='{"caption": "Gallery Image Caption"}'>
<img src="path-to-thumbnail-image" alt="Gallery Image"/>
</a>
<a class="gallery-item type-video" href="https://www.youtube.com/watch?v=VideoID&amp;autoplay=1&amp;rel=0&amp;controls=0&amp;showinfo=0" data-fancybox="gallery6" data-width="1000" data-height="563">
<img src="path-to-thumbnail-image" alt="Gallery Image"/>
</a>
<a class="gallery-item" href="path-to-big-image" data-fancybox="gallery6" data-options='{"caption": "Gallery Image Caption"}'>
<img src="path-to-thumbnail-image" alt="Gallery Image"/>
</a>
<a class="gallery-item type-video" href="https://vimeo.com/VideoID?color=ac32e4" data-fancybox="gallery6" data-width="1000" data-height="563">
<img src="path-to-thumbnail-image" alt="Gallery Image"/>
</a>
<a class="gallery-item" href="path-to-big-imageg" data-fancybox="gallery6" data-options='{"caption": "Gallery Image Caption"}'>
<img src="path-to-thumbnail-image" alt="Gallery Image"/>
</a>
</div>//- Gallery inside Carousel
.owl-carousel(data-owl-carousel='{ "nav": false, "dots": true, "loop": true, "margin": 30, "center": true, "responsive": {"0":{"items":1},"630":{"items":2},"991":{"items":3},"1200":{"items":3}} }')
a(href="path-to-big-image" data-fancybox="gallery6" data-options='{"caption": "Gallery Image Caption"}').gallery-item
+image("path-to-thumbnail-image", "Gallery Image")
a(href="path-to-big-image" data-fancybox="gallery6" data-options='{"caption": "Gallery Image Caption"}').gallery-item
+image("path-to-thumbnail-image", "Gallery Image")
a(href="https://www.youtube.com/watch?v=VideoID&autoplay=1&rel=0&controls=0&showinfo=0" data-fancybox="gallery6" data-width="1000" data-height="563").gallery-item.type-video
+image("path-to-thumbnail-image", "Gallery Image")
a(href="path-to-big-image" data-fancybox="gallery6" data-options='{"caption": "Gallery Image Caption"}').gallery-item
+image("path-to-thumbnail-image", "Gallery Image")
a(href="https://vimeo.com/VideoID?color=ac32e4" data-fancybox="gallery6" data-width="1000" data-height="563").gallery-item.type-video
+image("path-to-thumbnail-image", "Gallery Image")
a(href="path-to-big-image" data-fancybox="gallery6" data-options='{"caption": "Gallery Image Caption"}').gallery-item
+image("path-to-thumbnail-image", "Gallery Image")
