Collections: Gallery View
Coming soon...
Galleries are self-contained. A gallery's lightbox will only show that gallery's items, and not the items of any other gallery on the page.
<div class="collection collection--gallery" id="[ID]"> <ul class="collection__items grid grid--block grid--block-horz-[alignment] grid--block-vert-[alignment] grid--block-xs-2 grid--block-md-3 grid--block-lg-4"> <li class="collection-item collection-item--has-image collection-item--has-icon" id="[ID]"> <div class="collection-item__content clearfix"> <div class="collection-item-image image"> <a href="#[lightbox-id]" class="lightbox lightbox--inline js-lightbox--inline"><img width="XXX" height="YYY" alt="" src="path/to/foo.jpg"></a> </div> <div class="collection-item-icon"> <a href="#[lightbox-id]" class="lightbox lightbox--inline js-lightbox--inline"><i class="fas fa-[icon]"></i></a> </div> <div class="collection-item-label"> <a href="#[lightbox-id]" class="lightbox lightbox--inline js-lightbox--inline">[Collection item label here]</a> </div> <div class="collection-item-description"> [Collection item description] </div> <div class="collection-item-action"> <a href="#[lightbox-id]" class="lightbox lightbox--inline js-lightbox--inline">[Collection item action]</a> </div> </div> <div id="[lightbox-id]" class="inline-popup inline-popup--md mfp-hide"> <div class="inline-popup__header"> <h5>[Lightbox Title]</h5> </div> <div class="inline-popup__content"> [Lightbox content] </div> </div> </li> [...] <li class="collection-item collection-item--has-image collection-item--has-icon" id="[ID]"> <div class="collection-item__content clearfix"> <div class="collection-item-image image"> <a href="[URL]"><img width="XXX" height="YYY" alt="" src="path/to/foo.jpg"></a> </div> <div class="collection-item-icon"> <a href="[URL]"><i class="fas fa-[icon]"></i></a> </div> <div class="collection-item-label"> <a href="[URL]">[Collection item label here]</a> </div> <div class="collection-item-description"> [Collection item description] </div> <div class="collection-item-action"> <a href="[URL]">[Collection item action]</a> </div> </div> </li> </ul> </div>
Gallery w/ Custom Padding and Background Color
Gallery w/ Springboard Border Class
Gallery w/ Custom Border Width and Color
Gallery w/ Alignment
-
Collection Item 1
-
This is the description for "Collection Item 1." Continually communicate cross-platform niche markets rather than progressive applications. Intrinsicly transition leading-edge channels and plug-and-play manufactured products.