Create snippet component

docs/documentation/layout/container.html

@@ -81,7 +81,7 @@ doc-subtab: container
 
 <section class="section">
 <div class="container">
-  <h3 class="title">Fluid container</h3>
+  <h3 class="title is-4">Fluid container</h3>
   <div class="content">
     <p>If you don't want to have a maximum width but want to keep the 24px margin on the left and right sides, add the <code>is-fluid</code> modifier:</p>
   </div>
@@ -96,7 +96,7 @@ doc-subtab: container
 
 <section class="section">
 <div class="container">
-  <h3 class="title">Breakpoint containers</h3>
+  <h3 class="title is-4">Breakpoint containers</h3>
   <div class="content">
     <p>
       <span class="tag is-success">New!</span>

docs/documentation/layout/media-object.html

@@ -219,9 +219,8 @@ doc-subtab: media-object
 
     {% highlight html %}{{media_bis_example}}{% endhighlight %}
 
-    <hr>
+    {% include anchor.html name="Nesting" %}
 
-    <h3 class="title">Nesting</h3>
     <div class="content">
       <p>You can nest media objects up to <strong>3 levels</strong> deep.</p>
     </div>

docs/documentation/layout/tiles.html

@@ -24,9 +24,8 @@ doc-subtab: tiles
 </div>
 {% endhighlight %}
 
-    <hr>
+    {% include anchor.html name="Example" %}
 
-    <h3 class="title">Example</h3>
     <div class="tile is-ancestor">
       <div class="tile is-vertical is-8">
         <div class="tile">
@@ -123,9 +122,8 @@ doc-subtab: tiles
 </div>
 {% endhighlight %}
 
-    <hr>
+    {% include anchor.html name="Modifiers" %}
 
-    <h3 class="title">Modifiers</h3>
 
     <div class="content">
       <p>The <code>tile</code> element has <strong>16 modifiers</strong>:</p>
@@ -154,9 +152,8 @@ doc-subtab: tiles
       </ul>
     </div>
 
-    <hr>
+    {% include anchor.html name="How it works: Nesting" %}
 
-    <h3 class="title">How it works: Nesting</h3>
     <div class="content">
       <p>Everything is a tile! To create a grid of tiles, you only need to <strong>nest</strong> <code>tile</code> elements.</p>
     </div>
@@ -313,9 +310,8 @@ doc-subtab: tiles
 </div>
 {% endhighlight %}
 
-    <hr>
+    {% include anchor.html name="Nesting requirements" %}
 
-    <h3 class="title">Nesting requirements</h3>
 
     <article class="message is-danger">
       <div class="message-header">
@@ -446,9 +442,8 @@ tile is-ancestor
 </div>
 {% endhighlight %}
 
-    <hr>
+    {% include anchor.html name="3 columns" %}
 
-    <h3 class="title">3 columns</h3>
 
     <div class="tile is-ancestor">
       <div class="tile is-parent">
@@ -636,9 +631,8 @@ tile is-ancestor
 </div>
 {% endhighlight %}
 
-    <hr>
+    {% include anchor.html name="4 columns" %}
 
-    <h3 class="title">4 columns</h3>
 
     <div class="tile is-ancestor">
       <div class="tile is-parent">