Gallery

Galleries

Two differently sized images positioned side-by-side and used to create visual interest provide a moment of “pause” within a longer webpage. A full-width orange bar spans the page beneath the lower half of this pattern.

How to use
Specifications

Use Cases:

A good way to break up text-heavy pages and create moments of delight and visual interest.
An option for adding orange to the page.
A fun way to close out a text-heavy page

Avoid:

Using low-quality images, vertically oriented images, or stretched images.
Stacking (repeating one after the other)
Overlaying text on gallery images

Accessiblity:

Include descriptive alt text for images.

Dependencies:

Images

Compatibility:

This component is supported by Safari 14.1, Chrome 84, Edge 84, Firefox 63, and later versions of these browsers.

Image Dimensions:

Recommended image dimensions: 745w x 530h (aspect ratio 4:3); 1110w x 740h (aspect ratio 3:2)

Component Viewer

Preview various component colors, widths, and alignments.

Copy Block

<!-- wp:group {"metadata":{"name":"Large, small + orange","categories":["galleries"],"patternName":"utkwds/large-small-orange"},"align":"full","className":"utkwds-gallery","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull utkwds-gallery"><!-- wp:cover {"dimRatio":0,"isDark":false,"align":"full","className":"twoUp-gallery-lgsm"} -->
<div class="wp-block-cover alignfull is-light twoUp-gallery-lgsm"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"className":"twoUp-gallery ","layout":{"inherit":false}} -->
<div class="wp-block-group twoUp-gallery"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"bottom","width":"60%"} -->
<div class="wp-block-column is-vertically-aligned-bottom" style="flex-basis:60%"><!-- wp:image {"id":16833,"sizeSlug":"large","linkDestination":"none","align":"right","className":"twoUp-gallery-img-lg clipCorner-tl"} -->
<figure class="wp-block-image alignright size-large twoUp-gallery-img-lg clipCorner-tl"><img src="https://images.utk.edu/wds/gallery-2up-placeholder-large.png" alt="Large Image Placeholder 1108 x 736" class="wp-image-16833"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"bottom","width":"40%"} -->
<div class="wp-block-column is-vertically-aligned-bottom" style="flex-basis:40%"><!-- wp:image {"id":16834,"sizeSlug":"full","linkDestination":"none","align":"left","className":"twoUp-gallery-img-sm"} -->
<figure class="wp-block-image alignleft size-full twoUp-gallery-img-sm"><img src="https://images.utk.edu/wds/gallery-2up-placeholder-small.png" alt="Small Image Placeholder 745 x 527" class="wp-image-16834"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:group -->

<!-- wp:group {"metadata":{"name":"Large, small + orange texture","categories":["galleries"],"patternName":"utkwds/large-small-orange-texture"},"align":"full","className":"utkwds-gallery is-style-orange-texture","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull utkwds-gallery is-style-orange-texture"><!-- wp:cover {"dimRatio":0,"isDark":false,"align":"full","className":"twoUp-gallery-lgsm"} -->
<div class="wp-block-cover alignfull is-light twoUp-gallery-lgsm"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"className":"twoUp-gallery ","layout":{"inherit":false}} -->
<div class="wp-block-group twoUp-gallery"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"bottom","width":"60%"} -->
<div class="wp-block-column is-vertically-aligned-bottom" style="flex-basis:60%"><!-- wp:image {"id":16833,"sizeSlug":"large","linkDestination":"none","align":"right","className":"twoUp-gallery-img-lg clipCorner-tl"} -->
<figure class="wp-block-image alignright size-large twoUp-gallery-img-lg clipCorner-tl"><img src="https://images.utk.edu/wds/gallery-2up-placeholder-large.png" alt="Large Image Placeholder 1108 x 736" class="wp-image-16833"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"bottom","width":"40%"} -->
<div class="wp-block-column is-vertically-aligned-bottom" style="flex-basis:40%"><!-- wp:image {"id":16834,"sizeSlug":"full","linkDestination":"none","align":"left","className":"twoUp-gallery-img-sm"} -->
<figure class="wp-block-image alignleft size-full twoUp-gallery-img-sm"><img src="https://images.utk.edu/wds/gallery-2up-placeholder-small.png" alt="Small Image Placeholder 745 x 527" class="wp-image-16834"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:group -->

<!-- wp:group {"metadata":{"name":"Small, large + orange","categories":["galleries"],"patternName":"utkwds/small-large-orange"},"align":"full","className":"utkwds-gallery","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull utkwds-gallery"><!-- wp:cover {"dimRatio":0,"isDark":false,"align":"full","className":"twoUp-gallery-lgsm"} -->
<div class="wp-block-cover alignfull is-light twoUp-gallery-lgsm"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"className":"twoUp-gallery ","layout":{"inherit":false}} -->
<div class="wp-block-group twoUp-gallery"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"bottom","width":"40%"} -->
<div class="wp-block-column is-vertically-aligned-bottom" style="flex-basis:40%"><!-- wp:image {"id":16834,"sizeSlug":"full","linkDestination":"none","align":"left","className":"twoUp-gallery-img-sm"} -->
<figure class="wp-block-image alignleft size-full twoUp-gallery-img-sm"><img src="https://images.utk.edu/wds/gallery-2up-placeholder-small.png" alt="Small Image Placeholder 745 x 527" class="wp-image-16834"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"bottom","width":"60%"} -->
<div class="wp-block-column is-vertically-aligned-bottom" style="flex-basis:60%"><!-- wp:image {"id":16833,"sizeSlug":"large","linkDestination":"none","align":"right","className":"twoUp-gallery-img-lg clipCorner-tl"} -->
<figure class="wp-block-image alignright size-large twoUp-gallery-img-lg clipCorner-tl"><img src="https://images.utk.edu/wds/gallery-2up-placeholder-large.png" alt="Large Image Placeholder 1108 x 736" class="wp-image-16833"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:group -->

<!-- wp:group {"metadata":{"name":"Small, large + orange texture","categories":["galleries"],"patternName":"utkwds/small-large-orange-texture"},"align":"full","className":"utkwds-gallery is-style-orange-texture","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull utkwds-gallery is-style-orange-texture"><!-- wp:cover {"dimRatio":0,"isDark":false,"align":"full","className":"twoUp-gallery-lgsm"} -->
<div class="wp-block-cover alignfull is-light twoUp-gallery-lgsm"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"className":"twoUp-gallery ","layout":{"inherit":false}} -->
<div class="wp-block-group twoUp-gallery"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"bottom","width":"40%"} -->
<div class="wp-block-column is-vertically-aligned-bottom" style="flex-basis:40%"><!-- wp:image {"id":16834,"sizeSlug":"full","linkDestination":"none","align":"left","className":"twoUp-gallery-img-sm"} -->
<figure class="wp-block-image alignleft size-full twoUp-gallery-img-sm"><img src="https://images.utk.edu/wds/gallery-2up-placeholder-small.png" alt="Small Image Placeholder 745 x 527" class="wp-image-16834"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"bottom","width":"60%"} -->
<div class="wp-block-column is-vertically-aligned-bottom" style="flex-basis:60%"><!-- wp:image {"id":16833,"sizeSlug":"large","linkDestination":"none","align":"right","className":"twoUp-gallery-img-lg clipCorner-tl"} -->
<figure class="wp-block-image alignright size-large twoUp-gallery-img-lg clipCorner-tl"><img src="https://images.utk.edu/wds/gallery-2up-placeholder-large.png" alt="Large Image Placeholder 1108 x 736" class="wp-image-16833"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:group -->