diff --git a/site/layouts/partials/components/footer/footer-2-1-1.html b/site/layouts/partials/components/footer/footer-2-1-1.html
new file mode 100644
index 0000000..d4113c5
--- /dev/null
+++ b/site/layouts/partials/components/footer/footer-2-1-1.html
@@ -0,0 +1,47 @@
+  <div class="l-underlay footer-bg"></div>
+
+  <div class="l-wrapper reduce-padding">
+
+    <ul class="l-flex-list-row footer__body">
+
+      <li class="footer__body-section footer__body-section--m-left-align footer-section">
+        <h3 class="footer__heading">Let's keep in touch!</h3>
+        <p>Find us on any of these platforms. We respond in 1-2 business days.</p>
+        <ul class="l-flex-list-row footer__social-list">
+          <li><span class="social-icon"></span></li>
+          <li><span class="social-icon"></span></li>
+          <li><span class="social-icon"></span></li>
+          <li><span class="social-icon"></span></li>
+        </ul>
+      </li>
+
+      <li class="footer__body-section footer__body-section--m-left-align footer__body-section--narrow footer-section">
+        <h3 class="footer__heading--small footer__heading">Useful Links</h3>
+        <ul class="l-list-bare">
+          <li><a class="footer__link" href="#">Link One</a></li>
+          <li><a class="footer__link" href="#">Link Two</a></li>
+          <li><a class="footer__link" href="#">Link Three</a></li>
+          <li><a class="footer__link" href="#">Link Four</a></li>
+        </ul>
+      </li>
+
+      <li class="footer__body-section footer__body-section--m-left-align footer__body-section--narrow footer-section">
+        <h3 class="footer__heading--small footer__heading">Other Resources</h3>
+        <ul class="l-list-bare">
+          <li><a class="footer__link" href="#">Link One</a></li>
+          <li><a class="footer__link" href="#">Link Two</a></li>
+          <li><a class="footer__link" href="#">Link Three</a></li>
+          <li><a class="footer__link" href="#">Link Four</a></li>
+        </ul>
+      </li>
+
+    </ul>
+
+    <ul class="l-flex-list-row footer__footer">
+      <li class="footer__term"><a class="footer__link" href="{{ "terms-and-conditions" | relURL }}">Terms and Conditions</a></li>
+      <li class="footer__term"><a class="footer__link" href="{{ "privacy-policy" | relURL }}">Privacy Policy</a></li>
+    </ul>
+
+    <p class="footer__attr">Copyright &copy; <span id="js-copy-date">2019</span> &dash; <a class="footer__link" rel="nofollow" href="https://rayelliott.dev">rayelliott.dev</a></p>
+
+  </div>
diff --git a/site/layouts/partials/footer.html b/site/layouts/partials/footer.html
index 62c71f7..4f190ec 100644
--- a/site/layouts/partials/footer.html
+++ b/site/layouts/partials/footer.html
@@ -1,51 +1,3 @@
 <footer class="footer transition-fade">
-
-  <div class="l-underlay footer-bg"></div>
-
-  <div class="l-wrapper reduce-padding">
-
-    <ul class="l-flex-list-row footer__body">
-
-      <li class="footer__body-section footer__body-section--m-left-align footer-section">
-        <h3 class="footer__heading">Let's keep in touch!</h3>
-        <p>Find us on any of these platforms. We respond in 1-2 business days.</p>
-        <ul class="l-flex-list-row footer__social-list">
-          <li><span class="social-icon"></span></li>
-          <li><span class="social-icon"></span></li>
-          <li><span class="social-icon"></span></li>
-          <li><span class="social-icon"></span></li>
-        </ul>
-      </li>
-
-      <li class="footer__body-section footer__body-section--m-left-align footer__body-section--narrow footer-section">
-        <h3 class="footer__heading--small footer__heading">Useful Links</h3>
-        <ul class="l-list-bare">
-          <li><a class="footer__link" href="#">Link One</a></li>
-          <li><a class="footer__link" href="#">Link Two</a></li>
-          <li><a class="footer__link" href="#">Link Three</a></li>
-          <li><a class="footer__link" href="#">Link Four</a></li>
-        </ul>
-      </li>
-
-      <li class="footer__body-section footer__body-section--m-left-align footer__body-section--narrow footer-section">
-        <h3 class="footer__heading--small footer__heading">Other Resources</h3>
-        <ul class="l-list-bare">
-          <li><a class="footer__link" href="#">Link One</a></li>
-          <li><a class="footer__link" href="#">Link Two</a></li>
-          <li><a class="footer__link" href="#">Link Three</a></li>
-          <li><a class="footer__link" href="#">Link Four</a></li>
-        </ul>
-      </li>
-
-    </ul>
-
-    <ul class="l-flex-list-row footer__footer">
-      <li class="footer__term"><a class="footer__link" href="{{ "terms-and-conditions" | relURL }}">Terms and Conditions</a></li>
-      <li class="footer__term"><a class="footer__link" href="{{ "privacy-policy" | relURL }}">Privacy Policy</a></li>
-    </ul>
-
-    <p class="footer__attr">Copyright &copy; <span id="js-copy-date">2019</span> &dash; <a class="footer__link" rel="nofollow" href="https://rayelliott.dev">rayelliott.dev</a></p>
-
-  </div>
-
+	{{ partial "components/footer/footer-2-1-1.html" . }}
 </footer>
diff --git a/src/css/imports/components/footer/footer-2-1-1.scss b/src/css/imports/components/footer/footer-2-1-1.scss
new file mode 100644
index 0000000..8f98b6c
--- /dev/null
+++ b/src/css/imports/components/footer/footer-2-1-1.scss
@@ -0,0 +1,111 @@
+$footer-bp-s: 28em;
+$footer-bp-m: 60em;
+
+.footer {
+  position: relative;
+  font-size: 0.9rem;
+}
+
+.footer-bg {
+  background-color: rgba(indigo, 0.5);
+}
+
+.footer-section {
+  background-color: rgba(indigo, 0.5);
+}
+
+.footer__term {
+  margin: 0 0.5em;
+}
+
+.footer__attr {
+  text-align: center;
+  margin-bottom: 0;
+  font-size: 0.8em;
+}
+
+.footer__body {
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  text-align: center;
+}
+
+.footer__body-section {
+  flex: 0 0 100%;
+  margin-bottom: 1.6rem;
+
+  @media (min-width: $footer-bp-s) {
+    &--narrow {
+      flex: 0 0 50%;
+    }
+  }
+
+  @media (min-width: $footer-bp-m) {
+    flex: 0 0 60%;
+    margin-bottom: 0;
+    padding: 0 0.8rem;
+
+    &:first-child {
+      padding-left: 0;
+    }
+
+    &:last-child {
+      padding-right: 0;
+    }
+
+    &--narrow {
+      flex: 0 1 20%;
+    }
+
+    &--m-left-align {
+      text-align: left;
+
+      .footer__social-list {
+        justify-content: left;
+      }
+    }
+  }
+}
+//
+// reduce padding bottom
+.reduce-padding {
+  padding-bottom: 8px;
+
+  @media (min-width: $bp-m) {
+    padding-bottom: 16px;
+  }
+}
+
+.footer__footer {
+  position: relative;
+  font-size: 0.9em;
+  margin-top: 2.4rem;
+
+  &::before {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 1px;
+    left: 0;
+    top: -1.2rem;
+    background-color: currentColor;
+    opacity: 0.2;
+  }
+}
+
+.footer__heading {
+  font-size: 2.25em;
+
+  &--small {
+    @include font-body(bold);
+    font-size: 1em;
+    text-transform: uppercase;
+  }
+}
+
+.footer__social-list {
+  font-size: 3em;
+  justify-content: center;
+}
+
diff --git a/src/css/imports/footer.scss b/src/css/imports/footer.scss
index 8f98b6c..80e7243 100644
--- a/src/css/imports/footer.scss
+++ b/src/css/imports/footer.scss
@@ -1,111 +1 @@
-$footer-bp-s: 28em;
-$footer-bp-m: 60em;
-
-.footer {
-  position: relative;
-  font-size: 0.9rem;
-}
-
-.footer-bg {
-  background-color: rgba(indigo, 0.5);
-}
-
-.footer-section {
-  background-color: rgba(indigo, 0.5);
-}
-
-.footer__term {
-  margin: 0 0.5em;
-}
-
-.footer__attr {
-  text-align: center;
-  margin-bottom: 0;
-  font-size: 0.8em;
-}
-
-.footer__body {
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  text-align: center;
-}
-
-.footer__body-section {
-  flex: 0 0 100%;
-  margin-bottom: 1.6rem;
-
-  @media (min-width: $footer-bp-s) {
-    &--narrow {
-      flex: 0 0 50%;
-    }
-  }
-
-  @media (min-width: $footer-bp-m) {
-    flex: 0 0 60%;
-    margin-bottom: 0;
-    padding: 0 0.8rem;
-
-    &:first-child {
-      padding-left: 0;
-    }
-
-    &:last-child {
-      padding-right: 0;
-    }
-
-    &--narrow {
-      flex: 0 1 20%;
-    }
-
-    &--m-left-align {
-      text-align: left;
-
-      .footer__social-list {
-        justify-content: left;
-      }
-    }
-  }
-}
-//
-// reduce padding bottom
-.reduce-padding {
-  padding-bottom: 8px;
-
-  @media (min-width: $bp-m) {
-    padding-bottom: 16px;
-  }
-}
-
-.footer__footer {
-  position: relative;
-  font-size: 0.9em;
-  margin-top: 2.4rem;
-
-  &::before {
-    content: "";
-    position: absolute;
-    width: 100%;
-    height: 1px;
-    left: 0;
-    top: -1.2rem;
-    background-color: currentColor;
-    opacity: 0.2;
-  }
-}
-
-.footer__heading {
-  font-size: 2.25em;
-
-  &--small {
-    @include font-body(bold);
-    font-size: 1em;
-    text-transform: uppercase;
-  }
-}
-
-.footer__social-list {
-  font-size: 3em;
-  justify-content: center;
-}
-
+@import "components/footer/footer-2-1-1";