Add tags

docs/documentation/components/breadcrumb.html

@@ -2,6 +2,15 @@
 layout: documentation
 doc-tab: components
 doc-subtab: breadcrumb
+variables:
+- name: $breadcrumb-item-color
+  value: $text-light
+- name: $breadcrumb-item-hover-color
+  value: $link-hover
+- name: $breadcrumb-item-active-color
+  value: $text-strong
+- name: $breadcrumb-item-separator-color
+  value: $text
 ---
 
 {% include subnav-components.html %}
@@ -136,10 +145,17 @@ doc-subtab: breadcrumb
         <h2 class="subtitle">
           A simple <strong>breadcrumb</strong> component to improve your navigation experience
         </h2>
+        {%
+          include meta.html
+          since="0.4.3"
+          variables=true
+          colors=false
+          sizes=true
+        %}
       </div>
 
       <div class="column is-narrow">
-        <p class="content">
+        <p class="tags has-addons">
           <span class="tag is-success">New!</span>
           <span class="tag is-info">0.4.3</span>
         </p>
@@ -198,32 +214,6 @@ doc-subtab: breadcrumb
 
     <hr>
 
-    <h3 class="title">Sizes</h3>
-
-    <div class="content">
-      <p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
-    </div>
-
-    <div class="example">
-      {{breadcrumb_small_example}}
-    </div>
-
-    {% highlight html %}{{breadcrumb_small_example}}{% endhighlight %}
-
-    <div class="example">
-      {{breadcrumb_medium_example}}
-    </div>
-
-    {% highlight html %}{{breadcrumb_medium_example}}{% endhighlight %}
-
-    <div class="example">
-      {{breadcrumb_large_example}}
-    </div>
-
-    {% highlight html %}{{breadcrumb_large_example}}{% endhighlight %}
-
-    <hr>
-
     <h3 class="title">Alternative separators</h3>
     <div class="content">
       <p>You can choose between <strong>4 additional separators</strong>: <code>has-arrow-separator</code> <code>has-bullet-separator</code> <code>has-dot-separator</code> and <code>has-succeeds-separator</code>.</p>
@@ -253,5 +243,35 @@ doc-subtab: breadcrumb
 
     {% highlight html %}{{breadcrumb_succeeds_example}}{% endhighlight %}
 
+    <hr style="margin-bottom: 0;">
+
+    <h3 id="sizes" class="title">
+      Sizes
+    </h3>
+
+    <div class="content">
+      <p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
+    </div>
+
+    <div class="example">
+      {{breadcrumb_small_example}}
+    </div>
+
+    {% highlight html %}{{breadcrumb_small_example}}{% endhighlight %}
+
+    <div class="example">
+      {{breadcrumb_medium_example}}
+    </div>
+
+    {% highlight html %}{{breadcrumb_medium_example}}{% endhighlight %}
+
+    <div class="example">
+      {{breadcrumb_large_example}}
+    </div>
+
+    {% highlight html %}{{breadcrumb_large_example}}{% endhighlight %}
+
+    {% include variables.html %}
+
   </div>
 </section>

docs/documentation/components/card.html

@@ -2,6 +2,21 @@
 layout: documentation
 doc-tab: components
 doc-subtab: card
+variables:
+- name: $card-color
+  value: $text
+- name: $card-background-color
+  value: $white
+- name: $card-shadow
+  value: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
+- name: $card-header-color
+  value: $text-strong
+- name: $card-header-shadow
+  value: 0 1px 2px rgba($black, 0.1)
+- name: $card-header-weight
+  value: $weight-bold
+- name: $card-footer-border-top
+  value: 1px solid $border
 ---
 
 {% capture card_example %}
@@ -94,6 +109,12 @@ doc-subtab: card
   <div class="container">
     <h1 class="title">Card</h1>
     <h2 class="subtitle">An all-around flexible and composable component</h2>
+    {%
+      include meta.html
+      variables=true
+      colors=false
+      sizes=false
+    %}
 
     <hr>
 
@@ -166,5 +187,7 @@ doc-subtab: card
       </div>
     </div>
 
+    {% include variables.html %}
+
   </div>
 </section>