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