diff --git a/docs/src/pages/components/Whiteframe.vue b/docs/src/pages/components/Whiteframe.vue
index 7f665a8..abb1dd5 100644
--- a/docs/src/pages/components/Whiteframe.vue
+++ b/docs/src/pages/components/Whiteframe.vue
@@ -1,82 +1,107 @@
 <template>
-  <demo-page label="Components - Whiteframe">
-    <div slot="examples" class="whiteframe-list">
-      <demo-example label="Default">
-        <md-whiteframe md-elevation="1">1dp</md-whiteframe>
-        <md-whiteframe md-elevation="2">2dp</md-whiteframe>
-        <md-whiteframe md-elevation="3">3dp</md-whiteframe>
-        <md-whiteframe md-elevation="4">4dp</md-whiteframe>
-        <md-whiteframe md-elevation="5">5dp</md-whiteframe>
-        <md-whiteframe md-elevation="6">6dp</md-whiteframe>
-        <md-whiteframe md-elevation="7">7dp</md-whiteframe>
-        <md-whiteframe md-elevation="8">8dp</md-whiteframe>
-        <md-whiteframe md-elevation="9">9dp</md-whiteframe>
-        <md-whiteframe md-elevation="10">10dp</md-whiteframe>
-        <md-whiteframe md-elevation="11">11dp</md-whiteframe>
-        <md-whiteframe md-elevation="12">12dp</md-whiteframe>
-        <md-whiteframe md-elevation="13">13dp</md-whiteframe>
-        <md-whiteframe md-elevation="14">14dp</md-whiteframe>
-        <md-whiteframe md-elevation="15">15dp</md-whiteframe>
-        <md-whiteframe md-elevation="16">16dp</md-whiteframe>
-        <md-whiteframe md-elevation="17">17dp</md-whiteframe>
-        <md-whiteframe md-elevation="18">18dp</md-whiteframe>
-        <md-whiteframe md-elevation="19">19dp</md-whiteframe>
-        <md-whiteframe md-elevation="20">20dp</md-whiteframe>
-        <md-whiteframe md-elevation="21">21dp</md-whiteframe>
-        <md-whiteframe md-elevation="22">22dp</md-whiteframe>
-        <md-whiteframe md-elevation="23">23dp</md-whiteframe>
-        <md-whiteframe md-elevation="24">24dp</md-whiteframe>
-      </demo-example>
-    </div>
+  <page-content page-title="Components - Whiteframe">
+    <docs-component>
+      <div slot="description">
+        <p>The following classes can be applied to change the color palette:</p>
+        <ul class="md-body-2">
+          <li><code>md-accent</code></li>
+          <li><code>md-warn</code></li>
+          <li><code>md-transparent</code></li>
+        </ul>
+      </div>
 
-    <div slot="code">
-      <demo-example label="Default">
-        <code-block lang="xml">
-&lt;md-whiteframe md-elevation=&quot;1&quot;&gt;1dp&lt;/md-whiteframe&gt;
-&lt;md-whiteframe md-elevation=&quot;2&quot;&gt;2dp&lt;/md-whiteframe&gt;
-&lt;md-whiteframe md-elevation=&quot;3&quot;&gt;3dp&lt;/md-whiteframe&gt;
-&lt;md-whiteframe md-elevation=&quot;4&quot;&gt;4dp&lt;/md-whiteframe&gt;
-&lt;md-whiteframe md-elevation=&quot;5&quot;&gt;5dp&lt;/md-whiteframe&gt;
-&lt;md-whiteframe md-elevation=&quot;6&quot;&gt;6dp&lt;/md-whiteframe&gt;
-&lt;md-whiteframe md-elevation=&quot;7&quot;&gt;7dp&lt;/md-whiteframe&gt;
-&lt;md-whiteframe md-elevation=&quot;8&quot;&gt;8dp&lt;/md-whiteframe&gt;
-&lt;md-whiteframe md-elevation=&quot;9&quot;&gt;9dp&lt;/md-whiteframe&gt;
-&lt;md-whiteframe md-elevation=&quot;10&quot;&gt;10dp&lt;/md-whiteframe&gt;
-&lt;md-whiteframe md-elevation=&quot;11&quot;&gt;11dp&lt;/md-whiteframe&gt;
-&lt;md-whiteframe md-elevation=&quot;12&quot;&gt;12dp&lt;/md-whiteframe&gt;
-&lt;md-whiteframe md-elevation=&quot;13&quot;&gt;13dp&lt;/md-whiteframe&gt;
-&lt;md-whiteframe md-elevation=&quot;14&quot;&gt;14dp&lt;/md-whiteframe&gt;
-&lt;md-whiteframe md-elevation=&quot;15&quot;&gt;15dp&lt;/md-whiteframe&gt;
-&lt;md-whiteframe md-elevation=&quot;16&quot;&gt;16dp&lt;/md-whiteframe&gt;
-&lt;md-whiteframe md-elevation=&quot;17&quot;&gt;17dp&lt;/md-whiteframe&gt;
-&lt;md-whiteframe md-elevation=&quot;18&quot;&gt;18dp&lt;/md-whiteframe&gt;
-&lt;md-whiteframe md-elevation=&quot;19&quot;&gt;19dp&lt;/md-whiteframe&gt;
-&lt;md-whiteframe md-elevation=&quot;20&quot;&gt;20dp&lt;/md-whiteframe&gt;
-&lt;md-whiteframe md-elevation=&quot;21&quot;&gt;21dp&lt;/md-whiteframe&gt;
-&lt;md-whiteframe md-elevation=&quot;22&quot;&gt;22dp&lt;/md-whiteframe&gt;
-&lt;md-whiteframe md-elevation=&quot;23&quot;&gt;23dp&lt;/md-whiteframe&gt;
-&lt;md-whiteframe md-elevation=&quot;24&quot;&gt;24dp&lt;/md-whiteframe&gt;
-        </code-block>
-      </demo-example>
-    </div>
+      <div slot="api">
+        <api-table name="md-whiteframe">
+          <md-table slot="properties">
+            <md-table-header>
+              <md-table-row>
+                <md-table-head>Name</md-table-head>
+                <md-table-head>Type</md-table-head>
+                <md-table-head>Description</md-table-head>
+              </md-table-row>
+            </md-table-header>
 
-    <div slot="api">
+            <md-table-body>
+              <md-table-row>
+                <md-table-cell>md-elevation</md-table-cell>
+                <md-table-cell><code>Number</code></md-table-cell>
+                <md-table-cell>The amount of elevation. From 0 to 24. <br>Default: <code>1</code></md-table-cell>
+              </md-table-row>
+            </md-table-body>
+          </md-table>
+        </api-table>
+      </div>
 
-    </div>
-  </demo-page>
+      <div slot="example">
+        <example-box card-title="Default">
+          <div slot="demo">
+            <md-whiteframe>1dp</md-whiteframe>
+            <md-whiteframe md-elevation="2">2dp</md-whiteframe>
+            <md-whiteframe md-elevation="3">3dp</md-whiteframe>
+            <md-whiteframe md-elevation="4">4dp</md-whiteframe>
+            <md-whiteframe md-elevation="5">5dp</md-whiteframe>
+            <md-whiteframe md-elevation="6">6dp</md-whiteframe>
+            <md-whiteframe md-elevation="7">7dp</md-whiteframe>
+            <md-whiteframe md-elevation="8">8dp</md-whiteframe>
+            <md-whiteframe md-elevation="9">9dp</md-whiteframe>
+            <md-whiteframe md-elevation="10">10dp</md-whiteframe>
+            <md-whiteframe md-elevation="11">11dp</md-whiteframe>
+            <md-whiteframe md-elevation="12">12dp</md-whiteframe>
+            <md-whiteframe md-elevation="13">13dp</md-whiteframe>
+            <md-whiteframe md-elevation="14">14dp</md-whiteframe>
+            <md-whiteframe md-elevation="15">15dp</md-whiteframe>
+            <md-whiteframe md-elevation="16">16dp</md-whiteframe>
+            <md-whiteframe md-elevation="17">17dp</md-whiteframe>
+            <md-whiteframe md-elevation="18">18dp</md-whiteframe>
+            <md-whiteframe md-elevation="19">19dp</md-whiteframe>
+            <md-whiteframe md-elevation="20">20dp</md-whiteframe>
+            <md-whiteframe md-elevation="21">21dp</md-whiteframe>
+            <md-whiteframe md-elevation="22">22dp</md-whiteframe>
+            <md-whiteframe md-elevation="23">23dp</md-whiteframe>
+            <md-whiteframe md-elevation="24">24dp</md-whiteframe>
+          </div>
+
+          <div slot="code">
+            <code-block lang="xml">
+              &lt;md-whiteframe&gt;1dp&lt;/md-whiteframe&gt;
+              &lt;md-whiteframe md-elevation=&quot;2&quot;&gt;2dp&lt;/md-whiteframe&gt;
+              &lt;md-whiteframe md-elevation=&quot;3&quot;&gt;3dp&lt;/md-whiteframe&gt;
+              &lt;md-whiteframe md-elevation=&quot;4&quot;&gt;4dp&lt;/md-whiteframe&gt;
+              &lt;md-whiteframe md-elevation=&quot;5&quot;&gt;5dp&lt;/md-whiteframe&gt;
+              &lt;md-whiteframe md-elevation=&quot;6&quot;&gt;6dp&lt;/md-whiteframe&gt;
+              &lt;md-whiteframe md-elevation=&quot;7&quot;&gt;7dp&lt;/md-whiteframe&gt;
+              &lt;md-whiteframe md-elevation=&quot;8&quot;&gt;8dp&lt;/md-whiteframe&gt;
+              &lt;md-whiteframe md-elevation=&quot;9&quot;&gt;9dp&lt;/md-whiteframe&gt;
+              &lt;md-whiteframe md-elevation=&quot;10&quot;&gt;10dp&lt;/md-whiteframe&gt;
+              &lt;md-whiteframe md-elevation=&quot;11&quot;&gt;11dp&lt;/md-whiteframe&gt;
+              &lt;md-whiteframe md-elevation=&quot;12&quot;&gt;12dp&lt;/md-whiteframe&gt;
+              &lt;md-whiteframe md-elevation=&quot;13&quot;&gt;13dp&lt;/md-whiteframe&gt;
+              &lt;md-whiteframe md-elevation=&quot;14&quot;&gt;14dp&lt;/md-whiteframe&gt;
+              &lt;md-whiteframe md-elevation=&quot;15&quot;&gt;15dp&lt;/md-whiteframe&gt;
+              &lt;md-whiteframe md-elevation=&quot;16&quot;&gt;16dp&lt;/md-whiteframe&gt;
+              &lt;md-whiteframe md-elevation=&quot;17&quot;&gt;17dp&lt;/md-whiteframe&gt;
+              &lt;md-whiteframe md-elevation=&quot;18&quot;&gt;18dp&lt;/md-whiteframe&gt;
+              &lt;md-whiteframe md-elevation=&quot;19&quot;&gt;19dp&lt;/md-whiteframe&gt;
+              &lt;md-whiteframe md-elevation=&quot;20&quot;&gt;20dp&lt;/md-whiteframe&gt;
+              &lt;md-whiteframe md-elevation=&quot;21&quot;&gt;21dp&lt;/md-whiteframe&gt;
+              &lt;md-whiteframe md-elevation=&quot;22&quot;&gt;22dp&lt;/md-whiteframe&gt;
+              &lt;md-whiteframe md-elevation=&quot;23&quot;&gt;23dp&lt;/md-whiteframe&gt;
+              &lt;md-whiteframe md-elevation=&quot;24&quot;&gt;24dp&lt;/md-whiteframe&gt;
+            </code-block>
+          </div>
+        </example-box>
+      </div>
+    </docs-component>
+  </page-content>
 </template>
 
-<style lang="scss">
-  .whiteframe-list .demo-example .demo-example-body {
-    padding-bottom: 48px;
-
-    .md-whiteframe {
-      width: 100px;
-      height: 100px;
-      margin: 24px 12px 12px 24px;
-      display: inline-flex;
-      justify-content: center;
-      align-items: center;
-    }
+<style lang="scss" scoped>
+  .md-whiteframe {
+    width: 100px;
+    height: 100px;
+    margin: 24px 12px 12px 24px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
   }
 </style>