diff --git a/core/src/components/action-sheet/test/preview/index.html b/core/src/components/action-sheet/test/preview/index.html
new file mode 100644
index 0000000000..2ab8f8f76f
--- /dev/null
+++ b/core/src/components/action-sheet/test/preview/index.html
@@ -0,0 +1,365 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Action Sheet</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Action Sheet</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content padding>
+      <ion-action-sheet-controller></ion-action-sheet-controller>
+
+      <ion-button expand="block" id="basic" onclick="presentBasic()">Basic</ion-button>
+      <ion-button expand="block" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</ion-button>
+      <ion-button expand="block" id="alertFromActionSheet" onclick="presentAlert()">Alert from Action Sheet</ion-button>
+      <ion-button expand="block" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</ion-button>
+      <ion-button expand="block" id="scrollWithoutCancel" onclick="presentScrollNoCancel()">Scroll Without Cancel</ion-button>
+      <ion-button expand="block" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</ion-button>
+      <ion-button expand="block" id="icons" onclick="presentIcons()">Icons</ion-button>
+      <ion-button expand="block" id="cssClass" onclick="presentWithCssClass()">Custom CSS Class</ion-button>
+
+    </ion-content>
+
+  </ion-app>
+
+  <script>
+    window.addEventListener('ionActionSheetDidDismiss', function(e){console.log('didDismiss', e)})
+
+    async function presentBasic() {
+      const mode = Ionic.mode;
+
+      const actionSheetController = document.querySelector('ion-action-sheet-controller');
+      await actionSheetController.componentOnReady();
+      const actionSheetElement = await actionSheetController.create({
+        title: "Albums",
+        buttons: [{
+          text: 'Delete',
+          role: 'destructive',
+          icon: 'trash',
+          handler: () => {
+            console.log('Delete clicked');
+          }
+        }, {
+          text: 'Share',
+          icon: 'share',
+          handler: () => {
+            console.log('Share clicked');
+          }
+        }, {
+          text: 'Play (open modal)',
+          icon: 'arrow-dropright-circle',
+          handler: () => {
+            console.log('Play clicked');
+          }
+        }, {
+          text: 'Favorite',
+          icon: mode === 'md' ? 'heart' : null,
+          handler: () => {
+            console.log('Favorite clicked');
+          }
+        }, {
+          text: 'Cancel',
+          icon: mode === 'md' ? 'close' : null,
+          role: 'cancel',
+          handler: () => {
+            console.log('Cancel clicked');
+          }
+        }]
+      });
+      await actionSheetElement.present();
+    }
+
+    async function presentIcons() {
+      const mode = Ionic.mode;
+
+      const actionSheetController = document.querySelector('ion-action-sheet-controller');
+      await actionSheetController.componentOnReady();
+      const actionSheetElement = await actionSheetController.create({
+        title: "Albums",
+        buttons: [{
+          text: 'Delete',
+          role: 'destructive',
+          icon: 'trash',
+          handler: () => {
+            console.log('Delete clicked');
+          }
+        }, {
+          text: 'Share',
+          icon: 'share',
+          handler: () => {
+            console.log('Share clicked');
+          }
+        }, {
+          text: 'Play (open modal)',
+          icon: 'arrow-dropright-circle',
+          handler: () => {
+            console.log('Play clicked');
+          }
+        }, {
+          text: 'Favorite',
+          icon: 'heart',
+          role: 'selected',
+          handler: () => {
+            console.log('Favorite clicked');
+          }
+        }, {
+          text: 'Cancel',
+          role: 'cancel',
+          icon: 'close',
+          handler: () => {
+            console.log('Cancel clicked');
+          }
+        }]
+      })
+      await actionSheetElement.present();
+    }
+
+    async function presentNoBackdropDismiss() {
+      const actionSheetController = document.querySelector('ion-action-sheet-controller');
+      await actionSheetController.componentOnReady();
+      const actionSheetElement = await actionSheetController.create({
+        enableBackdropDismiss: false,
+        buttons: [{
+          text: 'Archive',
+          handler: () => {
+            console.log('Archive clicked');
+          }
+        }, {
+          text: 'Destructive',
+          role: 'destructive',
+          handler: () => {
+            console.log('Destructive clicked');
+          }
+        }, {
+          text: 'Cancel',
+          role: 'cancel',
+          handler: () => {
+            console.log('Cancel clicked');
+          }
+        }]
+      });
+      await actionSheetElement.present();
+    }
+
+    async function presentAlert() {
+      const actionSheetController = document.querySelector('ion-action-sheet-controller');
+      await actionSheetController.componentOnReady();
+      const actionSheetElement = await actionSheetController.create({
+        buttons: [{
+          text: 'Open Alert',
+          handler: () => {
+            console.log('Open Alert clicked');
+          }
+        }, {
+          text: 'Cancel',
+          role: 'cancel',
+          handler: () => {
+            console.log('Cancel clicked');
+          }
+        }]
+      });
+      await actionSheetElement.present();
+    }
+
+    async function presentScroll() {
+      const actionSheetController = document.querySelector('ion-action-sheet-controller');
+      await actionSheetController.componentOnReady();
+      const actionSheetElement = await actionSheetController.create({
+        buttons: [
+          {
+            text: 'Add Reaction',
+            handler: () => {
+              console.log('Add Reaction clicked');
+            }
+          }, {
+            text: 'Copy Text',
+            handler: () => {
+              console.log('Copy Text clicked');
+            }
+          }, {
+            text: 'Share Text',
+            handler: () => {
+              console.log('Share Text clicked');
+            }
+          }, {
+            text: 'Copy Link to Message',
+            handler: () => {
+              console.log('Copy Link to Message clicked');
+            }
+          }, {
+            text: 'Remind Me',
+            handler: () => {
+              console.log('Remind Me clicked');
+            }
+          }, {
+            text: 'Pin File',
+            handler: () => {
+              console.log('Pin File clicked');
+            }
+          }, {
+            text: 'Star File',
+            handler: () => {
+              console.log('Star File clicked');
+            }
+          }, {
+            text: 'Mark Unread',
+            handler: () => {
+              console.log('Mark Unread clicked');
+            }
+          }, {
+            text: 'Edit Title',
+            handler: () => {
+              console.log('Edit Title clicked');
+            }
+          }, {
+            text: 'Save Image',
+            handler: () => {
+              console.log('Save Image clicked');
+            }
+          }, {
+            text: 'Copy Image',
+            handler: () => {
+              console.log('Copy Image clicked');
+            }
+          }, {
+            text: 'Delete File',
+            role: 'destructive',
+            handler: () => {
+              console.log('Delete File clicked');
+            }
+          }, {
+            text: 'Cancel',
+            role: 'cancel', // will always sort to be on the bottom
+            handler: () => {
+              console.log('Cancel clicked');
+            }
+          }
+        ]
+      });
+      await actionSheetElement.present();
+    }
+
+    async function presentScrollNoCancel() {
+      const actionSheetController = document.querySelector('ion-action-sheet-controller');
+      await actionSheetController.componentOnReady();
+      const actionSheetElement = await actionSheetController.create({
+        buttons: [
+          {
+            text: 'Add Reaction',
+            handler: () => {
+              console.log('Add Reaction clicked');
+            }
+          }, {
+            text: 'Copy Text',
+            handler: () => {
+              console.log('Copy Text clicked');
+            }
+          }, {
+            text: 'Share Text',
+            handler: () => {
+              console.log('Share Text clicked');
+            }
+          }, {
+            text: 'Copy Link to Message',
+            handler: () => {
+              console.log('Copy Link to Message clicked');
+            }
+          }, {
+            text: 'Remind Me',
+            handler: () => {
+              console.log('Remind Me clicked');
+            }
+          }, {
+            text: 'Pin File',
+            handler: () => {
+              console.log('Pin File clicked');
+            }
+          }, {
+            text: 'Star File',
+            handler: () => {
+              console.log('Star File clicked');
+            }
+          }, {
+            text: 'Mark Unread',
+            handler: () => {
+              console.log('Mark Unread clicked');
+            }
+          }, {
+            text: 'Edit Title',
+            handler: () => {
+              console.log('Edit Title clicked');
+            }
+          }, {
+            text: 'Save Image',
+            handler: () => {
+              console.log('Save Image clicked');
+            }
+          }, {
+            text: 'Copy Image',
+            handler: () => {
+              console.log('Copy Image clicked');
+            }
+          }, {
+            text: 'Delete File',
+            role: 'destructive',
+            handler: () => {
+              console.log('Delete File clicked');
+            }
+          }
+        ]
+      });
+      await actionSheetElement.present();
+    }
+
+    async function presentCancelOnly() {
+      const actionSheetController = document.querySelector('ion-action-sheet-controller');
+      await actionSheetController.componentOnReady();
+      const actionSheetElement = await actionSheetController.create({
+        buttons: [
+          {
+            text: 'Cancel',
+            role: 'cancel', // will always sort to be on the bottom
+            handler: () => {
+              console.log('Cancel clicked');
+            }
+          }
+        ]
+      });
+      await actionSheetElement.present();
+    }
+
+    async function presentWithCssClass() {
+      const actionSheetController = document.querySelector('ion-action-sheet-controller');
+      await actionSheetController.componentOnReady();
+      const actionSheetElement = await actionSheetController.create({
+        title: "Custom Css Class",
+        cssClass: "my-class my-custom-class",
+        buttons: [
+          {
+            text: 'Test',
+            role: 'test',
+            cssClass: 'my-cancel-button my-custom-button customClass',
+            handler: () => {
+              console.log('Cancel clicked');
+            }
+          }
+        ]
+      });
+      await actionSheetElement.present();
+    }
+
+  </script>
+</body>
+
+</html>
diff --git a/core/src/components/alert/test/preview/index.html b/core/src/components/alert/test/preview/index.html
new file mode 100644
index 0000000000..c40e5dccfc
--- /dev/null
+++ b/core/src/components/alert/test/preview/index.html
@@ -0,0 +1,318 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Alert</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Alert</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content padding>
+        <ion-alert-controller></ion-alert-controller>
+
+        <ion-button id="basic" expand="block" onclick="presentAlert()">Alert</ion-button>
+        <ion-button id="longMessage" expand="block" onclick="presentAlertLongMessage()">Alert Long Message</ion-button>
+        <ion-button id="multipleButtons" expand="block" onclick="presentAlertMultipleButtons()">Multiple Buttons (>2)</ion-button>
+        <ion-button id="noMessage" expand="block" onclick="presentAlertNoMessage()">Alert No Message</ion-button>
+        <ion-button id="confirm" expand="block" onclick="presentAlertConfirm()">Confirm</ion-button>
+        <ion-button id="prompt" expand="block" onclick="presentAlertPrompt()">Prompt</ion-button>
+        <ion-button id="radio" expand="block" onclick="presentAlertRadio()">Radio</ion-button>
+        <ion-button id="checkbox" expand="block" onclick="presentAlertCheckbox()">Checkbox</ion-button>
+        <ion-button expand="block" onclick="presentWithCssClass()">CssClass</ion-button>
+      </ion-content>
+
+  </ion-app>
+
+  <script>
+
+    window.addEventListener('ionAlertDidDismiss', function(e){console.log('didDismiss', e)})
+    window.addEventListener('ionAlertWillDismiss', function(e){console.log('willDismiss', e)})
+
+    async function presentAlert() {
+      const alertController = document.querySelector('ion-alert-controller');
+      await alertController.componentOnReady();
+
+      const alert = await alertController.create({
+        title: 'Alert',
+        subTitle: 'Subtitle',
+        message: 'This is an alert message.',
+        buttons: ['OK']
+      });
+      return await alert.present();
+    }
+
+    async function presentAlertLongMessage() {
+      const alertController = document.querySelector('ion-alert-controller');
+      await alertController.componentOnReady();
+      const alert = await alertController.create({
+        title: 'Alert',
+        message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit diam lorem, a faucibus turpis sagittis eu. In finibus augue in dui varius convallis. Donec vulputate nibh gravida odio vulputate commodo. Suspendisse imperdiet consequat egestas. Nulla feugiat consequat urna eu tincidunt. Cras nec blandit turpis, eu auctor nunc. Pellentesque finibus, magna eu vestibulum imperdiet, arcu ex lacinia massa, eget volutpat quam leo a orci. Etiam mauris est, elementum at feugiat at, dictum in sapien. Mauris efficitur eros sodales convallis egestas. Phasellus eu faucibus nisl. In eu diam vitae libero egestas lacinia. Integer sed convallis metus, nec commodo felis. Duis libero augue, ornare at tempus non, posuere vel augue. Cras mattis dui at tristique aliquam. Phasellus fermentum nibh ligula, porta hendrerit ligula elementum eu. Suspendisse sollicitudin enim at libero iaculis pulvinar. Donec ac massa id purus laoreet rutrum quis eu urna. Mauris luctus erat vel magna porttitor, vel varius erat rhoncus. Donec eu turpis vestibulum, feugiat urna id, gravida mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at lobortis tortor. Nam ultrices volutpat elit, sed pharetra nulla suscipit at. Nunc eu accumsan eros, id auctor libero. Suspendisse potenti. Nam vitae dapibus metus. Maecenas nisi dui, sagittis et condimentum eu, bibendum vel eros. Vivamus malesuada, tortor in accumsan iaculis, urna velit consectetur ante, nec semper sem diam a diam. In et semper ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit, velit vel porttitor euismod, neque risus blandit nulla, non laoreet libero dolor et odio. Nulla enim risus, feugiat eu urna sed, ultrices semper felis. Sed blandit mi diam. Nunc quis mi ligula. Pellentesque a elit eu orci volutpat egestas. Aenean fermentum eleifend quam, ut tincidunt eros tristique et. Nam dapibus tincidunt ligula, id faucibus felis sodales quis. Donec tincidunt lectus ipsum, ac semper tellus cursus ac. Vestibulum nec dui a lectus accumsan vestibulum quis et velit. Aliquam finibus justo et odio euismod, viverra condimentum eros tristique. Sed eget luctus risus. Pellentesque lorem magna, dictum non congue sodales, laoreet eget quam. In sagittis vulputate dolor a ultricies. Donec viverra leo sed ex maximus, in finibus elit gravida. Aliquam posuere vulputate mi. Suspendisse potenti. Nunc consectetur congue arcu, at pharetra dui varius non. Etiam vestibulum congue felis, id ullamcorper neque convallis ultrices. Aenean congue, diam a iaculis mollis, nisl eros maximus arcu, nec hendrerit purus felis porta diam. Nullam vitae ultrices dui, ac dictum sapien. Phasellus eu magna luctus, varius urna id, molestie quam. Nulla in semper tellus. Curabitur lacinia tellus sit amet lacinia dapibus. Sed id condimentum tellus, nec aliquam sapien. Vivamus luctus at ante a tincidunt.',
+        buttons: ['Cancel', 'OK']
+      });
+      return await alert.present();
+    }
+
+    async function presentAlertMultipleButtons() {
+      const alertController = document.querySelector('ion-alert-controller');
+      await alertController.componentOnReady();
+      const alert = await alertController.create({
+        title: 'Alert',
+        subTitle: 'Subtitle',
+        message: 'This is an alert message.',
+        buttons: ['Cancel', 'Open Modal', 'Delete']
+      });
+      return await alert.present();
+    }
+
+    async function presentAlertNoMessage() {
+      const alertController = document.querySelector('ion-alert-controller');
+      await alertController.componentOnReady();
+      const alert = await alertController.create({
+        title: 'Alert',
+        buttons: ['OK']
+      });
+      return await alert.present();
+    }
+
+    async function presentAlertConfirm() {
+      const alertController = document.querySelector('ion-alert-controller');
+      await alertController.componentOnReady();
+      const alert = await alertController.create({
+        title: 'Confirm!',
+        message: 'Message <strong>text</strong>!!!',
+        buttons: [
+          {
+            text: 'Cancel',
+            role: 'cancel',
+            cssClass: 'secondary',
+            handler: (blah) => {
+              console.log('Confirm Cancel: blah');
+            }
+          }, {
+            text: 'Okay',
+            handler: () => {
+              console.log('Confirm Okay')
+            }
+          }
+        ]
+      });
+      return await alert.present();
+    }
+
+    async function presentAlertPrompt() {
+      const alertController = document.querySelector('ion-alert-controller');
+      await alertController.componentOnReady();
+      const alert = await alertController.create({
+        title: 'Prompt!',
+        inputs: [
+          {
+            placeholder: 'Placeholder 1'
+          },
+          {
+            name: 'name2',
+            id: 'name2-id',
+            value: 'hello',
+            placeholder: 'Placeholder 2'
+          },
+          {
+            name: 'name3',
+            value: 'http://ionicframework.com',
+            type: 'url',
+            placeholder: 'Favorite site ever'
+          },
+          // input date with min & max
+          {
+            name: 'name4',
+            type: 'date',
+            min: '2017-03-01',
+            max: '2018-01-12'
+          },
+          // input date without min nor max
+          {
+            name: 'name5',
+            type: 'date'
+          },
+          {
+            name: 'name6',
+            type: 'number',
+            min: -5,
+            max: 10
+          },
+          {
+            name: 'name7',
+            type: 'number'
+          }
+        ],
+        buttons: [
+          {
+            text: 'Cancel',
+            role: 'cancel',
+            cssClass: 'secondary',
+            handler: () => {
+              console.log('Confirm Cancel')
+            }
+          }, {
+            text: 'Ok',
+            handler: () => {
+              console.log('Confirm Ok')
+            }
+          }
+        ]
+      });
+      return await alert.present();
+    }
+
+    async function presentAlertRadio() {
+      const alertController = document.querySelector('ion-alert-controller');
+      await alertController.componentOnReady();
+      const alert = await alertController.create({
+        title: 'Radio',
+        inputs: [
+          {
+            type: 'radio',
+            label: 'Radio 1',
+            value: 'value1',
+            checked: true
+          },
+          {
+            type: 'radio',
+            label: 'Radio 2',
+            value: 'value2'
+          },
+          {
+            type: 'radio',
+            label: 'Radio 3',
+            value: 'value3'
+          },
+          {
+            type: 'radio',
+            label: 'Radio 4',
+            value: 'value4'
+          },
+          {
+            type: 'radio',
+            label: 'Radio 5',
+            value: 'value5'
+          },
+          {
+            type: 'radio',
+            label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ',
+            value: 'value6'
+          }
+        ],
+        buttons: [
+          {
+            text: 'Cancel',
+            role: 'cancel',
+            cssClass: 'secondary',
+            handler: () => {
+              console.log('Confirm Cancel')
+            }
+          }, {
+            text: 'Ok',
+            handler: () => {
+              console.log('Confirm Ok')
+            }
+          }
+        ]
+      });
+      return await alert.present();
+    }
+
+    async function presentAlertCheckbox() {
+
+
+      const alertController = document.querySelector('ion-alert-controller');
+      await alertController.componentOnReady();
+      const alert = await alertController.create({
+        title: 'Checkbox',
+        inputs: [
+          {
+            type: 'checkbox',
+            label: 'Checkbox 1',
+            value: 'value1',
+            checked: true
+          },
+
+          {
+            type: 'checkbox',
+            label: 'Checkbox 2',
+            value: 'value2'
+          },
+
+          {
+            type: 'checkbox',
+            label: 'Checkbox 3',
+            value: 'value3'
+          },
+
+          {
+            type: 'checkbox',
+            label: 'Checkbox 4',
+            value: 'value4'
+          },
+
+          {
+            type: 'checkbox',
+            label: 'Checkbox 5',
+            value: 'value5'
+          },
+
+          {
+            type: 'checkbox',
+            label: 'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6',
+            value: 'value6'
+          }
+        ],
+        buttons: [
+          {
+            text: 'Cancel',
+            role: 'cancel',
+            cssClass: 'secondary',
+            handler: () => {
+              console.log('Confirm Cancel')
+            }
+          }, {
+            text: 'Ok',
+            handler: () => {
+              console.log('Confirm Ok')
+            }
+          }
+        ]
+      });
+      return await alert.present();
+    }
+
+    async function presentWithCssClass() {
+      const alertController = document.querySelector('ion-alert-controller');
+      await alertController.componentOnReady();
+      const alert = await alertController.create({
+        title: 'Alert',
+        subTitle: 'Subtitle',
+        cssClass: 'my-class my-customClass   ',
+        message: 'This is an alert message.',
+        buttons: [ {
+            text: 'Ok',
+            cssClass: 'my-class my-customClass   ',
+            handler: () => {
+              console.log('Confirm Ok')
+            }
+          }]
+      });
+      return await alert.present();
+    }
+
+</script>
+</body>
+
+</html>
diff --git a/core/src/components/avatar/test/preview/index.html b/core/src/components/avatar/test/preview/index.html
new file mode 100644
index 0000000000..10a7b8288b
--- /dev/null
+++ b/core/src/components/avatar/test/preview/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Avatar</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Avatar</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content>
+        <ion-avatar>
+          <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+        </ion-avatar>
+
+        <ion-chip>
+          <ion-avatar>
+            <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+          </ion-avatar>
+          <ion-label>Chip Avatar</ion-label>
+        </ion-chip>
+
+        <ion-item>
+          <ion-avatar slot="start">
+            <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+          </ion-avatar>
+          <ion-label>Item Avatar</ion-label>
+        </ion-item>
+      </ion-content>
+
+  </ion-app>
+</body>
+
+</html>
diff --git a/core/src/components/back-button/test/preview/index.html b/core/src/components/back-button/test/preview/index.html
new file mode 100644
index 0000000000..53b3af5529
--- /dev/null
+++ b/core/src/components/back-button/test/preview/index.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Back Button</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+<body onload="loadFirstPage()">
+  <ion-app>
+    <ion-nav></ion-nav>
+  </ion-app>
+</body>
+
+<script>
+
+  async function loadFirstPage() {
+    const nav = document.querySelector('ion-nav');
+    await nav.componentOnReady();
+    const firstPage = document.createElement('div');
+    firstPage.classList.add('first-page');
+    firstPage.innerHTML = `
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button></ion-back-button>
+          </ion-buttons>
+          <ion-title>Page One</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content padding>
+        <h1>Page One</h1>
+        <ion-button class="next">Go to Page Two</ion-button>
+      </ion-content>
+    `;
+
+    await nav.setRoot(firstPage);
+
+    // okay cool, we're in the DOM now
+    const button = firstPage.querySelector('.next');
+    button.addEventListener('click', async () => {
+      await goToPageTwo(nav);
+    });
+  }
+
+  async function goToPageTwo(nav) {
+    const secondPage = document.createElement('div');
+    secondPage.classList.add('second-page');
+    secondPage.innerHTML = `
+      <ion-header>
+        <ion-toolbar color="secondary">
+          <ion-buttons slot="start">
+            <ion-back-button></ion-back-button>
+          </ion-buttons>
+          <ion-title>Page Two</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content padding>
+        <h1>Page Two</h1>
+        <p>Just an empty <code>ion-back-button</code></p>
+        <ion-button class="next">Go to Page Three</ion-button>
+      </ion-content>
+    `;
+
+    // okay cool, we're in the DOM now
+    await nav.push(secondPage);
+
+    const nextButton = secondPage.querySelector('ion-button .next');
+    nextButton.addEventListener('click', async () => {
+      await goToPageThree(nav);
+    });
+  }
+
+  async function goToPageThree(nav) {
+    const thirdPage = document.createElement('div');
+    thirdPage.classList.add('third-page');
+    thirdPage.innerHTML = `
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button color="danger" text="Text!" icon="add"></ion-back-button>
+          </ion-buttons>
+          <ion-title>Page Three</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content padding>
+        <h1>Page Three</h1>
+        <p>Custom back button</p>
+      </ion-content>
+    `;
+
+    // okay cool, we're in the DOM now
+    await nav.push(thirdPage);
+  }
+</script>
+</html>
diff --git a/core/src/components/badge/test/preview/index.html b/core/src/components/badge/test/preview/index.html
new file mode 100644
index 0000000000..aec583e478
--- /dev/null
+++ b/core/src/components/badge/test/preview/index.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Badge</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Badge</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content">
+        <ion-list>
+          <ion-list-header>Badges Right</ion-list-header>
+          <ion-item>
+            <ion-label>Default Badge</ion-label>
+            <ion-badge slot="end">00</ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Primary Badge</ion-label>
+            <ion-badge slot="end" color="primary">11</ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Secondary Badge</ion-label>
+            <ion-badge slot="end" color="secondary">22</ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Tertiary Badge</ion-label>
+            <ion-badge slot="end" color="tertiary">33</ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Success Badge</ion-label>
+            <ion-badge slot="end" color="success">44</ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Warning Badge</ion-label>
+            <ion-badge slot="end" color="warning">55</ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Danger Badge</ion-label>
+            <ion-badge slot="end" color="danger">66</ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Light Badge</ion-label>
+            <ion-badge slot="end" color="light">77</ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Medium Badge</ion-label>
+            <ion-badge slot="end" color="medium">88</ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Dark Badge</ion-label>
+            <ion-badge slot="end" color="dark">99</ion-badge>
+          </ion-item>
+          <ion-item onclick="toggleColor()">
+            <ion-badge id="toggleColor" slot="end" color="primary">primary</ion-badge>
+            <ion-label>Dynamic Badge Color (toggle)</ion-label>
+          </ion-item>
+        </ion-list>
+
+        <ion-list>
+          <ion-list-header>Badges Left</ion-list-header>
+          <ion-item>
+            <ion-label>Default Badge</ion-label>
+            <ion-badge slot="start">00</ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Primary Badge</ion-label>
+            <ion-badge slot="start" color="primary">11</ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Secondary Badge</ion-label>
+            <ion-badge slot="start" color="secondary">22</ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Tertiary Badge</ion-label>
+            <ion-badge slot="start" color="tertiary">33</ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Success Badge</ion-label>
+            <ion-badge slot="start" color="success">44</ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Warning Badge</ion-label>
+            <ion-badge slot="start" color="warning">55</ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Danger Badge</ion-label>
+            <ion-badge slot="start" color="danger">66</ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Light Badge</ion-label>
+            <ion-badge slot="start" color="light">77</ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Medium Badge</ion-label>
+            <ion-badge slot="start" color="medium">88</ion-badge>
+          </ion-item>
+          <ion-item>
+            <ion-label>Dark Badge</ion-label>
+            <ion-badge slot="start" color="dark">99</ion-badge>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+
+
+  </ion-app>
+
+  <script>
+    const badge = document.querySelector('#toggleColor');
+
+    function toggleColor() {
+      const prev = badge.getAttribute('color');
+      badge.setAttribute('color', prev === 'secondary' ? 'primary' : 'secondary');
+      badge.innerHTML = prev === 'secondary' ? 'primary' : 'secondary';
+    }
+  </script>
+</body>
+</html>
diff --git a/core/src/components/button/test/preview/index.html b/core/src/components/button/test/preview/index.html
new file mode 100644
index 0000000000..f0a5de51b8
--- /dev/null
+++ b/core/src/components/button/test/preview/index.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Button</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+<body>
+  <ion-app>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Button</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content" padding no-bounce text-center>
+        <p>
+          <ion-button>Default</ion-button>
+          <ion-button class="activated">Default.activated</ion-button>
+        </p>
+
+        <p>
+          <ion-button color="primary">Primary</ion-button>
+          <ion-button class="activated" color="primary">Primary.activated</ion-button>
+        </p>
+
+        <p>
+          <ion-button color="secondary">Secondary</ion-button>
+          <ion-button class="activated" color="secondary">Secondary.activated</ion-button>
+        </p>
+
+        <p>
+          <ion-button color="tertiary">Tertiary</ion-button>
+          <ion-button class="activated" color="tertiary">Tertiary.activated</ion-button>
+        </p>
+
+        <p>
+          <ion-button color="success">Success</ion-button>
+          <ion-button class="activated" color="success">Success.activated</ion-button>
+        </p>
+
+        <p>
+          <ion-button color="warning">Warning</ion-button>
+          <ion-button class="activated" color="warning">Warning.activated</ion-button>
+        </p>
+
+        <p>
+          <ion-button color="danger">Danger</ion-button>
+          <ion-button class="activated" color="danger">Danger.activated</ion-button>
+        </p>
+
+        <p>
+          <ion-button color="light">Light</ion-button>
+          <ion-button class="activated" color="light">Light.activated</ion-button>
+        </p>
+
+        <p>
+          <ion-button color="medium">Medium</ion-button>
+          <ion-button class="activated" color="medium">Medium.activated</ion-button>
+        </p>
+
+        <p>
+          <ion-button color="dark">Dark</ion-button>
+          <ion-button class="activated" color="dark">Dark.activated</ion-button>
+        </p>
+
+        <p>
+          <ion-button disabled>Button Disabled</ion-button>
+          <ion-button color="secondary" disabled>Secondary Disabled</ion-button>
+        </p>
+
+        <p>
+          <ion-button id="dynamicColor1" onclick="changeColor(event)">Change Color</ion-button>
+          <ion-button id="dynamicColor2" onclick="changeColor(event)" fill="outline">Change Color</ion-button>
+        </p>
+
+      </ion-content>
+
+  </ion-app>
+
+  <script>
+    testingColors = ['primary', 'secondary', 'danger', 'dark'];
+    testingColorIndex = {
+      dynamicColor1: 0,
+      dynamicColor2: 0
+    };
+
+    function changeColor(ev) {
+      el = ev.currentTarget;
+
+      testingColorIndex[el.id] = (testingColorIndex[el.id] >= testingColors.length - 1 ? 0 : testingColorIndex[el.id] + 1);
+      newColor = testingColors[testingColorIndex[el.id]];
+
+      el.color = newColor;
+    }
+  </script>
+</body>
+</html>
diff --git a/core/src/components/card/test/preview/index.html b/core/src/components/card/test/preview/index.html
new file mode 100644
index 0000000000..837a4589d6
--- /dev/null
+++ b/core/src/components/card/test/preview/index.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Card</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Card</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content">
+        <ion-card>
+          <ion-card-header>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+            <ion-card-title>Card Title</ion-card-title>
+          </ion-card-header>
+
+          <ion-card-content>
+            Keep close to Nature's heart... and break clear away, once in awhile,
+            and climb a mountain or spend a week in the woods. Wash your spirit clean.
+          </ion-card-content>
+        </ion-card>
+
+        <ion-card>
+          <ion-item>
+            <ion-icon name="pin" slot="start"></ion-icon>
+            <ion-label>ion-item in a card, icon left, button right</ion-label>
+            <ion-button fill="outline" slot="end">View</ion-button>
+          </ion-item>
+
+          <ion-card-content>
+            This is content, without any paragraph or header tags,
+            within an ion-card-content element.
+          </ion-card-content>
+        </ion-card>
+
+        <ion-card>
+          <ion-item href="#" class="activated">
+            <ion-icon name="wifi" slot="start"></ion-icon>
+            <ion-label>Card Link Item 1 .activated</ion-label>
+          </ion-item>
+
+          <ion-item href="#">
+            <ion-icon name="wine" slot="start"></ion-icon>
+            <ion-label>Card Link Item 2</ion-label>
+          </ion-item>
+
+          <ion-item class="activated">
+            <ion-icon name="warning" slot="start"></ion-icon>
+            <ion-label>Card Button Item 1 .activated</ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-icon name="walk" slot="start"></ion-icon>
+            <ion-label>Card Button Item 2</ion-label>
+          </ion-item>
+        </ion-card>
+      </ion-content>
+
+  </ion-app>
+  <style>
+    .content {
+      background: #e5e5e5;
+    }
+  </style>
+</body>
+
+</html>
diff --git a/core/src/components/checkbox/test/preview/index.html b/core/src/components/checkbox/test/preview/index.html
new file mode 100644
index 0000000000..314c13c9bc
--- /dev/null
+++ b/core/src/components/checkbox/test/preview/index.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Checkbox</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+<body>
+  <ion-app>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Checkbox</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content">
+        <ion-item>
+          <ion-label>Default</ion-label>
+          <ion-checkbox checked></ion-checkbox>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Primary</ion-label>
+          <ion-checkbox checked color="primary"></ion-checkbox>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Secondary</ion-label>
+          <ion-checkbox checked color="secondary"></ion-checkbox>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Tertiary</ion-label>
+          <ion-checkbox checked color="tertiary"></ion-checkbox>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Success</ion-label>
+          <ion-checkbox checked color="success"></ion-checkbox>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Warning</ion-label>
+          <ion-checkbox checked color="warning"></ion-checkbox>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Danger</ion-label>
+          <ion-checkbox checked color="danger"></ion-checkbox>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Light</ion-label>
+          <ion-checkbox checked color="light"></ion-checkbox>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Medium</ion-label>
+          <ion-checkbox checked color="medium"></ion-checkbox>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Dark</ion-label>
+          <ion-checkbox checked color="dark"></ion-checkbox>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Unchecked by Default</ion-label>
+          <ion-checkbox></ion-checkbox>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Disabled</ion-label>
+          <ion-checkbox disabled></ion-checkbox>
+        </ion-item>
+      </ion-content>
+
+  </ion-app>
+</body>
+</html>
+
+
+
diff --git a/core/src/components/chip/test/preview/index.html b/core/src/components/chip/test/preview/index.html
new file mode 100644
index 0000000000..52c44d3e77
--- /dev/null
+++ b/core/src/components/chip/test/preview/index.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Chip</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+<body>
+  <ion-app>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Chip</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content" padding style="text-align: center">
+        <h2>Text Chips</h2>
+
+        <ion-chip>
+          <ion-label>Default</ion-label>
+        </ion-chip>
+
+        <ion-chip>
+          <ion-label color="secondary">Secondary Label</ion-label>
+        </ion-chip>
+
+        <ion-chip>
+          <ion-label>Another With Longer Text</ion-label>
+        </ion-chip>
+
+        <h2>Color Chips</h2>
+
+        <ion-chip color="primary">
+          <ion-icon name="heart" color="dark"></ion-icon>
+          <ion-label>Primary</ion-label>
+        </ion-chip>
+
+        <ion-chip color="secondary">
+          <ion-label color="dark">Secondary w/ Dark label</ion-label>
+        </ion-chip>
+
+        <ion-chip color="danger">
+          <ion-label>Danger</ion-label>
+        </ion-chip>
+
+        <h2>Icon Chips</h2>
+
+        <ion-chip>
+          <ion-icon name="pin"></ion-icon>
+          <ion-label>Default</ion-label>
+        </ion-chip>
+
+        <ion-chip>
+          <ion-label>Secondary</ion-label>
+          <ion-icon name="pin" color="secondary"></ion-icon>
+        </ion-chip>
+
+        <h2>Avatar Chips</h2>
+
+        <ion-chip>
+          <ion-avatar>
+            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+          </ion-avatar>
+          <ion-label>Default</ion-label>
+        </ion-chip>
+
+        <ion-chip>
+          <ion-label>Right Avatar</ion-label>
+          <ion-avatar>
+            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+          </ion-avatar>
+        </ion-chip>
+
+        <h2>Delete Chips</h2>
+
+        <ion-chip id="chip1">
+          <ion-label>Default</ion-label>
+          <ion-chip-button fill="clear" onclick="del('chip1')" class="my-custom-chip">
+            <ion-icon name="close-circle"></ion-icon>
+          </ion-chip-button>
+        </ion-chip>
+
+        <ion-chip id="chip2">
+          <ion-icon name="pin"></ion-icon>
+          <ion-label>With Icon</ion-label>
+          <ion-chip-button onclick="del('chip2')">
+            <ion-icon name="close"></ion-icon>
+          </ion-chip-button>
+        </ion-chip>
+
+        <ion-chip id="chip3">
+          <ion-avatar>
+            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+          </ion-avatar>
+          <ion-label>With Avatar</ion-label>
+          <ion-chip-button fill="clear" color="dark" onclick="del('chip3')">
+            <ion-icon name="close-circle"></ion-icon>
+          </ion-chip-button>
+        </ion-chip>
+
+        <ion-chip color="primary" id="chip4">
+          <ion-icon name="pin"></ion-icon>
+          <ion-label>Primary</ion-label>
+          <ion-chip-button fill="clear" onclick="del('chip4')">
+            <ion-icon name="close-circle"></ion-icon>
+          </ion-chip-button>
+        </ion-chip>
+
+        <ion-item>
+          <ion-label>Chip Item</ion-label>
+          <ion-chip slot="end" id="chip5">
+            <ion-icon name="pin" color="primary"></ion-icon>
+            <ion-label>Default</ion-label>
+            <ion-chip-button fill="clear" color="light" onclick="del('chip5')">
+              <ion-icon name="close-circle"></ion-icon>
+            </ion-chip-button>
+          </ion-chip>
+        </ion-item>
+      </ion-content>
+
+    <script>
+      function del(chip) {
+        console.log('called del', chip);
+        var delChip = document.getElementById(chip);
+        delChip.parentNode.removeChild(delChip);
+      }
+    </script>
+  </ion-app>
+</body>
+</html>
diff --git a/core/src/components/content/test/preview/index.html b/core/src/components/content/test/preview/index.html
new file mode 100644
index 0000000000..71f7d82d37
--- /dev/null
+++ b/core/src/components/content/test/preview/index.html
@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Content</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+<body>
+  <ion-app>
+
+      <ion-header id="header">
+        <ion-toolbar style="display: none" id="toolbar2">
+          <ion-title>Hidden Toolbar</ion-title>
+        </ion-toolbar>
+        <ion-toolbar>
+          <ion-title>Content</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <div style="display: flex; flex: 1">
+        <ion-content padding style="text-align: center; flex: 2" id="content">
+          <f></f>
+          <ion-button onclick="toggleFullscreen()">Toggle content.fullscreen</ion-button>
+          <p>
+            <ion-button onclick="toggleDisplay('header')" color="secondary">Toggle header</ion-button>
+            <ion-button onclick="toggleDisplay('footer')" color="secondary">Toggle footer</ion-button>
+            <ion-button onclick="toggleDisplay('toolbar2')" color="secondary">Toggle 2nd toolbar</ion-button>
+          </p>
+          <p>
+            <ion-button onclick="toggleDisplay('content2')" color="danger">Toggle bottom content</ion-button>
+            <ion-button onclick="toggleDisplay('content3')" color="danger">Toggle right content</ion-button>
+          </p>
+          <p>
+            <ion-button onclick="myanimation()" color="dark">Animate</ion-button>
+          </p>
+          <f></f>
+          <f></f>
+          <f></f>
+          <f></f>
+          <f></f>
+          <f></f>
+          <f></f>
+          <f></f>
+        </ion-content>
+        <ion-content padding style="display: none" id="content3">
+          <f></f>
+          <f></f>
+          <f></f>
+          <f></f>
+          <f></f>
+          <f></f>
+        </ion-content>
+      </div>
+
+      <ion-content padding style="display: none" id="content2">
+        <f></f>
+        <f></f>
+        <f></f>
+        <f></f>
+        <f></f>
+        <f></f>
+      </ion-content>
+
+      <ion-footer id="footer">
+        <ion-toolbar>
+          <ion-title>Footer</ion-title>
+        </ion-toolbar>
+      </ion-footer>
+
+    <script>
+      const content = document.getElementById('content');
+      content.scrollEvents = true;
+      content.addEventListener('ionScrollStart', () => console.log('scroll start'));
+      content.addEventListener('ionScroll', (ev) => console.log('scroll', ev.detail));
+      content.addEventListener('ionScrollEnd', () => console.log('scroll end'));
+
+
+      function toggleFullscreen() {
+        const content = document.getElementById('content');
+        content.fullscreen = !content.fullscreen;
+        console.log('content.fullscren =', content.fullscreen);
+      }
+      function toggleDisplay(id) {
+        const el = document.getElementById(id);
+        el.style.display = (!el.style.display) ? 'none' : null;
+      }
+      function myanimation() {
+        const content = document.getElementById('content');
+        const header = document.getElementById('header');
+        const footer = document.getElementById('footer');
+        content.classList.add('animation');
+        header.classList.add('animation');
+        footer.classList.add('animation');
+      }
+    </script>
+    <style>
+      ion-header.animation,
+      ion-footer.animation,
+      ion-content.animation {
+        animation: ani1 5s infinite;
+      }
+
+      #content2 ion-scroll {
+        background: black;
+      }
+      @keyframes ani1 {
+        0% {
+          transform: translateX(0)
+        }
+        25% {
+          transform: translateX(-100%)
+        }
+        50% {
+          transform: translateX(0)
+        }
+        75% {
+          transform: translateX(100%)
+        }
+        100% {
+          transform: translateX(0%);
+        }
+      }
+      ion-content.animation {
+        animation-delay: 500ms;
+      }
+      ion-footer.animation  {
+        animation-delay: 1000ms;
+      }
+
+      .toolbar-background {
+        background: #f8f8f8b8;
+      }
+      f {
+        display: block;
+        margin: 15px auto;
+        max-width: 150px;
+        height: 150px;
+        background: blue;
+      }
+
+      f:last-of-type {
+        background: yellow;
+      }
+    </style>
+  </ion-app>
+</body>
+</html>
diff --git a/core/src/components/datetime/test/preview/index.html b/core/src/components/datetime/test/preview/index.html
new file mode 100644
index 0000000000..eed774bbd6
--- /dev/null
+++ b/core/src/components/datetime/test/preview/index.html
@@ -0,0 +1,170 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Datetime</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  <script src="/dist/ionic.js"></script>
+</head>
+<body>
+  <ion-app>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Datetime</ion-title>
+          <ion-buttons slot="end">
+            <ion-button onclick="toggleBoolean('dynamicDisabled', 'disabled')">
+            (disabled)
+            </ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content" class="outer-content test-content">
+        <ion-list>
+          <ion-item>
+            <ion-label>MMMM</ion-label>
+            <ion-datetime display-format="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>MM DD YY</ion-label>
+            <ion-datetime display-format="MM DD YY" placeholder="Select Date"></ion-datetime>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Disabled</ion-label>
+            <ion-datetime id="dynamicDisabled" display-format="MM DD YY" disabled value="1994-12-15"></ion-datetime>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>YYYY</ion-label>
+            <ion-datetime id="customPickerOptions" placeholder="Custom Options" display-format="YYYY" min="1981" max="2002"></ion-datetime>
+          </ion-item>
+
+          <ion-item>
+            <ion-label stacked>MMMM YY</ion-label>
+            <ion-datetime display-format="MMMM YY" min="1989-06-04" max="2004-08-23" value="1994-12-15T13:47:20.789"></ion-datetime>
+          </ion-item>
+
+          <ion-item>
+            <ion-label floating>MM/DD/YYYY</ion-label>
+            <ion-datetime display-format="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value="2002-09-23T15:03:46.789" class="e2eOpenMMDDYYYY"></ion-datetime>
+          </ion-item>
+
+          <ion-item>
+            <ion-label floating>MM/DD/YYYY</ion-label>
+            <ion-datetime display-format="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" class="e2eOpenMMDDYYYY"></ion-datetime>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>DDD. MMM DD, YY (custom locale)</ion-label>
+            <ion-datetime id="customDayShortNames" value="1995-04-15" min="1990-02" max="2000"
+              display-format="DDD. MMM DD, YY"
+              month-short-names="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"></ion-datetime>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>D MMM YYYY H:mm</ion-label>
+            <ion-datetime display-format="D MMM YYYY H:mm" min="1997" max="2010" value="2005-06-17T11:06Z"></ion-datetime>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>DDDD MMM D, YYYY</ion-label>
+            <ion-datetime display-format="DDDD MMM D, YYYY" min="2005" max="2016" value="2008-09-02"></ion-datetime>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>HH:mm</ion-label>
+            <ion-datetime display-format="HH:mm"></ion-datetime>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>h:mm a</ion-label>
+            <ion-datetime display-format="h:mm a"></ion-datetime>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>hh:mm A (15 min steps)</ion-label>
+            <ion-datetime display-format="h:mm A" minute-values="0,15,30,45"></ion-datetime>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Leap years, summer months</ion-label>
+            <ion-datetime id="customYearValues" display-format="MM/YYYY" pickerFormat="MMMM YYYY" month-values="6,7,8"></ion-datetime>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Specific days/months/years</ion-label>
+            <ion-datetime month-values="6,7,8" year-values="2014,2015" day-values="01,02,03,04,05,06,08,09,10, 11, 12, 13, 14" display-format="DD/MMM/YYYY"></ion-datetime>
+          </ion-item>
+        </ion-list>
+
+        <ion-list>
+          <ion-item>
+            <ion-label>myDate</ion-label>
+            <ion-datetime display-format="MMM DD, YYYY HH:mm"></ion-datetime>
+          </ion-item>
+        </ion-list>
+
+        <ion-list>
+          <ion-item>
+            <ion-label>HH:mm:ss</ion-label>
+            <ion-datetime display-format="HH:mm:ss"></ion-datetime>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>No display-format</ion-label>
+            <ion-datetime></ion-datetime>
+          </ion-item>
+
+        </ion-list>
+
+      </ion-content>
+
+    <script>
+      var yearValuesArray = [2020, 2016, 2008, 2004, 2000, 1996];
+      var customYearValues = document.getElementById('customYearValues');
+      customYearValues.yearValues = yearValuesArray;
+
+      var dayShortNamesArray = [
+        's\u00f8n',
+        'man',
+        'tir',
+        'ons',
+        'tor',
+        'fre',
+        'l\u00f8r'
+      ];
+      var customDayShortNames = document.getElementById('customDayShortNames');
+      customDayShortNames.dayShortNames = dayShortNamesArray;
+
+      var customPickerButtons = {
+        buttons: [{
+          text: 'Save',
+          handler: () => console.log('Clicked Save!')
+        }, {
+          text: 'Log',
+          handler: () => {
+            console.log('Clicked Log. Don\'t Dismiss.');
+            return false;
+          }
+        }]
+      }
+      var customPickerOptions = document.getElementById('customPickerOptions');
+      customPickerOptions.pickerOptions = customPickerButtons;
+
+      function toggleBoolean(id, prop) {
+        var el = document.getElementById(id);
+
+        var isTrue = el[prop] ? false : true;
+        el[prop] = isTrue;
+        console.log('in toggleBoolean, setting', prop, 'to', isTrue);
+      }
+    </script>
+  </ion-app>
+</body>
+</html>
+
+
+
diff --git a/core/src/components/fab/test/preview/index.html b/core/src/components/fab/test/preview/index.html
new file mode 100644
index 0000000000..a4f62daefa
--- /dev/null
+++ b/core/src/components/fab/test/preview/index.html
@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Floating Action Button</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  <script src="/dist/ionic.js"></script>
+</head>
+<body>
+  <ion-app>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Floating Action Button</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content" padding fullscreen>
+        <f></f>
+        <f></f>
+
+        <pre id="log" style="right:10px; bottom:50px; text-shadow: 0 0 2px rgba(0, 0, 0, 0.24);" slot="fixed">log</pre>
+        <ion-button>Test</ion-button>
+        <ion-fab-button>FAB</ion-fab-button>
+
+        <ion-fab vertical="top" horizontal="right" edge id="fab1" slot="fixed">
+          <ion-fab-button onclick="clickMainFAB('fab1')" mini class="e2eFabTopRight"><ion-icon name="add"></ion-icon></ion-fab-button>
+          <ion-fab-list>
+            <ion-fab-button onclick="openSocial('facebook', 'fab1')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
+            <ion-fab-button onclick="openSocial('twitter', 'fab1')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
+            <ion-fab-button onclick="openSocial('vimeo', 'fab1')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
+            <ion-fab-button onclick="openSocial('googleplus', 'fab1')"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
+          </ion-fab-list>
+        </ion-fab>
+
+        <ion-fab vertical="bottom" horizontal="right" edge id="fab2" slot="fixed">
+          <ion-fab-button onclick="clickMainFAB('fab2')" color="dark" class="e2eFabBottomRight"><ion-icon name="arrow-dropleft"></ion-icon></ion-fab-button>
+          <ion-fab-list side="left">
+            <ion-fab-button onclick="openSocial('facebook', 'fab2')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
+            <ion-fab-button onclick="openSocial('twitter', 'fab2')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
+            <ion-fab-button onclick="openSocial('vimeo', 'fab2')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
+            <ion-fab-button onclick="openSocial('googleplus', 'fab2')"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
+          </ion-fab-list>
+        </ion-fab>
+
+        <ion-fab vertical="top" horizontal="left" id="fab3" slot="fixed">
+          <ion-fab-button onclick="clickMainFAB('fab3')" color="secondary" class="e2eFabTopLeft"><ion-icon name="arrow-dropright"></ion-icon></ion-fab-button>
+          <ion-fab-list side="right">
+            <ion-fab-button onclick="openSocial('facebook', 'fab3')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
+            <ion-fab-button onclick="openSocial('twitter', 'fab3')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
+            <ion-fab-button onclick="openSocial('vimeo', 'fab3')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
+            <ion-fab-button onclick="openSocial('googleplus', 'fab3')"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
+          </ion-fab-list>
+        </ion-fab>
+
+        <ion-fab vertical="bottom" horizontal="left" id="fab4" slot="fixed">
+          <ion-fab-button onclick="clickMainFAB('fab4')" color="light" class="e2eFabBottomLeft"><ion-icon name="arrow-dropup"></ion-icon></ion-fab-button>
+          <ion-fab-list side="top">
+            <ion-fab-button onclick="openSocial('facebook', 'fab4')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
+            <ion-fab-button onclick="openSocial('twitter', 'fab4')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
+            <ion-fab-button onclick="openSocial('vimeo', 'fab4')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
+            <ion-fab-button onclick="openSocial('googleplus', 'fab4')"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
+          </ion-fab-list>
+        </ion-fab>
+
+        <ion-fab vertical="center" horizontal="center" id="fab5" slot="fixed">
+          <ion-fab-button onclick="clickMainFAB('fab5')" class="e2eFabCenter"><ion-icon name="md-share"></ion-icon></ion-fab-button>
+          <ion-fab-list side="top">
+            <ion-fab-button onclick="openSocial('vimeo', 'fab5')" color="primary"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
+          </ion-fab-list>
+          <ion-fab-list side="bottom">
+            <ion-fab-button onclick="openSocial('facebook', 'fab5')" color="secondary"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
+          </ion-fab-list>
+          <ion-fab-list side="left">
+            <ion-fab-button onclick="openSocial('googleplus', 'fab5')" color="light"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
+          </ion-fab-list>
+          <ion-fab-list side="right">
+            <ion-fab-button onclick="openSocial('twitter', 'fab5')" color="dark"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
+          </ion-fab-list>
+        </ion-fab>
+
+        <ion-fab horizontal="right" vertical="center" slot="fixed">
+          <ion-fab-button color="danger" onclick="add()"><ion-icon name="add"></ion-icon></ion-fab-button>
+        </ion-fab>
+      </ion-content>
+
+      <ion-footer>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-button onclick="closeLists()">Close</ion-button>
+          </ion-buttons>
+          <ion-title>Footer</ion-title>
+        </ion-toolbar>
+      </ion-footer>
+
+    <script>
+      function insertAfter(el, referenceNode) {
+        referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling);
+      }
+
+      function insertLog(message) {
+        console.log(message);
+        var el = document.querySelector('#log');
+        const oldHTML = el.innerHTML;
+        el.innerHTML = oldHTML + '\n' + message;
+      }
+
+      function add() {
+        var newEle = document.createElement('f');
+        var ref = document.querySelector('f');
+        insertAfter(newEle, ref);
+        insertLog('add');
+      }
+
+      function clickMainFAB(container) {
+        let message = 'Clicked open social menu';
+        insertLog(message);
+
+        toggleLists(container);
+      }
+
+      function openSocial(network, container) {
+        let message = 'Share in ' + network;
+        insertLog(message);
+
+        toggleLists(container);
+      }
+
+      function toggleLists(container) {
+        var fabButton = document.getElementById(container).querySelector('ion-fab-button');
+        var fabLists = document.getElementById(container).querySelectorAll('ion-fab-list');
+
+        fabButton.activated = !fabButton.activated;
+
+        for (var i = 0; i < fabLists.length; i++) {
+          fabLists[i].activated = !fabLists[i].activated;
+        }
+      }
+
+      function closeLists() {
+        var fabs = document.querySelectorAll('ion-fab');
+
+        for (var i = 0; i < fabs.length; i++) {
+          fabs[i].activated = false;
+        }
+      }
+    </script>
+
+    <style>
+      f {
+        display: block;
+        margin: 15px auto;
+        max-width: 150px;
+        height: 150px;
+        background: blue;
+      }
+
+      f:last-of-type {
+        background: yellow;
+      }
+    </style>
+  </ion-app>
+</body>
+</html>
diff --git a/core/src/components/grid/test/preview/index.html b/core/src/components/grid/test/preview/index.html
new file mode 100644
index 0000000000..6b85742098
--- /dev/null
+++ b/core/src/components/grid/test/preview/index.html
@@ -0,0 +1,278 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Grid</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+<body>
+  <ion-app>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Grid</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content" class="grid-demo">
+        <ion-grid>
+          <ion-row>
+            <ion-col>
+              <div>
+                ion-col
+              </div>
+            </ion-col>
+            <ion-col>
+              <div>
+                ion-col
+              </div>
+            </ion-col>
+            <ion-col>
+              <div>
+                ion-col
+              </div>
+            </ion-col>
+            <ion-col>
+              <div>
+                ion-col
+              </div>
+            </ion-col>
+          </ion-row>
+
+          <ion-row>
+            <ion-col col-6>
+              <div>
+                ion-col[width-50]
+              </div>
+            </ion-col>
+            <ion-col>
+              <div>
+                ion-col
+              </div>
+            </ion-col>
+            <ion-col>
+              <div>
+                ion-col
+              </div>
+            </ion-col>
+          </ion-row>
+
+          <ion-row>
+            <ion-col col-3>
+              <div>
+                ion-col[width-25]
+              </div>
+            </ion-col>
+            <ion-col>
+              <div>
+                ion-col
+              </div>
+            </ion-col>
+            <ion-col col-3>
+              <div>
+                ion-col[width-25]
+              </div>
+            </ion-col>
+          </ion-row>
+
+          <ion-row>
+            <ion-col col-3>
+              <div>
+                ion-col[width-25]
+              </div>
+            </ion-col>
+            <ion-col col-3 offset-3>
+              <div>
+                ion-col[width-25][offset-25]
+              </div>
+            </ion-col>
+          </ion-row>
+
+          <ion-row>
+            <ion-col>
+              <div>
+                ion-col
+              </div>
+            </ion-col>
+            <ion-col>
+              <div>
+                ion-col<br>#
+              </div>
+            </ion-col>
+            <ion-col>
+              <div>
+                ion-col<br>#<br>#
+              </div>
+            </ion-col>
+            <ion-col>
+              <div>
+                ion-col<br>#<br>#<br>#
+              </div>
+            </ion-col>
+          </ion-row>
+
+          <ion-row>
+            <ion-col align-self-start>
+              <div>
+                ion-col[top]
+              </div>
+            </ion-col>
+            <ion-col align-self-center>
+              <div>
+                ion-col[center]
+              </div>
+            </ion-col>
+            <ion-col align-self-end>
+              <div>
+                ion-col[bottom]
+              </div>
+            </ion-col>
+            <ion-col>
+              <div>
+                ion-col<br>#<br>#
+              </div>
+            </ion-col>
+          </ion-row>
+
+          <ion-row align-items-start>
+            <ion-col>
+              <div>
+                [top] ion-col
+              </div>
+            </ion-col>
+            <ion-col>
+              <div>
+                [top] ion-col
+              </div>
+            </ion-col>
+            <ion-col align-self-end>
+              <div>
+                [top] ion-col[bottom]
+              </div>
+            </ion-col>
+            <ion-col>
+              <div>
+                ion-col<br>#<br>#
+              </div>
+            </ion-col>
+          </ion-row>
+
+          <ion-row align-items-center>
+            <ion-col>
+              <div>
+                [center] ion-col
+              </div>
+            </ion-col>
+            <ion-col>
+              <div>
+                [center] ion-col
+              </div>
+            </ion-col>
+            <ion-col>
+              <div>
+                [center] ion-col
+              </div>
+            </ion-col>
+            <ion-col>
+              <div>
+                ion-col<br>#<br>#
+              </div>
+            </ion-col>
+          </ion-row>
+
+          <ion-row align-items-end>
+            <ion-col>
+              <div>
+                [bottom] ion-col
+              </div>
+            </ion-col>
+            <ion-col align-self-start>
+              <div>
+                [bottom] ion-col[top]
+              </div>
+            </ion-col>
+            <ion-col>
+              <div>
+                [bottom] ion-col
+              </div>
+            </ion-col>
+            <ion-col>
+              <div>
+                ion-col<br>#<br>#
+              </div>
+            </ion-col>
+          </ion-row>
+
+          <ion-row>
+            <ion-col col-12 col-sm>
+              <div>
+                [responsive-sm] ion-col
+              </div>
+            </ion-col>
+            <ion-col col-12 col-sm>
+              <div>
+                [responsive-sm] ion-col
+              </div>
+            </ion-col>
+            <ion-col col-12 col-sm>
+              <div>
+                [responsive-sm] ion-col
+              </div>
+            </ion-col>
+            <ion-col col-12 col-sm>
+              <div>
+                [responsive-sm] ion-col
+              </div>
+            </ion-col>
+          </ion-row>
+
+          <ion-row>
+            <ion-col col-12 col-md>
+              <div>
+                [responsive-md] ion-col
+              </div>
+            </ion-col>
+            <ion-col col-12 col-md>
+              <div>
+                [responsive-md] ion-col
+              </div>
+            </ion-col>
+            <ion-col col-12 col-md>
+              <div>
+                [responsive-md] ion-col
+              </div>
+            </ion-col>
+            <ion-col col-12 col-md>
+              <div>
+                [responsive-md] ion-col
+              </div>
+            </ion-col>
+          </ion-row>
+
+          <ion-row responsive-lg>
+            <ion-col col-6 offset-3>
+              <div>
+                [responsive-lg] ion-col[width-50][offset-25]
+              </div>
+            </ion-col>
+            <ion-col col-3>
+              <div>
+                [responsive-lg] ion-col[width-25]
+              </div>
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+
+      </ion-content>
+
+    <style>
+      .grid-demo ion-col div {
+        background-color: #f7f7f7;
+        border: 1px solid #ddd;
+        padding: 10px 5px;
+      }
+    </style>
+  </ion-app>
+</body>
+</html>
diff --git a/core/src/components/hide-when/test/preview/index.html b/core/src/components/hide-when/test/preview/index.html
new file mode 100644
index 0000000000..55f3919616
--- /dev/null
+++ b/core/src/components/hide-when/test/preview/index.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Hide When</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Hide when</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content padding>
+
+        <h2>Mode Tests</h2>
+        <ion-hide-when mode="md, ios">
+          <div>Hides on MD, iOS</div>
+        </ion-hide-when>
+
+        <ion-hide-when mode="md">
+          <div>Hides on MD only</div>
+        </ion-hide-when>
+
+        <ion-hide-when mode="ios">
+          <div>Hides on iOS only</div>
+        </ion-hide-when>
+
+        <h2>Orientation Tests</h2>
+        <ion-hide-when orientation="portrait">
+          <div>Hides on portrait orientation</div>
+        </ion-hide-when>
+
+        <ion-hide-when orientation="landscape">
+          <div>Hides on landscape orientation</div>
+        </ion-hide-when>
+
+        <h2>Platform Tests</h2>
+
+        <ion-hide-when platform="android,ios">
+          <div>Hides on Android and iOS</div>
+        </ion-hide-when>
+
+        <ion-hide-when platform="ios">
+          <div>Only hide on iOS</div>
+        </ion-hide-when>
+
+        <ion-hide-when platform="android">
+          <div>Only hide on Android</div>
+        </ion-hide-when>
+
+        <ion-hide-when platform="ipad">
+          <div>Only hide on ipad</div>
+        </ion-hide-when>
+
+        <ion-hide-when platform="phablet">
+          <div>Only hide on phablet</div>
+        </ion-hide-when>
+
+        <ion-hide-when platform="iphone">
+          <div>Only hide on phone</div>
+        </ion-hide-when>
+
+        <h2>Size Tests</h2>
+        <ion-hide-when size="xs">
+          <div>Only hide on xs</div>
+        </ion-hide-when>
+
+        <ion-hide-when size="sm">
+          <div>Only hide on sm</div>
+        </ion-hide-when>
+
+        <ion-hide-when size="md">
+          <div>Only hide on md</div>
+        </ion-hide-when>
+
+        <ion-hide-when size="lg">
+          <div>Only hide on lg</div>
+        </ion-hide-when>
+
+        <ion-hide-when size="xl">
+          <div>Only hide on xl</div>
+        </ion-hide-when>
+
+        <ion-hide-when size="xs, m">
+          <div>Only hide on XS or m</div>
+        </ion-hide-when>
+
+      </ion-content>
+
+
+  </ion-app>
+
+  <script>
+
+  </script>
+</body>
+
+</html>
diff --git a/core/src/components/icon/test/preview/index.html b/core/src/components/icon/test/preview/index.html
new file mode 100644
index 0000000000..b646622ed8
--- /dev/null
+++ b/core/src/components/icon/test/preview/index.html
@@ -0,0 +1,217 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Icon</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Icon</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content">
+        <ion-list>
+          <ion-item>
+            <ion-icon name="home" id="dynamicColor" slot="start"></ion-icon>
+            <ion-label>
+              <code>
+                name="home"
+              </code>
+            </ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-icon name="home" slot="start"></ion-icon>
+            <ion-label>
+              <code>
+                name="home"
+              </code>
+            </ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-icon id="dynamicHomeIcon" slot="start"></ion-icon>
+            <ion-label>
+              <code>
+                id="dynamicHomeIcon"
+              </code>
+            </ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-icon name="md-home" slot="start"></ion-icon>
+            <ion-label>
+              <code>
+                name="md-home"
+              </code>
+            </ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-icon name="ios-home" slot="start"></ion-icon>
+            <ion-label>
+              <code>
+                name="ios-home"
+              </code>
+            </ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-icon name="ios-home" slot="end"></ion-icon>
+            <ion-label>
+              <code>
+                name="ios-home"
+              </code>
+            </ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-icon name="ios-star-outline" slot="start"></ion-icon>
+            <ion-label>
+              <code>
+                name="ios-star-outline"
+              </code>
+            </ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-icon name="IOS-STAR-OUTLINE" slot="end"></ion-icon>
+            <ion-label>
+              <code>
+                name="IOS-STAR-OUTLINE"
+              </code>
+            </ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-icon name="md-home" color="primary" slot="start"></ion-icon>
+            <ion-label>
+              <code>
+                name="md-home"
+              </code>
+            </ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-icon name="logo-twitter" color="secondary" slot="start"></ion-icon>
+            <ion-label>
+              <code>
+                name="logo-twitter"
+              </code>
+            </ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-icon ios="logo-apple" md="logo-android" slot="start"></ion-icon>
+            <ion-label>
+              <code>
+                ios="logo-apple" md="logo-android"
+              </code>
+            </ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-icon name="color-filter" slot="start"></ion-icon>
+            <ion-label>
+              <code>
+                name="color-filter"
+              </code>
+            </ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-icon ios="ios-color-filter" md="md-color-filter" slot="start"></ion-icon>
+            <ion-label>
+              <code>
+                ios="ios-color-filter" md="md-color-filter"
+              </code>
+            </ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-icon ios="MD-COLOR-FILTER" md="IOS-COLOR-FILTER" slot="start"></ion-icon>
+            <ion-label>
+              <code>
+                ios="MD-COLOR-FILTER" md="IOS-COLOR-FILTER"
+              </code>
+            </ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-icon slot="start"></ion-icon>
+            <ion-label>
+              <code>
+                name="null"
+              </code>
+            </ion-label>
+          </ion-item>
+
+          <ion-item detail="true">
+            <ion-label>
+              <code>
+                ion-item w/ [detail="true"] attr. text text text text text text
+              </code>
+            </ion-label>
+          </ion-item>
+        </ion-list>
+
+        <p>
+          <ion-button onclick="updateIcon()">
+            <ion-icon slot="start" id="dynamicBtnIcon"></ion-icon>
+            Update icon
+          </ion-button>
+        </p>
+
+      </ion-content>
+
+
+      <style>
+        /*to ensure ng css encapsulation doesn't mess with icon attributes*/
+        code {
+          font-size: 0.8em;
+        }
+      </style>
+
+  </ion-app>
+
+  <script>
+    var dynamicColor = document.getElementById('dynamicColor');
+    dynamicColor.color = 'danger';
+
+    var dynamicHomeIcon = document.getElementById('dynamicHomeIcon');
+    dynamicHomeIcon.name = 'home';
+    dynamicHomeIcon.isActive = false;
+
+    icons = [
+      'home',
+      'star',
+      'ios-alert',
+      'ios-alert-outline',
+      'md-alert',
+      'logo-apple'
+    ];
+
+    var iconIndex = 0;
+
+    var dynamicBtnIcon = document.getElementById('dynamicBtnIcon');
+    dynamicBtnIcon.name = icons[0];
+
+    function updateIcon() {
+      iconIndex++;
+      if (iconIndex >= icons.length) {
+        iconIndex = 0;
+      }
+      dynamicBtnIcon.name = icons[iconIndex];
+    }
+  </script>
+</body>
+
+</html>
diff --git a/core/src/components/infinite-scroll/test/preview/index.html b/core/src/components/infinite-scroll/test/preview/index.html
new file mode 100644
index 0000000000..d318ac5d17
--- /dev/null
+++ b/core/src/components/infinite-scroll/test/preview/index.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Infinite Scroll</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Infinite Scroll</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content" padding>
+
+        <ion-button onclick="toggleInfiniteScroll()" block>
+          Toggle InfiniteScroll
+        </ion-button>
+
+        <ion-list id="list">
+
+        </ion-list>
+
+        <ion-infinite-scroll threshold="100px" id="infinite-scroll">
+          <ion-infinite-scroll-content
+            loadingSpinner="bubbles"
+            loadingText="Loading more data...">
+          </ion-infinite-scroll-content>
+        </ion-infinite-scroll>
+      </ion-content>
+
+
+
+  </ion-app>
+
+  <script>
+    let items = [];
+    for (var i = 0; i < 30; i++) {
+      items.push( i+1 );
+    }
+    const list = document.getElementById('list');
+    const infiniteScroll = document.getElementById('infinite-scroll');
+
+    function toggleInfiniteScroll() {
+      infiniteScroll.disabled = !infiniteScroll.disabled;
+    }
+
+    infiniteScroll.addEventListener('ionInfinite', async function() {
+      console.log('Loading data...');
+      const data = await getAsyncData();
+      items = items.concat(data);
+      infiniteScroll.complete();
+      render();
+      console.log('Done');
+    });
+
+    function render() {
+      let html = '';
+      for(let item of items) {
+        html += `<ion-item>${item}</ion-item>`;
+      }
+      list.innerHTML = html;
+    }
+
+    function getAsyncData() {
+      // async return mock data
+      return new Promise(resolve => {
+        setTimeout(() => {
+          let data = [];
+          for (var i = 0; i < 30; i++) {
+            data.push(i);
+          }
+
+          resolve(data);
+        }, 500);
+      });
+    }
+    render();
+
+  </script>
+</body>
+</html>
diff --git a/core/src/components/input/test/preview/index.html b/core/src/components/input/test/preview/index.html
new file mode 100644
index 0000000000..9dfd678945
--- /dev/null
+++ b/core/src/components/input/test/preview/index.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Input</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+<body>
+  <ion-app>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Input</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content">
+        <ion-list>
+          <ion-item>
+            <ion-input value="reallylonglonglonginputtoseetheedgesreallylonglonglonginputtoseetheedges"></ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Default Label</ion-label>
+            <ion-input value="reallylonglonglonginputtoseetheedgesreallylonglonglonginputtoseetheedges"></ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Clear Input</ion-label>
+            <ion-input clear-input value="reallylonglonglonginputtoseetheedgesreallylonglonglonginputtoseetheedges"></ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-label floating>Floating</ion-label>
+            <ion-input checked></ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-label fixed>Type #</ion-label>
+            <ion-input type="number" value="333"></ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-label stacked>Password</ion-label>
+            <ion-input type="password"></ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-label stacked>Placeholder</ion-label>
+            <ion-input placeholder="Enter Something"></ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Disabled</ion-label>
+            <ion-input id="dynamicDisabled" value="Disabled" disabled></ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Readonly</ion-label>
+            <ion-input id="dynamicReadonly" value="Readonly" readonly></ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Slot</ion-label>
+            <ion-input slot="start" value="Start"></ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Toggle</ion-label>
+            <ion-toggle checked slot="end"></ion-toggle>
+          </ion-item>
+
+          <ion-item>
+            <ion-label fixed>Type #</ion-label>
+            <div type="number" value="333" class="input input-md hydrated"><!----><input aria-disabled="false" autocapitalize="none" autocomplete="off" autocorrect="off" autofocus="false" class="native-input native-input-md" spellcheck="false" type="number"><button type="button" class="input-clear-icon" hidden=""></button></div>
+          </ion-item>
+        </ion-list>
+
+        <div text-center>
+          <ion-button onclick="toggleBoolean('dynamicDisabled', 'disabled')">
+            Toggle Disabled
+          </ion-button>
+
+          <ion-button color="secondary" onclick="toggleBoolean('dynamicReadonly', 'readonly')">
+            Toggle Readonly
+          </ion-button>
+        </div>
+
+        <ion-item>
+          <ion-label>Clear Input</ion-label>
+          <ion-input clear-input value="reallylonglonglonginputtoseetheedgesreallylonglonglonginputtoseetheedges"></ion-input>
+        </ion-item>
+
+      </ion-content>
+
+    <script>
+      function toggleBoolean(id, prop) {
+        var el = document.getElementById(id);
+
+        var isTrue = el[prop] ? false : true;
+        el[prop] = isTrue;
+        console.log('in toggleBoolean, setting', prop, 'to', isTrue);
+      }
+    </script>
+  </ion-app>
+</body>
+</html>
+
+
+
diff --git a/core/src/components/item-sliding/test/preview/index.html b/core/src/components/item-sliding/test/preview/index.html
new file mode 100644
index 0000000000..67108b4375
--- /dev/null
+++ b/core/src/components/item-sliding/test/preview/index.html
@@ -0,0 +1,428 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Item Sliding</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  <script src="/dist/ionic.js"></script>
+</head>
+<body>
+  <ion-app>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Item Sliding</ion-title>
+          <ion-buttons slot="start">
+            <ion-button onclick="changeDynamicText()">Dynamic</ion-button>
+          </ion-buttons>
+          <ion-buttons slot="end">
+            <ion-button onclick="reload()">Reload</ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content>
+
+        <div padding>
+          <ion-button expand="block" onclick="toggleSliding()">Toggle sliding</ion-button>
+          <ion-button expand="block" onclick="toggleDynamicOptions()">Toggle Dynamic Options</ion-button>
+          <ion-button expand="block" onclick="closeOpened()">Close Opened Items</ion-button>
+        </div>
+
+        <ion-list id="list">
+          <div class="nested-div">
+            <ion-item-sliding>
+              <ion-item>
+                <ion-label>
+                  <h2>No Options</h2>
+                  <p>Should not error or swipe without options</p>
+                </ion-label>
+              </ion-item>
+            </ion-item-sliding>
+
+            <ion-item-sliding id="item6">
+              <ion-item>
+                <ion-label>
+                  One Line, dynamic option and text
+                </ion-label>
+              </ion-item>
+              <ion-item-options class="show-options">
+                <ion-item-option color="primary">
+                  <ion-icon name="more"></ion-icon>
+                  <span class="more-text"></span>
+                </ion-item-option>
+                <ion-item-option color="secondary" onclick="archive('item6')">
+                  <ion-icon name="archive"></ion-icon>
+                  <span class="archive-text"></span>
+                </ion-item-option>
+              </ion-item-options>
+            </ion-item-sliding>
+
+            <ion-item-sliding id="item6">
+              <ion-item>
+                <ion-label>
+                  Two options, one dynamic option and text
+                </ion-label>
+              </ion-item>
+              <ion-item-options side="left">
+                <ion-item-option color="primary">
+                  <ion-icon slot="icon-only" name="more"></ion-icon>
+                </ion-item-option>
+              </ion-item-options>
+              <ion-item-options side="right" class="show-options">
+                <ion-item-option color="primary">
+                  <ion-icon name="more"></ion-icon>
+                  <span class="more-text"></span>
+                </ion-item-option>
+                <ion-item-option color="secondary" onclick="archive('item6')">
+                  <ion-icon name="archive"></ion-icon>
+                  <span class="archive-text"></span>
+                </ion-item-option>
+              </ion-item-options>
+            </ion-item-sliding>
+
+            <ion-item-sliding id="item100">
+              <ion-item href="#">
+                <ion-label>
+                  <h2>HubStruck Notifications</h2>
+                  <p>A new message from a repo in your network</p>
+                  <p>Oceanic Next has joined your network</p>
+                </ion-label>
+                <ion-note slot="end">
+                  10:45 AM
+                </ion-note>
+              </ion-item>
+
+              <ion-item-options side="left">
+                <ion-item-option onclick="noclose('item100')">
+                  No close
+                </ion-item-option>
+              </ion-item-options>
+              <ion-item-options side="right">
+                <ion-item-option color="danger" onclick="unread('item100')">
+                  <ion-icon slot="icon-only" name="trash"></ion-icon>
+                </ion-item-option>
+                <ion-item-option onclick="unread('item100')">
+                  <ion-icon slot="icon-only" name="star"></ion-icon>
+                </ion-item-option>
+              </ion-item-options>
+
+            </ion-item-sliding>
+
+            <ion-item-sliding id="item0">
+              <ion-item text-wrap onclick="clickedItem('item0')">
+                <ion-label>
+                  <h2>RIGHT side - no icons</h2>
+                  <p>Hey do you want to go to the game tonight?</p>
+                </ion-label>
+              </ion-item>
+              <ion-item-options class="sliding-enabled">
+                <ion-item-option color="primary" onclick="archive('item0')">Archive</ion-item-option>
+                <ion-item-option color="danger" onclick="del('item0')">Delete</ion-item-option>
+              </ion-item-options>
+            </ion-item-sliding>
+
+            <ion-item-sliding id="item1">
+              <ion-item text-wrap detail href="#" class="activated">
+                <ion-label>
+                  <h2>LEFT side - no icons</h2>
+                  <p>I think I figured out how to get more Mountain Dew</p>
+                </ion-label>
+              </ion-item>
+              <ion-item-options side="left" class="sliding-enabled">
+                <ion-item-option color="primary" onclick="archive('item1')">Archive</ion-item-option>
+                <ion-item-option color="danger" onclick="del('item1')">Delete</ion-item-option>
+              </ion-item-options>
+            </ion-item-sliding>
+
+
+            <ion-item-sliding id="item2">
+              <ion-item text-wrap detail>
+                <ion-label>
+                  <h2>RIGHT/LEFT side - icons</h2>
+                  <p>I think I figured out how to get more Mountain Dew</p>
+                </ion-label>
+              </ion-item>
+              <ion-item-options side="left" class="sliding-enabled">
+                <ion-item-option color="secondary" expandable onclick="unread('item2')">
+                  <ion-icon name="ios-checkmark"></ion-icon>Unread
+                </ion-item-option>
+              </ion-item-options>
+
+              <ion-item-options side="right" class="sliding-enabled">
+                <ion-item-option color="primary" onclick="archive('item2')">
+                  <ion-icon name="mail"></ion-icon>Archive
+                </ion-item-option>
+                <ion-item-option color="danger" onclick="del('item2')" expandable>
+                  <ion-icon name="trash"></ion-icon>Delete
+                </ion-item-option>
+              </ion-item-options>
+            </ion-item-sliding>
+
+            <ion-item-sliding id="item3">
+              <ion-item text-wrap detail>
+                <ion-label>
+                  <h2>RIGHT/LEFT side - icons (slot="start")</h2>
+                  <p>I think I figured out how to get more Mountain Dew</p>
+                </ion-label>
+              </ion-item>
+              <ion-item-options side="left" icon-start class="sliding-enabled">
+                <ion-item-option color="secondary" expandable onclick="unread('item3')">
+                  <ion-icon name="ios-checkmark"></ion-icon>Unread
+                </ion-item-option>
+              </ion-item-options>
+
+              <ion-item-options icon-start>
+                <ion-item-option color="primary" onclick="archive('item3')">
+                  <ion-icon name="mail"></ion-icon>Archive
+                </ion-item-option>
+                <ion-item-option color="danger" onclick="del('item3')" expandable class="sliding-enabled">
+                  <ion-icon name="trash"></ion-icon>Delete
+                </ion-item-option>
+              </ion-item-options>
+            </ion-item-sliding>
+
+
+            <ion-item-sliding id="item4">
+              <ion-item>
+                <ion-icon name="mail" slot="start"></ion-icon>
+                <ion-label>
+                  One Line w/ Icon, div only text
+                </ion-label>
+              </ion-item>
+              <ion-item-options icon-start>
+                <ion-item-option color="primary" onclick="archive('item4')" expandable class="sliding-enabled">
+                  <ion-icon name="archive"></ion-icon>Archive
+                </ion-item-option>
+              </ion-item-options>
+            </ion-item-sliding>
+
+
+            <ion-item-sliding id="item5" class="sliding-enabled">
+              <ion-item>
+                <ion-avatar slot="start">
+                  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+                </ion-avatar>
+                <ion-label>
+                  One Line w/ Avatar, div only text
+                </ion-label>
+              </ion-item>
+              <ion-item-options>
+                <ion-item-option color="primary" expandable>
+                  <ion-icon name="more"></ion-icon>More
+                </ion-item-option>
+                <ion-item-option color="secondary" onclick="archive('item5')">
+                  <ion-icon name="archive"></ion-icon>Archive
+                </ion-item-option>
+                <ion-item-option color="light" onclick="del('item5')">
+                  <ion-icon name="trash"></ion-icon>Delete
+                </ion-item-option>
+              </ion-item-options>
+            </ion-item-sliding>
+
+
+            <ion-item-sliding id="item7">
+              <ion-item>
+                <ion-label>
+                  One Line, dynamic icon-start option
+                </ion-label>
+              </ion-item>
+              <ion-item-options icon-start>
+                <ion-item-option color="primary">
+                  <ion-icon name="more"></ion-icon>
+                  <span class="more-text"></span>
+                </ion-item-option>
+                <ion-item-option color="secondary" onclick="archive('item7')">
+                  <ion-icon name="archive"></ion-icon>
+                  <span class="archive-text"></span>
+                </ion-item-option>
+              </ion-item-options>
+            </ion-item-sliding>
+
+            <ion-item-sliding id="item8">
+              <ion-item>
+                <ion-thumbnail slot="start">
+                  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+                </ion-thumbnail>
+                <ion-label>
+                  <h2>DOWNLOAD</h2>
+                  <p>Paragraph text.</p>
+                </ion-label>
+              </ion-item>
+              <ion-item-options>
+                <ion-item-option color="primary" onclick="archive('item8')">
+                  <ion-icon name="archive"></ion-icon>Archive
+                </ion-item-option>
+                <ion-item-option color="secondary" expandable onclick="download('item8')">
+                  <ion-icon name="download" class="download-hide"></ion-icon>
+                  <div class="download-hide">Download</div>
+
+                  <ion-icon class="download-spinner" name="refresh"></ion-icon>
+                  <div class="download-spinner">Loading...</div>
+                </ion-item-option>
+              </ion-item-options>
+            </ion-item-sliding>
+
+            <ion-item-sliding id="item9">
+              <ion-item>
+                <ion-thumbnail slot="start">
+                  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+                </ion-thumbnail>
+                <ion-label>
+                  <h2>ion-item-sliding without options (no sliding)</h2>
+                  <p>Paragraph text.</p>
+                </ion-label>
+              </ion-item>
+            </ion-item-sliding>
+
+            <ion-item text-wrap>
+              <ion-label>
+                <h2>Normal ion-item (no sliding)</h2>
+                <p>Paragraph text.</p>
+              </ion-label>
+            </ion-item>
+
+            <ion-item text-wrap onclick="clickedItem('item9')">
+              <ion-label>
+                <h2>Normal button (no sliding)</h2>
+                <p>Hey do you want to go to the game tonight?</p>
+              </ion-label>
+            </ion-item>
+          </div>
+
+        </ion-list>
+
+        <script>
+          var dynamicSlidingEnabled = document.getElementsByClassName('sliding-enabled');
+
+          // Toggle the dynamic options
+          var dynamicShowOptions = document.getElementsByClassName('show-options');
+          toggleDynamicOptions();
+
+          function toggleDynamicOptions() {
+            // TODO the element needs to be removed / added to the DOM
+          }
+
+          // Change the text for the more and archive buttons
+          var dynamicText = true;
+          var moreTextSpans = document.getElementsByClassName('more-text');
+          var archiveTextSpans = document.getElementsByClassName('archive-text');
+          changeDynamicText();
+
+          function changeDynamicText() {
+            dynamicText = !dynamicText;
+
+            for (var i = 0; i < moreTextSpans.length; i++) {
+              var moreText = dynamicText ? 'Changed More' : 'Dynamic More';
+              moreTextSpans[i].innerHTML = moreText;
+            }
+
+            for (var i = 0; i < archiveTextSpans.length; i++) {
+              var archiveText = dynamicText ? 'Changed Archive' : 'Dynamic Archive';
+              archiveTextSpans[i].innerHTML = archiveText;
+            }
+          }
+
+          function toggleSliding() {
+            // this.slidingEnabled = !this.slidingEnabled;
+          }
+
+          function closeOpened() {
+            var list = document.getElementById('list');
+            list.closeSlidingItems();
+          }
+
+          function noclose(item) {
+            var itemEle = document.getElementById(item);
+            console.log('no close', itemEle);
+          }
+
+          function unread(item) {
+            closeSlidingItem('UNREAD', item);
+          }
+
+          function archive(item) {
+            closeSlidingItem('ARCHIVE', item);
+          }
+
+          function del(item) {
+            closeSlidingItem('DELETE', item);
+          }
+
+          function download(item) {
+            var itemEle = document.getElementById(item);
+            console.log(itemEle);
+            itemEle.classList.add('downloading');
+            setTimeout(() => {
+              alert('Item was downloaded!');
+
+              itemEle.classList.remove('downloading');
+              itemEle.close();
+            }, 1500);
+          }
+
+          function closeSlidingItem(option, item) {
+            var itemEle = document.getElementById(item);
+
+            // TODO open alert instead
+            if (itemEle) {
+              itemEle.close();
+            }
+            console.log(option, itemEle);
+          }
+
+          function clickedItem(item) {
+            var itemEle = document.getElementById(item);
+            console.log('Clicked, ion-item', itemEle);
+          }
+
+          function reload() {
+            window.location.reload();
+          }
+          document.addEventListener('ionSwipe', (ev)=> console.log('SWIPE!!', ev.detail));
+          document.addEventListener('ionDrag', (ev) => {
+            // console.log('DRAG!!', ev.detail);
+
+            let slidingRatio = ev.target.getSlidingRatio();
+            console.log('sliding', slidingRatio);
+
+            if (slidingRatio > 0) {
+              // positive
+              console.log('right side');
+            } else {
+              // negative
+              console.log('left side');
+            }
+            if (Math.abs(slidingRatio) > 1) {
+              console.log('overscroll');
+            }
+          });
+
+
+        </script>
+        <style>
+          img {
+            height: 100px;
+          }
+
+          .download-spinner {
+            display: none;
+          }
+
+          svg circle {
+            stroke: white;
+          }
+
+          .downloading .download-spinner {
+            display: block;
+          }
+
+          .downloading .download-hide {
+            display: none;
+          }
+        </style>
+      </ion-content>
+
+  </ion-app>
+</body>
+</html>
diff --git a/core/src/components/item/test/preview/index.html b/core/src/components/item/test/preview/index.html
new file mode 100644
index 0000000000..dac0590047
--- /dev/null
+++ b/core/src/components/item/test/preview/index.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Item</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Item</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content">
+        <ion-list>
+          <ion-list-header>
+            <ion-label>
+              List Header
+            </ion-label>
+          </ion-list-header>
+          <ion-item>
+            <ion-label>
+              Item
+            </ion-label>
+          </ion-item>
+          <ion-item-divider>
+            <ion-label>
+              Item Divider
+            </ion-label>
+          </ion-item-divider>
+          <ion-item>
+            <ion-label>
+              Item
+            </ion-label>
+          </ion-item>
+        </ion-list>
+
+        <ion-item>
+          <ion-label>
+            Plain Ol' div with some text
+          </ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            Single line text that should have ellipses when it doesn't all fit in the item
+          </ion-label>
+        </ion-item>
+
+        <ion-item no-lines>
+          <ion-label>
+            Single line item with no lines
+          </ion-label>
+        </ion-item>
+
+        <ion-item text-wrap>
+          <ion-label>
+            Multiline text that should wrap when it is too long to fit on one line in the item. Attribute on .item
+          </ion-label>
+        </ion-item>
+
+        <ion-item text-wrap color="secondary">
+          <ion-label>
+            <h1>H1 Title Text</h1>
+            <p>Paragraph line 1</p>
+          </ion-label>
+        </ion-item>
+
+        <ion-item text-wrap>
+          <ion-label>
+            <h2>H2 Title Text</h2>
+            <p>Paragraph line 1</p>
+          </ion-label>
+        </ion-item>
+
+        <ion-item text-wrap>
+          <ion-label>
+            <h3 ion-text color="primary">H3 Title Text</h3>
+            <p>Paragraph line 1</p>
+            <p ion-text color="secondary">Paragraph line 2 secondary</p>
+          </ion-label>
+        </ion-item>
+
+        <ion-item text-wrap>
+          <ion-label>
+            <h4>H4 Title Text</h4>
+            <p>Paragraph line 1</p>
+            <p>Paragraph line 2</p>
+            <p>Paragraph line 3</p>
+          </ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            Item using inner ion-label
+          </ion-label>
+        </ion-item>
+
+      </ion-content>
+
+      <ion-footer>
+        <ion-toolbar>
+          <ion-title>Footer</ion-title>
+        </ion-toolbar>
+      </ion-footer>
+
+  </ion-app>
+</body>
+
+</html>
diff --git a/core/src/components/label/test/preview/index.html b/core/src/components/label/test/preview/index.html
new file mode 100644
index 0000000000..61934861d5
--- /dev/null
+++ b/core/src/components/label/test/preview/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Label</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  <script src="/dist/ionic.js"></script>
+</head>
+<body>
+  <ion-app>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Label</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content>
+        <ion-list>
+          <ion-item>
+            <ion-label>Default</ion-label>
+            <ion-input></ion-input>
+          </ion-item>
+          <ion-item text-wrap>
+            <ion-label>Wrap label this label just goes on and on and on</ion-label>
+            <ion-input></ion-input>
+          </ion-item>
+          <ion-item>
+            <ion-label fixed>Fixed</ion-label>
+            <ion-input></ion-input>
+          </ion-item>
+          <ion-item>
+            <ion-label floating>Floating</ion-label>
+            <ion-input></ion-input>
+          </ion-item>
+          <ion-item>
+            <ion-label stacked>Stacked</ion-label>
+            <ion-input></ion-input>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+
+      <style>
+        img {
+          height: 100px;
+        }
+      </style>
+
+
+  </ion-app>
+</body>
+</html>
diff --git a/core/src/components/list/test/preview/index.html b/core/src/components/list/test/preview/index.html
new file mode 100644
index 0000000000..93fee3683b
--- /dev/null
+++ b/core/src/components/list/test/preview/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>List</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+<body>
+  <ion-app>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>List</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content">
+        <ion-list>
+          <ion-item>Pokémon Yellow</ion-item>
+          <ion-item>Super Metroid</ion-item>
+          <ion-item>Mega Man X</ion-item>
+          <ion-item>The Legend of Zelda</ion-item>
+          <ion-item>Pac-Man</ion-item>
+          <ion-item>Super Mario World</ion-item>
+          <ion-item>Street Fighter II</ion-item>
+          <ion-item>Half Life</ion-item>
+          <ion-item>Portal</ion-item>
+          <ion-item>Final Fantasy VII</ion-item>
+          <ion-item>Star Fox</ion-item>
+          <ion-item>Tetris</ion-item>
+          <ion-item>Donkey Kong III</ion-item>
+          <ion-item>Goldeneye 007</ion-item>
+          <ion-item>Doom</ion-item>
+          <ion-item>Fallout</ion-item>
+          <ion-item>GTA</ion-item>
+          <ion-item>Halo</ion-item>
+        </ion-list>
+      </ion-content>
+
+  </ion-app>
+</body>
+</html>
+
diff --git a/core/src/components/loading/test/preview/index.html b/core/src/components/loading/test/preview/index.html
new file mode 100644
index 0000000000..032ab63dd4
--- /dev/null
+++ b/core/src/components/loading/test/preview/index.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Loading</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Loading</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content padding>
+        <ion-button id="basic" expand="block" onclick="presentLoading()">Show Loading</ion-button>
+        <ion-button id="default" expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Please wait...'})">Show Default Loading</ion-button>
+        <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})">Show Loading with long content</ion-button>
+        <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Please wait...', spinner: 'hide'})">Show Loading with no spinner</ion-button>
+        <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, content: 'Please wait...', translucent: true})">Show Loading with translucent</ion-button>
+        <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, content: 'Please wait...', translucent: true, cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</ion-button>
+        <ion-button expand="block" onclick="presentLoadingWithOptions({enableBackdropDismiss: true})">Show Backdrop Click Loading</ion-button>
+
+        <ion-loading-controller></ion-loading-controller>
+
+        <ion-grid>
+          <ion-row>
+            <ion-col col-6>
+              <f class="red"></f>
+            </ion-col>
+            <ion-col col-6>
+              <f class="green"></f>
+            </ion-col>
+            <ion-col col-6>
+              <f class="blue"></f>
+            </ion-col>
+            <ion-col col-6>
+              <f class="yellow"></f>
+            </ion-col>
+            <ion-col col-6>
+              <f class="pink"></f>
+            </ion-col>
+            <ion-col col-6>
+              <f class="purple"></f>
+            </ion-col>
+            <ion-col col-6>
+              <f class="black"></f>
+            </ion-col>
+            <ion-col col-6>
+              <f class="orange"></f>
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+      </ion-content>
+
+  </ion-app>
+  <script>
+    async function presentLoading() {
+      const loadingController = document.querySelector('ion-loading-controller');
+      await loadingController.componentOnReady();
+      const loadingElement = await loadingController.create({
+        message: 'Hellooo',
+        duration: 2000
+      });
+      return await loadingElement.present();
+    }
+
+    async function presentLoadingWithOptions(opts) {
+      const loadingController = document.querySelector('ion-loading-controller');
+      await loadingController.componentOnReady();
+      const loadingElement = await loadingController.create(opts);
+      return await loadingElement.present();
+    }
+  </script>
+
+  <style>
+    .custom-loading .loading-wrapper {
+      background: rgb(155, 221, 226);
+    }
+
+    f {
+      display: block;
+      background: blue;
+
+      width: 100%;
+      height: 200px;
+      margin: 20px auto;
+    }
+
+    .red {
+      background-color: #ea445a;
+    }
+
+    .green {
+      background-color: #76d672;
+    }
+
+    .blue {
+      background-color: #3478f6;
+    }
+
+    .yellow {
+      background-color: #ffff80;
+    }
+
+    .pink {
+      background-color: #ff6b86;
+    }
+
+    .purple {
+      background-color: #7e34f6;
+    }
+
+    .black {
+      background-color: #000;
+    }
+
+    .orange {
+      background-color: #f69234;
+    }
+
+  </style>
+</body>
+
+</html>
diff --git a/core/src/components/menu-toggle/test/preview/index.html b/core/src/components/menu-toggle/test/preview/index.html
new file mode 100644
index 0000000000..a0e27ff515
--- /dev/null
+++ b/core/src/components/menu-toggle/test/preview/index.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Menu Toggle</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+    <ion-menu side="left" class="e2eLeftMenu">
+
+      <ion-header>
+        <ion-toolbar color="secondary">
+          <ion-title>Left Menu</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content>
+        <ion-list>
+          <ion-item>Open Right Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
+        </ion-list>
+      </ion-content>
+
+      <ion-footer>
+        <ion-toolbar color="secondary">
+          <ion-title>Footer</ion-title>
+        </ion-toolbar>
+      </ion-footer>
+
+    </ion-menu>
+
+    <ion-menu side="right">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Hola</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content padding>
+        hola macho
+      </ion-content>
+    </ion-menu>
+
+    <div class="ion-page" main>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-menu-toggle>
+              <ion-button>
+                <ion-icon slot="icon-only" name="menu"></ion-icon>
+              </ion-button>
+            </ion-menu-toggle>
+          </ion-buttons>
+          <ion-title>Menu Toggle</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content padding>
+          <div>
+              <ion-button onclick="openDefault()">Menu Button Will Open Default</ion-button>
+          </div>
+        <div>
+            <ion-button onclick="openLeft()">Menu Button Will Open Left</ion-button>
+        </div>
+        <div>
+            <ion-button onclick="openRight()">Menu Button Will Open Right</ion-button>
+        </div>
+      </ion-content>
+
+
+  </ion-app>
+  <ion-menu-controller></ion-menu-controller>
+
+  <script>
+
+    async function openDefault() {
+      const menuButton = document.querySelector('ion-menu-toggle');
+      await menuButton.componentOnReady();
+      menuButton.menu = null;
+    }
+
+    async function openLeft() {
+      const menuButton = document.querySelector('ion-menu-toggle');
+      await menuButton.componentOnReady();
+      menuButton.menu = 'left';
+    }
+
+    async function openRight() {
+      const menuButton = document.querySelector('ion-menu-toggle');
+      await menuButton.componentOnReady();
+      menuButton.menu = 'right';
+    }
+  </script>
+  <style>
+  </style>
+</body>
+</html>
diff --git a/core/src/components/menu/test/preview/index.html b/core/src/components/menu/test/preview/index.html
new file mode 100644
index 0000000000..5092a76c06
--- /dev/null
+++ b/core/src/components/menu/test/preview/index.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Menu</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  <script src="/dist/ionic.js"></script>
+
+  <style>
+    .f {
+      width: 200px;
+      height: 200px;
+      background: blue;
+      margin: 20px auto;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-menu side="left" class="e2eLeftMenu">
+
+      <ion-header>
+        <ion-toolbar color="secondary">
+          <ion-title>Left Menu</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content>
+        <ion-list>
+          <ion-item>Open Right Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
+          <ion-item>Close Menu</ion-item>
+        </ion-list>
+      </ion-content>
+
+      <ion-footer>
+        <ion-toolbar color="secondary">
+          <ion-title>Footer</ion-title>
+        </ion-toolbar>
+      </ion-footer>
+
+    </ion-menu>
+
+    <ion-menu side="right">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Hola</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content padding>
+        hola macho
+      </ion-content>
+    </ion-menu>
+
+    <div class="ion-page" main>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Menu</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content padding>
+        <p>
+          <ion-button id="left" onclick="openLeft()">Open left menu</ion-button>
+          <ion-button onclick="openRight()">Open right menu</ion-button>
+        </p>
+        <p>
+          <ion-button onclick="setPush()">Set Push</ion-button>
+          <ion-button onclick="setOverlay()">Set Overlay</ion-button>
+          <ion-button onclick="setReveal()">Set Reveal</ion-button>
+
+          <ion-button onclick="setEnabled()">Set Swipe Enabled False</ion-button>
+        </p>
+
+        <div class="f"></div>
+        <div class="f"></div>
+        <div class="f"></div>
+        <div class="f"></div>
+        <div class="f"></div>
+        <div class="f"></div>
+
+      </ion-content>
+
+    </div>
+
+  </ion-app>
+  <ion-menu-controller></ion-menu-controller>
+
+  <script>
+    const menu = document.querySelector('ion-menu-controller');
+    function openLeft() {
+      console.log('Open left menu');
+      menu.open('left');
+    }
+    function openRight() {
+      console.log('Open right menu');
+      menu.open('right');
+    }
+    function setPush() {
+      menu.get('left').type = 'push';
+      menu.get('right').type = 'push';
+    }
+    function setOverlay() {
+      menu.get('left').type = 'overlay';
+      menu.get('right').type = 'overlay';
+    }
+    function setReveal() {
+      menu.get('left').type = 'reveal';
+      menu.get('right').type = 'reveal';
+    }
+    function setEnabled() {
+      menu.get('left').swipeEnabled = false;
+    }
+  </script>
+</body>
+</html>
diff --git a/core/src/components/modal/test/preview/index.html b/core/src/components/modal/test/preview/index.html
new file mode 100644
index 0000000000..e25977481b
--- /dev/null
+++ b/core/src/components/modal/test/preview/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Modal</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Modal</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content padding>
+        <ion-modal-controller></ion-modal-controller>
+        <p>
+          <ion-button id="presentModal" class="e2ePresentModal" onclick="presentModal()">Present modal</ion-button>
+        </p>
+      </ion-content>
+
+  </ion-app>
+
+  <script>
+    window.addEventListener("ionModalDidDismiss", function(e){console.log('DidDismiss', e)})
+    window.addEventListener("ionModalWillDismiss", function(e){console.log('WillDismiss', e)})
+    async function presentModal() {
+
+      // initialize controller
+      const modalController = document.querySelector('ion-modal-controller');
+      await modalController.componentOnReady();
+
+      // create component to open
+      const element = document.createElement('div');
+      element.innerHTML = `
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Super Modal</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <h1>Content of doom</h1>
+        <div>Here's some more content</div>
+        <ion-button class="dismiss">Dismiss Modal</ion-button>
+      </ion-content>
+      `;
+
+      // listen for close event
+      const button = element.querySelector('ion-button');
+      button.addEventListener('click', () => {
+        modalController.dismiss();
+      });
+
+      // present the modal
+      const modalElement = await modalController.create({
+        component: element
+      });
+      modalElement.present();
+    }
+  </script>
+</body>
+</html>
diff --git a/core/src/components/nav-pop/test/preview/index.html b/core/src/components/nav-pop/test/preview/index.html
new file mode 100644
index 0000000000..becac11b31
--- /dev/null
+++ b/core/src/components/nav-pop/test/preview/index.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Nav Pop</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+<body onload="loadFirstPage()">
+  <ion-app>
+    <ion-nav></ion-nav>
+  </ion-app>
+  <style>
+      f {
+        display: block;
+        margin: 15px auto;
+        max-width: 150px;
+        height: 150px;
+        background: blue;
+      }
+
+      f:last-of-type {
+        background: yellow;
+      }
+    </style>
+</body>
+
+<script>
+
+  async function loadFirstPage() {
+    const nav = document.querySelector('ion-nav');
+    await nav.componentOnReady();
+    const firstPage = document.createElement('div');
+    firstPage.classList.add('first-page');
+    firstPage.innerHTML = `
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Page One</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content padding>
+        <h1>Page One</h1>
+        <ion-button class="next">Go to Page Two</ion-button>
+      </ion-content>
+    `;
+
+    await nav.push(firstPage);
+
+    // okay cool, we're in the DOM now
+    const button = firstPage.querySelector('ion-button');
+    button.addEventListener('click', async () => {
+      await goToPageTwo(nav);
+    });
+  }
+
+  async function goToPageTwo(nav) {
+    const secondPage = document.createElement('div');
+    secondPage.classList.add('second-page');
+    secondPage.innerHTML = `
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Page Two</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content padding>
+        <h1>Page Two</h1>
+        <ion-button class="next">Go to Page Three</ion-button>
+        <ion-nav-pop>
+          <ion-button class="previous">Go Back</ion-button>
+        </ion-nav-pop>
+      </ion-content>
+    `;
+
+    // okay cool, we're in the DOM now
+    await nav.push(secondPage);
+
+    const nextButton = secondPage.querySelector('ion-button .next');
+    nextButton.addEventListener('click', async () => {
+      await goToPageThree(nav);
+    });
+  }
+
+  async function goToPageThree(nav) {
+    const thirdPage = document.createElement('div');
+    thirdPage.classList.add('third-page');
+    thirdPage.innerHTML = `
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Page Three</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content padding>
+        <h1>Page Three</h1>
+        <ion-nav-pop>
+          <ion-button class="previous">Go Back</ion-button>
+        </ion-nav-pop>
+      </ion-content>
+    `;
+
+    // okay cool, we're in the DOM now
+    await nav.push(thirdPage);
+  }
+</script>
+</html>
diff --git a/core/src/components/nav-push/test/preview/index.html b/core/src/components/nav-push/test/preview/index.html
new file mode 100644
index 0000000000..4f590507b8
--- /dev/null
+++ b/core/src/components/nav-push/test/preview/index.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Nav Push</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+<body onload="loadFirstPage()">
+  <ion-app>
+    <ion-nav></ion-nav>
+  </ion-app>
+  <style>
+      f {
+        display: block;
+        margin: 15px auto;
+        max-width: 150px;
+        height: 150px;
+        background: blue;
+      }
+
+      f:last-of-type {
+        background: yellow;
+      }
+    </style>
+</body>
+
+<script>
+
+  class FirstPage extends HTMLElement {
+    async connectedCallback() {
+      this.innerHTML = `
+
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Page One</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content padding>
+          <h1>Page One</h1>
+          <ion-nav-push component="page-two">
+            <ion-button class="next">Go to Page Two</ion-button>
+          </ion-nav-push>
+        </ion-content>
+      `;
+    }
+  }
+
+  class SecondPage extends HTMLElement {
+    async connectedCallback() {
+      this.innerHTML = `
+
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Page Two</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content padding>
+          <h1>Page Two</h1>
+          <ion-nav-push component="page-three">
+            <ion-button class="next">Go to Page Three</ion-button>
+          </ion-nav-push>
+          <ion-nav-pop>
+            <ion-button class="back">Go Back</ion-button>
+          </ion-nav-pop>
+        </ion-content>
+      `;
+    }
+  }
+
+  class ThirdPage extends HTMLElement {
+    async connectedCallback() {
+      this.innerHTML = `
+
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Page Three</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content padding>
+          <h1>Page Three</h1>
+          <ion-nav-pop>
+            <ion-button class="back">Go Back</ion-button>
+          </ion-nav-pop>
+        </ion-content>
+      `;
+    }
+  }
+
+  customElements.define('page-one', FirstPage);
+  customElements.define('page-two', SecondPage);
+  customElements.define('page-three', ThirdPage);
+
+  async function loadFirstPage() {
+    const nav = document.querySelector('ion-nav');
+    await nav.componentOnReady();
+    await nav.setRoot('page-one');
+  }
+</script>
+</html>
diff --git a/core/src/components/nav-set-root/test/preview/index.html b/core/src/components/nav-set-root/test/preview/index.html
new file mode 100644
index 0000000000..68209ed8d8
--- /dev/null
+++ b/core/src/components/nav-set-root/test/preview/index.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Nav Set Root</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+<body onload="loadFirstPage()">
+  <ion-app>
+    <ion-nav root="page-one"></ion-nav>
+  </ion-app>
+</body>
+
+<script>
+
+  class FirstPage extends HTMLElement {
+    async connectedCallback() {
+      this.innerHTML = `
+
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Page One</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content padding>
+          <h1>Page One</h1>
+          <ion-nav-set-root component="page-two">
+            <ion-button class="next">Go to Page Two</ion-button>
+          </ion-nav-set-root>
+        </ion-content>
+      `;
+    }
+  }
+
+  class SecondPage extends HTMLElement {
+    async connectedCallback() {
+      this.innerHTML = `
+
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Page Two</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content padding>
+          <h1>Page Two</h1>
+          <ion-nav-set-root component="page-three">
+            <ion-button class="next">Go to Page Three</ion-button>
+          </ion-nav-set-root>
+        </ion-content>
+      `;
+    }
+  }
+
+  class ThirdPage extends HTMLElement {
+    async connectedCallback() {
+      this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Page Three</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content padding>
+          <h1>Page Three</h1>
+        </ion-content>
+      `;
+    }
+  }
+
+  customElements.define('page-one', FirstPage);
+  customElements.define('page-two', SecondPage);
+  customElements.define('page-three', ThirdPage);
+</script>
+</html>
diff --git a/core/src/components/nav/test/preview/index.html b/core/src/components/nav/test/preview/index.html
new file mode 100644
index 0000000000..bf7ad1c1de
--- /dev/null
+++ b/core/src/components/nav/test/preview/index.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Nav</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+  <script>
+    class PageOne extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>Page One</ion-title>
+            </ion-toolbar>
+          </ion-header>
+          <ion-content padding>
+            <h1>Page One</h1>
+            <ion-nav-push component="page-two">
+              <ion-button class="next">Go to Page Two</ion-button>
+            </ion-nav-push>
+          </ion-content>
+        `;
+      }
+    }
+    class PageTwo extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+          <ion-header>
+            <ion-toolbar>
+              <ion-buttons slot="start">
+                <ion-back-button text="Page One"></ion-back-button>
+              </ion-buttons>
+              <ion-title>Page Two</ion-title>
+            </ion-toolbar>
+          </ion-header>
+          <ion-content padding>
+            <h1>Page Two</h1>
+            <div>
+              <ion-nav-push component="page-three">
+                <ion-button class="next">Go to Page Two</ion-button>
+              </ion-nav-push>
+            </div>
+          </ion-content>
+        `;
+      }
+    }
+    class PageThree extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+          <ion-header>
+            <ion-toolbar>
+              <ion-buttons slot="start">
+                <ion-back-button text="Page Two"></ion-back-button>
+              </ion-buttons>
+              <ion-title>Page Three</ion-title>
+            </ion-toolbar>
+          </ion-header>
+          <ion-content padding>
+            <h1>Page Three</h1>
+          </ion-content>
+        `;
+      }
+    }
+    customElements.define('page-one', PageOne);
+    customElements.define('page-two', PageTwo);
+    customElements.define('page-three', PageThree);
+  </script>
+</head>
+<body>
+  <ion-app>
+    <ion-nav root="page-one"></ion-nav>
+  </ion-app>
+</body>
+</html>
diff --git a/core/src/components/note/test/preview/index.html b/core/src/components/note/test/preview/index.html
new file mode 100644
index 0000000000..2af305be8f
--- /dev/null
+++ b/core/src/components/note/test/preview/index.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Note</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Note</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content>
+        <ion-list>
+          <ion-list-header>Notes Right</ion-list-header>
+          <ion-item>
+            <ion-label>Default Note</ion-label>
+            <ion-note slot="end">99</ion-note>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Primary Note</ion-label>
+            <ion-note slot="end" color="primary">99</ion-note>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Secondary Note</ion-label>
+            <ion-note slot="end" color="secondary">99</ion-note>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Tertiary Note</ion-label>
+            <ion-note slot="end" color="tertiary">99</ion-note>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Success Note</ion-label>
+            <ion-note slot="end" color="success">99</ion-note>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Warning Note</ion-label>
+            <ion-note slot="end" color="warning">99</ion-note>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Danger Note</ion-label>
+            <ion-note slot="end" color="danger">99</ion-note>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Light Note</ion-label>
+            <ion-note slot="end" color="light">99</ion-note>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Medium Note</ion-label>
+            <ion-note slot="end" color="medium">99</ion-note>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Dark Note</ion-label>
+            <ion-note slot="end" color="dark">99</ion-note>
+          </ion-item>
+
+          <ion-item onclick="toggleColor()">
+            <ion-note id="toggleColor" slot="end" color="primary">primary</ion-note>
+            <ion-label>Dynamic Note Color (toggle)</ion-label>
+          </ion-item>
+        </ion-list>
+
+        <ion-list>
+          <ion-list-header>Notes Left</ion-list-header>
+          <ion-item>
+            <ion-label>Default Note</ion-label>
+            <ion-note slot="start">99</ion-note>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Primary Note</ion-label>
+            <ion-note slot="start" color="primary">99</ion-note>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Secondary Note</ion-label>
+            <ion-note slot="start" color="secondary">99</ion-note>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Tertiary Note</ion-label>
+            <ion-note slot="start" color="tertiary">99</ion-note>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Success Note</ion-label>
+            <ion-note slot="start" color="success">99</ion-note>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Warning Note</ion-label>
+            <ion-note slot="start" color="warning">99</ion-note>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Danger Note</ion-label>
+            <ion-note slot="start" color="danger">99</ion-note>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Light Note</ion-label>
+            <ion-note slot="start" color="light">99</ion-note>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Medium Note</ion-label>
+            <ion-note slot="start" color="medium">99</ion-note>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Dark Note</ion-label>
+            <ion-note slot="start" color="dark">99</ion-note>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+
+
+  </ion-app>
+
+  <script>
+    const note = document.querySelector('#toggleColor');
+
+    function toggleColor() {
+      const prev = note.getAttribute('color');
+      note.setAttribute('color', prev === 'secondary' ? 'primary' : 'secondary');
+      note.innerHTML = prev === 'secondary' ? 'primary' : 'secondary';
+    }
+  </script>
+</body>
+</html>
diff --git a/core/src/components/page/test/preview/index.html b/core/src/components/page/test/preview/index.html
new file mode 100644
index 0000000000..6bbbb29fcd
--- /dev/null
+++ b/core/src/components/page/test/preview/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Page</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Page</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content padding>
+        Ion Page Content
+      </ion-content>
+
+  </ion-app>
+</body>
+
+</html>
diff --git a/core/src/components/platform/test/preview/index.html b/core/src/components/platform/test/preview/index.html
new file mode 100644
index 0000000000..3d72db3ddc
--- /dev/null
+++ b/core/src/components/platform/test/preview/index.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Platform Basic</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body onload="initialize()">
+  <ion-app>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Platform</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content padding>
+        <h2>The Platforms are:</h2>
+        <ul class="platform-name-list"></ul>
+
+        <h2>The Platforms versions are:</h2>
+        <ul class="platform-version-list"></ul>
+
+        <h2>The orientation is <span class="orientation"></span></h2>
+
+        <h2>The ready event has fired: <span class="ready"></span></h2>
+      </ion-content>
+
+
+  </ion-app>
+
+  <script>
+    async function initialize() {
+      const app = document.querySelector('ion-app');
+      await app.componentOnReady();
+      const platform = document.querySelector('ion-platform');
+      await platform.componentOnReady();
+
+      const platforms = platform.platforms();
+      const platformListElement = document.querySelector('.platform-name-list');
+      platforms.forEach(platform => {
+        const element = document.createElement('li');
+        element.textContent = platform;
+        platformListElement.appendChild(element);
+      });
+
+      const platformVersionList = document.querySelector('.platform-version-list');
+      const versions = platform.versions();
+      versions.forEach(version => {
+        const element = document.createElement('li');
+        element.textContent = JSON.stringify(version);
+        platformVersionList.appendChild(element);
+      });
+
+      const orientationText = platform.isPortrait() ? 'portrait' : 'landscape';
+      document.querySelector('.orientation').textContent = orientationText;
+
+
+      const readyElement = document.querySelector('.ready');
+      readyElement.textContent = 'No';
+
+      // use artificial timeout to see the visual
+      setTimeout(() => {
+        platform.ready().then(() => {
+          readyElement.textContent = 'Yes';
+        });
+      }, 1000);
+
+    }
+  </script>
+</body>
+
+</html>
diff --git a/core/src/components/popover/test/preview/index.html b/core/src/components/popover/test/preview/index.html
new file mode 100644
index 0000000000..2bdd568502
--- /dev/null
+++ b/core/src/components/popover/test/preview/index.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Popover</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+
+      <ion-header>
+        <ion-toolbar color="primary">
+          <ion-buttons slot="start">
+            <ion-button onclick="presentPopover({component: 'profile-page', ev: event })">
+              <ion-icon slot="icon-only" name="person"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+          <ion-title>Popover</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content" padding>
+        <ion-button class="e2eShowPopover" expand="block" onclick="presentPopover({ component: 'profile-page', ev: event })">Show Popover</ion-button>
+        <ion-button expand="block" onclick="presentPopover({ component: 'translucent-page', ev: event, translucent: true })">Show Translucent Popover</ion-button>
+        <ion-button expand="block" color="secondary" onclick="presentPopover({ component: 'list-page', ev: event })">Show Long List Popover</ion-button>
+        <ion-button expand="block" color="danger" onclick="presentPopover({ component: 'profile-page' })">No Event Popover</ion-button>
+
+        <ion-popover-controller></ion-popover-controller>
+      </ion-content>
+
+      <ion-footer>
+        <ion-toolbar color="primary">
+          <ion-buttons slot="end">
+            <ion-button onclick="presentPopover({component: 'profile-page', ev: event })">
+              <ion-icon slot="icon-only" name="person"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+          <ion-title>Popover</ion-title>
+        </ion-toolbar>
+      </ion-footer>
+
+  </ion-app>
+  <script>
+
+
+    // window.addEventListener('ionPopoverDidDismiss', function(e){console.log('didDismiss', e)})
+    // window.addEventListener('ionPopoverWillDismiss', function(e){console.log('willDismiss', e)})
+    async function presentPopover(opts) {
+      const popoverController = document.querySelector('ion-popover-controller');
+      await popoverController.componentOnReady();
+      const popoverElement = await popoverController.create(opts);
+      return await popoverElement.present();
+    }
+
+    class ProfilePage extends HTMLElement {
+      constructor() {
+        super();
+      }
+
+      connectedCallback() {
+        this.innerHTML = `
+          <ion-content>
+            <ion-list>
+              <ion-list-header>Ionic</ion-list-header>
+              <ion-item><ion-label>Item 0</ion-label></ion-item>
+              <ion-item><ion-label>Item 1</ion-label></ion-item>
+              <ion-item><ion-label>Item 2</ion-label></ion-item>
+              <ion-item><ion-label>Item 3</ion-label></ion-item>
+            </ion-list>
+          </ion-content>
+        `;
+      }
+    }
+
+    customElements.define('profile-page', ProfilePage);
+
+    class ListPage extends HTMLElement {
+      constructor() {
+        super();
+      }
+
+      connectedCallback() {
+        let items = '';
+        for (var i = 0; i < 30; i++) {
+          items += '<ion-item><ion-label>Item ' + i + '</ion-label></ion-item>';
+        }
+
+        this.innerHTML = `
+          <ion-content>
+            <ion-list>
+              <ion-list-header>Ionic</ion-list-header>
+              ` + items + `
+            </ion-list>
+          </ion-content>
+        `;
+      }
+    }
+
+    customElements.define('list-page', ListPage);
+
+    class TranslucentPage extends HTMLElement {
+      constructor() {
+        super();
+      }
+
+      connectedCallback() {
+        this.innerHTML = `
+          <div padding>
+            <h1>Translucent Popover</h1>
+          </div>
+        `;
+      }
+    }
+
+    customElements.define('translucent-page', TranslucentPage);
+  </script>
+</body>
+
+</html>
diff --git a/core/src/components/radio-group/test/preview/index.html b/core/src/components/radio-group/test/preview/index.html
new file mode 100644
index 0000000000..b489c8bb33
--- /dev/null
+++ b/core/src/components/radio-group/test/preview/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Radio Group</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+<body>
+  <ion-app>
+
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Radio Group</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="outer-content">
+        <ion-radio-group id="dynamicDisabled" disabled name="tannen" id="group" value="biff">
+          <ion-list-header>
+            <ion-label>Luckiest Man On Earth</ion-label>
+          </ion-list-header>
+
+          <ion-item>
+            <ion-label>Biff <span id="biff"></span></ion-label>
+            <ion-radio value="biff" slot="start"></ion-radio>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Griff <span id="griff"></span></ion-label>
+            <ion-radio value="griff" slot="start"></ion-radio>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Buford <span id="buford"></span></ion-label>
+            <ion-radio value="buford" slot="start"></ion-radio>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>George</ion-label>
+            <ion-radio value="george" slot="start"></ion-radio>
+          </ion-item>
+
+        </ion-radio-group>
+
+        <ion-button onClick="toggleDisabled()">Toggle Disabled</ion-button>
+      </ion-content>
+
+    <script>
+      var dynamicDisabled = document.getElementById('dynamicDisabled');
+
+      function toggleDisabled() {
+        dynamicDisabled.disabled = !dynamicDisabled.disabled;
+      }
+    </script>
+
+  </ion-app>
+</body>
+</html>
+
+
+
diff --git a/core/src/components/radio/test/preview/index.html b/core/src/components/radio/test/preview/index.html
new file mode 100644
index 0000000000..602e647fe8
--- /dev/null
+++ b/core/src/components/radio/test/preview/index.html
@@ -0,0 +1,191 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Radio</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+<body>
+  <ion-app>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Radio</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content" class="radio-test outer-content">
+        <ion-list>
+          <ion-radio-group id="fruitRadio">
+            <ion-item-divider>
+              <ion-label>Fruits (Group w/ values)</ion-label>
+            </ion-item-divider>
+            <ion-item>
+              <ion-label>Apple</ion-label>
+              <ion-radio slot="start" value="apple"></ion-radio>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>Grape, checked, disabled</ion-label>
+              <ion-radio slot="start" id="grapeChecked" value="grape" checked disabled></ion-radio>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>Cherry</ion-label>
+              <ion-radio slot="start" color="danger" value="cherry"></ion-radio>
+            </ion-item>
+          </ion-radio-group>
+
+          <ion-radio-group id="pizzaRadio">
+            <ion-item-divider>
+              <ion-label>Extra Pizza Topping (Group w/ no values)</ion-label>
+            </ion-item-divider>
+            <ion-item>
+              <ion-label>Pepperoni</ion-label>
+              <ion-radio slot="end" name="pepperoni" checked></ion-radio>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>Sausage</ion-label>
+              <ion-radio slot="end" color="danger" name="sausage"></ion-radio>
+            </ion-item>
+          </ion-radio-group>
+
+          <ion-radio-group id="veggiesRadio" allow-empty-selection>
+            <ion-item-divider>
+              <ion-label>Veggies (Group w/ allow empty)</ion-label>
+            </ion-item-divider>
+            <ion-item>
+              <ion-label>Carrot</ion-label>
+              <ion-radio slot="end" value="carrot"></ion-radio>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>Tomato</ion-label>
+              <ion-radio slot="end" value="tomato"></ion-radio>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>Broccoli</ion-label>
+              <ion-radio id="dangerRadio" slot="end" color="danger" value="broccoli" checked></ion-radio>
+            </ion-item>
+          </ion-radio-group>
+
+          <ion-item>
+            <ion-button slot="start" onClick="toggleBoolean('grapeChecked', 'checked')" fill="outline" size="small">Checked</ion-button>
+            <ion-button slot="start" onClick="toggleBoolean('grapeChecked', 'disabled')" fill="outline" size="small">Disabled</ion-button>
+            <ion-button slot="end" onClick="printRadioValues()" fill="outline" size="small">Print</ion-button>
+            <ion-button slot="end" onClick="toggleString('dangerRadio', 'color', 'danger', 'secondary')" fill="outline" size="small" color="danger">Color</ion-button>
+          </ion-item>
+        </ion-list>
+
+        <pre id="valuesCode"></pre>
+
+        <ion-list>
+          <ion-list-header>
+            No Radio Group
+          </ion-list-header>
+          <ion-item>
+            <ion-label>Kiwi, (ionChange) Secondary color</ion-label>
+            <ion-radio slot="start" color="secondary"></ion-radio>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Strawberry, (ionChange) checked="true"</ion-label>
+            <ion-radio slot="start" color="light" checked="true"></ion-radio>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Checkbox right, checked, really long text that should ellipsis</ion-label>
+            <ion-radio slot="end" color="danger" checked></ion-radio>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Checkbox right side</ion-label>
+            <ion-radio slot="end" checked></ion-radio>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Button w/ right side default icon, really long text that should ellipsis</ion-label>
+            <ion-icon name="information-circle" slot="end"></ion-icon>
+          </ion-item>
+
+        </ion-list>
+
+        <p>
+          <ion-radio id="standAloneChecked"></ion-radio>
+          Stand-alone checkbox: <span id="standAloneCheckedSpan"></span>
+        </p>
+
+        <ion-item>
+          <ion-label>Checkbox / Toggle</ion-label>
+          <ion-radio slot="start" id="checked"></ion-radio>
+          <ion-toggle id="checked"></ion-toggle>
+        </ion-item>
+        <ion-item>
+          <ion-label>Checked</ion-label>
+          <ion-radio slot="start" checked></ion-radio>
+          <ion-toggle checked></ion-toggle>
+        </ion-item>
+        <ion-item>
+          <ion-label>Disabled</ion-label>
+          <ion-radio slot="start" disabled></ion-radio>
+          <ion-toggle disabled></ion-toggle>
+        </ion-item>
+
+      </ion-content>
+
+    <script>
+      var radioValues = ['fruitRadio', 'pizzaRadio', 'veggiesRadio'];
+      printRadioValues();
+
+      function printForm(ev) {
+        console.log('TODO get working with forms');
+      }
+
+      function printRadioValues() {
+        var html = 'Values:<br>';
+
+        for (var i = 0; i < radioValues.length; i++) {
+          var radio = radioValues[i];
+          var el = document.getElementById(radio);
+          html += '<span>' + radio + ': ' + el.value + ' </span><br>';
+        }
+
+        var valueEle = document.getElementById('valuesCode');
+        valueEle.innerHTML = html;
+      }
+
+      function toggleBoolean(id, prop) {
+        var el = document.getElementById(id);
+
+        var isTrue = el[prop] ? false : true;
+        el[prop] = isTrue;
+        console.debug('in toggleBoolean, setting', prop, 'to', isTrue);
+      }
+
+      function toggleString(id, prop, firstVal, secondVal) {
+        var el = document.getElementById(id);
+
+        var stringVal = el[prop] == firstVal ? secondVal : firstVal;
+        el[prop] = stringVal;
+        console.debug('in toggleString, setting', prop, 'to', stringVal);
+      }
+    </script>
+
+    <style>
+      .radio-test pre {
+        background: #f6f6f6;
+        border: 1px solid #ddd;
+        padding: 15px 10px;
+        margin-top: -20px;
+      }
+    </style>
+
+  </ion-app>
+</body>
+</html>
+
+
+
diff --git a/core/src/components/range/test/preview/index.html b/core/src/components/range/test/preview/index.html
new file mode 100644
index 0000000000..a48ac3ea85
--- /dev/null
+++ b/core/src/components/range/test/preview/index.html
@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Range</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Range</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content">
+        <ion-list>
+          <ion-list-header>
+            Range color
+          </ion-list-header>
+          <ion-item>
+            <ion-range value="20"></ion-range>
+          </ion-item>
+          <ion-item>
+            <ion-range value="60" color="light"></ion-range>
+          </ion-item>
+          <ion-item>
+            <ion-range value="80" color="dark"></ion-range>
+          </ion-item>
+          <ion-item>
+            <ion-range pin="true" color="secondary" value="86">
+              <ion-icon small name="ios-sunny" slot="start"></ion-icon>
+              <ion-icon name="ios-sunny" slot="end"></ion-icon>
+            </ion-range>
+            <ion-range pin="true" color="danger" value="54">
+              <ion-icon small name="ios-thermometer" slot="start"></ion-icon>
+              <ion-icon name="ios-thermometer" slot="end"></ion-icon>
+            </ion-range>
+          </ion-item>
+        </ion-list>
+
+        <ion-list>
+          <ion-list-header>
+            Dynamic Value
+          </ion-list-header>
+          <ion-item>
+            <ion-range pin="true" color="secondary" id="progressValue"></ion-range>
+            <div id="progressValueResult" slot="end"></div>
+          </ion-item>
+          <ion-item>
+            <ion-range pin="true" color="danger" id="brightnessValue"></ion-range>
+            <div id="brightnessValueResult" slot="end"></div>
+          </ion-item>
+          <ion-item>
+            <ion-range pin="true" color="dark" id="contrastValue"></ion-range>
+            <div id="contrastValueResult" slot="end"></div>
+          </ion-item>
+          <ion-button onclick="increaseRangeValues()">
+            Increase Values
+          </ion-button>
+        </ion-list>
+
+        <ion-list>
+          <ion-list-header>
+            Mode
+          </ion-list-header>
+          <ion-item>
+            <ion-range value="50" mode="md"></ion-range>
+          </ion-item>
+          <ion-item>
+            <ion-range value="50" mode="ios"></ion-range>
+          </ion-item>
+        </ion-list>
+
+        <ion-list>
+          <ion-list-header>
+            Options
+          </ion-list-header>
+          <ion-item>
+            <ion-range pin="true"></ion-range>
+          </ion-item>
+          <ion-item>
+            <ion-range min="-200" max="200" steps="10" snaps="true" pin="true"></ion-range>
+          </ion-item>
+          <ion-item>
+            <ion-range min="1000" max="2000" steps="100" snaps="true" id="range"></ion-range>
+          </ion-item>
+          <ion-item>
+            <ion-range dual-knobs="true" id="multiKnob"></ion-range>
+          </ion-item>
+          <ion-item>
+            <ion-range id="debounce" debounce="5000"></ion-range>
+          </ion-item>
+        </ion-list>
+
+        <ion-button onclick="elTest()">Test</ion-button>
+      </ion-content>
+
+  </ion-app>
+
+  <script>
+    var ranges = ['progressValue', 'brightnessValue', 'contrastValue'];
+
+    for (var i = 0; i < ranges.length; i++) {
+      var el = document.getElementById(ranges[i]);
+      el.value = (i + 1) * 10;
+      updateRangeResult(el);
+
+      el.addEventListener('ionChange', function(ev) {
+        updateRangeResult(ev.currentTarget);
+      });
+    }
+
+    function updateRangeResult(el) {
+      var resultEl = document.getElementById(`${el.id}Result`);
+      resultEl.innerHTML = el.value;
+    }
+
+    function increaseRangeValues() {
+      for (var i = 0; i < ranges.length; i++) {
+        var el = document.getElementById(ranges[i]);
+        var newValue = el.value + 10;
+
+        if (newValue > 100) {
+          newValue = 10;
+        }
+
+        el.value = newValue;
+      }
+    }
+
+    var knob = document.getElementById('multiKnob')
+    var debounceRange = document.getElementById('debounce')
+    knob.value = {
+      lower: 33,
+      upper: 60
+    }
+    knob.addEventListener('ionFocus', function(ev) {
+      console.log('focus', ev)
+    })
+    knob.addEventListener('ionBlur', function(ev) {
+      console.log('blur', ev)
+    })
+    knob.addEventListener('ionChange', function(ev) {
+      console.log('change', ev)
+    })
+    debounceRange.addEventListener('ionChange', function(ev) {
+      console.log('change', ev)
+    })
+
+    function elTest() {
+      var range = document.getElementById('range');
+      range.disabled = !range.disabled;
+    }
+  </script>
+</body>
+
+</html>
diff --git a/core/src/components/refresher/test/preview/index.html b/core/src/components/refresher/test/preview/index.html
new file mode 100644
index 0000000000..6cf1a0efdb
--- /dev/null
+++ b/core/src/components/refresher/test/preview/index.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Refresher</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Pull To Refresh</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content>
+        <ion-refresher id="refresher" disabled="false" slot="fixed">
+          <ion-refresher-content
+            pulling-text="Pull to refresh..."
+            refreshing-spinner="bubbles"
+            refreshing-text="Refreshing...">
+          </ion-refresher-content>
+        </ion-refresher>
+
+        <ion-list id="list"></ion-list>
+
+      </ion-content>
+
+
+
+  </ion-app>
+  <ion-menu-controller></ion-menu-controller>
+
+  <script>
+    let items = [];
+    for (var i = 0; i < 30; i++) {
+      items.push( i+1 );
+    }
+    const list = document.getElementById('list');
+    const refresher = document.getElementById('refresher');
+    refresher.addEventListener('ionRefresh', async function() {
+      console.log('Loading data...');
+      const data = await getAsyncData();
+      items = items.concat(data);
+      refresher.complete();
+      render();
+      console.log('Done');
+    });
+    function render() {
+      let html = '';
+      for(let item of items) {
+        html += `<ion-item>${item}</ion-item>`;
+      }
+      list.innerHTML = html;
+    }
+    function getAsyncData() {
+      // async return mock data
+      return new Promise(resolve => {
+        setTimeout(() => {
+          let data = [];
+          for (var i = 0; i < 30; i++) {
+            data.push(i);
+          }
+          resolve(data);
+        }, 500);
+      });
+    }
+    render();
+  </script>
+</body>
+</html>
diff --git a/core/src/components/reorder/test/preview/index.html b/core/src/components/reorder/test/preview/index.html
new file mode 100644
index 0000000000..da0643f19e
--- /dev/null
+++ b/core/src/components/reorder/test/preview/index.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Reorder</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Reorder</ion-title>
+          <ion-buttons slot="end">
+            <ion-button onclick="toggleEdit()">Toggle</ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content">
+        <ion-list>
+          <ion-reorder-group id="reorder">
+
+            <ion-item>
+              <ion-label>
+                Item 1 (default ion-reorder)
+              </ion-label>
+              <ion-reorder slot="end"></ion-reorder>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>
+                Item 2 (default ion-reorder)
+              </ion-label>
+              <ion-reorder slot="end"></ion-reorder>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>
+                Item 3 (default ion-reorder slot="start")
+              </ion-label>
+              <ion-reorder slot="start"></ion-reorder>
+            </ion-item>
+
+            <ion-item color="secondary">
+              <ion-label>
+                Item 4 (default ion-reorder slot="start")
+              </ion-label>
+              <ion-reorder slot="start"></ion-reorder>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>
+                Item 5 (custom ion-reorder)
+              </ion-label>
+              <ion-reorder slot="end">
+                <ion-icon name="pizza"></ion-icon>
+              </ion-reorder>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>
+                Item 6 (custom ion-reorder)
+              </ion-label>
+              <ion-reorder slot="end">
+                <ion-icon name="pizza"></ion-icon>
+              </ion-reorder>
+            </ion-item>
+
+            <ion-item>
+              <ion-label>
+                Item 7 (custom ion-reorder slot="start")
+              </ion-label>
+              <ion-reorder slot="start">
+                <ion-icon name="pizza"></ion-icon>
+              </ion-reorder>
+            </ion-item>
+
+            <ion-reorder>
+              <ion-item>
+                <ion-label>
+                  Item 8 (the whole item can be dragged)
+                </ion-label>
+                </ion-item>
+            </ion-reorder>
+
+            <ion-reorder>
+              <ion-item>
+                <ion-label>
+                  Item 9 (the whole item can be dragged)
+                </ion-label>
+                </ion-item>
+            </ion-reorder>
+
+            <ion-reorder>
+              <ion-item>
+                <ion-label>
+                  Item 10 (the whole item can be dragged)
+                </ion-label>
+                </ion-item>
+            </ion-reorder>
+
+          </ion-reorder-group>
+        </ion-list>
+      </ion-content>
+
+  </ion-app>
+
+  <script>
+    function toggleEdit() {
+      const reorderGroup = document.getElementById('reorder');
+      reorderGroup.disabled = !reorderGroup.disabled;
+    }
+  </script>
+</body>
+
+</html>
diff --git a/core/src/components/ripple-effect/test/preview/index.html b/core/src/components/ripple-effect/test/preview/index.html
new file mode 100644
index 0000000000..e7de5d795a
--- /dev/null
+++ b/core/src/components/ripple-effect/test/preview/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Button Effect</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+
+  <style>
+    .my-block {
+      position: relative;
+      background: blue;
+      color: white;
+      width: 300px;
+      height: 100px;
+      margin: 1rem;
+    }
+  </style>
+</head>
+<body>
+  <ion-app>
+
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Button Effect</ion-title>
+          </ion-toolbar>
+        </ion-header>
+
+        <ion-content padding no-bounce>
+          <p>
+            <ion-button size="small">Small</ion-button>
+          </p>
+          <p>
+            <ion-button size="large">Large</ion-button>
+          </p>
+          <p>
+            <ion-button size="large" fill="outline">Large</ion-button>
+          </p>
+          <p>
+            <ion-button size="large" fill="clear">Large</ion-button>
+          </p>
+          <div class="my-block">
+            <ion-ripple-effect></ion-ripple-effect>
+            This is just a div + effect behind
+            <ion-button onclick="buttonClicked()">Nested button</ion-button>
+          </div>
+          <div class="my-block">
+            This is just a div + effect on top
+            <ion-button onclick="buttonClicked()">Nested button</ion-button>
+            <ion-ripple-effect></ion-ripple-effect>
+          </div>
+
+          <div class="my-block">
+            This is just a div + effect
+            <ion-ripple-effect></ion-ripple-effect>
+          </div>
+        </ion-content>
+
+  </ion-app>
+  <script>
+    function blockClicked() {
+      console.log('block clicked');
+      return true;
+    }
+    function buttonClicked() {
+      console.log('button clicked');
+    }
+  </script>
+</body>
+</html>
diff --git a/core/src/components/router/test/preview/index.html b/core/src/components/router/test/preview/index.html
new file mode 100644
index 0000000000..1210cebb8a
--- /dev/null
+++ b/core/src/components/router/test/preview/index.html
@@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Nav</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+  <script>
+
+    class PageOne extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Page One</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          page one
+          <a href='#/two/second-page'>Ir a la page 2</a>
+        </ion-content>`;
+      }
+    }
+
+    class PageTwo extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Page Two</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          page two
+        </ion-content>`;
+      }
+    }
+
+    class PageThree extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Page 3</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          page tres
+        </ion-content>`;
+      }
+    }
+
+    class TabOne extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Tab one</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          this is the first pahe
+        </ion-content>`;
+      }
+    }
+
+    class TabTwo extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Tab Two</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          <ion-nav></ion-nav>
+        </ion-content>`;
+      }
+    }
+
+    class TabThree extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Tab three</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          hey! this is the 3 tab
+        </ion-content>`;
+      }
+    }
+
+    customElements.define('page-one', PageOne);
+    customElements.define('page-two', PageTwo);
+    customElements.define('page-three', PageThree);
+
+    customElements.define('tab-one', TabOne);
+    customElements.define('tab-two', TabTwo);
+    customElements.define('tab-three', TabThree);
+  </script>
+</head>
+<body>
+
+  <ion-app>
+
+    <ion-router>
+      <ion-route url="/" component="tab-one"> </ion-route>
+
+      <ion-route url="/two" component="tab-two">
+        <ion-route component="page-one"> </ion-route>
+        <ion-route url="/second-page" component="page-two"> </ion-route>
+        <ion-route url="/three-page" component="page-three"> </ion-route>
+      </ion-route>
+
+      <ion-route url="/three" component="tab3"> </ion-route>
+      <ion-route url="/four" component="tab4"> </ion-route>
+
+    </ion-router>
+
+    <ion-tabs>
+
+      <ion-tab component="tab-one"
+        title="Plain List"
+        icon="star"></ion-tab>
+
+      <ion-tab component="tab-two"
+        title="Schedule"
+        icon="globe"></ion-tab>
+
+      <ion-tab name="tab3"
+        title="Stopwatch"
+        icon="logo-facebook"
+        component="tab-three"></ion-tab>
+
+      <ion-tab name="tab4"
+        title="Messages"
+        icon="chatboxes"
+        name="tab-four">
+        inline tab 4
+      </ion-tab>
+    </ion-tabs>
+
+  </ion-app>
+
+  <style>
+    f {
+      display: block;
+      margin: 15px auto;
+      max-width: 150px;
+      height: 150px;
+      background: blue;
+    }
+
+    f:last-of-type {
+      background: yellow;
+    }
+  </style>
+</body>
+
+<script>
+
+</script>
+</html>
diff --git a/core/src/components/searchbar/test/preview/index.html b/core/src/components/searchbar/test/preview/index.html
new file mode 100644
index 0000000000..bf9ec4cd9e
--- /dev/null
+++ b/core/src/components/searchbar/test/preview/index.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Searchbar</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Searchbar</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content">
+        <h5 padding-left padding-top> Search - Default </h5>
+        <ion-searchbar value="test" type="tel" show-cancel-button debounce="500">
+        </ion-searchbar>
+
+        <h5 padding-left padding-top> Search - Animated </h5>
+        <ion-searchbar animated="true" show-cancel-button debounce="500">
+        </ion-searchbar>
+
+        <h5 padding-left padding-top> Search - Custom Placeholder </h5>
+        <ion-searchbar id="dynamicProp" value="33" autocorrect="on" show-cancel-button="true" autocomplete="on" spellcheck="false" type="number" placeholder="Filter Schedules">
+        </ion-searchbar>
+
+        <h5 padding-left padding-top> Search - No Cancel Button </h5>
+        <ion-searchbar value="after view" autocorrect="off" autocomplete="off" spellcheck="true" type="text" show-cancel-button="false">
+        </ion-searchbar>
+
+        <h5 padding-left padding-top> Search - Custom Cancel Button Danger </h5>
+        <ion-searchbar show-cancel-button cancel-button-text="Really Long Cancel" color="danger">
+        </ion-searchbar>
+
+        <h5 padding-left padding-top> Search - Value passed </h5>
+        <ion-searchbar value="mysearch" cancel-button-text="Really Long Cancel" color="dark" show-cancel-button>
+        </ion-searchbar>
+
+        <h5 padding-left padding-top> Search - Mode iOS</h5>
+        <ion-searchbar mode="ios" animated="true" show-cancel-button placeholder="Search">
+        </ion-searchbar>
+
+        <h5 padding-left padding-top> Search - Mode MD</h5>
+        <ion-searchbar mode="md" animated="true" show-cancel-button placeholder="Search">
+        </ion-searchbar>
+
+        <h5 padding-left padding-top> Search - DebounceTime </h5>
+        <ion-searchbar autocorrect="on" show-cancel-button="true" autocomplete="on" spellcheck="true" type="text" debounce="5000" placeholder="Check the log">
+        </ion-searchbar>
+
+        <h5 padding-left padding-top> Search - Animated and No Cancel</h5>
+        <ion-searchbar id="dynamicAttr" placeholder="Search" animated="true" show-cancel-button="false">
+        </ion-searchbar>
+
+        <p padding>
+          <ion-button expand="block" (click)="changeValue()">Change Value</ion-button>
+        </p>
+
+        <div padding-horizontal>
+          <ion-button expand="block" onClick="toggleProp()">Toggle Property</ion-button>
+        </div>
+        <div padding>
+          <ion-button expand="block" color="secondary" onClick="toggleAttr()">Toggle Attribute</ion-button>
+        </div>
+
+        <script>
+          function toggleAttr() {
+            var dynamicAttr = document.getElementById('dynamicAttr');
+
+            // Toggle animated attribute
+            const attrIsAnimated = dynamicAttr.getAttribute('animated') === 'true' ? false : true;
+            dynamicAttr.setAttribute('animated', attrIsAnimated);
+
+            // Toggle show-cancel-button attribute
+            const attrShowCancel = dynamicAttr.getAttribute('show-cancel-button') === 'true' ? false : true;
+            dynamicAttr.setAttribute('show-cancel-button', attrShowCancel);
+
+            // Toggle placeholder attribute
+            const attrPlaceholder = dynamicAttr.getAttribute('placeholder') === 'Search' ? 'Enter a Search Term' : 'Search';
+            dynamicAttr.setAttribute('placeholder', attrPlaceholder);
+          }
+
+          function toggleProp() {
+            var dynamicProp = document.getElementById('dynamicProp');
+            console.log(dynamicProp.autocorrect, dynamicProp.autocomplete, dynamicProp.spellcheck);
+
+            // Toggle autocorrect property
+            const propIsAutocorrect = dynamicProp.autocorrect === 'on' ? 'off' : 'on';
+            dynamicProp.autocorrect = propIsAutocorrect;
+
+            // Toggle autocomplete property
+            const propIsAutocomplete = dynamicProp.autocomplete === 'on' ? 'off' : 'on';
+            dynamicProp.autocomplete = propIsAutocomplete;
+
+            // Toggle spellcheck property
+            const propIsSpellcheck = dynamicProp.spellcheck === true ? false : true;
+            dynamicProp.spellcheck = propIsSpellcheck;
+          }
+
+          const searchbars = document.querySelectorAll('ion-searchbar')
+          for (let i = 0; i < searchbars.length; i++) {
+            searchbars[i].addEventListener('ionInput', (ev) => {
+              console.log(ev);
+            })
+          }
+        </script>
+      </ion-content>
+
+  </ion-app>
+</body>
+
+</html>
diff --git a/core/src/components/segment/test/preview/index.html b/core/src/components/segment/test/preview/index.html
new file mode 100644
index 0000000000..ee14866333
--- /dev/null
+++ b/core/src/components/segment/test/preview/index.html
@@ -0,0 +1,201 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Segment</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body onload="listenForEvent()">
+  <ion-app>
+
+      <ion-header no-border>
+        <ion-toolbar>
+          <ion-title>Segment</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content>
+        <ion-toolbar>
+          <ion-segment class="event-tester" value="Free">
+            <ion-segment-button value="Paid">
+              Paid
+            </ion-segment-button>
+            <ion-segment-button value="Free">
+              Free
+            </ion-segment-button>
+            <ion-segment-button value="Top">
+              Top
+            </ion-segment-button>
+          </ion-segment>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-segment name="dynamicPropDisable" disabled color="danger">
+            <ion-segment-button value="Bookmarks">
+              Bookmarks
+            </ion-segment-button>
+            <ion-segment-button value="Reading List">
+              Reading List
+            </ion-segment-button>
+            <ion-segment-button value="Shared Links">
+              Shared Links
+            </ion-segment-button>
+          </ion-segment>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-segment name="dynamicAttrElem" color="secondary" value="active">
+            <ion-segment-button value="active">
+              Active
+            </ion-segment-button>
+            <ion-segment-button name="dynamicAttrDisable" value="disabled" disabled="true">
+              Disabled
+            </ion-segment-button>
+            <ion-segment-button value="inactive" disabled="false">
+              Inactive
+            </ion-segment-button>
+          </ion-segment>
+        </ion-toolbar>
+
+        <ion-toolbar>
+          <ion-segment color="danger">
+            <ion-segment-button value="sunny">
+              Sunny
+            </ion-segment-button>
+            <ion-segment-button value="rainy" checked>
+              Rainy
+            </ion-segment-button>
+          </ion-segment>
+        </ion-toolbar>
+
+        <div padding>
+          <ion-segment>
+            <ion-segment-button>Seg 1</ion-segment-button>
+            <ion-segment-button>Seg 2</ion-segment-button>
+            <ion-segment-button>Seg 3</ion-segment-button>
+          </ion-segment>
+
+          <ion-segment disabled>
+            <ion-segment-button>Seg 2 1</ion-segment-button>
+            <ion-segment-button checked>Seg 2 2</ion-segment-button>
+            <ion-segment-button>Seg 2 3</ion-segment-button>
+          </ion-segment>
+
+          <ion-segment color="dark" value="Reading List">
+            <ion-segment-button value="Bookmarks">
+              <ion-icon name="book"></ion-icon>
+            </ion-segment-button>
+            <ion-segment-button value="Reading List">
+              <ion-icon name="glasses"></ion-icon>
+            </ion-segment-button>
+            <ion-segment-button value="Shared Links">
+              <ion-icon name="at"></ion-icon>
+            </ion-segment-button>
+          </ion-segment>
+
+          <ion-segment name="dynamicPropDisable" disabled color="danger">
+            <ion-segment-button value="Bookmarks">
+              Bookmarks
+            </ion-segment-button>
+            <ion-segment-button value="Reading List">
+              Reading List
+            </ion-segment-button>
+            <ion-segment-button value="Shared Links">
+              Shared Links
+            </ion-segment-button>
+          </ion-segment>
+
+          <ion-segment id="finalSegment" name="dynamicAttrElem" color="secondary" value="active">
+            <ion-segment-button value="active">
+              Active
+            </ion-segment-button>
+            <ion-segment-button name="dynamicAttrDisable" value="disabled" disabled="true">
+              Disabled
+            </ion-segment-button>
+            <ion-segment-button value="inactive" disabled="false">
+              Inactive
+            </ion-segment-button>
+          </ion-segment>
+
+          <!-- Dynamic Buttons -->
+          <ion-segment id="dynamicButtons" color="dark"></ion-segment>
+        </div>
+
+        <div padding-horizontal>
+          <ion-button expand="block" onClick="toggleDisabled()">Toggle Disabled</ion-button>
+        </div>
+        <div padding>
+          <ion-button expand="block" color="secondary" onClick="toggleValue()">Toggle Value</ion-button>
+        </div>
+
+        <script>
+          var dynamicAttrDisable = document.getElementsByName('dynamicAttrDisable');
+          var dynamicPropDisable = document.getElementsByName('dynamicPropDisable');
+
+          function toggleDisabled() {
+            for (var i = 0; i < dynamicAttrDisable.length; i++) {
+              const attrIsDisabled = dynamicAttrDisable[i].getAttribute('disabled') === 'true' ? false : true;
+              dynamicAttrDisable[i].setAttribute('disabled', attrIsDisabled);
+            }
+            for (var i = 0; i < dynamicPropDisable.length; i++) {
+              const propIsDisabled = dynamicPropDisable[i].disabled === true ? false : true;
+              dynamicPropDisable[i].disabled = propIsDisabled;
+            }
+          }
+
+          function toggleValue() {
+            var dynamicAttrElem = document.getElementsByName('dynamicAttrElem');
+            for (var i = 0; i < dynamicAttrElem.length; i++) {
+              var dynamicAttrValue = dynamicAttrElem[i].getAttribute('value');
+
+              if (dynamicAttrValue === 'active') {
+                dynamicAttrElem[i].setAttribute('value', 'inactive');
+              } else if (dynamicAttrValue === 'inactive') {
+                dynamicAttrElem[i].setAttribute('value', 'disabled');
+              } else {
+                dynamicAttrElem[i].setAttribute('value', 'active');
+              }
+            }
+          }
+
+          async function listenForEvent() {
+            const ionSegmentElement = document.querySelector('ion-segment.event-tester');
+            await ionSegmentElement.componentOnReady();
+            ionSegmentElement.addEventListener('ionChange', (event) => {
+              console.log('event.target: ', event.target.value);
+            });
+          }
+
+          var dynamicButtons = document.getElementById('dynamicButtons');
+          updateSegmentButtons(2);
+
+          setTimeout(function() {
+            updateSegmentButtons(4);
+          }, 4000);
+
+          function updateSegmentButtons(length) {
+            dynamicButtons.innerHTML = '';
+
+            for (var i = 0; i < length; i++) {
+              dynamicButtons.innerHTML += `
+                <ion-segment-button value="segment-${i}">
+                  Btn ${i}
+                </ion-segment-button>`;
+            }
+          }
+
+        </script>
+      </ion-content>
+
+      <style>
+        ion-content ion-segment {
+          margin-bottom: 10px;
+        }
+      </style>
+  </ion-app>
+</body>
+
+</html>
diff --git a/core/src/components/select/test/preview/index.html b/core/src/components/select/test/preview/index.html
new file mode 100644
index 0000000000..bf1ccda632
--- /dev/null
+++ b/core/src/components/select/test/preview/index.html
@@ -0,0 +1,292 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Select</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+<body>
+  <ion-app>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Select</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="outer-content test-content">
+        <ion-list>
+          <ion-list-header>Single Value Select</ion-list-header>
+
+          <ion-item>
+            <ion-label>Gender</ion-label>
+            <ion-select id="gender" placeholder="Select One">
+              <ion-select-option value="f">Female</ion-select-option>
+              <ion-select-option value="m">Male</ion-select-option>
+            </ion-select>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Hair Color</ion-label>
+            <ion-select id="hairColor" value="brown" ok-text="Okay" cancel-text="Dismiss">
+              <ion-select-option value="brown" selected>Brown</ion-select-option>
+              <ion-select-option value="blonde">Blonde</ion-select-option>
+              <ion-select-option value="black">Black</ion-select-option>
+              <ion-select-option value="red">Red</ion-select-option>
+            </ion-select>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Skittles</ion-label>
+            <ion-select id="customSelect" interface="action-sheet" name="skittles">
+              <ion-select-option value="red">Red</ion-select-option>
+              <ion-select-option value="purple">Purple</ion-select-option>
+              <ion-select-option value="yellow">Yellow</ion-select-option>
+              <ion-select-option value="orange">Orange</ion-select-option>
+              <ion-select-option value="green">Green</ion-select-option>
+            </ion-select>
+          </ion-item>
+
+        </ion-list>
+
+        <ion-list>
+          <ion-list-header>Select - Custom Interface Options</ion-list-header>
+
+          <ion-item>
+            <ion-label>Alert</ion-label>
+            <ion-select id="customAlertSelect" interface="alert" multiple="true" placeholder="Select One">
+              <ion-select-option value="bacon">Bacon</ion-select-option>
+              <ion-select-option value="olives">Black Olives</ion-select-option>
+              <ion-select-option value="xcheese">Extra Cheese</ion-select-option>
+              <ion-select-option value="peppers">Green Peppers</ion-select-option>
+              <ion-select-option value="mushrooms">Mushrooms</ion-select-option>
+              <ion-select-option value="onions">Onions</ion-select-option>
+              <ion-select-option value="pepperoni">Pepperoni</ion-select-option>
+              <ion-select-option value="pineapple">Pineapple</ion-select-option>
+              <ion-select-option value="sausage">Sausage</ion-select-option>
+              <ion-select-option value="Spinach">Spinach</ion-select-option>
+            </ion-select>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Popover</ion-label>
+            <ion-select id="customPopoverSelect" interface="popover" placeholder="Select One">
+              <ion-select-option value="brown">Brown</ion-select-option>
+              <ion-select-option value="blonde">Blonde</ion-select-option>
+              <ion-select-option value="black">Black</ion-select-option>
+              <ion-select-option value="red">Red</ion-select-option>
+            </ion-select>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Action Sheet</ion-label>
+            <ion-select id="customActionSheetSelect" interface="action-sheet" placeholder="Select One">
+              <ion-select-option value="red">Red</ion-select-option>
+              <ion-select-option value="purple">Purple</ion-select-option>
+              <ion-select-option value="yellow">Yellow</ion-select-option>
+              <ion-select-option value="orange">Orange</ion-select-option>
+              <ion-select-option value="green">Green</ion-select-option>
+            </ion-select>
+          </ion-item>
+
+        </ion-list>
+
+        <ion-list>
+          <ion-list-header>Popover Interface Select</ion-list-header>
+
+          <ion-item>
+            <ion-label>Gender</ion-label>
+            <ion-select name="gender" interface="popover">
+              <ion-select-option value="f">Female</ion-select-option>
+              <ion-select-option value="m">Male</ion-select-option>
+            </ion-select>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Gaming</ion-label>
+            <ion-select name="gaming" ok-text="Okay" cancel-text="Dismiss" value="n64" interface="popover">
+              <ion-select-option value="nes">NES</ion-select-option>
+              <ion-select-option value="n64">Nintendo64</ion-select-option>
+              <ion-select-option value="ps">PlayStation</ion-select-option>
+              <ion-select-option value="genesis">Sega Genesis</ion-select-option>
+              <ion-select-option value="saturn">Sega Saturn</ion-select-option>
+              <ion-select-option value="snes">SNES</ion-select-option>
+            </ion-select>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Date</ion-label>
+            <ion-select placeholder="Month" interface="popover">
+              <ion-select-option value="01">January</ion-select-option>
+              <ion-select-option value="02">February</ion-select-option>
+              <ion-select-option value="03" selected="true">March</ion-select-option>
+              <ion-select-option value="04">April</ion-select-option>
+              <ion-select-option value="05">May</ion-select-option>
+              <ion-select-option value="06">June</ion-select-option>
+              <ion-select-option value="07">July</ion-select-option>
+              <ion-select-option value="08">August</ion-select-option>
+              <ion-select-option value="09">September</ion-select-option>
+              <ion-select-option value="10">October</ion-select-option>
+              <ion-select-option value="11">November</ion-select-option>
+              <ion-select-option value="12">December</ion-select-option>
+            </ion-select>
+            <ion-select placeholder="Year" interface="popover">
+              <ion-select-option>1989</ion-select-option>
+              <ion-select-option>1990</ion-select-option>
+              <ion-select-option>1991</ion-select-option>
+              <ion-select-option>1992</ion-select-option>
+              <ion-select-option>1993</ion-select-option>
+              <ion-select-option selected="true">1994</ion-select-option>
+              <ion-select-option>1995</ion-select-option>
+              <ion-select-option>1996</ion-select-option>
+              <ion-select-option>1997</ion-select-option>
+              <ion-select-option>1998</ion-select-option>
+              <ion-select-option>1999</ion-select-option>
+            </ion-select>
+          </ion-item>
+
+        </ion-list>
+
+
+        <ion-list>
+          <ion-list-header>Action Sheet Interface Select</ion-list-header>
+
+          <ion-item>
+            <ion-label>Mute Notifications</ion-label>
+            <ion-select name="notifications" interface="action-sheet">
+              <ion-select-option value="mute_15">For 15 Minutes</ion-select-option>
+              <ion-select-option value="mute_1">For 1 Hour</ion-select-option>
+              <ion-select-option value="mute_23">For 24 Hours</ion-select-option>
+              <ion-select-option value="mute_inf">Until I turn it back on</ion-select-option>
+            </ion-select>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Rating</ion-label>
+            <ion-select name="rating" interface="action-sheet">
+              <ion-select-option value="1">1 Star</ion-select-option>
+              <ion-select-option value="2">2 Stars</ion-select-option>
+              <ion-select-option value="3">3 Stars</ion-select-option>
+              <ion-select-option value="4">4 Stars</ion-select-option>
+              <ion-select-option value="5">5 Stars</ion-select-option>
+            </ion-select>
+          </ion-item>
+
+        </ion-list>
+
+        <ion-list>
+          <ion-list-header>Multiple Value Select</ion-list-header>
+
+          <ion-item>
+            <ion-label>Toppings</ion-label>
+            <ion-select name="toppings" multiple="true" cancel-text="Nah" ok-text="Okay!">
+              <ion-select-option value="bacon">Bacon</ion-select-option>
+              <ion-select-option value="olives">Black Olives</ion-select-option>
+              <ion-select-option value="xcheese">Extra Cheese</ion-select-option>
+              <ion-select-option value="peppers">Green Peppers</ion-select-option>
+              <ion-select-option value="mushrooms">Mushrooms</ion-select-option>
+              <ion-select-option value="onions">Onions</ion-select-option>
+              <ion-select-option value="pepperoni">Pepperoni</ion-select-option>
+              <ion-select-option value="pineapple">Pineapple</ion-select-option>
+              <ion-select-option value="sausage">Sausage</ion-select-option>
+              <ion-select-option value="Spinach">Spinach</ion-select-option>
+            </ion-select>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Pets</ion-label>
+            <ion-select id="pets" name="pets" multiple="true">
+              <ion-select-option value="bird">Bird</ion-select-option>
+              <ion-select-option value="cat">Cat</ion-select-option>
+              <ion-select-option value="dog">Dog</ion-select-option>
+              <ion-select-option value="honeybadger">Honey Badger</ion-select-option>
+            </ion-select>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Disabled</ion-label>
+            <ion-select multiple disabled="true">
+              <ion-select-option selected="true">Selected Text</ion-select-option>
+            </ion-select>
+          </ion-item>
+
+          <ion-item>
+            <ion-label stacked>Stacked</ion-label>
+            <ion-select>
+              <ion-select-option>Default</ion-select-option>
+              <ion-select-option>Other</ion-select-option>
+              <ion-select-option>N/A</ion-select-option>
+            </ion-select>
+          </ion-item>
+
+          <ion-item>
+            <ion-label floating>Floating</ion-label>
+            <ion-select>
+              <ion-select-option>Default</ion-select-option>
+              <ion-select-option>Other</ion-select-option>
+              <ion-select-option>N/A</ion-select-option>
+            </ion-select>
+          </ion-item>
+
+          <ion-item>
+            <ion-label floating>Floating</ion-label>
+            <ion-select>
+              <ion-select-option selected="true">Default</ion-select-option>
+              <ion-select-option>Other</ion-select-option>
+              <ion-select-option>N/A</ion-select-option>
+            </ion-select>
+          </ion-item>
+        </ion-list>
+
+        <div text-center>
+          <ion-button onclick="toggleBoolean('dynamicDisabled', 'disabled')">
+            Toggle Disabled
+          </ion-button>
+        </div>
+
+      </ion-content>
+
+    <script>
+      var pets = document.getElementById('pets');
+      pets.value = ['bird', 'dog'];
+
+      var customAlertSelect = document.getElementById('customAlertSelect');
+      var customAlertOptions = {
+        title: 'Pizza Toppings',
+        subTitle: 'Select your toppings',
+        message: '$1.00 per topping',
+        translucent: true
+      };
+      customAlertSelect.interfaceOptions = customAlertOptions;
+
+      var customPopoverSelect = document.getElementById('customPopoverSelect');
+      var customPopoverOptions = {
+        title: 'Pizza Toppings',
+        subTitle: 'Select your toppings',
+        message: '$1.50 charge for every topping'
+      };
+      customPopoverSelect.interfaceOptions = customAlertOptions;
+
+      var customActionSheetSelect = document.getElementById('customActionSheetSelect');
+      var customActionSheetOptions = {
+        title: 'Pizza Toppings',
+        subTitle: 'Select your toppings',
+        message: '$1.50 charge for every topping'
+      };
+      customActionSheetSelect.interfaceOptions = customAlertOptions;
+
+      function toggleBoolean(id, prop) {
+        var el = document.getElementById(id);
+
+        var isTrue = el[prop] ? false : true;
+        el[prop] = isTrue;
+        console.log('in toggleBoolean, setting', prop, 'to', isTrue);
+      }
+    </script>
+  </ion-app>
+</body>
+</html>
+
+
+
diff --git a/core/src/components/show-when/test/preview/index.html b/core/src/components/show-when/test/preview/index.html
new file mode 100644
index 0000000000..3e4f127100
--- /dev/null
+++ b/core/src/components/show-when/test/preview/index.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Show When</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Show when</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content padding>
+
+        <h2>Mode Tests</h2>
+        <ion-show-when mode="md, ios">
+          <div>Shows on MD, iOS</div>
+        </ion-show-when>
+
+        <ion-show-when mode="md">
+          <div>Shows on MD only</div>
+        </ion-show-when>
+
+        <ion-show-when mode="ios">
+          <div>Shows on iOS only</div>
+        </ion-show-when>
+
+        <h2>Orientation Tests</h2>
+        <ion-show-when orientation="portrait">
+          <div>Shows on portrait orientation</div>
+        </ion-show-when>
+
+        <ion-show-when orientation="landscape">
+          <div>Shows on landscape orientation</div>
+        </ion-show-when>
+
+        <h2>Platform Tests</h2>
+
+        <ion-show-when platform="android,ios">
+          <div>Render on Android and iOS</div>
+        </ion-show-when>
+
+        <ion-show-when platform="ios">
+          <div>Only render on iOS</div>
+        </ion-show-when>
+
+        <ion-show-when platform="android">
+          <div>Only render on Android</div>
+        </ion-show-when>
+
+        <ion-show-when platform="ipad">
+          <div>Only render on ipad</div>
+        </ion-show-when>
+
+        <ion-show-when platform="phablet">
+          <div>Only render on phablet</div>
+        </ion-show-when>
+
+        <ion-show-when platform="iphone">
+          <div>Only render on phone</div>
+        </ion-show-when>
+
+        <h2>Size Tests</h2>
+        <ion-show-when size="xs">
+          <div>Only render on xs</div>
+        </ion-show-when>
+
+        <ion-show-when size="sm">
+          <div>Only render on sm</div>
+        </ion-show-when>
+
+        <ion-show-when size="md">
+          <div>Only render on md</div>
+        </ion-show-when>
+
+        <ion-show-when size="lg">
+          <div>Only render on lg</div>
+        </ion-show-when>
+
+        <ion-show-when size="xl">
+          <div>Only render on xl</div>
+        </ion-show-when>
+
+        <ion-show-when size="xs, m">
+          <div>Only render on XS or m</div>
+        </ion-show-when>
+
+      </ion-content>
+
+
+  </ion-app>
+
+  <script>
+
+  </script>
+</body>
+
+</html>
diff --git a/core/src/components/skeleton-text/test/preview/index.html b/core/src/components/skeleton-text/test/preview/index.html
new file mode 100644
index 0000000000..acaae76cbf
--- /dev/null
+++ b/core/src/components/skeleton-text/test/preview/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Skeleton Text</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+<body>
+  <ion-skeleton-text width=40px></ion-skeleton-text>
+  <ion-skeleton-text width=200px></ion-skeleton-text>
+  <ion-skeleton-text width=600px></ion-skeleton-text>
+  <ion-skeleton-text width=100px></ion-skeleton-text>
+  <ion-skeleton-text width=80px></ion-skeleton-text>
+</body>
+</html>
+
+
+
diff --git a/core/src/components/slides/test/preview/index.html b/core/src/components/slides/test/preview/index.html
new file mode 100644
index 0000000000..b1e285975b
--- /dev/null
+++ b/core/src/components/slides/test/preview/index.html
@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Slides</title>
+
+  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+  <style>
+    ion-slide {
+      height: 200px !important;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+
+      <ion-content id="content">
+        <ion-slides style="background: black" id="slides" pager>
+          <ion-slide style="background: red; color: white;">
+            <h1>Slide 1</h1>
+          </ion-slide>
+          <ion-slide style="background: white; color: blue;">
+            <h1>Slide 2</h1>
+          </ion-slide>
+          <ion-slide style="background: blue; color: white;">
+            <h1>Slide 3</h1>
+          </ion-slide>
+        </ion-slides>
+        <ion-button expand="block" onclick="slidePrev()">Slide Prev</ion-button>
+        <ion-button expand="block" onclick="slideNext()">Slide Next</ion-button>
+        <ion-button expand="block" onclick="getActiveIndex()">Get Active Index</ion-button>
+        <ion-button expand="block" onclick="getPreviousIndex()">Get Previous Index</ion-button>
+
+        <ion-button expand="block" onclick="isEnd()">Is the End?</ion-button>
+        <ion-button expand="block" onclick="isBeginning()">Is the beginning?</ion-button>
+
+        <ion-button expand="block" onclick="slideTo()">Slide to slide index 2</ion-button>
+        <ion-button expand="block" onclick="slideLength()">Get slide length</ion-button>
+        <ion-button expand="block" onclick="slideAutoPlay()">Start auto play</ion-button>
+        <ion-button expand="block" onclick="slideStopAutoPlay()">Stop auto play</ion-button>
+        <ion-button expand="block" onclick="setOptions()">Set options</ion-button>
+      </ion-content>
+
+  </ion-app>
+  <script>
+    const slides = document.getElementById('slides')
+    slides.pager = false;
+    slides.options = {}
+
+    function slideNext() {
+      slides.slideNext(500)
+    };
+
+    function slidePrev() {
+      slides.slidePrev(500);
+    };
+
+    function slideTo() {
+      slides.slideTo(2);
+    }
+
+    function slideAutoPlay() {
+      slides.options = Object.assign({}, slides.options, {autoplay: 300});
+      slides.startAutoplay();
+    }
+
+    function slideStopAutoPlay() {
+      slides.stopAutoplay();
+    }
+
+    function setOptions() {
+      slides.options = Object.assign({}, slides.options, {
+        slidesPerView: 2,
+      });
+    }
+
+    function slideLength() {
+      console.log(slides.length());
+    }
+
+    function getActiveIndex() {
+      console.log(slides.getActiveIndex());
+    };
+
+    function getPreviousIndex() {
+      console.log(slides.getPreviousIndex());
+    };
+
+    function isEnd() {
+      console.log(slides.isEnd());
+    }
+
+    function isBeginning() {
+      console.log(slides.isBeginning());
+    }
+    slides.addEventListener('ionSlideDidChange', function(e) {
+      console.log('slide did change', e)
+    });
+    slides.addEventListener('ionSlideWillChange', function(e) {
+      console.log('slide will change', e)
+    });
+    slides.addEventListener('ionSlideNextStart', function(e) {
+      console.log('slide next start', e)
+    });
+    slides.addEventListener('ionSlidePrevStart', function(e) {
+      console.log('slide prev start', e)
+    });
+    slides.addEventListener('ionSlideNextEnd', function(e) {
+      console.log('slide next end', e)
+    });
+    slides.addEventListener('ionSlidePrevEnd', function(e) {
+      console.log('slide prev end', e)
+    });
+    slides.addEventListener('ionSlideTransitionStart', function(e) {
+      console.log('slide transition start', e)
+    });
+    slides.addEventListener('ionSlideTransitionEnd', function(e) {
+      console.log('slide transistion end', e)
+    });
+    slides.addEventListener('ionSlideDrag', function(e) {
+      console.log('slide drag', e)
+    });
+    slides.addEventListener('ionSlideReachStart', function(e) {
+      console.log('slide reach start', e)
+    });
+    slides.addEventListener('ionSlideReachEnd', function(e) {
+      console.log('slide reach end', e)
+    });
+    slides.addEventListener('ionSlideTouchStart', function(e) {
+      console.log('slide touch start', e)
+    });
+    slides.addEventListener('ionSlideTouchEnd', function(e) {
+      console.log('slide touch end', e)
+    });
+  </script>
+</body>
+
+</html>
diff --git a/core/src/components/spinner/test/preview/index.html b/core/src/components/spinner/test/preview/index.html
new file mode 100644
index 0000000000..2a2c9084fa
--- /dev/null
+++ b/core/src/components/spinner/test/preview/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Spinner</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+<body>
+  <ion-app>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Spinner</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content">
+        <ion-list>
+          <ion-list-header>
+            Spinner Loading Indicators
+          </ion-list-header>
+          <ion-item>
+            <ion-spinner slot="start"></ion-spinner>
+            Show Default Spinner
+          </ion-item>
+          <ion-item>
+            <ion-spinner slot="start" name="lines"></ion-spinner>
+            Show Lines
+          </ion-item>
+          <ion-item>
+            <ion-spinner slot="start" name="lines-small"></ion-spinner>
+            Show Lines Small
+          </ion-item>
+          <ion-item>
+            <ion-spinner slot="start" name="dots"></ion-spinner>
+            Show Dots
+          </ion-item>
+          <ion-item>
+            <ion-spinner slot="start" name="bubbles"></ion-spinner>
+            Show Bubbles
+          </ion-item>
+          <ion-item>
+            <ion-spinner slot="start" name="circles"></ion-spinner>
+            Show Circles
+          </ion-item>
+          <ion-item>
+            <ion-spinner slot="start" name="crescent"></ion-spinner>
+            Show Crescent
+          </ion-item>
+          <ion-item>
+            <ion-spinner slot="start" paused></ion-spinner>
+            Show Paused Default Spinner
+          </ion-item>
+        </ion-list>
+      </ion-content>
+
+  </ion-app>
+</body>
+</html>
diff --git a/core/src/components/split-pane/test/preview/index.html b/core/src/components/split-pane/test/preview/index.html
new file mode 100644
index 0000000000..a14d726d4e
--- /dev/null
+++ b/core/src/components/split-pane/test/preview/index.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Split Pane</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+    <ion-split-pane id="splitPane">
+
+      <ion-menu side="left">
+
+        <ion-header>
+          <ion-toolbar color="secondary">
+            <ion-title>Left Menu</ion-title>
+          </ion-toolbar>
+        </ion-header>
+
+        <ion-content>
+          <ion-list>
+            <ion-item>Open Right Menu</ion-item>
+            <ion-item>Close Menu</ion-item>
+            <ion-item>Close Menu</ion-item>
+            <ion-item>Close Menu</ion-item>
+            <ion-item>Close Menu</ion-item>
+            <ion-item>Close Menu</ion-item>
+            <ion-item>Close Menu</ion-item>
+            <ion-item>Close Menu</ion-item>
+            <ion-item>Close Menu</ion-item>
+            <ion-item>Close Menu</ion-item>
+            <ion-item>Close Menu</ion-item>
+            <ion-item>Close Menu</ion-item>
+          </ion-list>
+        </ion-content>
+
+        <ion-footer>
+          <ion-toolbar color="secondary">
+            <ion-title>Footer</ion-title>
+          </ion-toolbar>
+        </ion-footer>
+
+      </ion-menu>
+
+      <div class='ion-page' main>
+
+        <ion-header>
+          <ion-toolbar>
+
+            <ion-buttons slot="start">
+              <ion-menu-toggle>
+                <ion-button><ion-icon slot="icon-only" name="menu"></ion-icon></ion-button>
+              </ion-menu-toggle>
+            </ion-buttons>
+
+            <ion-title>Navigation</ion-title>
+          </ion-toolbar>
+        </ion-header>
+
+        <ion-content padding>
+          <h1>Page 1</h1>
+          <ion-button onclick="push()">Push</ion-button>
+          <ion-button onclick="menu()">Disable/enable menu</ion-button>
+          <f></f>
+          <f></f>
+          <f></f>
+          <f></f>
+        </ion-content>
+
+      </div>
+    </ion-split-pane>
+
+  </ion-app>
+  <ion-menu-controller></ion-menu-controller>
+
+  <script>
+    const menuCtrl = document.querySelector('ion-menu-controller');
+    function openLeft() {
+      console.log('Open left menu');
+      menuCtrl.open('left');
+    }
+
+    function push() {
+      console.log('Push page');
+    }
+
+    function menu() {
+      console.log('Disable/enable menu');
+      menuCtrl.enable(!menuCtrl.isEnabled());
+    }
+  </script>
+
+  <style>
+    f {
+      display: block;
+      height: 150px;
+      width: 150px;
+      background-color: blue;
+      margin: 15px auto;
+    }
+
+    f:last-child {
+      background-color: red;
+    }
+  </style>
+</body>
+</html>
diff --git a/core/src/components/status-tap/test/preview/index.html b/core/src/components/status-tap/test/preview/index.html
new file mode 100644
index 0000000000..c9d99f5fbc
--- /dev/null
+++ b/core/src/components/status-tap/test/preview/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Status Tap</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body onload="init()">
+  <ion-app>
+    <ion-status-tap></ion-status-tap>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Status Tap</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content padding>
+        <div class="really-big">
+          <ion-button class="shawty-got-low">Mock Status Tap</ion-button>
+        </div>
+      </ion-content>
+
+  </ion-app>
+</body>
+
+<script>
+  async function init() {
+    const button = document.querySelector('ion-button');
+    await button.componentOnReady();
+    button.addEventListener('click', async () => {
+      await doStatusTap();
+    });
+  }
+
+  async function doStatusTap() {
+    const statusTap = document.querySelector('ion-status-tap');
+    await statusTap.componentOnReady();
+    return await statusTap.mockTap();
+  }
+
+</script>
+
+<style>
+  .really-big {
+    height: 5000px;
+    background-color: blue;
+  }
+
+  .shawty-got-low {
+    margin-top: 4800px;
+  }
+</style>
\ No newline at end of file
diff --git a/core/src/components/tabs/test/preview/index.html b/core/src/components/tabs/test/preview/index.html
new file mode 100644
index 0000000000..af2923ad54
--- /dev/null
+++ b/core/src/components/tabs/test/preview/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Tab</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  <script src="/dist/ionic.js"></script>
+</head>
+<body>
+
+  <ion-app>
+    <ion-tabs>
+      <ion-tab title="Plain List" icon="star" path="">
+
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Tab One</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content padding>
+          Tab One
+        </ion-content>
+
+      </ion-tab>
+
+      <ion-tab title="Schedule" icon="globe" path="tab2">
+
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Tab Two</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content padding>
+          Tab Two
+        </ion-content>
+
+      </ion-tab>
+
+      <ion-tab title="Stopwatch" icon="logo-facebook" path="tab3">
+
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Tab Three</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content padding>
+          Tab Three
+        </ion-content>
+
+      </ion-tab>
+
+      <ion-tab disabled
+        title="Messages"
+        icon="chatboxes"
+        component="page-one"
+        path="tab4">
+      </ion-tab>
+    </ion-tabs>
+  </ion-app>
+</body>
+</html>
diff --git a/core/src/components/tap-click/test/preview/index.html b/core/src/components/tap-click/test/preview/index.html
new file mode 100644
index 0000000000..e7de5d795a
--- /dev/null
+++ b/core/src/components/tap-click/test/preview/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Button Effect</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+
+  <style>
+    .my-block {
+      position: relative;
+      background: blue;
+      color: white;
+      width: 300px;
+      height: 100px;
+      margin: 1rem;
+    }
+  </style>
+</head>
+<body>
+  <ion-app>
+
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Button Effect</ion-title>
+          </ion-toolbar>
+        </ion-header>
+
+        <ion-content padding no-bounce>
+          <p>
+            <ion-button size="small">Small</ion-button>
+          </p>
+          <p>
+            <ion-button size="large">Large</ion-button>
+          </p>
+          <p>
+            <ion-button size="large" fill="outline">Large</ion-button>
+          </p>
+          <p>
+            <ion-button size="large" fill="clear">Large</ion-button>
+          </p>
+          <div class="my-block">
+            <ion-ripple-effect></ion-ripple-effect>
+            This is just a div + effect behind
+            <ion-button onclick="buttonClicked()">Nested button</ion-button>
+          </div>
+          <div class="my-block">
+            This is just a div + effect on top
+            <ion-button onclick="buttonClicked()">Nested button</ion-button>
+            <ion-ripple-effect></ion-ripple-effect>
+          </div>
+
+          <div class="my-block">
+            This is just a div + effect
+            <ion-ripple-effect></ion-ripple-effect>
+          </div>
+        </ion-content>
+
+  </ion-app>
+  <script>
+    function blockClicked() {
+      console.log('block clicked');
+      return true;
+    }
+    function buttonClicked() {
+      console.log('button clicked');
+    }
+  </script>
+</body>
+</html>
diff --git a/core/src/components/text/test/preview/index.html b/core/src/components/text/test/preview/index.html
new file mode 100644
index 0000000000..d40bbc4b56
--- /dev/null
+++ b/core/src/components/text/test/preview/index.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Text</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+<body>
+  <ion-app>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Text</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content" padding>
+        <ion-text color="secondary">
+          <h1>H1: The quick brown fox jumps over the lazy dog</h1>
+        </ion-text>
+
+        <ion-text color="primary">
+          <h2>H2: The quick brown fox jumps over the lazy dog</h2>
+        </ion-text>
+
+        <ion-text color="light">
+          <h3>H3: The quick brown fox jumps over the lazy dog</h3>
+        </ion-text>
+
+        <ion-text color="danger">
+          <h4>H4: The quick brown fox jumps over the lazy dog</h4>
+        </ion-text>
+
+        <ion-text color="dark">
+          <h5>H5: The quick brown fox jumps over the lazy dog</h5>
+        </ion-text>
+
+        <ion-text id="dynamicColor">
+          <h6>H6: The quick brown fox jumps over the lazy dog</h6>
+        </ion-text>
+
+        <p>
+          I saw a werewolf with a Chinese menu in his hand.
+          Walking through the <ion-text color="danger"><sub>streets</sub></ion-text> of Soho in the rain.
+          He <ion-text color="primary"><i>was</i></ion-text> looking for a place called Lee Ho Fook's.
+          Gonna get a <ion-text color="secondary"><a>big dish of beef chow mein.</a></ion-text>
+          <a class="color-purple">My purple class link.</a>
+        </p>
+
+        <p>
+          He's the hairy-handed gent who ran amuck in Kent.
+          Lately he's <ion-text color="primary"><sup>been</sup></ion-text> overheard in Mayfair.
+          Better stay away from him.
+          He'll rip your lungs out, Jim.
+          I'd like to meet his tailor.
+          <ion-text color="danger"><ion-icon name="cut"></ion-icon></ion-text>
+        </p>
+
+
+  </ion-app>
+
+  <style>
+    .color-purple {
+      color: purple;
+    }
+  </style>
+
+  <script>
+    var dynamicColor = document.getElementById('dynamicColor');
+    dynamicColor.color = 'secondary';
+
+  </script>
+</body>
+</html>
+
+
+
diff --git a/core/src/components/textarea/test/preview/index.html b/core/src/components/textarea/test/preview/index.html
new file mode 100644
index 0000000000..3d1fd8efa0
--- /dev/null
+++ b/core/src/components/textarea/test/preview/index.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Input - Textarea</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+<body>
+  <ion-app>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Input - Textarea</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content">
+
+        <ion-list>
+          <ion-item>
+            <ion-label color="primary">Inline Label</ion-label>
+            <ion-textarea placeholder="Textarea"></ion-textarea>
+          </ion-item>
+
+          <ion-item>
+            <ion-label color="primary" fixed>Fixed Label</ion-label>
+            <ion-textarea placeholder="Textarea"></ion-textarea>
+          </ion-item>
+
+          <ion-item>
+            <ion-textarea placeholder="Textarea with no label"></ion-textarea>
+          </ion-item>
+
+          <ion-item>
+            <ion-label color="primary" stacked>Stacked Label</ion-label>
+            <ion-textarea placeholder="Textarea"></ion-textarea>
+          </ion-item>
+
+          <ion-item>
+            <ion-label color="primary" floating>Floating Label</ion-label>
+            <ion-textarea></ion-textarea>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Disabled</ion-label>
+            <ion-textarea id="dynamicDisabled" value="Disabled" disabled></ion-textarea>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Readonly</ion-label>
+            <ion-textarea id="dynamicReadonly" value="Readonly" readonly></ion-textarea>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Dynamic Value</ion-label>
+            <ion-input id="dynamicValue" value="dynamic"></ion-input>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Dynamic Value</ion-label>
+            <ion-textarea id="dynamicTextareaValue" value="dynamic"></ion-textarea>
+          </ion-item>
+
+          <ion-item>
+            <ion-label color="primary">Clear on Edit</ion-label>
+            <ion-textarea clear-on-edit="true"></ion-textarea>
+          </ion-item>
+
+          <ion-item>
+            <ion-label color="primary">Clear on Edit</ion-label>
+            <ion-input clear-on-edit="true"></ion-input>
+          </ion-item>
+        </ion-list>
+
+        <div text-center>
+          <ion-button onclick="toggleBoolean('dynamicDisabled', 'disabled')">
+            Toggle Disabled
+          </ion-button>
+
+          <ion-button color="secondary" onclick="toggleBoolean('dynamicReadonly', 'readonly')">
+            Toggle Readonly
+          </ion-button>
+
+          <ion-button color="light" onclick="toggleString('dynamicValue', 'value'); toggleString('dynamicTextareaValue', 'value')">
+            Toggle Value
+          </ion-button>
+
+          <ion-button color="danger" onclick="clearString('dynamicValue', 'value'); clearString('dynamicTextareaValue', 'value')">
+            Clear Value
+          </ion-button>
+        </div>
+      </ion-content>
+
+    <script>
+      function toggleBoolean(id, prop) {
+        var el = document.getElementById(id);
+
+        var isTrue = el[prop] ? false : true;
+        el[prop] = isTrue;
+        console.log('in toggleBoolean, setting', prop, 'to', isTrue);
+      }
+
+      function toggleString(id, prop) {
+        var el = document.getElementById(id);
+        console.log('INPUT ELE', el);
+
+        var newString = el[prop] === 'dynamic' ? 'changed' : 'dynamic';
+        el[prop] = newString;
+        console.log('in toggleString, setting', prop, 'to', newString);
+      }
+
+      function clearString(id, prop) {
+        var el = document.getElementById(id);
+
+        el[prop] = '';
+        console.log('in toggleString, setting', prop, 'to', '');
+      }
+    </script>
+  </ion-app>
+</body>
+</html>
+
+
+
diff --git a/core/src/components/thumbnail/test/preview/index.html b/core/src/components/thumbnail/test/preview/index.html
new file mode 100644
index 0000000000..68ce9f876b
--- /dev/null
+++ b/core/src/components/thumbnail/test/preview/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Thumbnail</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Thumbnail</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content">
+        <ion-thumbnail>
+          <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+        </ion-thumbnail>
+
+        <ion-item>
+          <ion-thumbnail slot="start">
+            <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+          </ion-thumbnail>
+          <ion-label>Item Thumbnail</ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-thumbnail slot="start">
+            <img src="https://images.unsplash.com/photo-1511125357779-27038c647d9d?auto=format&fit=crop&w=1951&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
+          </ion-thumbnail>
+          <ion-label>Wide Thumbnail</ion-label>
+        </ion-item>
+      </ion-content>
+
+  </ion-app>
+</body>
+
+</html>
diff --git a/core/src/components/toast/test/preview/index.html b/core/src/components/toast/test/preview/index.html
new file mode 100644
index 0000000000..660950b242
--- /dev/null
+++ b/core/src/components/toast/test/preview/index.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Toast</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Toast</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content" padding>
+        <ion-button expand="block" id="showBottomToast" onclick="presentToast('bottom')">Show Toast Bottom</ion-button>
+        <ion-button expand="block" onclick="presentToast('top')">Show Toast Top</ion-button>
+        <ion-button expand="block" onclick="presentToast('middle')">Show Toast Middle</ion-button>
+        <ion-button expand="block" onclick="presentToastWithOptions({message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.', duration: 2000})">Show Toast with long message</ion-button>
+        <ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true})">Show Toast with Close Button</ion-button>
+        <ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, closeButtonText: 'closing time'})">Show Toast with Custom Close Button Text</ion-button>
+        <ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, translucent: true})">Show Translucent Toast</ion-button>
+
+        <ion-toast-controller></ion-toast-controller>
+
+        <ion-grid>
+          <ion-row>
+            <ion-col col-6>
+              <f class="red"></f>
+            </ion-col>
+            <ion-col col-6>
+              <f class="green"></f>
+            </ion-col>
+            <ion-col col-6>
+              <f class="blue"></f>
+            </ion-col>
+            <ion-col col-6>
+              <f class="yellow"></f>
+            </ion-col>
+            <ion-col col-6>
+              <f class="pink"></f>
+            </ion-col>
+            <ion-col col-6>
+              <f class="purple"></f>
+            </ion-col>
+            <ion-col col-6>
+              <f class="black"></f>
+            </ion-col>
+            <ion-col col-6>
+              <f class="orange"></f>
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+      </ion-content>
+
+  </ion-app>
+  <script>
+    window.addEventListener('ionToastDidDismiss', function(e){console.log('didDismiss', e)})
+    window.addEventListener('ionToastWillDismiss', function(e){console.log('willDismiss', e)})
+
+    async function presentToast(position) {
+      const toastController = document.querySelector('ion-toast-controller');
+      await toastController.componentOnReady();
+      const toastElement = await toastController.create({
+        message: 'Hellooo',
+        position,
+        duration: 2000
+      });
+      return await toastElement.present();
+    }
+
+    async function presentToastWithOptions(opts) {
+      const toastController = document.querySelector('ion-toast-controller');
+      await toastController.componentOnReady();
+      const toastElement = await toastController.create(opts);
+      return await toastElement.present();
+    }
+  </script>
+
+  <style>
+    f {
+      display: block;
+      background: blue;
+
+      width: 100%;
+      height: 200px;
+      margin: 20px auto;
+    }
+
+    .red {
+      background-color: #ea445a;
+    }
+
+    .green {
+      background-color: #76d672;
+    }
+
+    .blue {
+      background-color: #3478f6;
+    }
+
+    .yellow {
+      background-color: #ffff80;
+    }
+
+    .pink {
+      background-color: #ff6b86;
+    }
+
+    .purple {
+      background-color: #7e34f6;
+    }
+
+    .black {
+      background-color: #000;
+    }
+
+    .orange {
+      background-color: #f69234;
+    }
+
+  </style>
+</body>
+
+</html>
diff --git a/core/src/components/toggle/test/preview/index.html b/core/src/components/toggle/test/preview/index.html
new file mode 100644
index 0000000000..04f51bb92e
--- /dev/null
+++ b/core/src/components/toggle/test/preview/index.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Toggle</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+<body>
+  <ion-app>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Toggle</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content">
+
+        <ion-list>
+          <ion-item>
+            <ion-label>Apple</ion-label>
+            <ion-toggle slot="start" name="apple" checked></ion-toggle>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Banana</ion-label>
+            <ion-toggle slot="start" name="banana" checked></ion-toggle>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Cherry, disabled</ion-label>
+            <ion-toggle slot="start" color="danger" name="cherry" disabled></ion-toggle>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Grape, checked, disabled</ion-label>
+            <ion-toggle slot="start" id="grapeChecked" name="grape" checked disabled></ion-toggle>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Kiwi, (ionChange) Secondary color</ion-label>
+            <ion-toggle slot="start" color="secondary" (ionChange)="kiwiChange($event)"></ion-toggle>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Strawberry, (ionChange) checked="true"</ion-label>
+            <ion-toggle slot="start" color="light" (ionChange)="strawberryChange($event)" checked="true"></ion-toggle>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Checkbox right, checked, really long text that should ellipsis</ion-label>
+            <ion-toggle slot="end" color="danger" checked></ion-toggle>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Checkbox right side</ion-label>
+            <ion-toggle slot="end" checked></ion-toggle>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Button w/ right side default icon, really long text that should ellipsis</ion-label>
+            <ion-icon name="information-circle" slot="end"></ion-icon>
+          </ion-item>
+
+        </ion-list>
+
+
+        <p aria-hidden="true" text-center>
+          <ion-button onClick="toggleBoolean('grapeChecked', 'checked')" fill="outline" size="small">Grape Checked</ion-button>
+          <ion-button onClick="toggleBoolean('grapeChecked', 'disabled')" fill="outline" size="small">Grape Disabled</ion-button>
+          <ion-button onClick="printForm()" fill="outline" size="small">Print Form</ion-button>
+        </p>
+
+        <p>
+          <ion-toggle id="standAloneChecked"></ion-toggle>
+          Stand-alone toggle: <span id="standAloneCheckedSpan"></span>
+        </p>
+      </ion-content>
+
+    <script>
+      function printForm(ev) {
+        console.log('TODO get working with forms');
+      }
+
+      function toggleBoolean(id, prop) {
+        var el = document.getElementById(id);
+
+        var isTrue = el[prop] ? false : true;
+        el[prop] = isTrue;
+        console.log('in toggleBoolean, setting', prop, 'to', isTrue);
+      }
+    </script>
+
+  </ion-app>
+</body>
+</html>
+
+
+
diff --git a/core/src/components/toolbar/test/preview/index.html b/core/src/components/toolbar/test/preview/index.html
new file mode 100644
index 0000000000..4adfac194a
--- /dev/null
+++ b/core/src/components/toolbar/test/preview/index.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Toolbar</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+<body onload="initialize()">
+  <ion-app>
+    <ion-header>
+      <ion-toolbar color="primary">
+        <ion-title>Toolbar</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="primary">
+        <ion-buttons slot="start" class="dynamic-slot">
+          <ion-button>
+            <ion-icon slot="icon-only" name="contact"></ion-icon>
+          </ion-button>
+          <ion-button>
+            <ion-icon slot="icon-only" name="search"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="end">
+          <ion-button color="secondary">
+            <ion-icon slot="icon-only" name="more"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Subheader</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content id="content" fullscreen="true">
+      <ion-card color="secondary">
+        <ion-card-header>
+          Card Header
+        </ion-card-header>
+        <ion-card-content>
+          <ion-card-title>
+            Title
+          </ion-card-title>
+          Some normal text in content.
+          <h3>h3 in content</h3>
+          <p>
+            Paragraph in content.
+          </p>
+          <p>
+            Another paragraph in content.
+          </p>
+        </ion-card-content>
+      </ion-card>
+
+      <ion-card color="primary" class="rainbow-content">
+        <ion-card-header>
+          Card Header
+        </ion-card-header>
+        <ion-card-content>
+          <ion-card-title>
+            Title
+          </ion-card-title>
+          Some normal text in content.
+          <h3>h3 in content</h3>
+          <p>
+            Paragraph in content.
+          </p>
+          <p>
+            Another paragraph in content.
+          </p>
+        </ion-card-content>
+      </ion-card>
+
+      <ion-card color="primary">
+        <ion-card-header>
+          Card Header
+        </ion-card-header>
+        <ion-card-content>
+          <ion-card-title>
+            Title
+          </ion-card-title>
+          Some normal text in content.
+          <h3>h3 in content</h3>
+          <p>
+            Paragraph in content.
+          </p>
+          <p>
+            Another paragraph in content.
+          </p>
+        </ion-card-content>
+      </ion-card>
+
+      <ion-list id="dynamicList">
+      </ion-list>
+
+    </ion-content>
+
+    <ion-footer>
+      <ion-toolbar>
+        <ion-buttons slot="end">
+          <ion-button>
+            <ion-icon slot="icon-only" name="search"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-searchbar>
+        </ion-searchbar>
+      </ion-toolbar>
+
+      <ion-toolbar>
+        <ion-title>
+          Footer
+        </ion-title>
+      </ion-toolbar>
+    </ion-footer>
+  </ion-app>
+
+  <style>
+    .rainbow-content {
+      background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+    }
+  </style>
+
+  <script>
+    function initialize() {
+      var mode = Ionic.mode;
+
+      if (mode === 'md') {
+        var buttons = document.querySelectorAll('.dynamic-slot');
+
+        for (var i = 0; i < buttons.length; i++) {
+          buttons[i].setAttribute('slot', 'end');
+        }
+      }
+    }
+
+    let items = [];
+    for (var i = 0; i < 30; i++) {
+      items.push( i+1 );
+    }
+    const list = document.getElementById('dynamicList');
+
+    let html = '';
+    for(let item of items) {
+      html += `<ion-item>${item}</ion-item>`;
+    }
+    list.innerHTML = html;
+  </script>
+</body>
+</html>
+
+
+
