Add spacing helpers examples

docs/documentation/helpers/spacing-helpers.html

@@ -62,7 +62,7 @@ customValues:
   </ul>
 
   <p>
-    You need to <strong>combine</strong> a margin/padding prefix with a direciton suffix. For example:
+    You need to <strong>combine</strong> a margin/padding prefix with a direction suffix. For example:
   </p>
 
   <ul>
@@ -107,6 +107,29 @@ customValues:
   vertical=page.vertical
 %}
 
+<div class="content">
+  <p>
+    To use these classes, simply append them to any HTML element:
+  </p>
+</div>
+
+{% highlight html %}
+<!-- Adds 1rem of margin at the bottom -->
+<p class="mb-4">
+  Margin bottom
+</p>
+
+<!-- Adds 0.25rem of padding on the left and the right -->
+<p class="px-1">
+  Horizontal padding
+</p>
+
+<!-- Removes the margin on the right and adds 0.75rem padding at the top -->
+<p class="mr-0 pt-3">
+  Both
+</p>
+{% endhighlight %}
+
 {% include elements/anchor.html name="Configuration" %}
 
 {% capture custom %}