diff --git a/package.json b/package.json
index 81732f67..f0bab7c4 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "il-toolkit",
-  "version": "2.15.1",
+  "version": "2.16.0",
   "description": "Web toolkit",
   "repository": "https://github.com/web-illinois/toolkit",
   "author": "Web Implementation Guidelines Group",
diff --git a/src/css/components/_gallery-item.scss b/src/css/components/_gallery-item.scss
new file mode 100644
index 00000000..f87006bb
--- /dev/null
+++ b/src/css/components/_gallery-item.scss
@@ -0,0 +1,10 @@
+:root {
+    --il-gallery-item-height: 60vh;
+  }
+
+  il-gallery-item, .il-formatted il-gallery {
+    img {
+       max-height: var(--il-gallery-item-height);
+       object-fit: contain;
+    }
+}
\ No newline at end of file
diff --git a/src/css/components/_gallery.scss b/src/css/components/_gallery.scss
new file mode 100644
index 00000000..190c3501
--- /dev/null
+++ b/src/css/components/_gallery.scss
@@ -0,0 +1,38 @@
+:root {
+    --il-gallery-width: 350px;
+    --il-gallery-height: 350px;
+    --il-gallery-background: var(--il-gray-1);
+    --il-gallery-background-focus: var(--il-blue);
+    --il-gallery-text-focus: white;
+  }
+
+  il-gallery.il-size-large, .il-size-large il-gallery  {
+    --il-gallery-width: 525px;
+    --il-gallery-height: 350px;
+  }
+
+  il-gallery.il-size-small, .il-size-small il-gallery  {
+    --il-gallery-width: 350px;
+    --il-gallery-height: 233px;
+  }
+
+  il-gallery.il-size-xsmall, .il-size-xsmall il-gallery {
+    --il-gallery-width: 250px;
+    --il-gallery-height: 300px;
+  }
+
+  il-gallery, .il-formatted il-gallery {
+    img {
+       max-width: var(--il-gallery-width);
+       max-height: var(--il-gallery-height);
+    }
+    p { 
+        margin: 0; 
+        padding: 0;
+    }
+
+    p[slot=title] {
+      font-weight: 700;
+      font-size: 1.25rem;
+    }
+}
\ No newline at end of file
diff --git a/src/css/components/_image-feature-with-overlay.scss b/src/css/components/_image-feature-with-overlay.scss
index cb1f10dc..c4d1da8a 100644
--- a/src/css/components/_image-feature-with-overlay.scss
+++ b/src/css/components/_image-feature-with-overlay.scss
@@ -24,6 +24,10 @@ il-image-feature, .il-formatted il-image-feature
   }
 }
 
+il-image-feature.il-overlay, .il-overlay il-image-feature {
+  background: none;
+}
+
 il-image-feature.il-overlay img, .il-overlay il-image-feature img {
   position: absolute;
   width: 100%;
diff --git a/src/css/components/_image-feature.scss b/src/css/components/_image-feature.scss
index 568d83c3..1b4f89d4 100644
--- a/src/css/components/_image-feature.scss
+++ b/src/css/components/_image-feature.scss
@@ -12,6 +12,7 @@
   --il-image-feature-heading-color: white;
   --il-image-feature-link-color: white;
   --il-image-feature-link-hover-color: var(--il-orange);
+  --il-image-feature-max-width: auto;
 }
 
 %image-feature-theme-blue-gradient {
@@ -88,6 +89,7 @@
 
 .il-formatted il-image-feature, il-image-feature, .il-formatted il-video-feature, il-video-feature {
   display: var(--il-image-feature-display);
+  background: var(--il-image-feature-background);
   margin-bottom: 20px;
 
   h2, h3, h4, h5, p {
@@ -192,6 +194,8 @@ il-image-feature, il-video-feature {
 }
 
 il-image-feature {
+  --il-image-feature-content-padding: 1.875rem 1.25rem;
+
   img {
     object-fit: cover;
     position: absolute;
@@ -200,3 +204,36 @@ il-image-feature {
   }
 }
 
+@media (min-width: 767px) {
+  il-image-feature {
+    --il-image-feature-content-padding: 1.875rem;
+  }
+}
+@media (min-width: 993px) {
+  il-image-feature {
+    --il-image-feature-content-padding: 3rem 2.2vw;
+  }
+}
+@media (min-width: 1450px) {
+  il-image-feature {
+    --il-image-feature-content-padding: 3rem 6rem;
+  }
+}
+
+il-image-feature.il-picture-no-fill, .il-formatted .il-picture-no-fill il-image-feature {
+  --il-image-feature-flex-grow-image: 0;
+  --il-image-feature-flex-direction: row;
+  --il-image-feature-content-padding: 1.875rem;
+  background: var(--il-image-feature-background);
+
+  img {
+    object-fit: initial;
+    position: initial;
+    width: initial;
+    height: initial;
+  }
+}
+
+il-image-feature.il-fixed-width, .il-formatted .il-fixed-width il-image-feature {
+  --il-image-feature-max-width: var(--il-content-max-width);
+}
\ No newline at end of file
diff --git a/src/css/components/_index.scss b/src/css/components/_index.scss
index 44b87d84..f5ac8c87 100644
--- a/src/css/components/_index.scss
+++ b/src/css/components/_index.scss
@@ -6,6 +6,8 @@
 @import 'clickable-card';
 @import 'directory';
 @import 'footer';
+@import 'gallery-item';
+@import 'gallery';
 @import 'header';
 @import 'hero';
 @import 'image-feature';
diff --git a/src/js/components/gallery-detail/gallery-detail.component.js b/src/js/components/gallery-detail/gallery-detail.component.js
new file mode 100644
index 00000000..5e3e0b13
--- /dev/null
+++ b/src/js/components/gallery-detail/gallery-detail.component.js
@@ -0,0 +1,58 @@
+import { LitElement, html } from 'lit';
+import styles from './gallery-detail.css';
+
+class GalleryDetailComponent extends LitElement {
+
+    static get styles() {
+        return styles;
+      }
+
+    static get properties() {
+        return {
+            href: {type: String, attribute: true},
+            home: {type: String, attribute: true},
+            previous: {type: String, attribute: true},
+            next: {type: String, attribute: true}
+        };
+      }
+
+    constructor() {
+        super();
+        this.home = '';
+        this.previous = '';
+        this.next = '';
+    }
+
+    renderHome() { 
+        return this.home == '' ? html`` : html`<a href="${this.home}" class="gallery-detail-back">${this.renderChevron()} Back to Gallery</a>`;
+    }
+
+    renderNavigation() { 
+        return this.previous == '' && this.next == '' ? html`` : 
+        this.next == '' ? html`<nav class="gallery-detail-navigation" aria-label="Gallery Navigation">
+            <a href="${this.previous}" class="gallery-detail-previous" aria-label="Previous Item">${this.renderChevron()}</a></nav>` :
+        this.previous == '' ? html`<nav class="gallery-detail-navigation" aria-label="Gallery Navigation">
+            <a href="${this.next}" class="gallery-detail-next" aria-label="Next Item">${this.renderChevron()}</a></nav>` :
+        html`<nav class="gallery-detail-navigation" aria-label="Gallery Navigation">
+            <a href="${this.previous}" class="gallery-detail-previous" aria-label="Previous Item">${this.renderChevron()}</a>
+            <a href="${this.next}" class="gallery-detail-next" aria-label="Next Item">${this.renderChevron()}</a></nav>`;
+    }
+
+    renderChevron() {
+        return html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+        <path
+          d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z" />
+        </svg>`;
+      }
+
+    render() {
+        return html`<div class="gallery-detail">
+        ${this.renderHome()}
+        <div class="gallery-detail-text"><slot name="caption"></slot></div>
+        <div class="gallery-detail-image"><slot></slot></div>
+        ${this.renderNavigation()}
+        </div>`;
+    }
+}
+
+customElements.define('il-gallery-detail', GalleryDetailComponent);
\ No newline at end of file
diff --git a/src/js/components/gallery-detail/gallery-detail.css.js b/src/js/components/gallery-detail/gallery-detail.css.js
new file mode 100644
index 00000000..59ea3dc0
--- /dev/null
+++ b/src/js/components/gallery-detail/gallery-detail.css.js
@@ -0,0 +1,57 @@
+import { css } from 'lit';
+
+export default css`
+    div.gallery-detail {
+        display: grid;
+        grid-template-columns: 160px auto 160px;
+        grid-template-rows: auto 1fr 150px;
+    }
+    div.gallery-detail .gallery-detail-image {
+        grid-column: 1 / span 3;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    div.gallery-detail .gallery-detail-navigation {
+        grid-column: 1 / span 3;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: var(--il-blue);
+        color: white;
+        margin-top: 20px;
+        border-top: solid 4px var(--il-orange);
+        fill: white;
+    }
+    div.gallery-detail .gallery-detail-text {
+        display: flex;
+        justify-content: center;
+        align-items: end;
+        padding-bottom: 5px;
+        grid-column: 2;
+    }
+    div.gallery-detail .gallery-detail-back {
+        align-items: center;
+    }
+    div.gallery-detail .gallery-detail-back svg {
+        width: 15px;
+        height: 15px;
+        transform: rotate(90deg);
+        padding-top: 6px;
+        padding-left: 10px;
+    }
+    div.gallery-detail .gallery-detail-navigation a {
+        height: 50px;
+        width: 50px;
+        padding: 0 20px;
+    }
+    div.gallery-detail .gallery-detail-navigation a:first-child {
+        transform: rotate(90deg);
+    }
+    div.gallery-detail .gallery-detail-navigation a:last-child {
+        transform: rotate(-90deg);
+    }
+    div.gallery-detail .gallery-detail-navigation a:focus, div.gallery-detail .gallery-detail-navigation a:hover {
+        fill: var(--il-orange);
+    }
+`;
\ No newline at end of file
diff --git a/src/js/components/gallery-item/gallery-item.component.js b/src/js/components/gallery-item/gallery-item.component.js
new file mode 100644
index 00000000..e18bae62
--- /dev/null
+++ b/src/js/components/gallery-item/gallery-item.component.js
@@ -0,0 +1,39 @@
+import { LitElement, html } from 'lit';
+import styles from './gallery-item.css';
+import Debugger from '../../debug';
+
+class GalleryItemComponent extends LitElement {
+
+    static get styles() {
+        return styles;
+      }
+
+    static get properties() {
+        return {
+            href: {type: String, attribute: true},
+        };
+      }
+
+    constructor() {
+        super();
+        this.href = '';
+    }
+
+    render() {
+        return html`
+        <li class="gallery-item">
+        <a href="${this.href}">
+            <div class="gallery-image-frame">
+            <slot></slot>
+            </div>
+            <div class="gallery-image-title">
+            <slot name="title"></slot>
+            </div>
+            <div class="gallery-image-description">
+            <slot name="caption"></slot>
+            </div>
+        </li>`;
+    }
+}
+
+customElements.define('il-gallery-item', GalleryItemComponent);
\ No newline at end of file
diff --git a/src/js/components/gallery-item/gallery-item.css.js b/src/js/components/gallery-item/gallery-item.css.js
new file mode 100644
index 00000000..87ce8e65
--- /dev/null
+++ b/src/js/components/gallery-item/gallery-item.css.js
@@ -0,0 +1,35 @@
+import { css } from 'lit';
+
+export default css`
+    li.gallery-item .gallery-image-frame {
+        height: var(--il-gallery-height);
+        display: flex;
+        align-items: center;
+        align-content: center;
+        justify-content: center;
+        background: var(--il-gallery-background);
+    }
+    li.gallery-item .gallery-image-title {
+        padding-top: .5rem;
+        padding-left: .5rem;
+    }
+    li.gallery-item .gallery-image-description {
+        padding-left: .5rem;
+        padding-bottom: .5rem;
+    }
+    li.gallery-item a {
+        color: var(--il-text-color);
+        text-decoration: none;
+    }
+    li.gallery-item a:hover, li.gallery-item a:focus {
+        color: var(--il-gallery-text-focus);
+        outline: none;
+    }
+    li.gallery-item a:hover .gallery-image-title, li.gallery-item a:focus .gallery-image-title, 
+    li.gallery-item a:hover .gallery-image-description, li.gallery-item a:focus .gallery-image-description {
+        background: var(--il-gallery-background-focus);
+    }
+    li.gallery-item a:hover .gallery-image-frame, li.gallery-item a:focus .gallery-image-frame {
+        background: var(--il-gallery-background-focus);
+    }
+`;
\ No newline at end of file
diff --git a/src/js/components/gallery/gallery.component.js b/src/js/components/gallery/gallery.component.js
new file mode 100644
index 00000000..49ee7f8a
--- /dev/null
+++ b/src/js/components/gallery/gallery.component.js
@@ -0,0 +1,20 @@
+import { LitElement, html } from 'lit';
+import styles from './gallery.css';
+import Debugger from '../../debug';
+
+class GalleryComponent extends LitElement {
+
+    static get styles() {
+        return styles;
+      }
+
+    render() {
+        return html`
+        <ul class="gallery">
+            <slot></slot>
+        </ul>`;
+
+    }
+}
+
+customElements.define('il-gallery', GalleryComponent);
\ No newline at end of file
diff --git a/src/js/components/gallery/gallery.css.js b/src/js/components/gallery/gallery.css.js
new file mode 100644
index 00000000..d3cfc208
--- /dev/null
+++ b/src/js/components/gallery/gallery.css.js
@@ -0,0 +1,14 @@
+import { css } from 'lit';
+
+export default css`
+ul.gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fill,var(--il-gallery-width));
+    grid-column-gap: 60px;
+    grid-row-gap: 40px;
+    justify-content: center;
+    list-style: none;
+    padding: 0px;
+    margin: 0;
+}
+`;
\ No newline at end of file
diff --git a/src/js/components/image-feature/image-feature.css.js b/src/js/components/image-feature/image-feature.css.js
index 3f1f1f36..61203a0c 100644
--- a/src/js/components/image-feature/image-feature.css.js
+++ b/src/js/components/image-feature/image-feature.css.js
@@ -4,6 +4,8 @@ import { css } from 'lit';
 export default css`
     .imagefeature {
         display: block;
+        margin: 0 auto;
+        max-width: var(--il-image-feature-max-width);
     }
     .imagefeature.right {
         --il-image-feature-flex-direction: row-reverse;
@@ -41,7 +43,7 @@ export default css`
         height: 100%;
     }
     .imagefeature .content .content-inner {
-        padding: 1.875rem 1.25rem;
+        padding: var(--il-image-feature-content-padding);
     }
     .il-image-feature-with-overlay {
         position: relative;
@@ -91,22 +93,10 @@ export default css`
             display: flex;
             flex-direction: var(--il-image-feature-flex-direction);
             min-height: var(--il-image-feature-min-height);
+            background: var(--il-image-feature-background);
         }
         .imagefeature .background {
             min-height: initial;
         }
-        .imagefeature .content .content-inner {
-            padding: 1.875rem;
-        }
-    }
-    @media (min-width: 993px) {
-        .imagefeature .content .content-inner {
-            padding: 3rem 2.2vw;
-        }
-    }
-    @media (min-width: 1450px) {
-        .imagefeature .content .content-inner {
-            padding: 3rem 6rem;
-        }
     }
 `;
diff --git a/src/js/index.js b/src/js/index.js
index 1f454174..9a9a3027 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -12,6 +12,9 @@ import './components/clickable-card/clickable-card.component';
 import './components/directory/card.component';
 import './components/directory/profile.component';
 import './components/footer/footer.component';
+import './components/gallery/gallery.component';
+import './components/gallery-detail/gallery-detail.component';
+import './components/gallery-item/gallery-item.component';
 import './components/header/header.component';
 import './components/hero/hero.component';
 import './components/image-feature/image-feature.component';
diff --git a/tests/_assets/images/gallery/1-400x400.jpg b/tests/_assets/images/gallery/1-400x400.jpg
new file mode 100644
index 00000000..44fb8efa
Binary files /dev/null and b/tests/_assets/images/gallery/1-400x400.jpg differ
diff --git a/tests/_assets/images/gallery/1-600x600.jpg b/tests/_assets/images/gallery/1-600x600.jpg
new file mode 100644
index 00000000..50d64d72
Binary files /dev/null and b/tests/_assets/images/gallery/1-600x600.jpg differ
diff --git a/tests/_assets/images/gallery/1-600x800.jpg b/tests/_assets/images/gallery/1-600x800.jpg
new file mode 100644
index 00000000..5e84d9df
Binary files /dev/null and b/tests/_assets/images/gallery/1-600x800.jpg differ
diff --git a/tests/_assets/images/gallery/1-800x600.jpg b/tests/_assets/images/gallery/1-800x600.jpg
new file mode 100644
index 00000000..6c4ec3e1
Binary files /dev/null and b/tests/_assets/images/gallery/1-800x600.jpg differ
diff --git a/tests/_assets/images/gallery/1-800x800.jpg b/tests/_assets/images/gallery/1-800x800.jpg
new file mode 100644
index 00000000..c2c5173b
Binary files /dev/null and b/tests/_assets/images/gallery/1-800x800.jpg differ
diff --git a/tests/_assets/images/gallery/2-600x600.jpg b/tests/_assets/images/gallery/2-600x600.jpg
new file mode 100644
index 00000000..e32ea733
Binary files /dev/null and b/tests/_assets/images/gallery/2-600x600.jpg differ
diff --git a/tests/_assets/images/gallery/2-600x800.jpg b/tests/_assets/images/gallery/2-600x800.jpg
new file mode 100644
index 00000000..4d201ad1
Binary files /dev/null and b/tests/_assets/images/gallery/2-600x800.jpg differ
diff --git a/tests/_assets/images/gallery/2-800x600.jpg b/tests/_assets/images/gallery/2-800x600.jpg
new file mode 100644
index 00000000..49f036c7
Binary files /dev/null and b/tests/_assets/images/gallery/2-800x600.jpg differ
diff --git a/tests/_assets/images/gallery/3-800x600.jpg b/tests/_assets/images/gallery/3-800x600.jpg
new file mode 100644
index 00000000..88bca64c
Binary files /dev/null and b/tests/_assets/images/gallery/3-800x600.jpg differ
diff --git a/tests/_assets/images/portrait.jpg b/tests/_assets/images/portrait.jpg
new file mode 100644
index 00000000..a08e4fde
Binary files /dev/null and b/tests/_assets/images/portrait.jpg differ
diff --git a/tests/components/gallery/default-large.njk b/tests/components/gallery/default-large.njk
new file mode 100644
index 00000000..5fb4c1bd
--- /dev/null
+++ b/tests/components/gallery/default-large.njk
@@ -0,0 +1,54 @@
+---
+title: Gallery (large view)
+group: "Components: Gallery and Gallery Detail"
+layout: layouts/page.njk
+---
+<div class="il-formatted">
+    <il-gallery class="il-size-large">
+        <il-gallery-item href="#">
+            <img alt="" src="{{ "/_assets/images/gallery/1-600x600.jpg"|url }}" />
+            <p slot="title">Title</p>
+            <p slot="caption">Subtitle</p>
+        </il-gallery-item>
+        <il-gallery-item href="#">
+            <img alt="" src="{{ "/_assets/images/gallery/1-600x800.jpg"|url }}">
+            <p slot="title">Title</p>
+            <p slot="caption">Subtitle</p>
+        </il-gallery-item>
+        <il-gallery-item href="#">
+            <img alt="" src="{{ "/_assets/images/gallery/1-800x600.jpg"|url }}">
+            <p slot="title">Title</p>
+            <p slot="caption">Subtitle</p>
+        </il-gallery-item>
+        <il-gallery-item href="#">
+            <img alt="" src="{{ "/_assets/images/gallery/1-800x800.jpg"|url }}">
+            <p slot="title">Title</p>
+            <p slot="caption">Subtitle</p>
+        </il-gallery-item>
+        <il-gallery-item href="#">
+            <img alt="" src="{{ "/_assets/images/gallery/1-400x400.jpg"|url }}">
+            <p slot="title">Title</p>
+            <p slot="caption">Subtitle</p>
+        </il-gallery-item>
+        <il-gallery-item href="#">
+            <img alt="" src="{{ "/_assets/images/gallery/2-600x800.jpg"|url }}">
+            <p slot="title">Title</p>
+            <p slot="caption">Subtitle</p>
+        </il-gallery-item>
+        <il-gallery-item href="#">
+            <img alt="" src="{{ "/_assets/images/gallery/2-800x600.jpg"|url }}">
+            <p slot="title">Title</p>
+            <p slot="caption">Subtitle</p>
+        </il-gallery-item>
+        <il-gallery-item href="#">
+            <img alt="" src="{{ "/_assets/images/gallery/2-600x600.jpg"|url }}">
+            <p slot="title">Title</p>
+            <p slot="caption">Subtitle</p>
+        </il-gallery-item>
+        <il-gallery-item href="#">
+            <img alt="" src="{{ "/_assets/images/gallery/3-800x600.jpg"|url }}">
+            <p slot="title">Title</p>
+            <p slot="caption">Subtitle</p>
+        </il-gallery-item>
+    </il-gallery>
+</div>
diff --git a/tests/components/gallery/default-large.vis.js b/tests/components/gallery/default-large.vis.js
new file mode 100644
index 00000000..72023716
--- /dev/null
+++ b/tests/components/gallery/default-large.vis.js
@@ -0,0 +1,12 @@
+const util = require('../../tests.util');
+
+const url = util.testUrl(__filename);
+
+module.exports = (viewports) => {
+  return [
+    {
+      url, label: "gallery-default-large",
+      viewports: [viewports.desktop, viewports.iphone, viewports.hdtv]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/tests/components/gallery/default-small.njk b/tests/components/gallery/default-small.njk
new file mode 100644
index 00000000..a4221c4c
--- /dev/null
+++ b/tests/components/gallery/default-small.njk
@@ -0,0 +1,54 @@
+---
+title: Gallery (small view)
+group: "Components: Gallery and Gallery Detail"
+layout: layouts/page.njk
+---
+<div class="il-formatted">
+    <il-gallery class="il-size-small">
+        <il-gallery-item href="#">
+            <img alt="" src="{{ "/_assets/images/gallery/1-600x600.jpg"|url }}" />
+            <p slot="title">Title</p>
+            <p slot="caption">Subtitle</p>
+        </il-gallery-item>
+        <il-gallery-item href="#">
+            <img alt="" src="{{ "/_assets/images/gallery/1-600x800.jpg"|url }}">
+            <p slot="title">Title</p>
+            <p slot="caption">Subtitle</p>
+        </il-gallery-item>
+        <il-gallery-item href="#">
+            <img alt="" src="{{ "/_assets/images/gallery/1-800x600.jpg"|url }}">
+            <p slot="title">Title</p>
+            <p slot="caption">Subtitle</p>
+        </il-gallery-item>
+        <il-gallery-item href="#">
+            <img alt="" src="{{ "/_assets/images/gallery/1-800x800.jpg"|url }}">
+            <p slot="title">Title</p>
+            <p slot="caption">Subtitle</p>
+        </il-gallery-item>
+        <il-gallery-item href="#">
+            <img alt="" src="{{ "/_assets/images/gallery/1-400x400.jpg"|url }}">
+            <p slot="title">Title</p>
+            <p slot="caption">Subtitle</p>
+        </il-gallery-item>
+        <il-gallery-item href="#">
+            <img alt="" src="{{ "/_assets/images/gallery/2-600x800.jpg"|url }}">
+            <p slot="title">Title</p>
+            <p slot="caption">Subtitle</p>
+        </il-gallery-item>
+        <il-gallery-item href="#">
+            <img alt="" src="{{ "/_assets/images/gallery/2-800x600.jpg"|url }}">
+            <p slot="title">Title</p>
+            <p slot="caption">Subtitle</p>
+        </il-gallery-item>
+        <il-gallery-item href="#">
+            <img alt="" src="{{ "/_assets/images/gallery/2-600x600.jpg"|url }}">
+            <p slot="title">Title</p>
+            <p slot="caption">Subtitle</p>
+        </il-gallery-item>
+        <il-gallery-item href="#">
+            <img alt="" src="{{ "/_assets/images/gallery/3-800x600.jpg"|url }}">
+            <p slot="title">Title</p>
+            <p slot="caption">Subtitle</p>
+        </il-gallery-item>
+    </il-gallery>
+</div>
diff --git a/tests/components/gallery/default-small.vis.js b/tests/components/gallery/default-small.vis.js
new file mode 100644
index 00000000..be089e6a
--- /dev/null
+++ b/tests/components/gallery/default-small.vis.js
@@ -0,0 +1,12 @@
+const util = require('../../tests.util');
+
+const url = util.testUrl(__filename);
+
+module.exports = (viewports) => {
+  return [
+    {
+      url, label: "gallery-default-small",
+      viewports: [viewports.desktop, viewports.iphone, viewports.hdtv]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/tests/components/gallery/default-xsmall.njk b/tests/components/gallery/default-xsmall.njk
new file mode 100644
index 00000000..747f10ba
--- /dev/null
+++ b/tests/components/gallery/default-xsmall.njk
@@ -0,0 +1,54 @@
+---
+title: Gallery (xsmall view)
+group: "Components: Gallery and Gallery Detail"
+layout: layouts/page.njk
+---
+<div class="il-formatted">
+    <il-gallery class="il-size-xsmall">
+        <il-gallery-item href="#">
+            <img alt="" src="{{ "/_assets/images/gallery/1-600x600.jpg"|url }}" />
+            <p slot="title">Title</p>
+            <p slot="caption">Subtitle</p>
+        </il-gallery-item>
+        <il-gallery-item href="#">
+            <img alt="" src="{{ "/_assets/images/gallery/1-600x800.jpg"|url }}">
+            <p slot="title">Title</p>
+            <p slot="caption">Subtitle</p>
+        </il-gallery-item>
+        <il-gallery-item href="#">
+            <img alt="" src="{{ "/_assets/images/gallery/1-800x600.jpg"|url }}">
+            <p slot="title">Title</p>
+            <p slot="caption">Subtitle</p>
+        </il-gallery-item>
+        <il-gallery-item href="#">
+            <img alt="" src="{{ "/_assets/images/gallery/1-800x800.jpg"|url }}">
+            <p slot="title">Title</p>
+            <p slot="caption">Subtitle</p>
+        </il-gallery-item>
+        <il-gallery-item href="#">
+            <img alt="" src="{{ "/_assets/images/gallery/1-400x400.jpg"|url }}">
+            <p slot="title">Title</p>
+            <p slot="caption">Subtitle</p>
+        </il-gallery-item>
+        <il-gallery-item href="#">
+            <img alt="" src="{{ "/_assets/images/gallery/2-600x800.jpg"|url }}">
+            <p slot="title">Title</p>
+            <p slot="caption">Subtitle</p>
+        </il-gallery-item>
+        <il-gallery-item href="#">
+            <img alt="" src="{{ "/_assets/images/gallery/2-800x600.jpg"|url }}">
+            <p slot="title">Title</p>
+            <p slot="caption">Subtitle</p>
+        </il-gallery-item>
+        <il-gallery-item href="#">
+            <img alt="" src="{{ "/_assets/images/gallery/2-600x600.jpg"|url }}">
+            <p slot="title">Title</p>
+            <p slot="caption">Subtitle</p>
+        </il-gallery-item>
+        <il-gallery-item href="#">
+            <img alt="" src="{{ "/_assets/images/gallery/3-800x600.jpg"|url }}">
+            <p slot="title">Title</p>
+            <p slot="caption">Subtitle</p>
+        </il-gallery-item>
+    </il-gallery>
+</div>
diff --git a/tests/components/gallery/default-xsmall.vis.js b/tests/components/gallery/default-xsmall.vis.js
new file mode 100644
index 00000000..d1ca5604
--- /dev/null
+++ b/tests/components/gallery/default-xsmall.vis.js
@@ -0,0 +1,12 @@
+const util = require('../../tests.util');
+
+const url = util.testUrl(__filename);
+
+module.exports = (viewports) => {
+  return [
+    {
+      url, label: "gallery-default-xsmall",
+      viewports: [viewports.desktop, viewports.iphone, viewports.hdtv]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/tests/components/gallery/default.njk b/tests/components/gallery/default.njk
new file mode 100644
index 00000000..e21afb05
--- /dev/null
+++ b/tests/components/gallery/default.njk
@@ -0,0 +1,54 @@
+---
+title: Gallery (full view)
+group: "Components: Gallery and Gallery Detail"
+layout: layouts/page.njk
+---
+<div class="il-formatted">
+    <il-gallery>
+        <il-gallery-item href="#">
+            <img alt="" src="{{ "/_assets/images/gallery/1-600x600.jpg"|url }}" />
+            <p slot="title">Title</p>
+            <p slot="caption">Subtitle</p>
+        </il-gallery-item>
+        <il-gallery-item href="#">
+            <img alt="" src="{{ "/_assets/images/gallery/1-600x800.jpg"|url }}">
+            <p slot="title">Title</p>
+            <p slot="caption">Subtitle</p>
+        </il-gallery-item>
+        <il-gallery-item href="#">
+            <img alt="" src="{{ "/_assets/images/gallery/1-800x600.jpg"|url }}">
+            <p slot="title">Title</p>
+            <p slot="caption">Subtitle</p>
+        </il-gallery-item>
+        <il-gallery-item href="#">
+            <img alt="" src="{{ "/_assets/images/gallery/1-800x800.jpg"|url }}">
+            <p slot="title">Title</p>
+            <p slot="caption">Subtitle</p>
+        </il-gallery-item>
+        <il-gallery-item href="#">
+            <img alt="" src="{{ "/_assets/images/gallery/1-400x400.jpg"|url }}">
+            <p slot="title">Title</p>
+            <p slot="caption">Subtitle</p>
+        </il-gallery-item>
+        <il-gallery-item href="#">
+            <img alt="" src="{{ "/_assets/images/gallery/2-600x800.jpg"|url }}">
+            <p slot="title">Title</p>
+            <p slot="caption">Subtitle</p>
+        </il-gallery-item>
+        <il-gallery-item href="#">
+            <img alt="" src="{{ "/_assets/images/gallery/2-800x600.jpg"|url }}">
+            <p slot="title">Title</p>
+            <p slot="caption">Subtitle</p>
+        </il-gallery-item>
+        <il-gallery-item href="#">
+            <img alt="" src="{{ "/_assets/images/gallery/2-600x600.jpg"|url }}">
+            <p slot="title">Title</p>
+            <p slot="caption">Subtitle</p>
+        </il-gallery-item>
+        <il-gallery-item href="#">
+            <img alt="" src="{{ "/_assets/images/gallery/3-800x600.jpg"|url }}">
+            <p slot="title">Title</p>
+            <p slot="caption">Subtitle</p>
+        </il-gallery-item>
+    </il-gallery>
+</div>
diff --git a/tests/components/gallery/default.vis.js b/tests/components/gallery/default.vis.js
new file mode 100644
index 00000000..1694dfe3
--- /dev/null
+++ b/tests/components/gallery/default.vis.js
@@ -0,0 +1,12 @@
+const util = require('../../tests.util');
+
+const url = util.testUrl(__filename);
+
+module.exports = (viewports) => {
+  return [
+    {
+      url, label: "gallery-default",
+      viewports: [viewports.desktop, viewports.iphone, viewports.hdtv]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/tests/components/gallery/detail-simple.njk b/tests/components/gallery/detail-simple.njk
new file mode 100644
index 00000000..e38ee52f
--- /dev/null
+++ b/tests/components/gallery/detail-simple.njk
@@ -0,0 +1,11 @@
+---
+title: Gallery (simple detail view)
+group: "Components: Gallery and Gallery Detail"
+layout: layouts/page.njk
+---
+<div class="il-formatted">
+    <il-gallery-detail>
+        <img alt="" src="{{ "/_assets/images/gallery/2-600x800.jpg"|url }}">
+        <p slot="caption">Information about the item</p>
+    </il-gallery-detail>
+</div>
diff --git a/tests/components/gallery/detail-simple.vis.js b/tests/components/gallery/detail-simple.vis.js
new file mode 100644
index 00000000..b8e6aa94
--- /dev/null
+++ b/tests/components/gallery/detail-simple.vis.js
@@ -0,0 +1,12 @@
+const util = require('../../tests.util');
+
+const url = util.testUrl(__filename);
+
+module.exports = (viewports) => {
+  return [
+    {
+      url, label: "gallery-detailsimple",
+      viewports: [viewports.desktop, viewports.iphone, viewports.hdtv]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/tests/components/gallery/detail.njk b/tests/components/gallery/detail.njk
new file mode 100644
index 00000000..58f7adf4
--- /dev/null
+++ b/tests/components/gallery/detail.njk
@@ -0,0 +1,11 @@
+---
+title: Gallery (detail view)
+group: "Components: Gallery and Gallery Detail"
+layout: layouts/page.njk
+---
+<div class="il-formatted">
+    <il-gallery-detail home="#" previous="#" next="#">
+        <img alt="" src="{{ "/_assets/images/gallery/1-800x800.jpg"|url }}">
+        <p slot="caption">Information about the item</p>
+    </il-gallery-detail>
+</div>
diff --git a/tests/components/gallery/detail.vis.js b/tests/components/gallery/detail.vis.js
new file mode 100644
index 00000000..fe2a0ba7
--- /dev/null
+++ b/tests/components/gallery/detail.vis.js
@@ -0,0 +1,12 @@
+const util = require('../../tests.util');
+
+const url = util.testUrl(__filename);
+
+module.exports = (viewports) => {
+  return [
+    {
+      url, label: "gallery-detail",
+      viewports: [viewports.desktop, viewports.iphone, viewports.hdtv]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/tests/components/image-feature/fixed-margin.njk b/tests/components/image-feature/fixed-margin.njk
new file mode 100644
index 00000000..27920f29
--- /dev/null
+++ b/tests/components/image-feature/fixed-margin.njk
@@ -0,0 +1,29 @@
+---
+title: Image Feature (fixed margin)
+group: "Components: Image Feature"
+layout: layouts/page.njk
+---
+<div class="il-formatted">
+
+<il-image-feature class="il-fixed-width il-theme-blue">
+<img src="{{ '/_assets/images/1.jpg' | url }}" slot="image" alt="">
+<h2>Research Experiences for Undergraduates (REU)</h2>
+<p>Research Experiences for Undergraduates (REU) are offered by Illinois, other universities, institutions, and agencies nationwide. These experiences give you the opportunity to actively participate in research and work with faculty and researchers on ongoing research projects.</p>
+<p><a class="il-button" href="#">Learn More</a></p>
+</il-image-feature>
+
+<il-image-feature class="il-picture-no-fill il-fixed-width il-theme-blue">
+<img src="{{ '/_assets/images/portrait.jpg' | url }}" slot="image" alt="">
+<h2>Research Experiences for Undergraduates (REU)</h2>
+<p>Research Experiences for Undergraduates (REU) are offered by Illinois, other universities, institutions, and agencies nationwide. These experiences give you the opportunity to actively participate in research and work with faculty and researchers on ongoing research projects.</p>
+<p><a class="il-button" href="#">Learn More</a></p>
+</il-image-feature>
+
+<il-image-feature class="il-overlay il-fixed-width il-theme-blue">
+  <img slot="image" src="{{ '/_assets/images/hero-bg.jpg' | url }}">
+<h2>Study Abroad</h2>
+<p><em>Yes,</em> you can and are encouraged to enhance your education for a few weeks, months, or longer at locations around the world. Travel, work, and service abroad will prepare you for leadership in an increasingly global workforce. And there are many opportunities designed to fit into your schedule.</p>
+<p><a class="il-button" href="/academics/study-abroad">Learn More</a></p>
+</il-image-feature>
+
+</div>
\ No newline at end of file
diff --git a/tests/components/image-feature/fixed-margin.vis.js b/tests/components/image-feature/fixed-margin.vis.js
new file mode 100644
index 00000000..6d3f5855
--- /dev/null
+++ b/tests/components/image-feature/fixed-margin.vis.js
@@ -0,0 +1,12 @@
+const util = require('../../tests.util');
+
+const url = util.testUrl(__filename);
+
+module.exports = (viewports) => {
+  return [
+    {
+      url, label: "featuresplit-fixedmargin",
+      viewports: [viewports.desktop, viewports.iphone, viewports.hdtv]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/tests/components/image-feature/listcollection.njk b/tests/components/image-feature/listcollection.njk
new file mode 100644
index 00000000..c536b548
--- /dev/null
+++ b/tests/components/image-feature/listcollection.njk
@@ -0,0 +1,34 @@
+---
+title: Image Feature (list collection view)
+group: "Components: Image Feature"
+layout: layouts/page.njk
+---
+<div class="il-formatted">
+<il-image-feature class="il-theme-white il-size-xsmall il-picture-no-fill">
+<img slot="image" src="{{ '/_assets/images/portrait.jpg' | url }}">
+<h3>Jane Doe</h3>
+<p><strong>Sterling, IL / Pre-Vet</strong></p>
+<p>My future plans include graduating from ACES with a bachelor's degree in animal sciences. Next year I plan to apply to a college of veterinary medicine. My ultimate career goal is to become a large/mixed animal veterinarian. </p>
+</il-image-feature>
+
+<il-image-feature class="il-theme-white il-size-small il-picture-no-fill">
+<img slot="image" src="{{ '/_assets/images/portrait.jpg' | url }}">
+<h3>Jane Doe</h3>
+<p><strong>Sterling, IL / Pre-Vet</strong></p>
+<p>My future plans include graduating from ACES with a bachelor's degree in animal sciences. Next year I plan to apply to a college of veterinary medicine. My ultimate career goal is to become a large/mixed animal veterinarian. </p>
+</il-image-feature>
+
+<il-image-feature class="il-theme-white il-picture-no-fill">
+<img slot="image" src="{{ '/_assets/images/portrait.jpg' | url }}">
+<h3>Jane Doe</h3>
+<p><strong>Sterling, IL / Pre-Vet</strong></p>
+<p>My future plans include graduating from ACES with a bachelor's degree in animal sciences. Next year I plan to apply to a college of veterinary medicine. My ultimate career goal is to become a large/mixed animal veterinarian. </p>
+</il-image-feature>
+
+<il-image-feature class="il-theme-white il-size-large il-picture-no-fill">
+<img slot="image" src="{{ '/_assets/images/portrait.jpg' | url }}">
+<h3>Jane Doe</h3>
+<p><strong>Sterling, IL / Pre-Vet</strong></p>
+<p>My future plans include graduating from ACES with a bachelor's degree in animal sciences. Next year I plan to apply to a college of veterinary medicine. My ultimate career goal is to become a large/mixed animal veterinarian. </p>
+</il-image-feature>
+</div>
\ No newline at end of file
diff --git a/tests/components/image-feature/listcollection.vis.js b/tests/components/image-feature/listcollection.vis.js
new file mode 100644
index 00000000..560fd72f
--- /dev/null
+++ b/tests/components/image-feature/listcollection.vis.js
@@ -0,0 +1,12 @@
+const util = require('../../tests.util');
+
+const url = util.testUrl(__filename);
+
+module.exports = (viewports) => {
+  return [
+    {
+      url, label: "featuresplit-listcollection",
+      viewports: [viewports.desktop, viewports.iphone, viewports.hdtv]
+    }
+  ]
+} 
\ No newline at end of file