adds spacer documentation page

diff --git a/docs/pages/spacer.md b/docs/pages/spacer.md
new file mode 100644 (file)
index 0000000..59ac2b8
--- /dev/null
+++ b/docs/pages/spacer.md
@@ -0,0 +1,26 @@
+---
+title: Spacer
+description: Vertical spacing in emails is inconsistent. The spacer component will help you create the space you need, the same on every device and client.
+tags:
+  - spacing
+  - height
+  - margin
+  - padding
+---
+
+## Basics
+
+Vertical spacing between email clients is not as simple as it sounds, in fact, it’s consistently inconsistent. Versions of Outlook don’t respect margin and padding the same and `<br>`’s are different all over the place. 
+
+The spacer is used to create vertical spacing between elements. The size `size="x"` attribute allows you to set the height in pixels of vertical spacing you need.
+
+When using [Inky](inky.html) HTML, the `<spacer>` tag will create this structure for you. You can use them between rows, containers or inside wrappers, rows, columns, and containers.
+
+```inky_example
+<p>Stuff on top</p>
+<spacer size="100"></spacer>
+<p>Stuff on bottom</p>
+```
+
+In this example, this spacer will create 100px of vertical spacing.
+

diff --git a/docs/pages/thumbnail.md b/docs/pages/thumbnail.md
index 5eb0c3bf4d065b51086326a1f6cebfd02d91db70..6bd18120390e8055f0b9c8fce2236b37277d97d7 100644 (file)
--- a/docs/pages/thumbnail.md
+++ b/docs/pages/thumbnail.md
@@ -1,6 +1,7 @@
 ---
 title: Thumbnail
 description: Spruce up an image tag with our thumbnail style.
+published: false
 ---
 
 The `.thumbnail` class can be applied directly to an `<img>` element, or an `<a>` that wraps it. Make sure the `<img>` has an alt attribute that describes the contents of the image.

diff --git a/docs/partials/component-list.html b/docs/partials/component-list.html
index d4fa57650a45e0dd9e866ea1d263482d11b5a120..59313a8cb9d99ce7d88c10253d54b24f911b877e 100644 (file)
--- a/docs/partials/component-list.html
+++ b/docs/partials/component-list.html
@@ -25,7 +25,9 @@
   <li><a href="callout.html">Callout</a></li>
   <li><a href="global.html">Global Styles</a></li>
   <li><a href="grid.html">Grid</a></li>
-  <li><a href="thumbnail.html">Thumbnail</a></li>
+  <li><a href="spacer.html">Spacer</a></li>
+  
+  <!-- <li><a href="thumbnail.html">Thumbnail</a></li> -->
   <li><a href="typography.html">Typography</a></li>
   <li><a href="visibility.html">Visibility Classes</a></li>