Create snippet component

docs/documentation/modifiers/responsive-helpers.html

@@ -66,9 +66,7 @@ doc-subtab: responsive-helpers
     <h1 class="title">Responsive helpers</h1>
     <h2 class="subtitle"><strong>Show/hide content</strong> depending on the width of the viewport</h2>
 
-    <hr>
-
-    <h3 class="title">Show</h3>
+    {% include anchor.html name="Show" %}
 
     <div class="content">
       <p>
@@ -186,11 +184,12 @@ doc-subtab: responsive-helpers
     </table>
 
     <div class="content">
-      <p>For the other display options, just replace <code>is-flex</code> with <code>is-block</code> <code>is-inline</code> <code>is-inline-block</code> or <code>is-inline-flex</code>
+      <p>
+        For the other display options, just replace <code>is-flex</code> with <code>is-block</code> <code>is-inline</code> <code>is-inline-block</code> or <code>is-inline-flex</code>
+      </p>
+    </div>
 
-    <hr>
-
-    <h3 class="title">Hide</h3>
+    {% include anchor.html name="Hide" %}
 
     <table class="table is-bordered">
       {{ thead }}

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>