Textarea snippets

docs/_includes/snippet.html

@@ -1,13 +1,26 @@
-<div class="
-  bd-snippet
-  {% if include.horizontal %}bd-is-horizontal{% else %}bd-is-vertical{% endif %}
-  {% if include.clipped %}bd-is-clipped{% endif %}
-  {% if include.size %}bd-is-{{ include.size }}{% endif %}
-  ">
-  <div class="bd-snippet-preview">
-    {{ include.content }}
+{% if include.plain %}
+  <div class="columns">
+    <div class="column is-half">
+      <div class="bd-example">
+        {{ include.content }}
+      </div>
+    </div>
+    <div class="column is-half">
+      {% highlight html %}{{ include.content }}{% endhighlight %}
+    </div>
   </div>
-  <div class="bd-snippet-code {% unless include.clipped %}highlight-full{% endunless %}">
-    {% highlight html %}{{ include.content }}{% endhighlight %}
+{% else %}
+  <div class="
+    bd-snippet
+    {% if include.horizontal %}bd-is-horizontal{% else %}bd-is-vertical{% endif %}
+    {% if include.clipped %}bd-is-clipped{% endif %}
+    {% if include.size %}bd-is-{{ include.size }}{% endif %}
+    ">
+    <div class="bd-snippet-preview">
+      {{ include.content }}
+    </div>
+    <div class="bd-snippet-code {% unless include.clipped %}highlight-full{% endunless %}">
+      {% highlight html %}{{ include.content }}{% endhighlight %}
+    </div>
   </div>
-</div>
+{% endif %}

docs/documentation/form/textarea.html

@@ -134,23 +134,7 @@ doc-subtab: textarea
 
     <hr>
 
-    <div class="content">
-      <p>The following <strong>modifiers</strong> are supported:</p>
-      <ul>
-        <li>the <strong><a href="#input-color">color</a></strong></li>
-        <li>the <strong><a href="#input-size">size</a></strong></li>
-        <li>the <strong><a href="#input-state">state</a></strong></li>
-      </ul>
-    </div>
-
-    <div class="columns">
-      <div class="column is-half">
-        {{textarea_example}}
-      </div>
-      <div class="column is-half highlight-full">
-        {% highlight html %}{{textarea_example}}{% endhighlight %}
-      </div>
-    </div>
+    {% include snippet.html content=textarea_example %}
 
     <div class="content">
       <p>
@@ -162,79 +146,33 @@ doc-subtab: textarea
       </p>
     </div>
 
-    <div class="columns">
-      <div class="column is-half">
-        {{textarea_rows_example}}
-      </div>
-      <div class="column is-half highlight-full">
-        {% highlight html %}{{textarea_rows_example}}{% endhighlight %}
-      </div>
-    </div>
+    {% include snippet.html content=textarea_rows_example %}
 
     {% include anchor.html name="Colors" %}
 
-    <div class="columns">
-      <div class="column is-half">
-        {{colors_example}}
-      </div>
-      <div class="column is-half highlight-full">
-        {% highlight html %}{{colors_example}}{% endhighlight %}
-      </div>
-    </div>
+    {% include snippet.html content=colors_example %}
 
     {% include anchor.html name="Sizes" %}
 
-    <div class="columns">
-      <div class="column is-half">
-        {{sizes_example}}
-      </div>
-      <div class="column is-half highlight-full">
-        {% highlight html %}{{sizes_example}}{% endhighlight %}
-      </div>
-    </div>
+    {% include snippet.html content=sizes_example %}
 
-    <hr>
+    {% include anchor.html name="States" %}
 
-    <h3 id="input-state" class="title">States</h3>
     <h4 class="subtitle">Normal</h4>
-    <div class="columns">
-      <div class="column is-half">
-        {{normal_example}}
-      </div>
-      <div class="column is-half">
-        {% highlight html %}{{normal_example}}{% endhighlight %}
-      </div>
-    </div>
+
+    {% include snippet.html content=normal_example %}
 
     <h4 class="subtitle">Hover</h4>
-    <div class="columns">
-      <div class="column is-half">
-        {{hover_example}}
-      </div>
-      <div class="column is-half">
-        {% highlight html %}{{hover_example}}{% endhighlight %}
-      </div>
-    </div>
+
+    {% include snippet.html content=hover_example %}
 
     <h4 class="subtitle">Focus</h4>
-    <div class="columns">
-      <div class="column is-half">
-        {{focus_example}}
-      </div>
-      <div class="column is-half">
-        {% highlight html %}{{focus_example}}{% endhighlight %}
-      </div>
-    </div>
+
+    {% include snippet.html content=focus_example %}
 
     <h4 class="subtitle">Loading</h4>
-    <div class="columns">
-      <div class="column is-half">
-        {{loading_example}}
-      </div>
-      <div class="column is-half">
-        {% highlight html %}{{loading_example}}{% endhighlight %}
-      </div>
-    </div>
+
+    {% include snippet.html content=loading_example %}
 
     {% if site.vernum >= 43 %}
       <div class="columns">
@@ -257,14 +195,8 @@ doc-subtab: textarea
     {% endif %}
 
     <h4 class="subtitle">Disabled</h4>
-    <div class="columns">
-      <div class="column is-half">
-        {{disabled_example}}
-      </div>
-      <div class="column is-half">
-        {% highlight html %}{{disabled_example}}{% endhighlight %}
-      </div>
-    </div>
+
+    {% include snippet.html content=disabled_example %}
 
   </div>
 </section>