Add more snippets

docs/documentation/elements/image.html

@@ -49,17 +49,10 @@ variables:
       <p>Because images can take a few seconds to load (or not at all), use the <code>.image</code> container to specify a <strong>precisely sized</strong> container so that your layout isn't broken because of image loading or image errors.</p>
     </div>
 
-    <div class="bd-example">
-      <figure class="image is-128x128">
-        <img src="{{site.url}}/images/placeholders/128x128.png">
-      </figure>
-    </div>
+    {% include snippet.html content=image %}
 
-    {% highlight html %}{{ image }}{% endhighlight %}
+    {% include anchor.html name="Fixed square images" %}
 
-    <hr>
-
-    <h3 class="title">Fixed square images</h3>
     <div class="content">
       <p>There are <strong>7</strong> dimensions to choose from, useful for <strong>avatars</strong>:</p>
     </div>
@@ -76,23 +69,15 @@ variables:
       </tbody>
     </table>
 
-    <h4 class="title is-4">Retina images</h4>
+    {% include anchor.html name="Retina images" %}
 
     <div class="content">
       <p>Because the image is fixed in size, you can use an image that is <strong>twice as big</strong>. So for example, in a <code>128x128</code> container, you can use a <code>256x256</code> image, but resized to <strong>128x128</strong> pixels.</p>
     </div>
 
-    <div class="bd-example">
-      <figure class="image is-128x128">
-        <img src="{{site.url}}/images/placeholders/256x256.png">
-      </figure>
-    </div>
+    {% include snippet.html content=retina_image %}
 
-    {% highlight html %}{{ retina_image }}{% endhighlight %}
-
-    <hr>
-
-    <h3 class="title">Responsive images with ratios</h3>
+    {% include anchor.html name="Responsive images with ratios" %}
 
     <div class="content">
       <p>If you don't know the exact dimensions but know the <strong>ratio</strong> instead, you can use one of the <strong>5 ratio modifers</strong>:</p>