Gallery

A photo gallery can be included to add multiple images or video to a section of the page in a slider presentation. Optional text can be displayed on hover to provide context to the image or video. Images can link to a page, file or external link.

NOTE: Department galleries will dynamically add their specific color and styles based on the selected department category. There is also the option to display two or four slides per slide. The four per slide option is shown below.

The image dimensions for this design are:

  • Min-width: 368 pixels

Available in: Gateway, Universal, Department and News Article pages.


Rendered HTML


HTML Source

Click the copy icon button to copy the HTML example code.


<div class="columnWrap">
  <section aria-label="Gallery Slideshow" class="columns gallery">
    <div class="wrapper">
        <div class="galleryWrapper">
          <div class="sliderGallery gallery four" id="sliderGallery">
            <div class="galleryLink" style="background-image: url('/_images/placeholder/placeholder368px.png'); background-position: 100% 0; background-size: cover;">
              <img src="/_global/images/gallery-clear.png" alt="gallery image 1"/>
              <div class="yellowStripesSquare"></div>
              <div class="gallerySummary fillArea">
                <div class="caption">
                  <p class="title">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non provident.</p>
                  <a href="#" class="callout">Text Link</a>
                </div>
              </div>
            </div>
            <div class="galleryLink" style="background-image: url('/_images/placeholder/placeholder368px.png'); background-position: 100% 0; background-size: cover;">
              <img src="/_global/images/gallery-clear.png" alt="gallery image 2"/>
              <div class="yellowStripesSquare"></div>
              <div class="gallerySummary fillArea">
                <div class="caption">
                  <p class="title">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non provident.</p>
                  <a href="#" class="callout">Text Link</a>
                </div>
              </div>
            </div>
            <div class="galleryLink" style="background-image: url('/_images/placeholder/placeholder368px.png'); background-position: 100% 0; background-size: cover;">
              <img src="/_global/images/gallery-clear.png" alt="gallery image 3"/>
              <div class="yellowStripesSquare"></div>
              <div class="gallerySummary fillArea">
                <div class="caption">
                  <p class="title">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non provident.</p>
                  <a href="#" class="callout">Text Link</a>
                </div>
              </div>
            </div>
            <div class="galleryLink" style="background-image: url('/_images/placeholder/placeholder368px.png'); background-position: 100% 0; background-size: cover;">
              <img src="/_global/images/gallery-clear.png" alt="gallery image 4"/>
              <div class="yellowStripesSquare"></div>
              <div class="gallerySummary fillArea">
                <div class="caption">
                  <p class="title">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non provident.</p>
                  <a href="https://www.youtube.com/watch?v=YpfDISd1KJs?autoplay=1&rel=0;" class="popupYoutube callout">View Video</a>
               </div>
              </div>
            </div>
            <div class="galleryLink" style="background-image: url('/_images/placeholder/placeholder368px.png'); background-position: 100% 0; background-size: cover;">
              <img src="/_global/images/gallery-clear.png" alt="gallery image 5"/>
              <div class="yellowStripesSquare"></div>
              <div class="gallerySummary fillArea">
                <div class="caption">
                  <p class="title">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non provident.</p>
                  <a href="#" class="callout">Text Link</a>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>
  </section>
</div>