NOTE: This component depends on the picture component. Ssample DOM structure:

Basic Usage

Example:

<div style="max-width: 800px; margin: 0 auto;">
<section class="gallery">
    <h5>Gallery</h5>
    <ul class="gallery-collection" role="group">
        <li class="gallery-item" style="">
            <figure class=" img-block" style="">
                <div class="img-wrapper full-size-img" style=" height: 300px;">
                    <img src="/ndsu-web-template/images/sample.png" alt="Sample Image"  />
                </div>
            </figure>
            
        </li>
        <li class="gallery-item" style="">
            <figure class=" img-block" style="">
                <a href="https://www.ndsu.edu/fileadmin/www.ur.ndsu.edu/images/photoGallery/Academics/Business_web.jpg" target="_blank" class="img-wrapper full-size-img" style=" height: 300px;">
                    <img src="https://www.ndsu.edu/fileadmin/www.ur.ndsu.edu/images/photoGallery/Academics/Business_web.jpg" alt="Sample Image"  />
                </a>
            </figure>
            
        </li>
        <li class="gallery-item" style="">
            <figure class=" img-block" style="">
                <div class="img-wrapper full-size-img" style=" height: 300px;">
                    <img src="https://www.ndsu.edu/fileadmin/www.ur.ndsu.edu/images/photoGallery/Academics/CoupleFamilyTherapy_web.jpg" alt="Sample Image"  />
                </div>
            </figure>
            
        </li>
        <li class="gallery-item" style="">
            <figure class=" img-block" style="">
                <div class="img-wrapper full-size-img" style=" height: 300px;">
                    <img src="/ndsu-web-template/images/sample.png" alt="Sample Image"  />
                </div>
            </figure>
            
        </li>
        <li class="gallery-item" style="">
            <figure class=" img-block" style="">
                <div class="img-wrapper full-size-img" style=" height: 300px;">
                    <img src="https://www.ndsu.edu/fileadmin/www.ur.ndsu.edu/images/photoGallery/Academics/Hospitality_web.jpg" alt="Sample Image"  />
                </div>
            </figure>
            
        </li>
        <li class="gallery-item" style="">
            <figure class=" img-block" style="">
                <div class="img-wrapper full-size-img" style=" height: 300px;">
                    <img src="https://www.ndsu.edu/fileadmin/www.ur.ndsu.edu/images/photoGallery/Academics/SoilScience_web.jpg" alt="Sample Image"  />
                </div>
            </figure>
            
        </li>
    </ul>
</section>
</div>

Size

Available sizes:

Example of 3 columns:

<section class="gallery gallery-3">
    <h5>Gallery</h5>
    <ul class="gallery-collection" role="group">
        <li class="gallery-item" style="">
            <figure class=" img-block" style=" width: 200px;">
                <div class="img-wrapper img-frame full-size-img" style=" width: 200px; height: 200px;">
                    <img src="/ndsu-web-template/images/sample.png" alt="Sample Image"  />
                </div>
            </figure>
            
        </li>
        <li class="gallery-item" style="">
            <figure class=" img-block" style=" width: 200px;">
                <a href="https://www.ndsu.edu/fileadmin/www.ur.ndsu.edu/images/photoGallery/Academics/Business_web.jpg" target="_blank" class="img-wrapper img-frame full-size-img" style=" width: 200px; height: 200px;">
                    <img src="https://www.ndsu.edu/fileadmin/www.ur.ndsu.edu/images/photoGallery/Academics/Business_web.jpg" alt="Sample Image"  />
                </a>
            </figure>
            
        </li>
        <li class="gallery-item" style="">
            <figure class=" img-block" style=" width: 200px;">
                <div class="img-wrapper img-frame full-size-img" style=" width: 200px; height: 200px;">
                    <img src="https://www.ndsu.edu/fileadmin/www.ur.ndsu.edu/images/photoGallery/Academics/CoupleFamilyTherapy_web.jpg" alt="Sample Image"  />
                </div>
            </figure>
            
        </li>
        <li class="gallery-item" style="">
            <figure class=" img-block" style=" width: 200px;">
                <div class="img-wrapper img-frame full-size-img" style=" width: 200px; height: 200px;">
                    <img src="/ndsu-web-template/images/sample.png" alt="Sample Image"  />
                </div>
            </figure>
            
        </li>
        <li class="gallery-item" style="">
            <figure class=" img-block" style=" width: 200px;">
                <div class="img-wrapper img-frame full-size-img" style=" width: 200px; height: 200px;">
                    <img src="https://www.ndsu.edu/fileadmin/www.ur.ndsu.edu/images/photoGallery/Academics/Hospitality_web.jpg" alt="Sample Image"  />
                </div>
            </figure>
            
        </li>
        <li class="gallery-item" style="">
            <figure class=" img-block" style=" width: 200px;">
                <div class="img-wrapper img-frame full-size-img" style=" width: 200px; height: 200px;">
                    <img src="https://www.ndsu.edu/fileadmin/www.ur.ndsu.edu/images/photoGallery/Academics/SoilScience_web.jpg" alt="Sample Image"  data-full-size-src="https://www.ndsu.edu/fileadmin/www.ur.ndsu.edu/images/photoGallery/Academics/SoilScience_HR.jpg" />
                </div>
            </figure>
            
        </li>
        <li class="gallery-item" style="">
            <figure class=" img-block" style=" width: 200px;">
                <div class="img-wrapper img-frame full-size-img" style=" width: 200px; height: 200px;">
                    <img src="https://www.ndsu.edu/fileadmin/www.ur.ndsu.edu/images/photoGallery/Academics/CoupleFamilyTherapy_web.jpg" alt="Sample Image"  />
                </div>
            </figure>
            
        </li>
        <li class="gallery-item" style="">
            <figure class=" img-block" style=" width: 200px;">
                <div class="img-wrapper img-frame full-size-img" style=" width: 200px; height: 200px;">
                    <img src="/ndsu-web-template/images/sample.png" alt="Sample Image"  />
                </div>
            </figure>
            
        </li>
        <li class="gallery-item" style="">
            <figure class=" img-block" style=" width: 200px;">
                <div class="img-wrapper img-frame full-size-img" style=" width: 200px; height: 200px;">
                    <img src="https://www.ndsu.edu/fileadmin/www.ur.ndsu.edu/images/photoGallery/Academics/Hospitality_web.jpg" alt="Sample Image"  />
                </div>
            </figure>
            
        </li>
        <li class="gallery-item" style="">
            <figure class=" img-block" style=" width: 200px;">
                <div class="img-wrapper img-frame full-size-img" style=" width: 200px; height: 200px;">
                    <img src="https://www.ndsu.edu/fileadmin/www.ur.ndsu.edu/images/photoGallery/Academics/SoilScience_web.jpg" alt="Sample Image"  data-full-size-src="https://www.ndsu.edu/fileadmin/www.ur.ndsu.edu/images/photoGallery/Academics/SoilScience_HR.jpg" />
                </div>
            </figure>
            
        </li>
    </ul>
</section>

Styling

Refer to picture component on how to style the picture on gallery.

Example of gallery with picture styling:

<section class="gallery gallery-5">
    <h5>Gallery</h5>
    <ul class="gallery-collection" role="group">
        <li class="gallery-item" style="">
            <figure class=" img-block" style="">
                <div class="img-wrapper img-shadow full-size-img" style=" height: 250px;">
                    <img src="https://www.ndsu.edu/fileadmin/www.ur.ndsu.edu/images/photoGallery/Academics/SoilScience_web.jpg" alt="Sample Image"  data-full-size-src="https://www.ndsu.edu/fileadmin/www.ur.ndsu.edu/images/photoGallery/Academics/SoilScience_HR.jpg" />
                </div>
                <figcaption>
                    <div class="caption-1">Title</div>
                    <div class="caption-2">FirstName LastName</div>
                </figcaption>
            </figure>
            
        </li>
        <li class="gallery-item" style="">
            <figure class=" img-block" style="">
                <div class="img-wrapper img-shadow full-size-img" style=" height: 250px;">
                    <img src="https://www.ndsu.edu/fileadmin/www.ur.ndsu.edu/images/photoGallery/Academics/CoupleFamilyTherapy_web.jpg" alt="Sample Image"  />
                </div>
                <figcaption>
                    <div class="caption-1">Title</div>
                    <div class="caption-2">FirstName LastName</div>
                </figcaption>
            </figure>
            
        </li>
        <li class="gallery-item" style="">
            <figure class=" img-block" style="">
                <div class="img-wrapper img-shadow full-size-img" style=" height: 250px;">
                    <img src="https://www.ndsu.edu/fileadmin/www.ur.ndsu.edu/images/photoGallery/Academics/Business_web.jpg" alt="Sample Image"  />
                </div>
                <figcaption>
                    <div class="caption-1">Title</div>
                    <div class="caption-2">FirstName LastName</div>
                </figcaption>
            </figure>
            
        </li>
        <li class="gallery-item" style="">
            <figure class=" img-block" style="">
                <div class="img-wrapper img-shadow full-size-img" style=" height: 250px;">
                    <img src="https://www.ndsu.edu/fileadmin/www.ur.ndsu.edu/images/photoGallery/Academics/SoilScience_web.jpg" alt="Sample Image"  />
                </div>
                <figcaption>
                    <div class="caption-1">Title</div>
                    <div class="caption-2">FirstName LastName</div>
                </figcaption>
            </figure>
            
        </li>
        <li class="gallery-item" style="">
            <figure class=" img-block" style="">
                <div class="img-wrapper img-shadow full-size-img" style=" height: 250px;">
                    <img src="/ndsu-web-template/images/sample.png" alt="Sample Image"  />
                </div>
                <figcaption>
                    <div class="caption-1">Title</div>
                    <div class="caption-2">FirstName LastName</div>
                </figcaption>
            </figure>
            
        </li>
        <li class="gallery-item" style="">
            <figure class=" img-block" style="">
                <div class="img-wrapper img-shadow full-size-img" style=" height: 250px;">
                    <img src="https://www.ndsu.edu/fileadmin/www.ur.ndsu.edu/images/photoGallery/Academics/CoupleFamilyTherapy_web.jpg" alt="Sample Image"  />
                </div>
                <figcaption>
                    <div class="caption-1">Title</div>
                    <div class="caption-2">FirstName LastName</div>
                </figcaption>
            </figure>
            
        </li>
        <li class="gallery-item" style="">
            <figure class=" img-block" style="">
                <div class="img-wrapper img-shadow full-size-img" style=" height: 250px;">
                    <img src="https://www.ndsu.edu/fileadmin/www.ur.ndsu.edu/images/photoGallery/Academics/Hospitality_web.jpg" alt="Sample Image"  />
                </div>
                <figcaption>
                    <div class="caption-1">Title</div>
                    <div class="caption-2">FirstName LastName</div>
                </figcaption>
            </figure>
            
        </li>
        <li class="gallery-item" style="">
            <figure class=" img-block" style="">
                <div class="img-wrapper img-shadow full-size-img" style=" height: 250px;">
                    <img src="/ndsu-web-template/images/sample.png" alt="Sample Image"  />
                </div>
                <figcaption>
                    <div class="caption-1">Title</div>
                    <div class="caption-2">FirstName LastName</div>
                </figcaption>
            </figure>
            
        </li>
        <li class="gallery-item" style="">
            <figure class=" img-block" style="">
                <div class="img-wrapper img-shadow full-size-img" style=" height: 250px;">
                    <img src="https://www.ndsu.edu/fileadmin/www.ur.ndsu.edu/images/photoGallery/Academics/CoupleFamilyTherapy_web.jpg" alt="Sample Image"  />
                </div>
                <figcaption>
                    <div class="caption-1">Title</div>
                    <div class="caption-2">FirstName LastName</div>
                </figcaption>
            </figure>
            
        </li>
    </ul>
</section>

Alignment

Available alignments:

<section class="gallery gallery-5 gallery-center">
    <h5>Gallery</h5>
    <ul class="gallery-collection" role="group">
        <li class="gallery-item" style="">
            <figure class=" img-block" style="">
                <div class="img-wrapper img-shadow full-size-img" style=" height: 250px;">
                    <img src="https://www.ndsu.edu/fileadmin/www.ur.ndsu.edu/images/photoGallery/Academics/SoilScience_web.jpg" alt="Sample Image"  />
                </div>
                <figcaption>
                    <div class="caption-1">Title</div>
                    <div class="caption-2">FirstName LastName</div>
                </figcaption>
            </figure>
            
        </li>
        <li class="gallery-item" style="">
            <figure class=" img-block" style="">
                <div class="img-wrapper img-shadow full-size-img" style=" height: 250px;">
                    <img src="https://www.ndsu.edu/fileadmin/www.ur.ndsu.edu/images/photoGallery/Academics/CoupleFamilyTherapy_web.jpg" alt="Sample Image"  />
                </div>
                <figcaption>
                    <div class="caption-1">Title</div>
                    <div class="caption-2">FirstName LastName</div>
                </figcaption>
            </figure>
            
        </li>
        <li class="gallery-item" style="">
            <figure class=" img-block" style="">
                <div class="img-wrapper img-shadow full-size-img" style=" height: 250px;">
                    <img src="https://www.ndsu.edu/fileadmin/www.ur.ndsu.edu/images/photoGallery/Academics/Business_web.jpg" alt="Sample Image"  />
                </div>
                <figcaption>
                    <div class="caption-1">Title</div>
                    <div class="caption-2">FirstName LastName</div>
                </figcaption>
            </figure>
            
        </li>
        <li class="gallery-item" style="">
            <figure class=" img-block" style="">
                <div class="img-wrapper img-shadow full-size-img" style=" height: 250px;">
                    <img src="https://www.ndsu.edu/fileadmin/www.ur.ndsu.edu/images/photoGallery/Academics/SoilScience_web.jpg" alt="Sample Image"  />
                </div>
                <figcaption>
                    <div class="caption-1">Title</div>
                    <div class="caption-2">FirstName LastName</div>
                </figcaption>
            </figure>
            
        </li>
        <li class="gallery-item" style="">
            <figure class=" img-block" style="">
                <div class="img-wrapper img-shadow full-size-img" style=" height: 250px;">
                    <img src="/ndsu-web-template/images/sample.png" alt="Sample Image"  />
                </div>
                <figcaption>
                    <div class="caption-1">Title</div>
                    <div class="caption-2">FirstName LastName</div>
                </figcaption>
            </figure>
            
        </li>
        <li class="gallery-item" style="">
            <figure class=" img-block" style="">
                <div class="img-wrapper img-shadow full-size-img" style=" height: 250px;">
                    <img src="https://www.ndsu.edu/fileadmin/www.ur.ndsu.edu/images/photoGallery/Academics/CoupleFamilyTherapy_web.jpg" alt="Sample Image"  />
                </div>
                <figcaption>
                    <div class="caption-1">Title</div>
                    <div class="caption-2">FirstName LastName</div>
                </figcaption>
            </figure>
            
        </li>
        <li class="gallery-item" style="">
            <figure class=" img-block" style="">
                <div class="img-wrapper img-shadow full-size-img" style=" height: 250px;">
                    <img src="https://www.ndsu.edu/fileadmin/www.ur.ndsu.edu/images/photoGallery/Academics/Hospitality_web.jpg" alt="Sample Image"  />
                </div>
                <figcaption>
                    <div class="caption-1">Title</div>
                    <div class="caption-2">FirstName LastName</div>
                </figcaption>
            </figure>
            
        </li>
        <li class="gallery-item" style="">
            <figure class=" img-block" style="">
                <div class="img-wrapper img-shadow full-size-img" style=" height: 250px;">
                    <img src="/ndsu-web-template/images/sample.png" alt="Sample Image"  />
                </div>
                <figcaption>
                    <div class="caption-1">Title</div>
                    <div class="caption-2">FirstName LastName</div>
                </figcaption>
            </figure>
            
        </li>
        <li class="gallery-item" style="">
            <figure class=" img-block" style="">
                <div class="img-wrapper img-shadow full-size-img" style=" height: 250px;">
                    <img src="https://www.ndsu.edu/fileadmin/www.ur.ndsu.edu/images/photoGallery/Academics/CoupleFamilyTherapy_web.jpg" alt="Sample Image"  />
                </div>
                <figcaption>
                    <div class="caption-1">Title</div>
                    <div class="caption-2">FirstName LastName</div>
                </figcaption>
            </figure>
            
        </li>
    </ul>
</section>

<section class="gallery gallery-5 gallery-right">
    <h5>Gallery</h5>
    <ul class="gallery-collection" role="group">
        <li class="gallery-item" style="">
            <figure class=" img-block" style="">
                <div class="img-wrapper img-shadow full-size-img" style=" height: 250px;">
                    <img src="https://www.ndsu.edu/fileadmin/www.ur.ndsu.edu/images/photoGallery/Academics/SoilScience_web.jpg" alt="Sample Image"  />
                </div>
                <figcaption>
                    <div class="caption-1">Title</div>
                    <div class="caption-2">FirstName LastName</div>
                </figcaption>
            </figure>
            
        </li>
        <li class="gallery-item" style="">
            <figure class=" img-block" style="">
                <div class="img-wrapper img-shadow full-size-img" style=" height: 250px;">
                    <img src="https://www.ndsu.edu/fileadmin/www.ur.ndsu.edu/images/photoGallery/Academics/CoupleFamilyTherapy_web.jpg" alt="Sample Image"  />
                </div>
                <figcaption>
                    <div class="caption-1">Title</div>
                    <div class="caption-2">FirstName LastName</div>
                </figcaption>
            </figure>
            
        </li>
        <li class="gallery-item" style="">
            <figure class=" img-block" style="">
                <div class="img-wrapper img-shadow full-size-img" style=" height: 250px;">
                    <img src="https://www.ndsu.edu/fileadmin/www.ur.ndsu.edu/images/photoGallery/Academics/Business_web.jpg" alt="Sample Image"  />
                </div>
                <figcaption>
                    <div class="caption-1">Title</div>
                    <div class="caption-2">FirstName LastName</div>
                </figcaption>
            </figure>
            
        </li>
        <li class="gallery-item" style="">
            <figure class=" img-block" style="">
                <div class="img-wrapper img-shadow full-size-img" style=" height: 250px;">
                    <img src="https://www.ndsu.edu/fileadmin/www.ur.ndsu.edu/images/photoGallery/Academics/SoilScience_web.jpg" alt="Sample Image"  />
                </div>
                <figcaption>
                    <div class="caption-1">Title</div>
                    <div class="caption-2">FirstName LastName</div>
                </figcaption>
            </figure>
            
        </li>
        <li class="gallery-item" style="">
            <figure class=" img-block" style="">
                <div class="img-wrapper img-shadow full-size-img" style=" height: 250px;">
                    <img src="/ndsu-web-template/images/sample.png" alt="Sample Image"  />
                </div>
                <figcaption>
                    <div class="caption-1">Title</div>
                    <div class="caption-2">FirstName LastName</div>
                </figcaption>
            </figure>
            
        </li>
        <li class="gallery-item" style="">
            <figure class=" img-block" style="">
                <div class="img-wrapper img-shadow full-size-img" style=" height: 250px;">
                    <img src="https://www.ndsu.edu/fileadmin/www.ur.ndsu.edu/images/photoGallery/Academics/CoupleFamilyTherapy_web.jpg" alt="Sample Image"  />
                </div>
                <figcaption>
                    <div class="caption-1">Title</div>
                    <div class="caption-2">FirstName LastName</div>
                </figcaption>
            </figure>
            
        </li>
        <li class="gallery-item" style="">
            <figure class=" img-block" style="">
                <div class="img-wrapper img-shadow full-size-img" style=" height: 250px;">
                    <img src="https://www.ndsu.edu/fileadmin/www.ur.ndsu.edu/images/photoGallery/Academics/Hospitality_web.jpg" alt="Sample Image"  />
                </div>
                <figcaption>
                    <div class="caption-1">Title</div>
                    <div class="caption-2">FirstName LastName</div>
                </figcaption>
            </figure>
            
        </li>
        <li class="gallery-item" style="">
            <figure class=" img-block" style="">
                <div class="img-wrapper img-shadow full-size-img" style=" height: 250px;">
                    <img src="/ndsu-web-template/images/sample.png" alt="Sample Image"  />
                </div>
                <figcaption>
                    <div class="caption-1">Title</div>
                    <div class="caption-2">FirstName LastName</div>
                </figcaption>
            </figure>
            
        </li>
        <li class="gallery-item" style="">
            <figure class=" img-block" style="">
                <div class="img-wrapper img-shadow full-size-img" style=" height: 250px;">
                    <img src="https://www.ndsu.edu/fileadmin/www.ur.ndsu.edu/images/photoGallery/Academics/CoupleFamilyTherapy_web.jpg" alt="Sample Image"  />
                </div>
                <figcaption>
                    <div class="caption-1">Title</div>
                    <div class="caption-2">FirstName LastName</div>
                </figcaption>
            </figure>
            
        </li>
    </ul>
</section>