diff --git a/src/components/ComponentExample.js b/src/components/ComponentExample.js
index 5c1ab3d70..cbfe4e359 100644
--- a/src/components/ComponentExample.js
+++ b/src/components/ComponentExample.js
@@ -41,11 +41,11 @@ const EXAMPLE_CSS = `
   margin-left: 0.5rem;
 }
 
-.nr1-RedBox {
-  color: red;
-  background: rgba(255, 0, 0, 0.15);
-  box-shadow: inset 0 0 0 1px rgba(255, 0, 0, 0.5);
-
+.nr1-Box,
+.nr1-RedBox,
+.nr1-Box--a,
+.nr1-Box--b,
+.nr1-Box--c {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -54,6 +54,41 @@ const EXAMPLE_CSS = `
   width: 100%;
   height: 100%;
 }
+
+.nr1-RedBox {
+  color: red;
+  background: rgba(255, 0, 0, 0.15);
+  box-shadow: inset 0 0 0 1px rgba(255, 0, 0, 0.5);
+  margin-bottom: 0.5rem;
+}
+
+[class^=nr1-Example--stack--direction],
+[class^=nr1-Example--stack--horizontal],
+[class^=nr1-Example--stack--gap],
+[class^=nr1-Example--stack--vertical] {
+  margin-bottom: 1.25rem;
+}
+
+.nr1-Example--stack--title {
+  display: block;
+  font-size: 1.5em;
+  margin-bottom: 1.25rem;
+}
+
+.nr1-Box--a {
+  min-height: 70px;
+  min-width: 70px;
+}
+
+.nr1-Box--b {
+  min-height: 90px;
+  min-width: 40px;
+}
+
+.nr1-Box--c {
+  min-height: 40px;
+  min-width: 90px;
+}
 `;
 
 const ComponentExample = ({
diff --git a/src/data/sidenav.json b/src/data/sidenav.json
index e446a7656..d9e6f87cc 100644
--- a/src/data/sidenav.json
+++ b/src/data/sidenav.json
@@ -47,6 +47,10 @@
           {
             "displayName": "Grid",
             "url": "/components/grid"
+          },
+          {
+            "displayName": "Stack",
+            "url": "/components/stack"
           }
         ]
       },
diff --git a/src/markdown-pages/components/stack.mdx b/src/markdown-pages/components/stack.mdx
new file mode 100644
index 000000000..436722ad5
--- /dev/null
+++ b/src/markdown-pages/components/stack.mdx
@@ -0,0 +1,7 @@
+---
+path: '/components/stack'
+title: 'Stack'
+description: 'A Stack component!'
+component: 'Stack'
+template: 'ReferenceTemplate'
+---