diff --git a/docs/src/pages/components/Input.vue b/docs/src/pages/components/Input.vue
index c2f9f9d..72624a1 100644
--- a/docs/src/pages/components/Input.vue
+++ b/docs/src/pages/components/Input.vue
@@ -107,7 +107,129 @@
     </div>
 
     <div slot="code">
-      <h2>Code</h2>
+      <demo-example label="Regular fields">
+        <code-block lang="xml">
+&lt;form novalidate @submit.stop.prevent=&quot;submit&quot;&gt;
+  &lt;md-input-container&gt;
+    &lt;label&gt;Initial value&lt;/label&gt;
+    &lt;md-input v-model=&quot;initialValue&quot;&gt;&lt;/md-input&gt;
+  &lt;/md-input-container&gt;
+
+  &lt;md-input-container&gt;
+    &lt;label&gt;With label&lt;/label&gt;
+    &lt;md-input placeholder=&quot;My nice placeholder&quot;&gt;&lt;/md-input&gt;
+  &lt;/md-input-container&gt;
+
+  &lt;md-input-container md-inline&gt;
+    &lt;label&gt;Inline field&lt;/label&gt;
+    &lt;md-input&gt;&lt;/md-input&gt;
+  &lt;/md-input-container&gt;
+
+  &lt;md-input-container&gt;
+    &lt;label&gt;Number&lt;/label&gt;
+    &lt;md-input type=&quot;number&quot;&gt;&lt;/md-input&gt;
+  &lt;/md-input-container&gt;
+
+  &lt;md-input-container&gt;
+    &lt;label&gt;Textarea&lt;/label&gt;
+    &lt;md-textarea&gt;&lt;/md-textarea&gt;
+  &lt;/md-input-container&gt;
+
+  &lt;md-input-container&gt;
+    &lt;label&gt;Disabled&lt;/label&gt;
+    &lt;md-input disabled&gt;&lt;/md-input&gt;
+  &lt;/md-input-container&gt;
+&lt;/form&gt;
+        </code-block>
+
+        <code-block lang="javascript">
+export default {
+  data() {
+    return {
+      initialValue: 'My initial value'
+    };
+  }
+};
+        </code-block>
+      </demo-example>
+
+      <demo-example label="Password">
+        <code-block lang="xml">
+&lt;form novalidate @submit.stop.prevent=&quot;submit&quot;&gt;
+  &lt;md-input-container&gt;
+    &lt;label&gt;Regular Password&lt;/label&gt;
+    &lt;md-input type=&quot;password&quot;&gt;&lt;/md-input&gt;
+  &lt;/md-input-container&gt;
+
+  &lt;md-input-container md-has-password&gt;
+    &lt;label&gt;Password Reveal&lt;/label&gt;
+    &lt;md-input type=&quot;password&quot;&gt;&lt;/md-input&gt;
+  &lt;/md-input-container&gt;
+&lt;/form&gt;
+        </code-block>
+      </demo-example>
+
+      <demo-example label="Required and Errors">
+        <code-block lang="xml">
+&lt;form novalidate @submit.stop.prevent=&quot;submit&quot;&gt;
+  &lt;md-input-container&gt;
+    &lt;label&gt;Required&lt;/label&gt;
+    &lt;md-input required&gt;&lt;/md-input&gt;
+  &lt;/md-input-container&gt;
+
+  &lt;md-input-container class=&quot;md-input-invalid&quot;&gt;
+    &lt;label&gt;Error&lt;/label&gt;
+    &lt;md-input required&gt;&lt;/md-input&gt;
+  &lt;/md-input-container&gt;
+
+  &lt;md-input-container class=&quot;md-input-invalid&quot;&gt;
+    &lt;label&gt;Error with message&lt;/label&gt;
+    &lt;md-input required&gt;&lt;/md-input&gt;
+
+    &lt;span class=&quot;md-error&quot;&gt;Validation message&lt;/span&gt;
+  &lt;/md-input-container&gt;
+
+  &lt;md-input-container class=&quot;md-input-invalid&quot;&gt;
+    &lt;label&gt;Textarea with error&lt;/label&gt;
+    &lt;md-textarea&gt;&lt;/md-textarea&gt;
+
+    &lt;span class=&quot;md-error&quot;&gt;Textarea validation message&lt;/span&gt;
+  &lt;/md-input-container&gt;
+&lt;/form&gt;
+        </code-block>
+      </demo-example>
+
+      <demo-example label="Character counter">
+        <code-block lang="xml">
+&lt;form novalidate @submit.stop.prevent=&quot;submit&quot;&gt;
+  &lt;md-input-container&gt;
+    &lt;label&gt;Textarea&lt;/label&gt;
+    &lt;md-textarea maxlength=&quot;70&quot;&gt;&lt;/md-textarea&gt;
+  &lt;/md-input-container&gt;
+
+  &lt;md-input-container&gt;
+    &lt;label&gt;Input&lt;/label&gt;
+    &lt;md-input maxlength=&quot;20&quot;&gt;&lt;/md-input&gt;
+  &lt;/md-input-container&gt;
+&lt;/form&gt;
+        </code-block>
+      </demo-example>
+
+      <demo-example label="Themed" size="4">
+        <code-block lang="xml">
+&lt;form novalidate @submit.stop.prevent=&quot;submit&quot;&gt;
+  &lt;md-input-container v-md-theme=&quot;&#039;green&#039;&quot;&gt;
+    &lt;label&gt;Themable - Input&lt;/label&gt;
+    &lt;md-input&gt;&lt;/md-input&gt;
+  &lt;/md-input-container&gt;
+
+  &lt;md-input-container v-md-theme=&quot;&#039;brown&#039;&quot;&gt;
+    &lt;label&gt;Themable - Textarea&lt;/label&gt;
+    &lt;md-textarea&gt;&lt;/md-textarea&gt;
+  &lt;/md-input-container&gt;
+&lt;/form&gt;
+        </code-block>
+      </demo-example>
     </div>
 
     <div slot="api">
diff --git a/docs/src/pages/components/List.vue b/docs/src/pages/components/List.vue
index 1daf965..4daec04 100644
--- a/docs/src/pages/components/List.vue
+++ b/docs/src/pages/components/List.vue
@@ -367,7 +367,7 @@
         </div>
       </demo-example>
 
-      <demo-example label="Controls">
+      <demo-example label="Expansion List">
         <div class="phone-viewport">
           <md-list>
             <md-list-item>
@@ -620,7 +620,704 @@
     </div>
 
     <div slot="code">
-      <h2>Code</h2>
+      <demo-example label="Single Line">
+        <code-block lang="xml">
+&lt;md-list&gt;
+  &lt;md-list-item&gt;
+    &lt;md-icon&gt;move_to_inbox&lt;/md-icon&gt; &lt;span&gt;Inbox&lt;/span&gt;
+  &lt;/md-list-item&gt;
+
+  &lt;md-list-item&gt;
+    &lt;md-icon&gt;send&lt;/md-icon&gt; &lt;span&gt;Sent Mail&lt;/span&gt;
+  &lt;/md-list-item&gt;
+
+  &lt;md-list-item&gt;
+    &lt;md-icon&gt;delete&lt;/md-icon&gt; &lt;span&gt;Trash&lt;/span&gt;
+  &lt;/md-list-item&gt;
+
+  &lt;md-list-item&gt;
+    &lt;md-icon&gt;error&lt;/md-icon&gt; &lt;span&gt;Spam&lt;/span&gt;
+
+    &lt;md-divider class=&quot;md-inset&quot;&gt;&lt;/md-divider&gt;
+  &lt;/md-list-item&gt;
+
+  &lt;md-list-item&gt;
+    &lt;md-avatar&gt;
+      &lt;img src=&quot;https://placeimg.com/40/40/people/5&quot; alt=&quot;People&quot;&gt;
+    &lt;/md-avatar&gt;
+
+    &lt;span&gt;Abbey Christansen&lt;/span&gt;
+
+    &lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
+      &lt;md-icon class=&quot;md-primary&quot;&gt;chat_bubble&lt;/md-icon&gt;
+    &lt;/md-button&gt;
+  &lt;/md-list-item&gt;
+
+  &lt;md-list-item&gt;
+    &lt;md-avatar&gt;
+      &lt;img src=&quot;https://placeimg.com/40/40/people/1&quot; alt=&quot;People&quot;&gt;
+    &lt;/md-avatar&gt;
+
+    &lt;span&gt;Alex Nelson&lt;/span&gt;
+
+    &lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
+      &lt;md-icon class=&quot;md-primary&quot;&gt;chat_bubble&lt;/md-icon&gt;
+    &lt;/md-button&gt;
+  &lt;/md-list-item&gt;
+
+  &lt;md-list-item&gt;
+    &lt;md-avatar&gt;
+      &lt;img src=&quot;https://placeimg.com/40/40/people/6&quot; alt=&quot;People&quot;&gt;
+    &lt;/md-avatar&gt;
+
+    &lt;span&gt;Mary Johnson&lt;/span&gt;
+
+    &lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
+      &lt;md-icon&gt;chat_bubble&lt;/md-icon&gt;
+    &lt;/md-button&gt;
+  &lt;/md-list-item&gt;
+&lt;/md-list&gt;
+        </code-block>
+
+        <code-block lang="xml">
+&lt;md-list class=&quot;md-dense&quot;&gt;
+  &lt;md-list-item&gt;
+    &lt;md-icon&gt;move_to_inbox&lt;/md-icon&gt; &lt;span&gt;Inbox&lt;/span&gt;
+  &lt;/md-list-item&gt;
+
+  &lt;md-list-item&gt;
+    &lt;md-icon&gt;send&lt;/md-icon&gt; &lt;span&gt;Sent Mail&lt;/span&gt;
+  &lt;/md-list-item&gt;
+
+  &lt;md-list-item&gt;
+    &lt;md-icon&gt;delete&lt;/md-icon&gt; &lt;span&gt;Trash&lt;/span&gt;
+  &lt;/md-list-item&gt;
+
+  &lt;md-list-item&gt;
+    &lt;md-icon&gt;error&lt;/md-icon&gt; &lt;span&gt;Spam&lt;/span&gt;
+
+    &lt;md-divider class=&quot;md-inset&quot;&gt;&lt;/md-divider&gt;
+  &lt;/md-list-item&gt;
+
+  &lt;md-list-item&gt;
+    &lt;md-avatar&gt;
+      &lt;img src=&quot;https://placeimg.com/40/40/people/5&quot; alt=&quot;People&quot;&gt;
+    &lt;/md-avatar&gt;
+
+    &lt;span&gt;Abbey Christansen&lt;/span&gt;
+
+    &lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
+      &lt;md-icon class=&quot;md-primary&quot;&gt;chat_bubble&lt;/md-icon&gt;
+    &lt;/md-button&gt;
+  &lt;/md-list-item&gt;
+
+  &lt;md-list-item&gt;
+    &lt;md-avatar&gt;
+      &lt;img src=&quot;https://placeimg.com/40/40/people/1&quot; alt=&quot;People&quot;&gt;
+    &lt;/md-avatar&gt;
+
+    &lt;span&gt;Alex Nelson&lt;/span&gt;
+
+    &lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
+      &lt;md-icon class=&quot;md-primary&quot;&gt;chat_bubble&lt;/md-icon&gt;
+    &lt;/md-button&gt;
+  &lt;/md-list-item&gt;
+
+  &lt;md-list-item&gt;
+    &lt;md-avatar&gt;
+      &lt;img src=&quot;https://placeimg.com/40/40/people/6&quot; alt=&quot;People&quot;&gt;
+    &lt;/md-avatar&gt;
+
+    &lt;span&gt;Mary Johnson&lt;/span&gt;
+
+    &lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
+      &lt;md-icon&gt;chat_bubble&lt;/md-icon&gt;
+    &lt;/md-button&gt;
+  &lt;/md-list-item&gt;
+&lt;/md-list&gt;
+        </code-block>
+      </demo-example>
+
+      <demo-example label="Double Line">
+        <code-block lang="xml">
+&lt;md-list class=&quot;md-double-line&quot;&gt;
+  &lt;md-list-item&gt;
+    &lt;md-icon class=&quot;md-primary&quot;&gt;phone&lt;/md-icon&gt;
+
+    &lt;div class=&quot;md-list-text-container&quot;&gt;
+      &lt;span&gt;(650) 555-1234&lt;/span&gt;
+      &lt;span&gt;Mobile&lt;/span&gt;
+    &lt;/div&gt;
+
+    &lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
+      &lt;md-icon&gt;sms&lt;/md-icon&gt;
+    &lt;/md-button&gt;
+  &lt;/md-list-item&gt;
+
+  &lt;md-list-item class=&quot;md-inset&quot;&gt;
+    &lt;div class=&quot;md-list-text-container&quot;&gt;
+      &lt;span&gt;(650) 555-1234&lt;/span&gt;
+      &lt;span&gt;Mobile&lt;/span&gt;
+    &lt;/div&gt;
+
+    &lt;md-divider class=&quot;md-inset&quot;&gt;&lt;/md-divider&gt;
+  &lt;/md-list-item&gt;
+
+  &lt;md-list-item&gt;
+    &lt;md-icon class=&quot;md-primary&quot;&gt;email&lt;/md-icon&gt;
+
+    &lt;div class=&quot;md-list-text-container&quot;&gt;
+      &lt;span&gt;aliconnors@example.com&lt;/span&gt;
+      &lt;span&gt;Personal&lt;/span&gt;
+    &lt;/div&gt;
+
+    &lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
+      &lt;md-icon&gt;sms&lt;/md-icon&gt;
+    &lt;/md-button&gt;
+  &lt;/md-list-item&gt;
+
+  &lt;md-list-item class=&quot;md-inset&quot;&gt;
+    &lt;div class=&quot;md-list-text-container&quot;&gt;
+      &lt;span&gt;ali_connors@example.com&lt;/span&gt;
+      &lt;span&gt;Work&lt;/span&gt;
+    &lt;/div&gt;
+  &lt;/md-list-item&gt;
+&lt;/md-list&gt;
+        </code-block>
+
+        <code-block lang="xml">
+&lt;md-list class=&quot;md-double-line md-dense&quot;&gt;
+  &lt;md-list-item&gt;
+    &lt;md-icon class=&quot;md-primary&quot;&gt;phone&lt;/md-icon&gt;
+
+    &lt;div class=&quot;md-list-text-container&quot;&gt;
+      &lt;span&gt;(650) 555-1234&lt;/span&gt;
+      &lt;span&gt;Mobile&lt;/span&gt;
+    &lt;/div&gt;
+
+    &lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
+      &lt;md-icon&gt;sms&lt;/md-icon&gt;
+    &lt;/md-button&gt;
+  &lt;/md-list-item&gt;
+
+  &lt;md-list-item class=&quot;md-inset&quot;&gt;
+    &lt;div class=&quot;md-list-text-container&quot;&gt;
+      &lt;span&gt;(650) 555-1234&lt;/span&gt;
+      &lt;span&gt;Mobile&lt;/span&gt;
+    &lt;/div&gt;
+
+    &lt;md-divider class=&quot;md-inset&quot;&gt;&lt;/md-divider&gt;
+  &lt;/md-list-item&gt;
+
+  &lt;md-list-item&gt;
+    &lt;md-icon class=&quot;md-primary&quot;&gt;email&lt;/md-icon&gt;
+
+    &lt;div class=&quot;md-list-text-container&quot;&gt;
+      &lt;span&gt;aliconnors@example.com&lt;/span&gt;
+      &lt;span&gt;Personal&lt;/span&gt;
+    &lt;/div&gt;
+
+    &lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
+      &lt;md-icon&gt;sms&lt;/md-icon&gt;
+    &lt;/md-button&gt;
+  &lt;/md-list-item&gt;
+
+  &lt;md-list-item class=&quot;md-inset&quot;&gt;
+    &lt;div class=&quot;md-list-text-container&quot;&gt;
+      &lt;span&gt;ali_connors@example.com&lt;/span&gt;
+      &lt;span&gt;Work&lt;/span&gt;
+    &lt;/div&gt;
+  &lt;/md-list-item&gt;
+&lt;/md-list&gt;
+        </code-block>
+      </demo-example>
+
+      <demo-example label="Triple Line">
+        <code-block lang="xml">
+&lt;md-list class=&quot;custom-list md-triple-line&quot;&gt;
+  &lt;md-list-item&gt;
+    &lt;md-avatar&gt;
+      &lt;img src=&quot;https://placeimg.com/40/40/people/1&quot; alt=&quot;People&quot;&gt;
+    &lt;/md-avatar&gt;
+
+    &lt;div class=&quot;md-list-text-container&quot;&gt;
+      &lt;span&gt;Ali Connors&lt;/span&gt;
+      &lt;span&gt;Brunch this weekend?&lt;/span&gt;
+      &lt;p&gt;I&#039;ll be in your neighborhood doing errands...&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
+      &lt;md-icon class=&quot;md-primary&quot;&gt;star&lt;/md-icon&gt;
+    &lt;/md-button&gt;
+
+    &lt;md-divider class=&quot;md-inset&quot;&gt;&lt;/md-divider&gt;
+  &lt;/md-list-item&gt;
+
+  &lt;md-list-item&gt;
+    &lt;md-avatar&gt;
+      &lt;img src=&quot;https://placeimg.com/40/40/people/6&quot; alt=&quot;People&quot;&gt;
+    &lt;/md-avatar&gt;
+
+    &lt;div class=&quot;md-list-text-container&quot;&gt;
+      &lt;span&gt;me, Scott, Jennifer&lt;/span&gt;
+      &lt;span&gt;Summer BBQ&lt;/span&gt;
+      &lt;p&gt;Wish I could come, but I&#039;m out of town ...&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
+      &lt;md-icon&gt;star_border&lt;/md-icon&gt;
+    &lt;/md-button&gt;
+
+    &lt;md-divider class=&quot;md-inset&quot;&gt;&lt;/md-divider&gt;
+  &lt;/md-list-item&gt;
+
+  &lt;md-list-item&gt;
+    &lt;md-avatar&gt;
+      &lt;img src=&quot;https://placeimg.com/40/40/people/5&quot; alt=&quot;People&quot;&gt;
+    &lt;/md-avatar&gt;
+
+    &lt;div class=&quot;md-list-text-container&quot;&gt;
+      &lt;span&gt;Sandra Adams&lt;/span&gt;
+      &lt;span&gt;Oui oui&lt;/span&gt;
+      &lt;p&gt;Do you have Paris recommendations ...&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
+      &lt;md-icon&gt;star_border&lt;/md-icon&gt;
+    &lt;/md-button&gt;
+
+    &lt;md-divider class=&quot;md-inset&quot;&gt;&lt;/md-divider&gt;
+  &lt;/md-list-item&gt;
+
+  &lt;md-list-item&gt;
+    &lt;md-avatar&gt;
+      &lt;img src=&quot;https://placeimg.com/40/40/people/8&quot; alt=&quot;People&quot;&gt;
+    &lt;/md-avatar&gt;
+
+    &lt;div class=&quot;md-list-text-container&quot;&gt;
+      &lt;span&gt;Trevor Hansen&lt;/span&gt;
+      &lt;span&gt;Order confirmation&lt;/span&gt;
+      &lt;p&gt;Thank you for your recent order from ...&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
+      &lt;md-icon&gt;star_border&lt;/md-icon&gt;
+    &lt;/md-button&gt;
+
+    &lt;md-divider class=&quot;md-inset&quot;&gt;&lt;/md-divider&gt;
+  &lt;/md-list-item&gt;
+&lt;/md-list&gt;
+        </code-block>
+
+        <code-block lang="xml">
+&lt;md-list class=&quot;custom-list md-triple-line md-dense&quot;&gt;
+  &lt;md-list-item&gt;
+    &lt;md-avatar&gt;
+      &lt;img src=&quot;https://placeimg.com/40/40/people/1&quot; alt=&quot;People&quot;&gt;
+    &lt;/md-avatar&gt;
+
+    &lt;div class=&quot;md-list-text-container&quot;&gt;
+      &lt;span&gt;Ali Connors&lt;/span&gt;
+      &lt;span&gt;Brunch this weekend?&lt;/span&gt;
+      &lt;p&gt;I&#039;ll be in your neighborhood doing errands...&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
+      &lt;md-icon class=&quot;md-primary&quot;&gt;star&lt;/md-icon&gt;
+    &lt;/md-button&gt;
+
+    &lt;md-divider class=&quot;md-inset&quot;&gt;&lt;/md-divider&gt;
+  &lt;/md-list-item&gt;
+
+  &lt;md-list-item&gt;
+    &lt;md-avatar&gt;
+      &lt;img src=&quot;https://placeimg.com/40/40/people/6&quot; alt=&quot;People&quot;&gt;
+    &lt;/md-avatar&gt;
+
+    &lt;div class=&quot;md-list-text-container&quot;&gt;
+      &lt;span&gt;me, Scott, Jennifer&lt;/span&gt;
+      &lt;span&gt;Summer BBQ&lt;/span&gt;
+      &lt;p&gt;Wish I could come, but I&#039;m out of town ...&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
+      &lt;md-icon&gt;star_border&lt;/md-icon&gt;
+    &lt;/md-button&gt;
+
+    &lt;md-divider class=&quot;md-inset&quot;&gt;&lt;/md-divider&gt;
+  &lt;/md-list-item&gt;
+
+  &lt;md-list-item&gt;
+    &lt;md-avatar&gt;
+      &lt;img src=&quot;https://placeimg.com/40/40/people/5&quot; alt=&quot;People&quot;&gt;
+    &lt;/md-avatar&gt;
+
+    &lt;div class=&quot;md-list-text-container&quot;&gt;
+      &lt;span&gt;Sandra Adams&lt;/span&gt;
+      &lt;span&gt;Oui oui&lt;/span&gt;
+      &lt;p&gt;Do you have Paris recommendations ...&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
+      &lt;md-icon&gt;star_border&lt;/md-icon&gt;
+    &lt;/md-button&gt;
+
+    &lt;md-divider class=&quot;md-inset&quot;&gt;&lt;/md-divider&gt;
+  &lt;/md-list-item&gt;
+
+  &lt;md-list-item&gt;
+    &lt;md-avatar&gt;
+      &lt;img src=&quot;https://placeimg.com/40/40/people/8&quot; alt=&quot;People&quot;&gt;
+    &lt;/md-avatar&gt;
+
+    &lt;div class=&quot;md-list-text-container&quot;&gt;
+      &lt;span&gt;Trevor Hansen&lt;/span&gt;
+      &lt;span&gt;Order confirmation&lt;/span&gt;
+      &lt;p&gt;Thank you for your recent order from ...&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
+      &lt;md-icon&gt;star_border&lt;/md-icon&gt;
+    &lt;/md-button&gt;
+
+    &lt;md-divider class=&quot;md-inset&quot;&gt;&lt;/md-divider&gt;
+  &lt;/md-list-item&gt;
+&lt;/md-list&gt;
+        </code-block>
+
+        <code-block lang="scss">
+.custom-list {
+  .md-list-action {
+    position: absolute;
+    top: 8px;
+    right: 16px;
+    pointer-events: auto;
+    z-index: 2;
+  }
+
+  .md-icon {
+    color: rgba(#000, .26);
+  }
+}
+        </code-block>
+      </demo-example>
+
+      <demo-example label="Expansion List">
+        <code-block lang="xml">
+&lt;md-list&gt;
+  &lt;md-list-item&gt;
+    &lt;md-icon&gt;whatshot&lt;/md-icon&gt;
+    &lt;span&gt;News&lt;/span&gt;
+
+    &lt;md-list-expand&gt;
+      &lt;md-list&gt;
+        &lt;md-list-item class=&quot;md-inset&quot;&gt;World&lt;/md-list-item&gt;
+        &lt;md-list-item class=&quot;md-inset&quot;&gt;Americas&lt;/md-list-item&gt;
+        &lt;md-list-item class=&quot;md-inset&quot;&gt;Europe&lt;/md-list-item&gt;
+      &lt;/md-list&gt;
+    &lt;/md-list-expand&gt;
+  &lt;/md-list-item&gt;
+
+  &lt;md-list-item&gt;
+    &lt;md-icon&gt;videogame_asset&lt;/md-icon&gt;
+    &lt;span&gt;Games&lt;/span&gt;
+
+    &lt;md-list-expand&gt;
+      &lt;md-list&gt;
+        &lt;md-list-item class=&quot;md-inset&quot;&gt;Console&lt;/md-list-item&gt;
+        &lt;md-list-item class=&quot;md-inset&quot;&gt;PC&lt;/md-list-item&gt;
+        &lt;md-list-item class=&quot;md-inset&quot;&gt;Phone&lt;/md-list-item&gt;
+      &lt;/md-list&gt;
+    &lt;/md-list-expand&gt;
+  &lt;/md-list-item&gt;
+
+  &lt;md-list-item&gt;
+    &lt;md-icon&gt;video_library&lt;/md-icon&gt;
+    &lt;span&gt;Video&lt;/span&gt;
+
+    &lt;md-list-expand&gt;
+      &lt;md-list&gt;
+        &lt;md-list-item class=&quot;md-inset&quot;&gt;Humor&lt;/md-list-item&gt;
+        &lt;md-list-item class=&quot;md-inset&quot;&gt;Music&lt;/md-list-item&gt;
+        &lt;md-list-item class=&quot;md-inset&quot;&gt;Movies&lt;/md-list-item&gt;
+        &lt;md-list-item class=&quot;md-inset&quot;&gt;TV Shows&lt;/md-list-item&gt;
+      &lt;/md-list&gt;
+    &lt;/md-list-expand&gt;
+  &lt;/md-list-item&gt;
+
+  &lt;md-list-item&gt;
+    &lt;md-icon&gt;shopping_basket&lt;/md-icon&gt;
+    &lt;span&gt;Shop&lt;/span&gt;
+  &lt;/md-list-item&gt;
+&lt;/md-list&gt;
+        </code-block>
+      </demo-example>
+
+      <demo-example label="Complete Example">
+        <code-block lang="xml">
+&lt;div class=&quot;complete-example&quot;&gt;
+  &lt;md-whiteframe md-elevation=&quot;3&quot;&gt;
+    &lt;md-toolbar class=&quot;md-large&quot; v-md-theme=&quot;&#039;light-blue&#039;&quot;&gt;
+      &lt;div class=&quot;md-toolbar-container&quot;&gt;
+        &lt;md-button class=&quot;md-icon-button&quot; @click=&quot;toggleSidenav&quot;&gt;
+          &lt;md-icon&gt;menu&lt;/md-icon&gt;
+        &lt;/md-button&gt;
+
+        &lt;span style=&quot;flex: 1&quot;&gt;&lt;/span&gt;
+
+        &lt;md-button class=&quot;md-icon-button&quot;&gt;
+          &lt;md-icon&gt;search&lt;/md-icon&gt;
+        &lt;/md-button&gt;
+
+        &lt;md-button class=&quot;md-icon-button&quot;&gt;
+          &lt;md-icon&gt;view_module&lt;/md-icon&gt;
+        &lt;/md-button&gt;
+      &lt;/div&gt;
+
+      &lt;div class=&quot;md-toolbar-container&quot;&gt;
+        &lt;h2 class=&quot;md-title&quot;&gt;My Files&lt;/h2&gt;
+
+        &lt;md-button class=&quot;md-fab md-mini&quot;&gt;
+          &lt;md-icon&gt;add&lt;/md-icon&gt;
+        &lt;/md-button&gt;
+      &lt;/div&gt;
+    &lt;/md-toolbar&gt;
+  &lt;/md-whiteframe&gt;
+
+  &lt;md-list class=&quot;md-double-line&quot;&gt;
+    &lt;md-subheader class=&quot;md-inset&quot;&gt;Folders&lt;/md-subheader&gt;
+
+    &lt;md-list-item&gt;
+      &lt;md-avatar class=&quot;md-avatar-icon&quot;&gt;
+        &lt;md-icon&gt;folder&lt;/md-icon&gt;
+      &lt;/md-avatar&gt;
+
+      &lt;div class=&quot;md-list-text-container&quot;&gt;
+        &lt;span&gt;Photos&lt;/span&gt;
+        &lt;p&gt;Jan 9, 2014&lt;/p&gt;
+      &lt;/div&gt;
+
+      &lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
+        &lt;md-icon&gt;info&lt;/md-icon&gt;
+      &lt;/md-button&gt;
+    &lt;/md-list-item&gt;
+
+    &lt;md-list-item&gt;
+      &lt;md-avatar class=&quot;md-avatar-icon&quot;&gt;
+        &lt;md-icon&gt;folder&lt;/md-icon&gt;
+      &lt;/md-avatar&gt;
+
+      &lt;div class=&quot;md-list-text-container&quot;&gt;
+        &lt;span&gt;Recipes&lt;/span&gt;
+        &lt;p&gt;Jan 17, 2014&lt;/p&gt;
+      &lt;/div&gt;
+
+      &lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
+        &lt;md-icon&gt;info&lt;/md-icon&gt;
+      &lt;/md-button&gt;
+    &lt;/md-list-item&gt;
+
+    &lt;md-list-item&gt;
+      &lt;md-avatar class=&quot;md-avatar-icon&quot;&gt;
+        &lt;md-icon&gt;folder&lt;/md-icon&gt;
+      &lt;/md-avatar&gt;
+
+      &lt;div class=&quot;md-list-text-container&quot;&gt;
+        &lt;span&gt;Work&lt;/span&gt;
+        &lt;p&gt;Jan 28, 2014&lt;/p&gt;
+      &lt;/div&gt;
+
+      &lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
+        &lt;md-icon&gt;info&lt;/md-icon&gt;
+      &lt;/md-button&gt;
+
+      &lt;md-divider class=&quot;md-inset&quot;&gt;&lt;/md-divider&gt;
+    &lt;/md-list-item&gt;
+
+    &lt;md-subheader class=&quot;md-inset&quot;&gt;Files&lt;/md-subheader&gt;
+
+    &lt;md-list-item&gt;
+      &lt;md-avatar v-md-theme=&quot;&#039;blue&#039;&quot; class=&quot;md-avatar-icon md-primary&quot;&gt;
+        &lt;md-icon&gt;insert_drive_file&lt;/md-icon&gt;
+      &lt;/md-avatar&gt;
+
+      &lt;div class=&quot;md-list-text-container&quot;&gt;
+        &lt;span&gt;Vacation Itinerary&lt;/span&gt;
+        &lt;p&gt;Jan 20, 2014&lt;/p&gt;
+      &lt;/div&gt;
+
+      &lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
+        &lt;md-icon&gt;info&lt;/md-icon&gt;
+      &lt;/md-button&gt;
+    &lt;/md-list-item&gt;
+
+    &lt;md-list-item&gt;
+      &lt;md-avatar v-md-theme=&quot;&#039;orange&#039;&quot; class=&quot;md-avatar-icon md-primary&quot;&gt;
+        &lt;md-icon&gt;collections&lt;/md-icon&gt;
+      &lt;/md-avatar&gt;
+
+      &lt;div class=&quot;md-list-text-container&quot;&gt;
+        &lt;span&gt;Kitchen Remodel&lt;/span&gt;
+        &lt;p&gt;Jan 10, 2014&lt;/p&gt;
+      &lt;/div&gt;
+
+      &lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
+        &lt;md-icon&gt;info&lt;/md-icon&gt;
+      &lt;/md-button&gt;
+    &lt;/md-list-item&gt;
+
+    &lt;md-list-item&gt;
+      &lt;md-avatar v-md-theme=&quot;&#039;green&#039;&quot; class=&quot;md-avatar-icon md-primary&quot;&gt;
+        &lt;md-icon&gt;view_list&lt;/md-icon&gt;
+      &lt;/md-avatar&gt;
+
+      &lt;div class=&quot;md-list-text-container&quot;&gt;
+        &lt;span&gt;Grocery Shop&lt;/span&gt;
+        &lt;p&gt;Jan 10, 2014&lt;/p&gt;
+      &lt;/div&gt;
+
+      &lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
+        &lt;md-icon&gt;info&lt;/md-icon&gt;
+      &lt;/md-button&gt;
+    &lt;/md-list-item&gt;
+
+    &lt;md-list-item&gt;
+      &lt;md-avatar v-md-theme=&quot;&#039;orange&#039;&quot; class=&quot;md-avatar-icon md-primary&quot;&gt;
+        &lt;md-icon&gt;collections&lt;/md-icon&gt;
+      &lt;/md-avatar&gt;
+
+      &lt;div class=&quot;md-list-text-container&quot;&gt;
+        &lt;span&gt;Weekend Pictures&lt;/span&gt;
+        &lt;p&gt;Jan 10, 2014&lt;/p&gt;
+      &lt;/div&gt;
+
+      &lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
+        &lt;md-icon&gt;info&lt;/md-icon&gt;
+      &lt;/md-button&gt;
+    &lt;/md-list-item&gt;
+  &lt;/md-list&gt;
+
+  &lt;md-sidenav class=&quot;md-left&quot; ref=&quot;sidebar&quot;&gt;
+    &lt;md-toolbar class=&quot;md-account-header&quot; v-md-theme=&quot;&#039;blue&#039;&quot;&gt;
+      &lt;md-list class=&quot;md-transparent&quot;&gt;
+        &lt;md-list-item class=&quot;md-avatar-list&quot;&gt;
+          &lt;md-avatar class=&quot;md-large&quot;&gt;
+            &lt;img src=&quot;https://placeimg.com/64/64/people/8&quot; alt=&quot;People&quot;&gt;
+          &lt;/md-avatar&gt;
+
+          &lt;span style=&quot;flex: 1&quot;&gt;&lt;/span&gt;
+
+          &lt;md-avatar&gt;
+            &lt;img src=&quot;https://placeimg.com/40/40/people/3&quot; alt=&quot;People&quot;&gt;
+          &lt;/md-avatar&gt;
+
+          &lt;md-avatar&gt;
+            &lt;img src=&quot;https://placeimg.com/40/40/people/4&quot; alt=&quot;People&quot;&gt;
+          &lt;/md-avatar&gt;
+        &lt;/md-list-item&gt;
+
+        &lt;md-list-item&gt;
+          &lt;div class=&quot;md-list-text-container&quot;&gt;
+            &lt;span&gt;John Doe&lt;/span&gt;
+            &lt;span&gt;johndoe@email.com&lt;/span&gt;
+          &lt;/div&gt;
+
+          &lt;md-button class=&quot;md-icon-button md-list-action&quot;&gt;
+            &lt;md-icon&gt;arrow_drop_down&lt;/md-icon&gt;
+          &lt;/md-button&gt;
+        &lt;/md-list-item&gt;
+      &lt;/md-list&gt;
+    &lt;/md-toolbar&gt;
+
+    &lt;md-list v-md-theme=&quot;&#039;blue&#039;&quot;&gt;
+      &lt;md-list-item @click=&quot;toggleSidenav&quot; class=&quot;md-primary&quot;&gt;
+        &lt;md-icon&gt;insert_drive_file&lt;/md-icon&gt; &lt;span&gt;My files&lt;/span&gt;
+      &lt;/md-list-item&gt;
+
+      &lt;md-list-item @click=&quot;toggleSidenav&quot;&gt;
+        &lt;md-icon&gt;people&lt;/md-icon&gt; &lt;span&gt;Shared with me&lt;/span&gt;
+      &lt;/md-list-item&gt;
+
+      &lt;md-list-item @click=&quot;toggleSidenav&quot;&gt;
+        &lt;md-icon&gt;access_time&lt;/md-icon&gt; &lt;span&gt;Recent&lt;/span&gt;
+      &lt;/md-list-item&gt;
+
+      &lt;md-list-item @click=&quot;toggleSidenav&quot;&gt;
+        &lt;md-icon&gt;start&lt;/md-icon&gt; &lt;span&gt;Starred&lt;/span&gt;
+      &lt;/md-list-item&gt;
+
+      &lt;md-list-item @click=&quot;toggleSidenav&quot;&gt;
+        &lt;md-icon&gt;delete&lt;/md-icon&gt; &lt;span&gt;Trash&lt;/span&gt;
+      &lt;/md-list-item&gt;
+    &lt;/md-list&gt;
+  &lt;/md-sidenav&gt;
+&lt;/div&gt;
+        </code-block>
+
+        <code-block lang="scss">
+.complete-example {
+  display: flex;
+  flex-flow: column;
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+
+  .md-fab {
+    margin: 0;
+    position: absolute;
+    bottom: -20px;
+    left: 16px;
+    box-shadow: $material-shadow-5dp;
+  }
+
+  .md-toolbar {
+    .md-icon {
+      color: #014e70;
+    }
+  }
+
+  .md-title {
+    color: #fff;
+  }
+
+  .md-list {
+    overflow: auto;
+  }
+
+  .md-list-action .md-icon {
+    color: rgba(#000, .26);
+  }
+
+  .md-avatar-icon .md-icon {
+    color: #fff !important;
+  }
+
+  .md-sidenav .md-list-text-container > :nth-child(2) {
+    color: rgba(#fff, .54);
+  }
+
+  .md-account-header {
+    .md-list-item:hover .md-button:hover {
+      background-color: inherit;
+    }
+
+    .md-avatar-list .md-list-item-container:hover {
+      background: none !important;
+    }
+  }
+}
+        </code-block>
+
+        <code-block lang="javascript">
+export default {
+  methods: {
+    toggleSidenav() {
+      this.$refs.sidebar.toggle();
+    }
+  }
+};
+        </code-block>
+      </demo-example>
     </div>
 
     <div slot="api">
@@ -713,11 +1410,6 @@
 
 <script>
   export default {
-    data() {
-      return {
-        sidenavVisible: false
-      };
-    },
     methods: {
       toggleSidenav() {
         this.$refs.sidebar.toggle();
diff --git a/docs/src/pages/components/Tabs.vue b/docs/src/pages/components/Tabs.vue
index 54d453f..c8e59a9 100644
--- a/docs/src/pages/components/Tabs.vue
+++ b/docs/src/pages/components/Tabs.vue
@@ -151,11 +151,212 @@
     </div>
 
     <div slot="code">
-      <h2>Code</h2>
-      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt debitis magni dolorem praesentium labore velit repudiandae nostrum culpa quod assumenda. Dolores ipsum, explicabo quasi eius architecto esse ratione natus iure.</p>
-      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt debitis magni dolorem praesentium labore velit repudiandae nostrum culpa quod assumenda. Dolores ipsum, explicabo quasi eius architecto esse ratione natus iure.</p>
-      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt debitis magni dolorem praesentium labore velit repudiandae nostrum culpa quod assumenda. Dolores ipsum, explicabo quasi eius architecto esse ratione natus iure.</p>
-      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt debitis magni dolorem praesentium labore velit repudiandae nostrum culpa quod assumenda. Dolores ipsum, explicabo quasi eius architecto esse ratione natus iure.</p>
+      <demo-example label="Default - Grey Theme" body-theme="grey">
+        <code-block lang="xml">
+&lt;md-tabs&gt;
+  &lt;md-tab id=&quot;movies&quot; md-label=&quot;Movies&quot;&gt;
+    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.&lt;/p&gt;
+  &lt;/md-tab&gt;
+
+  &lt;md-tab id=&quot;music&quot; md-label=&quot;Music&quot;&gt;
+    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.&lt;/p&gt;
+    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.&lt;/p&gt;
+  &lt;/md-tab&gt;
+
+  &lt;md-tab id=&quot;books&quot; md-label=&quot;Books&quot;&gt;
+    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.&lt;/p&gt;
+  &lt;/md-tab&gt;
+
+  &lt;md-tab id=&quot;pictures&quot; md-label=&quot;Pictures&quot;&gt;
+    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.&lt;/p&gt;
+  &lt;/md-tab&gt;
+&lt;/md-tabs&gt;
+        </code-block>
+      </demo-example>
+
+      <demo-example label="Fixed - Accent Color">
+        <code-block lang="xml">
+&lt;md-tabs md-fixed class=&quot;md-accent&quot;&gt;
+  &lt;md-tab md-label=&quot;Movies&quot;&gt;
+    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.&lt;/p&gt;
+  &lt;/md-tab&gt;
+
+  &lt;md-tab md-label=&quot;Music&quot;&gt;
+    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.&lt;/p&gt;
+    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.&lt;/p&gt;
+  &lt;/md-tab&gt;
+
+  &lt;md-tab md-label=&quot;Books&quot;&gt;
+    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.&lt;/p&gt;
+  &lt;/md-tab&gt;
+
+  &lt;md-tab md-label=&quot;Pictures&quot;&gt;
+    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.&lt;/p&gt;
+  &lt;/md-tab&gt;
+&lt;/md-tabs&gt;
+        </code-block>
+      </demo-example>
+
+      <demo-example label="With icons and text - Teal Theme" body-theme="teal">
+        <code-block lang="xml">
+&lt;md-tabs md-fixed&gt;
+  &lt;md-tab md-label=&quot;Movies&quot; md-icon=&quot;ondemand_video&quot;&gt;
+    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.&lt;/p&gt;
+  &lt;/md-tab&gt;
+
+  &lt;md-tab md-label=&quot;Music&quot; md-icon=&quot;music_note&quot;&gt;
+    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.&lt;/p&gt;
+    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.&lt;/p&gt;
+  &lt;/md-tab&gt;
+
+  &lt;md-tab md-label=&quot;Books&quot; md-icon=&quot;books&quot;&gt;
+    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.&lt;/p&gt;
+  &lt;/md-tab&gt;
+
+  &lt;md-tab md-label=&quot;Pictures&quot; md-icon=&quot;photo&quot;&gt;
+    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.&lt;/p&gt;
+  &lt;/md-tab&gt;
+&lt;/md-tabs>
+        </code-block>
+      </demo-example>
+
+      <demo-example label="Centered with only icon - Transparent Color">
+        <code-block lang="xml">
+&lt;md-tabs md-centered class=&quot;md-transparent&quot;&gt;
+  &lt;md-tab md-icon=&quot;phone&quot;&gt;
+    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.&lt;/p&gt;
+  &lt;/md-tab&gt;
+
+  &lt;md-tab md-icon=&quot;favorite&quot;&gt;
+    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.&lt;/p&gt;
+    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.&lt;/p&gt;
+  &lt;/md-tab&gt;
+
+  &lt;md-tab md-icon=&quot;near_me&quot;&gt;
+    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.&lt;/p&gt;
+  &lt;/md-tab&gt;
+&lt;/md-tabs&gt;
+        </code-block>
+      </demo-example>
+
+      <demo-example label="Fixed with only icon - Default Theme">
+        <code-block lang="xml">
+&lt;md-tabs md-fixed&gt;
+  &lt;md-tab md-icon=&quot;phone&quot;&gt;
+    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.&lt;/p&gt;
+  &lt;/md-tab&gt;
+
+  &lt;md-tab md-icon=&quot;favorite&quot;&gt;
+    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.&lt;/p&gt;
+    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.&lt;/p&gt;
+  &lt;/md-tab&gt;
+
+  &lt;md-tab md-icon=&quot;near_me&quot;&gt;
+    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.&lt;/p&gt;
+  &lt;/md-tab&gt;
+&lt;/md-tabs&gt;
+        </code-block>
+      </demo-example>
+
+      <demo-example label="Playground">
+        <code-block lang="xml">
+&lt;div class=&quot;playground&quot;&gt;
+  &lt;md-subheader&gt;Tabs Attributes&lt;/md-subheader&gt;
+  &lt;md-checkbox id=&quot;fixed&quot; v-model=&quot;playground.fixed&quot;&gt;Fixed&lt;/md-checkbox&gt;
+  &lt;md-checkbox id=&quot;centered&quot; v-model=&quot;playground.centered&quot;&gt;Centered&lt;/md-checkbox&gt;
+  &lt;md-input-container&gt;
+    &lt;label for=&quot;shadow&quot;&gt;Shadow&lt;/label&gt;
+    &lt;md-input type=&quot;number&quot; id=&quot;shadow&quot; v-model=&quot;playground.shadow&quot; min=&quot;0&quot; max=&quot;24&quot;&gt;&lt;/md-input&gt;
+  &lt;/md-input-container&gt;
+
+  &lt;md-subheader&gt;Theme&lt;/md-subheader&gt;
+  &lt;md-radio v-model=&quot;playground.theme&quot; id=&quot;theme1&quot; name=&quot;theme&quot; md-value=&quot;default&quot;&gt;Default&lt;/md-radio&gt;
+  &lt;md-radio v-model=&quot;playground.theme&quot; id=&quot;theme2&quot; name=&quot;theme&quot; md-value=&quot;green&quot;&gt;Green&lt;/md-radio&gt;
+  &lt;md-radio v-model=&quot;playground.theme&quot; id=&quot;theme3&quot; name=&quot;theme&quot; md-value=&quot;cyan&quot;&gt;Cyan&lt;/md-radio&gt;
+  &lt;md-radio v-model=&quot;playground.theme&quot; id=&quot;theme4&quot; name=&quot;theme&quot; md-value=&quot;brown&quot;&gt;Brown&lt;/md-radio&gt;
+
+  &lt;md-subheader&gt;Colors&lt;/md-subheader&gt;
+  &lt;md-radio v-model=&quot;playground.color&quot; id=&quot;color1&quot; name=&quot;color&quot; md-value=&quot;0&quot;&gt;Default&lt;/md-radio&gt;
+  &lt;md-radio v-model=&quot;playground.color&quot; id=&quot;color2&quot; name=&quot;color&quot; md-value=&quot;1&quot;&gt;Accent&lt;/md-radio&gt;
+  &lt;md-radio v-model=&quot;playground.color&quot; id=&quot;color3&quot; name=&quot;color&quot; md-value=&quot;2&quot;&gt;Warn&lt;/md-radio&gt;
+  &lt;md-radio v-model=&quot;playground.color&quot; id=&quot;color4&quot; name=&quot;color&quot; md-value=&quot;3&quot;&gt;Transparent&lt;/md-radio&gt;
+
+  &lt;md-subheader&gt;Second Tab&lt;/md-subheader&gt;
+  &lt;md-checkbox id=&quot;disabled&quot; v-model=&quot;playground.tabs[1].disabled&quot;&gt;Disabled&lt;/md-checkbox&gt;
+  &lt;md-checkbox id=&quot;active&quot; v-model=&quot;playground.tabs[1].active&quot;&gt;Active&lt;/md-checkbox&gt;
+&lt;/div&gt;
+
+&lt;md-tabs
+  :class=&quot;{
+    &#039;md-accent&#039;: playground.color === &#039;1&#039;,
+    &#039;md-warn&#039;: playground.color === &#039;2&#039;,
+    &#039;md-transparent&#039;: playground.color === &#039;3&#039;
+  }&quot;
+  :md-fixed=&quot;playground.fixed&quot;
+  :md-centered=&quot;playground.centered&quot;
+  :md-elevation=&quot;playground.shadow&quot;
+  v-md-theme=&quot;playground.theme&quot;&gt;
+  &lt;md-tab v-for=&quot;(tab, index) in playground.tabs&quot; :md-label=&quot;tab.label&quot; :md-icon=&quot;tab.icon&quot; :md-disabled=&quot;tab.disabled&quot; :md-active=&quot;tab.active&quot;&gt;
+    &lt;md-input-container&gt;
+      &lt;label :for=&quot;&#039;label&#039; + index&quot;&gt;Label&lt;/label&gt;
+      &lt;md-input type=&quot;text&quot; :id=&quot;&#039;label&#039; + index&quot; v-model=&quot;tab.label&quot;&gt;&lt;/md-input&gt;
+    &lt;/md-input-container&gt;
+
+    &lt;md-input-container&gt;
+      &lt;label :for=&quot;&#039;icon&#039; + index&quot;&gt;Icon&lt;/label&gt;
+      &lt;md-input type=&quot;text&quot; :id=&quot;&#039;icon&#039; + index&quot; v-model=&quot;tab.icon&quot;&gt;&lt;/md-input&gt;
+    &lt;/md-input-container&gt;
+  &lt;/md-tab&gt;
+&lt;/md-tabs&gt;
+        </code-block>
+
+        <code-block lang="scss">
+.playground {
+  padding: 0 16px 16px;
+
+  .md-subheader {
+    padding: 16px 0 0;
+  }
+}
+        </code-block>
+
+        <code-block lang="javascript">
+export default {
+  data() {
+    return {
+      playground: {
+        color: '3',
+        fixed: true,
+        centered: false,
+        shadow: 0,
+        theme: 'default',
+        tabs: [
+          {
+            label: 'Phone',
+            icon: 'phone',
+            active: false,
+            disabled: false
+          },
+          {
+            label: 'Favorites',
+            icon: 'favorite',
+            active: false,
+            disabled: false
+          },
+          {
+            label: 'Near me',
+            icon: 'near_me',
+            active: true,
+            disabled: false
+          }
+        ]
+      },
+      firstTabName: 'Movies'
+    };
+  }
+};
+        </code-block>
+      </demo-example>
     </div>
 
     <div slot="api">
diff --git a/docs/src/pages/components/Toolbar.vue b/docs/src/pages/components/Toolbar.vue
index 10814a3..807544a 100644
--- a/docs/src/pages/components/Toolbar.vue
+++ b/docs/src/pages/components/Toolbar.vue
@@ -197,7 +197,239 @@
     </div>
 
     <div slot="code">
-      <h2>Code</h2>
+      <demo-example label="Default">
+        <code-block lang="xml">
+&lt;md-toolbar&gt;
+  &lt;md-button class=&quot;md-icon-button&quot;&gt;
+    &lt;md-icon&gt;menu&lt;/md-icon&gt;
+  &lt;/md-button&gt;
+
+  &lt;h2 class=&quot;md-title&quot; style=&quot;flex: 1&quot;&gt;Vue Material&lt;/h2&gt;
+
+  &lt;md-button class=&quot;md-icon-button&quot;&gt;
+    &lt;md-icon&gt;favorite&lt;/md-icon&gt;
+  &lt;/md-button&gt;
+&lt;/md-toolbar&gt;
+        </code-block>
+      </demo-example>
+
+      <demo-example label="Dense">
+        <code-block lang="xml">
+&lt;md-toolbar class=&quot;md-dense&quot;&gt;
+  &lt;md-button class=&quot;md-icon-button&quot;&gt;
+    &lt;md-icon&gt;menu&lt;/md-icon&gt;
+  &lt;/md-button&gt;
+
+  &lt;h2 class=&quot;md-title&quot; style=&quot;flex: 1&quot;&gt;Vue Material&lt;/h2&gt;
+
+  &lt;md-button class=&quot;md-icon-button&quot;&gt;
+    &lt;md-icon&gt;favorite&lt;/md-icon&gt;
+  &lt;/md-button&gt;
+&lt;/md-toolbar&gt;
+        </code-block>
+      </demo-example>
+
+      <demo-example label="Medium">
+        <code-block lang="xml">
+&lt;md-toolbar class=&quot;md-medium&quot;&gt;
+  &lt;div class=&quot;md-toolbar-container&quot;&gt;
+    &lt;md-button class=&quot;md-icon-button&quot;&gt;
+      &lt;md-icon&gt;menu&lt;/md-icon&gt;
+    &lt;/md-button&gt;
+
+    &lt;h2 class=&quot;md-title&quot; style=&quot;flex: 1;&quot;&gt;Vue Material&lt;/h2&gt;
+
+    &lt;md-button class=&quot;md-icon-button&quot;&gt;
+      &lt;md-icon&gt;search&lt;/md-icon&gt;
+    &lt;/md-button&gt;
+
+    &lt;md-button class=&quot;md-icon-button&quot;&gt;
+      &lt;md-icon&gt;filter_list&lt;/md-icon&gt;
+    &lt;/md-button&gt;
+  &lt;/div&gt;
+&lt;/md-toolbar&gt;
+        </code-block>
+      </demo-example>
+
+      <demo-example label="Large">
+        <code-block lang="xml">
+&lt;md-toolbar class=&quot;md-large&quot;&gt;
+  &lt;div class=&quot;md-toolbar-container&quot;&gt;
+    &lt;md-button class=&quot;md-icon-button&quot;&gt;
+      &lt;md-icon&gt;menu&lt;/md-icon&gt;
+    &lt;/md-button&gt;
+
+    &lt;span style=&quot;flex: 1;&quot;&gt;&lt;/span&gt;
+
+    &lt;md-button class=&quot;md-icon-button&quot;&gt;
+      &lt;md-icon&gt;search&lt;/md-icon&gt;
+    &lt;/md-button&gt;
+
+    &lt;md-button class=&quot;md-icon-button&quot;&gt;
+      &lt;md-icon&gt;filter_list&lt;/md-icon&gt;
+    &lt;/md-button&gt;
+  &lt;/div&gt;
+
+  &lt;div class=&quot;md-toolbar-container&quot;&gt;
+    &lt;h2 class=&quot;md-title&quot;&gt;Vue Material&lt;/h2&gt;
+  &lt;/div&gt;
+&lt;/md-toolbar&gt;
+        </code-block>
+      </demo-example>
+
+      <demo-example label="Accent, Warn and Transparent Colors">
+        <code-block lang="xml">
+&lt;md-toolbar class=&quot;md-accent&quot;&gt;
+  &lt;md-button class=&quot;md-icon-button&quot;&gt;
+    &lt;md-icon&gt;menu&lt;/md-icon&gt;
+  &lt;/md-button&gt;
+
+  &lt;h2 class=&quot;md-title&quot; style=&quot;flex: 1&quot;&gt;Vue Material&lt;/h2&gt;
+
+  &lt;md-button class=&quot;md-icon-button&quot;&gt;
+    &lt;md-icon&gt;favorite&lt;/md-icon&gt;
+  &lt;/md-button&gt;
+&lt;/md-toolbar&gt;
+        </code-block>
+
+        <code-block lang="xml">
+&lt;md-toolbar class=&quot;md-warn&quot;&gt;
+  &lt;md-button class=&quot;md-icon-button&quot;&gt;
+    &lt;md-icon&gt;menu&lt;/md-icon&gt;
+  &lt;/md-button&gt;
+
+  &lt;h2 class=&quot;md-title&quot; style=&quot;flex: 1&quot;&gt;Vue Material&lt;/h2&gt;
+
+  &lt;md-button&gt;Add&lt;/md-button&gt;
+  &lt;md-button&gt;Remove&lt;/md-button&gt;
+&lt;/md-toolbar&gt;
+        </code-block>
+
+        <code-block lang="xml">
+&lt;md-toolbar class=&quot;md-transparent&quot;&gt;
+  &lt;md-button class=&quot;md-icon-button&quot;&gt;
+    &lt;md-icon&gt;menu&lt;/md-icon&gt;
+  &lt;/md-button&gt;
+
+  &lt;h2 class=&quot;md-title&quot; style=&quot;flex: 1&quot;&gt;Vue Material&lt;/h2&gt;
+
+  &lt;md-button class=&quot;md-raised&quot;&gt;Add&lt;/md-button&gt;
+  &lt;md-button class=&quot;md-raised md-warn&quot;&gt;Remove&lt;/md-button&gt;
+&lt;/md-toolbar&gt;
+        </code-block>
+      </demo-example>
+
+      <demo-example label="Themed">
+        <code-block lang="xml">
+&lt;md-toolbar v-md-theme=&quot;&#039;green&#039;&quot;&gt;
+  &lt;md-button class=&quot;md-icon-button&quot;&gt;
+    &lt;md-icon&gt;menu&lt;/md-icon&gt;
+  &lt;/md-button&gt;
+
+  &lt;h2 class=&quot;md-title&quot; style=&quot;flex: 1&quot;&gt;Vue Material&lt;/h2&gt;
+
+  &lt;md-button class=&quot;md-icon-button&quot;&gt;
+    &lt;md-icon&gt;favorite&lt;/md-icon&gt;
+  &lt;/md-button&gt;
+&lt;/md-toolbar&gt;
+        </code-block>
+
+        <code-block lang="xml">
+&lt;md-toolbar class=&quot;md-large&quot; v-md-theme=&quot;&#039;brown&#039;&quot;&gt;
+  &lt;div class=&quot;md-toolbar-container&quot;&gt;
+    &lt;md-button class=&quot;md-icon-button&quot;&gt;
+      &lt;md-icon&gt;menu&lt;/md-icon&gt;
+    &lt;/md-button&gt;
+
+    &lt;span style=&quot;flex: 1;&quot;&gt;&lt;/span&gt;
+
+    &lt;md-button class=&quot;md-icon-button&quot;&gt;
+      &lt;md-icon&gt;search&lt;/md-icon&gt;
+    &lt;/md-button&gt;
+
+    &lt;md-button class=&quot;md-icon-button&quot;&gt;
+      &lt;md-icon&gt;filter_list&lt;/md-icon&gt;
+    &lt;/md-button&gt;
+  &lt;/div&gt;
+
+  &lt;div class=&quot;md-toolbar-container&quot;&gt;
+    &lt;h2 class=&quot;md-title&quot;&gt;Vue Material&lt;/h2&gt;
+  &lt;/div&gt;
+&lt;/md-toolbar&gt;
+        </code-block>
+
+        <code-block lang="xml">
+&lt;md-toolbar v-md-theme=&quot;&#039;orange&#039;&quot;&gt;
+  &lt;md-button class=&quot;md-icon-button&quot;&gt;
+    &lt;md-icon&gt;menu&lt;/md-icon&gt;
+  &lt;/md-button&gt;
+
+  &lt;h2 class=&quot;md-title&quot; style=&quot;flex: 1&quot;&gt;Vue Material&lt;/h2&gt;
+
+  &lt;md-button&gt;Add&lt;/md-button&gt;
+  &lt;md-button&gt;Remove&lt;/md-button&gt;
+&lt;/md-toolbar&gt;
+        </code-block>
+
+        <code-block lang="xml">
+&lt;md-toolbar v-md-theme=&quot;&#039;blue&#039;&quot;&gt;
+  &lt;md-button class=&quot;md-icon-button&quot;&gt;
+    &lt;md-icon&gt;menu&lt;/md-icon&gt;
+  &lt;/md-button&gt;
+
+  &lt;h2 class=&quot;md-title&quot; style=&quot;flex: 1&quot;&gt;Vue Material&lt;/h2&gt;
+
+  &lt;md-button class=&quot;md-raised&quot;&gt;Add&lt;/md-button&gt;
+  &lt;md-button class=&quot;md-raised md-warn&quot;&gt;Remove&lt;/md-button&gt;
+&lt;/md-toolbar&gt;
+        </code-block>
+      </demo-example>
+
+      <demo-example label="Complete Example" class="example">
+        <code-block lang="xml">
+&lt;div class=&quot;example&quot;&gt;
+  &lt;md-toolbar class=&quot;md-large&quot; v-md-theme=&quot;&#039;green&#039;&quot;&gt;
+    &lt;div class=&quot;md-toolbar-container&quot;&gt;
+      &lt;md-button class=&quot;md-icon-button&quot;&gt;
+        &lt;md-icon&gt;menu&lt;/md-icon&gt;
+      &lt;/md-button&gt;
+
+      &lt;span style=&quot;flex: 1;&quot;&gt;&lt;/span&gt;
+
+      &lt;md-button class=&quot;md-icon-button&quot;&gt;
+        &lt;md-icon&gt;search&lt;/md-icon&gt;
+      &lt;/md-button&gt;
+
+      &lt;md-button class=&quot;md-icon-button&quot;&gt;
+        &lt;md-icon&gt;filter_list&lt;/md-icon&gt;
+      &lt;/md-button&gt;
+    &lt;/div&gt;
+
+    &lt;div class=&quot;md-toolbar-container&quot;&gt;
+      &lt;h2 class=&quot;md-title&quot;&gt;Vue Material&lt;/h2&gt;
+
+      &lt;md-button class=&quot;md-fab md-fab-bottom-right&quot;&gt;
+        &lt;md-icon&gt;add&lt;/md-icon&gt;
+      &lt;/md-button&gt;
+    &lt;/div&gt;
+  &lt;/md-toolbar&gt;
+&lt;/div&gt;
+        </code-block>
+
+        <code-block lang="scss">
+.example {
+  .md-button.md-fab {
+    margin: 0;
+    right: 56px;
+    bottom: -26px;
+  }
+
+  .md-toolbar {
+    margin-bottom: 50px;
+  }
+}
+        </code-block>
+      </demo-example>
     </div>
 
     <div slot="api">
@@ -211,13 +443,13 @@
     margin-top: 16px;
   }
 
-  .md-button.md-fab {
-    margin: 0;
-    right: 56px;
-    bottom: -26px;
-  }
-
   .example {
+    .md-button.md-fab {
+      margin: 0;
+      right: 56px;
+      bottom: -26px;
+    }
+
     .md-toolbar {
       margin-bottom: 50px;
     }