Add tags

docs/documentation/elements/title.html

@@ -2,8 +2,70 @@
 layout: documentation
 doc-tab: elements
 doc-subtab: title
+variables:
+- name: $title-color
+  value: $grey-darker
+- name: $title-size
+  value: $size-3
+- name: $title-weight
+  value: $weight-light
+- name: $title-weight-bold
+  value: $weight-semibold
+- name: $subtitle-color
+  value: $grey-dark
+- name: $subtitle-size
+  value: $size-5
+- name: $subtitle-strong
+  value: $grey-darker
+- name: $subtitle-weight
+  value: $weight-light
 ---
 
+{% capture default %}
+<h1 class="title">Title</h1>
+<h2 class="subtitle">Subtitle</h2>
+{% endcapture %}
+
+{% capture title_sizes %}
+<h1 class="title is-1">Title 1</h1>
+<h2 class="title is-2">Title 2</h2>
+<h3 class="title is-3">Title 3</h3>
+<h4 class="title is-4">Title 4</h4>
+<h5 class="title is-5">Title 5</h5>
+<h6 class="title is-6">Title 6</h6>
+{% endcapture %}
+
+{% capture subtitle_sizes %}
+<h1 class="subtitle is-1">Subtitle 1</h1>
+<h2 class="subtitle is-2">Subtitle 2</h2>
+<h3 class="subtitle is-3">Subtitle 3</h3>
+<h4 class="subtitle is-4">Subtitle 4</h4>
+<h5 class="subtitle is-5">Subtitle 5</h5>
+<h6 class="subtitle is-6">Subtitle 6</h6>
+{% endcapture %}
+
+{% capture combine %}
+<p class="title is-1">Title 1</p>
+<p class="subtitle is-3">Subtitle 3</p>
+
+<p class="title is-2">Title 2</p>
+<p class="subtitle is-4">Subtitle 4</p>
+
+<p class="title is-3">Title 3</p>
+<p class="subtitle is-5">Subtitle 5</p>
+{% endcapture %}
+
+{% capture spaced %}
+<p class="title is-1 is-spaced">Title 1</p>
+<p class="subtitle is-3">Subtitle 3</p>
+
+<p class="title is-2 is-spaced">Title 2</p>
+<p class="subtitle is-4">Subtitle 4</p>
+
+<p class="title is-3 is-spaced">Title 3</p>
+<p class="subtitle is-5">Subtitle 5</p>
+{% endcapture %}
+
 {% include subnav-elements.html %}
 
 <section class="section">
@@ -24,10 +86,7 @@ doc-subtab: title
         <p class="subtitle">Subtitle</p>
       </div>
       <div class="column">
-{% highlight html %}
-<h1 class="title">Title</h1>
-<h2 class="subtitle">Subtitle</h2>
-{% endhighlight %}
+        {% highlight html %}{{ default }}{% endhighlight %}
       </div>
     </div>
 
@@ -46,14 +105,7 @@ doc-subtab: title
         <p class="title is-6">Title 6</p>
       </div>
       <div class="column">
-{% highlight html %}
-<h1 class="title is-1">Title 1</h1>
-<h2 class="title is-2">Title 2</h2>
-<h3 class="title is-3">Title 3</h3>
-<h4 class="title is-4">Title 4</h4>
-<h5 class="title is-5">Title 5</h5>
-<h6 class="title is-6">Title 6</h6>
-{% endhighlight %}
+        {% highlight html %}{{ title_sizes }}{% endhighlight %}
       </div>
     </div>
 
@@ -68,14 +120,7 @@ doc-subtab: title
         <p class="subtitle is-6">Subtitle 6</p>
       </div>
       <div class="column">
-{% highlight html %}
-<h1 class="subtitle is-1">Subtitle 1</h1>
-<h2 class="subtitle is-2">Subtitle 2</h2>
-<h3 class="subtitle is-3">Subtitle 3</h3>
-<h4 class="subtitle is-4">Subtitle 4</h4>
-<h5 class="subtitle is-5">Subtitle 5</h5>
-<h6 class="subtitle is-6">Subtitle 6</h6>
-{% endhighlight %}
+        {% highlight html %}{{ subtitle_sizes }}{% endhighlight %}
       </div>
     </div>
 
@@ -103,16 +148,7 @@ doc-subtab: title
         </div>
       </div>
       <div class="column">
-{% highlight html %}
-<p class="title is-1">Title 1</p>
-<p class="subtitle is-3">Subtitle 3</p>
-
-<p class="title is-2">Title 2</p>
-<p class="subtitle is-4">Subtitle 4</p>
-
-<p class="title is-3">Title 3</p>
-<p class="subtitle is-5">Subtitle 5</p>
-{% endhighlight %}
+        {% highlight html %}{{ combine }}{% endhighlight %}
       </div>
     </div>
 
@@ -142,17 +178,11 @@ doc-subtab: title
         </div>
       </div>
       <div class="column">
-{% highlight html %}
-<p class="title is-1 is-spaced">Title 1</p>
-<p class="subtitle is-3">Subtitle 3</p>
-
-<p class="title is-2 is-spaced">Title 2</p>
-<p class="subtitle is-4">Subtitle 4</p>
-
-<p class="title is-3 is-spaced">Title 3</p>
-<p class="subtitle is-5">Subtitle 5</p>
-{% endhighlight %}
+        {% highlight html %}{{ spaced }}{% endhighlight %}
       </div>
     </div>
+
+    {% include variables.html element=true %}
+
   </div>
 </section>