diff --git a/demos/component-docs/app.css b/demos/component-docs/app.css
index 698ce7a6c7..117060707c 100644
--- a/demos/component-docs/app.css
+++ b/demos/component-docs/app.css
@@ -93,6 +93,40 @@ scroll-content {
   color: #757575;
 }
 
-#demo-hammer {
-  padding: 0 0.4em;
+#card-wireframe {
+  width: 100%;
+  margin-bottom: 2.7em;
 }
+#subtle-footer {
+  background-color: #fff;
+  border-image-source: url(footer-wireframe.png);
+  border-image-repeat: repeat;
+  border-image-width: 100%;
+  border-bottom: 0;
+  border-left: 0;
+  border-right: 0;
+  position: absolute;
+  bottom:0;
+}
+#demo-fab-bottom {
+  padding-top: 3px;
+  z-index: 100;
+}
+#subtle-footer .toolbar-background {
+  background-color: #fff;
+  border-bottom: 0;
+}
+#demo-card-left {
+  font-size: 14px;
+  margin-top: -90px;
+  margin-left: 10px;
+  float: left;
+}
+#demo-card-right {
+  font-size: 14px;
+  margin-top: -90px;
+  float: right;
+  margin-right: 10px;
+
+
+}
\ No newline at end of file
diff --git a/demos/component-docs/buttons/buttons.ts b/demos/component-docs/buttons/buttons.ts
index dcf0084f9a..96b91054ef 100644
--- a/demos/component-docs/buttons/buttons.ts
+++ b/demos/component-docs/buttons/buttons.ts
@@ -18,6 +18,15 @@ export class BlockButtonsPage {
     }
 }
 
+@Page({
+  templateUrl: 'buttons/clear.html',
+})
+export class ClearButtonsPage {
+    constructor() {
+
+    }
+}
+
 @Page({
   templateUrl: 'buttons/full.html',
 })
@@ -69,5 +78,14 @@ export class ButtonSizesPage {
 export class IconButtonsPage {
     constructor() {
 
+    }
+}
+
+@Page({
+  templateUrl: 'buttons/components.html',
+})
+export class ButtonsInComponentsPage {
+    constructor() {
+
     }
 }
\ No newline at end of file
diff --git a/demos/component-docs/buttons/clear.html b/demos/component-docs/buttons/clear.html
new file mode 100644
index 0000000000..3acd89b5c5
--- /dev/null
+++ b/demos/component-docs/buttons/clear.html
@@ -0,0 +1,25 @@
+<ion-navbar *navbar>
+  <ion-title>Clear Buttons</ion-title>
+</ion-navbar>
+
+<ion-content padding class="has-header components-demo">
+  <p>
+    <button light clear>Light</button>
+  </p>
+
+  <p>
+    <button clear>Default</button>
+  </p>
+
+  <p>
+    <button secondary clear>Secondary</button>
+  </p>
+
+  <p>
+    <button danger clear>Danger</button>
+  </p>
+
+  <p>
+    <button dark clear>Dark</button>
+  </p>
+</ion-content>
diff --git a/demos/component-docs/buttons/components.html b/demos/component-docs/buttons/components.html
new file mode 100644
index 0000000000..07ff414076
--- /dev/null
+++ b/demos/component-docs/buttons/components.html
@@ -0,0 +1,50 @@
+<ion-navbar *navbar>
+
+  <ion-title>Buttons</ion-title>
+
+  <ion-nav-items primary>
+    <button>
+      <icon contact></icon>
+    </button>
+  </ion-nav-items>
+  <ion-nav-items secondary>
+  <button>
+    <icon search></icon>
+  </button>
+  </ion-nav-items>
+
+</ion-navbar>
+
+<ion-content padding class="has-header components-demo">
+  
+  <div id="mock-card">
+    <img src="card-wireframe.png" id="card-wireframe">
+    <button clear id="demo-card-left">Like</button>
+    <button clear id="demo-card-right">Comment</button>
+  </div>
+
+  <ion-list>
+
+    <ion-item>
+      Inner Button
+      <button item-right outline>Outline</button>
+    </ion-item>
+
+    <ion-item>
+      Left Icon Button
+      <button item-right outline>
+        <icon star></icon>
+        Left Icon
+      </button>
+    </ion-item>
+
+    <ion-item>
+      Right Icon Button
+      <button item-right outline>
+        Right Icon
+        <icon star></icon>
+      </button>
+    </ion-item>
+
+  </ion-list>
+</ion-content>
diff --git a/demos/component-docs/buttons/fab.html b/demos/component-docs/buttons/fab.html
index e9bd5a9bef..deada245ae 100644
--- a/demos/component-docs/buttons/fab.html
+++ b/demos/component-docs/buttons/fab.html
@@ -13,12 +13,12 @@
     <button fab danger fab-top fab-right>
       <icon is-active="false" mic></icon>
     </button>
-    <button fab dark fab-bottom fab-center>
+    <button fab dark fab-bottom fab-center id="demo-fab-bottom">
       <icon is-active="false" heart></icon>
     </button>
   </p>
 </ion-content>
 
-
-
+<ion-toolbar id="subtle-footer">
+</ion-toolbar>
 
diff --git a/demos/component-docs/card-wireframe.png b/demos/component-docs/card-wireframe.png
new file mode 100644
index 0000000000..f071564311
Binary files /dev/null and b/demos/component-docs/card-wireframe.png differ
diff --git a/demos/component-docs/footer-wireframe.png b/demos/component-docs/footer-wireframe.png
new file mode 100644
index 0000000000..ff518e6df4
Binary files /dev/null and b/demos/component-docs/footer-wireframe.png differ
diff --git a/demos/component-docs/helpers.ts b/demos/component-docs/helpers.ts
index e65f250883..c60af44fb9 100644
--- a/demos/component-docs/helpers.ts
+++ b/demos/component-docs/helpers.ts
@@ -2,12 +2,14 @@ import {ActionSheetPage} from 'actionSheet/actionSheet';
 
 import {ButtonsPage,
         BlockButtonsPage,
+        ClearButtonsPage,
         FullButtonsPage,
         OutlineButtonsPage,
         RoundButtonsPage,
         FabPage,
         ButtonSizesPage,
-        IconButtonsPage} from 'buttons/buttons';
+        IconButtonsPage,
+        ButtonsInComponentsPage} from 'buttons/buttons';
 
 import {CardsPage} from 'cards/cards';
 import {FormsPage} from 'forms/forms';
@@ -30,10 +32,12 @@ export function getPageFor(hash) {
         'action-sheets': ActionSheetPage,
         'buttons': ButtonsPage,
         'block-buttons': BlockButtonsPage,
+        'clear-buttons': ClearButtonsPage,
         'full-buttons': FullButtonsPage,
         'outline-buttons': OutlineButtonsPage,
         'round-buttons': RoundButtonsPage,
         'floating-action-buttons': FabPage,
+        'buttons-in-components': ButtonsInComponentsPage,
         'button-sizes': ButtonSizesPage,
         'icon-buttons': IconButtonsPage,
         'cards': CardsPage,