Add meta to components

docs/documentation/components/dropdown.html

@@ -2,6 +2,31 @@
 layout: documentation
 doc-tab: components
 doc-subtab: dropdown
+variables:
+- name: $dropdown-content-background-color
+  value: $white
+- name: $dropdown-content-arrow
+  value: $link
+- name: $dropdown-content-offset
+  value: 4px
+- name: $dropdown-content-radius
+  value: $radius
+- name: $dropdown-content-shadow
+  value: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
+- name: $dropdown-content-z
+  value: 20
+- name: $dropdown-item-color
+  value: $grey-dark
+- name: $dropdown-item-hover-color
+  value: $black
+- name: $dropdown-item-hover-background-color
+  value: $background
+- name: $dropdown-item-active-color
+  value: $primary-invert
+- name: $dropdown-item-active-background-color
+  value: $primary
+- name: $dropdown-divider-background-color
+  value: $border
 ---
 
 {% capture dropdown_example %}
@@ -172,21 +197,18 @@ doc-subtab: dropdown
 <section class="section">
   <div class="container">
 
-    <div class="columns" style="margin-bottom: -0.75rem !important;">
-      <div class="column">
-        <h1 class="title">Dropdown</h1>
-        <h2 class="subtitle">
-          An interactive <strong>dropdown menu</strong> for discoverable content
-        </h2>
-      </div>
-
-      <div class="column is-narrow">
-        <p class="content">
-          <span class="tag is-success">New!</span>
-          <span class="tag is-info">0.4.4</span>
-        </p>
-      </div>
-    </div>
+    <h1 class="title">Dropdown</h1>
+    <h2 class="subtitle">
+      An interactive <strong>dropdown menu</strong> for discoverable content
+    </h2>
+    {%
+      include meta.html
+      new=true
+      since="0.4.4"
+      colors=false
+      sizes=false
+      variables=true
+    %}
 
     <hr>
 
@@ -318,5 +340,8 @@ doc-subtab: dropdown
         {% highlight html %}{{dropdown_right_example}}{% endhighlight %}
       </div>
     </div>
+
+    {% include variables.html %}
+
   </div>
 </section>