Create snippet component

docs/documentation/modifiers/typography-helpers.html

@@ -62,9 +62,7 @@ doc-subtab: typography-helpers
       Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width
     </h2>
 
-    <hr>
-
-    <h3 class="title">Size</h3>
+    {% include anchor.html name="Size" %}
 
     <div class="content">
       <p>
@@ -115,11 +113,7 @@ doc-subtab: typography-helpers
       </tbody>
     </table>
 
-    <hr>
-
-    <h3 class="title">
-      Responsive size
-    </h3>
+    {% include anchor.html name="Responsive size" %}
 
     <div class="content">
       <p>
@@ -190,11 +184,7 @@ doc-subtab: typography-helpers
       </p>
     </div>
 
-    <hr>
-
-    <h3 class="title">
-      Colors
-    </h3>
+    {% include anchor.html name="Colors" %}
 
     <div class="content">
       <p>
@@ -235,9 +225,7 @@ doc-subtab: typography-helpers
       </tbody>
     </table>
 
-    <hr>
-
-    <h3 class="title">Alignment</h3>
+    {% include anchor.html name="Alignment" %}
 
     <div class="content">
       <p>
@@ -272,15 +260,13 @@ doc-subtab: typography-helpers
       </tbody>
     </table>
 
-    <hr>
-
-    <h3 class="title">Responsive Alignment</h3>
+    {% include anchor.html name="Responsive Alignment" %}
 
     <div class="content">
       <p>
         You can now <strong>align text</strong> for <em>each</em> viewport width. You simply need to append the <strong>viewport width</strong> to the alignment modifier.
       </p>
-      
+
       <p>
         For example, here are the modifiers for <code>.has-text-left</code>:
       </p>
@@ -364,9 +350,7 @@ doc-subtab: typography-helpers
       </tbody>
     </table>
 
-    <hr>
-
-    <h3 class="title">Text transformation</h3>
+    {% include anchor.html name="Text transformation" %}
 
     <div class="content">
       <p>