diff --git a/core/src/components/action-sheet/test/basic/index.html b/core/src/components/action-sheet/test/basic/index.html
index ea758fbabb..0b97f7d043 100644
--- a/core/src/components/action-sheet/test/basic/index.html
+++ b/core/src/components/action-sheet/test/basic/index.html
@@ -22,7 +22,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content padding>
+    <ion-content class="ion-padding">
       <ion-button expand="block" id="basic" onclick="presentBasic()">Basic</ion-button>
       <ion-button expand="block" id="alertFromActionSheet" onclick="presentAlert()">Alert from Action Sheet</ion-button>
       <ion-button expand="block" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</ion-button>
diff --git a/core/src/components/action-sheet/test/preview/index.html b/core/src/components/action-sheet/test/preview/index.html
index e9586a1c42..a24b47f634 100644
--- a/core/src/components/action-sheet/test/preview/index.html
+++ b/core/src/components/action-sheet/test/preview/index.html
@@ -20,7 +20,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content padding fullscreen>
+    <ion-content class="ion-padding" fullscreen>
       <ion-action-sheet-controller></ion-action-sheet-controller>
 
       <ion-button expand="block" id="basic" onclick="presentBasic()">Basic</ion-button>
diff --git a/core/src/components/action-sheet/test/spec/index.html b/core/src/components/action-sheet/test/spec/index.html
index 10a85b1521..9bae41ff07 100644
--- a/core/src/components/action-sheet/test/spec/index.html
+++ b/core/src/components/action-sheet/test/spec/index.html
@@ -20,7 +20,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content padding>
+    <ion-content class="ion-padding">
       <ion-action-sheet-controller></ion-action-sheet-controller>
 
       <ion-button expand="block" id="spec" onclick="presentSpec()">Spec</ion-button>
diff --git a/core/src/components/action-sheet/test/translucent/index.html b/core/src/components/action-sheet/test/translucent/index.html
index 6437b25275..e9a51a3c86 100644
--- a/core/src/components/action-sheet/test/translucent/index.html
+++ b/core/src/components/action-sheet/test/translucent/index.html
@@ -20,7 +20,7 @@
         </ion-toolbar>
       </ion-header>
 
-      <ion-content padding>
+      <ion-content class="ion-padding">
         <ion-action-sheet-controller></ion-action-sheet-controller>
 
         <ion-button expand="block" id="basic" onclick="presentBasic()">Basic</ion-button>
diff --git a/core/src/components/alert/test/basic/index.html b/core/src/components/alert/test/basic/index.html
index 5d1fe8e0a3..574dea0a9a 100644
--- a/core/src/components/alert/test/basic/index.html
+++ b/core/src/components/alert/test/basic/index.html
@@ -20,7 +20,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content padding>
+    <ion-content class="ion-padding">
       <ion-alert-controller></ion-alert-controller>
 
       <ion-button id="basic" expand="block" onclick="presentAlert()">Alert</ion-button>
diff --git a/core/src/components/alert/test/preview/index.html b/core/src/components/alert/test/preview/index.html
index fe19b6ec56..be75ff6bcf 100644
--- a/core/src/components/alert/test/preview/index.html
+++ b/core/src/components/alert/test/preview/index.html
@@ -20,7 +20,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content padding fullscreen>
+    <ion-content class="ion-padding" fullscreen>
       <ion-alert-controller></ion-alert-controller>
 
       <ion-button id="basic" expand="block" onclick="presentAlert()">Alert</ion-button>
diff --git a/core/src/components/alert/test/translucent/index.html b/core/src/components/alert/test/translucent/index.html
index 8944eb4f4f..49319cf48a 100644
--- a/core/src/components/alert/test/translucent/index.html
+++ b/core/src/components/alert/test/translucent/index.html
@@ -20,7 +20,7 @@
         </ion-toolbar>
       </ion-header>
 
-      <ion-content padding>
+      <ion-content class="ion-padding">
         <ion-alert-controller></ion-alert-controller>
 
         <ion-button expand="block" onclick="presentAlert()">Alert</ion-button>
diff --git a/core/src/components/anchor/test/basic/index.html b/core/src/components/anchor/test/basic/index.html
index 340ac15da5..d8eec8e077 100644
--- a/core/src/components/anchor/test/basic/index.html
+++ b/core/src/components/anchor/test/basic/index.html
@@ -20,7 +20,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content padding>
+    <ion-content class="ion-padding">
       <p>
         <a href="#">A</a>
       </p>
diff --git a/core/src/components/anchor/test/standalone/index.html b/core/src/components/anchor/test/standalone/index.html
index 52a7879d7f..9110bcfe58 100644
--- a/core/src/components/anchor/test/standalone/index.html
+++ b/core/src/components/anchor/test/standalone/index.html
@@ -11,7 +11,7 @@
   <script src="../../../../../dist/ionic.js"></script>
 </head>
 
-<body padding>
+<body class="ion-padding">
   <h1>Default</h1>
   <ion-anchor href="#">Anchor</ion-anchor>
 
diff --git a/core/src/components/avatar/test/preview/index.html b/core/src/components/avatar/test/preview/index.html
index f69b47f8c8..8cd6c75261 100644
--- a/core/src/components/avatar/test/preview/index.html
+++ b/core/src/components/avatar/test/preview/index.html
@@ -20,7 +20,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content fullscreen padding>
+    <ion-content class="ion-padding" fullscreen>
       <ion-avatar>
         <img src="/src/components/avatar/test/avatar.svg">
       </ion-avatar>
diff --git a/core/src/components/avatar/test/standalone/index.html b/core/src/components/avatar/test/standalone/index.html
index 2bd4c3321b..908098593c 100644
--- a/core/src/components/avatar/test/standalone/index.html
+++ b/core/src/components/avatar/test/standalone/index.html
@@ -11,7 +11,7 @@
   <script src="../../../../../dist/ionic.js"></script>
 </head>
 
-<body padding>
+<body class="ion-padding">
   <h1>Default</h1>
   <ion-avatar>
     <img src="https://images.unsplash.com/photo-1485832329521-e944d75fa65e?auto=format&fit=crop&w=500&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"/>
diff --git a/core/src/components/back-button/test/basic/index.html b/core/src/components/back-button/test/basic/index.html
index 94ce027949..b8b671b063 100644
--- a/core/src/components/back-button/test/basic/index.html
+++ b/core/src/components/back-button/test/basic/index.html
@@ -33,7 +33,7 @@
           <ion-title>Page One</ion-title>
         </ion-toolbar>
       </ion-header>
-      <ion-content padding>
+      <ion-content class="ion-padding">
         <h1>Page One</h1>
         <ion-button class="next">Go to Page Two</ion-button>
       </ion-content>
@@ -60,7 +60,7 @@
           <ion-title>Page Two</ion-title>
         </ion-toolbar>
       </ion-header>
-      <ion-content padding>
+      <ion-content class="ion-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>
@@ -88,7 +88,7 @@
           <ion-title>Page Three</ion-title>
         </ion-toolbar>
       </ion-header>
-      <ion-content padding>
+      <ion-content class="ion-padding">
         <h1>Page Three</h1>
         <p>Custom back button</p>
         <ion-button class="next">Go to Page Four</ion-button>
@@ -117,7 +117,7 @@
           <ion-title>Page Four</ion-title>
         </ion-toolbar>
       </ion-header>
-      <ion-content padding>
+      <ion-content class="ion-padding">
         <h1>Page Four</h1>
         <p>Back button and menu button</p>
       </ion-content>
diff --git a/core/src/components/back-button/test/host-element/index.html b/core/src/components/back-button/test/host-element/index.html
index 2f44695912..54b1fffa48 100644
--- a/core/src/components/back-button/test/host-element/index.html
+++ b/core/src/components/back-button/test/host-element/index.html
@@ -22,7 +22,7 @@
                 <ion-title>Page One</ion-title>
               </ion-toolbar>
             </ion-header>
-            <ion-content padding>
+            <ion-content class="ion-padding">
               <h1>Page One</h1>
               <ion-nav-push component="page-two">
                 <ion-button class="next">Go to Page Two</ion-button>
@@ -44,7 +44,7 @@
                 <ion-title>Page Two</ion-title>
               </ion-toolbar>
             </ion-header>
-            <ion-content padding>
+            <ion-content class="ion-padding">
               <h1>Page Two</h1>
               <div>
                 <ion-nav-push component="page-three">
@@ -68,7 +68,7 @@
                 <ion-title>Page Three</ion-title>
               </ion-toolbar>
             </ion-header>
-            <ion-content padding>
+            <ion-content class="ion-padding">
               <h1>Page Three</h1>
               <div>
                 <ion-nav-push component="page-four">
@@ -92,7 +92,7 @@
                 <ion-title>Page Four</ion-title>
               </ion-toolbar>
             </ion-header>
-            <ion-content padding>
+            <ion-content class="ion-padding">
               <h1>Page Four</h1>
             </ion-content>
         `;
diff --git a/core/src/components/back-button/test/preview/index.html b/core/src/components/back-button/test/preview/index.html
index 602e0f8e1d..e5a5ba70e6 100644
--- a/core/src/components/back-button/test/preview/index.html
+++ b/core/src/components/back-button/test/preview/index.html
@@ -33,7 +33,7 @@
           <ion-title>Page One</ion-title>
         </ion-toolbar>
       </ion-header>
-      <ion-content padding>
+      <ion-content class="ion-padding">
         <h1>Page One</h1>
         <ion-button class="next">Go to Page Two</ion-button>
       </ion-content>
@@ -60,7 +60,7 @@
           <ion-title>Page Two</ion-title>
         </ion-toolbar>
       </ion-header>
-      <ion-content padding>
+      <ion-content class="ion-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>
@@ -88,7 +88,7 @@
           <ion-title>Page Three</ion-title>
         </ion-toolbar>
       </ion-header>
-      <ion-content padding>
+      <ion-content class="ion-padding">
         <h1>Page Three</h1>
         <p>Custom back button</p>
         <ion-button class="next">Go to Page Four</ion-button>
@@ -117,7 +117,7 @@
           <ion-title>Page Four</ion-title>
         </ion-toolbar>
       </ion-header>
-      <ion-content padding>
+      <ion-content class="ion-padding">
         <h1>Page Four</h1>
         <p>Back button and menu button</p>
       </ion-content>
diff --git a/core/src/components/badge/test/standalone/index.html b/core/src/components/badge/test/standalone/index.html
index ad911e89f2..131bfed9f2 100644
--- a/core/src/components/badge/test/standalone/index.html
+++ b/core/src/components/badge/test/standalone/index.html
@@ -11,7 +11,7 @@
   <script src="../../../../../dist/ionic.js"></script>
 </head>
 
-<body padding>
+<body class="ion-padding">
   <h1>Default</h1>
 
   <!-- Default -->
diff --git a/core/src/components/button/test/anchor/index.html b/core/src/components/button/test/anchor/index.html
index fd5a56ec16..327bf6e6e7 100644
--- a/core/src/components/button/test/anchor/index.html
+++ b/core/src/components/button/test/anchor/index.html
@@ -20,7 +20,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content id="content" padding no-bounce>
+    <ion-content class="ion-padding" id="content" no-bounce>
       <p>
         <ion-button href="#">Default</ion-button>
         <ion-button href="#" class="activated">Default.activated</ion-button>
diff --git a/core/src/components/button/test/basic/index.html b/core/src/components/button/test/basic/index.html
index 1e473b24af..1f8e0548a3 100644
--- a/core/src/components/button/test/basic/index.html
+++ b/core/src/components/button/test/basic/index.html
@@ -20,7 +20,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content id="content" padding no-bounce text-center>
+    <ion-content class="ion-padding ion-text-center" id="content" no-bounce>
       <p>
         <ion-button>Default</ion-button>
         <ion-button class="focused">Default.focused</ion-button>
diff --git a/core/src/components/button/test/clear/index.html b/core/src/components/button/test/clear/index.html
index 34a22dabe2..9736e7de04 100644
--- a/core/src/components/button/test/clear/index.html
+++ b/core/src/components/button/test/clear/index.html
@@ -20,7 +20,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content id="content" padding no-bounce>
+    <ion-content class="ion-padding" id="content" no-bounce>
       <p>
         <ion-button fill="clear">Default</ion-button>
         <ion-button fill="clear" class="activated">Default.activated</ion-button>
diff --git a/core/src/components/button/test/expand/index.html b/core/src/components/button/test/expand/index.html
index ffac01579c..84ac862726 100644
--- a/core/src/components/button/test/expand/index.html
+++ b/core/src/components/button/test/expand/index.html
@@ -20,7 +20,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content id="content" padding no-bounce>
+    <ion-content class="ion-padding" id="content" no-bounce>
       <p>
         <ion-button expand="block">Block</ion-button>
         <ion-button expand="full">Full</ion-button>
diff --git a/core/src/components/button/test/form/index.html b/core/src/components/button/test/form/index.html
index 7223c3293d..c78b6e8ff2 100644
--- a/core/src/components/button/test/form/index.html
+++ b/core/src/components/button/test/form/index.html
@@ -20,7 +20,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content id="content" padding no-bounce text-center>
+    <ion-content class="ion-padding ion-text-center" id="content" no-bounce>
 
       <form onsubmit="return validate(event)" action="http://httpbin.org/get" method="GET">
 
diff --git a/core/src/components/button/test/icon/index.html b/core/src/components/button/test/icon/index.html
index 6e6a265fd8..35021d27ae 100644
--- a/core/src/components/button/test/icon/index.html
+++ b/core/src/components/button/test/icon/index.html
@@ -20,7 +20,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content id="content" padding no-bounce>
+    <ion-content class="ion-padding" id="content" no-bounce>
       <p>
         <ion-button>
           <ion-icon name="home" slot="start"></ion-icon>
diff --git a/core/src/components/button/test/outline/index.html b/core/src/components/button/test/outline/index.html
index dfedd3f1c6..4e556fd872 100644
--- a/core/src/components/button/test/outline/index.html
+++ b/core/src/components/button/test/outline/index.html
@@ -20,7 +20,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content id="content" padding no-bounce>
+    <ion-content class="ion-padding" id="content" no-bounce>
       <p>
         <ion-button fill="outline">Default</ion-button>
         <ion-button fill="outline" class="activated">Default.activated</ion-button>
diff --git a/core/src/components/button/test/preview/index.html b/core/src/components/button/test/preview/index.html
index 8b225d6387..2ab3a80eb7 100644
--- a/core/src/components/button/test/preview/index.html
+++ b/core/src/components/button/test/preview/index.html
@@ -20,7 +20,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content id="content" padding no-bounce text-center fullscreen>
+    <ion-content class="ion-padding ion-text-center" id="content" no-bounce fullscreen>
       <p>
         <ion-button>Default</ion-button>
         <ion-button class="activated">Default.activated</ion-button>
diff --git a/core/src/components/button/test/round/index.html b/core/src/components/button/test/round/index.html
index 9ccfed26f0..c3af0fe76e 100644
--- a/core/src/components/button/test/round/index.html
+++ b/core/src/components/button/test/round/index.html
@@ -20,7 +20,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content id="content" padding text-center no-bounce>
+    <ion-content class="ion-padding ion-text-center" id="content" no-bounce>
       <ion-button shape="round">Default</ion-button>
       <ion-button shape="round" color="primary">Primary</ion-button>
       <ion-button shape="round" color="secondary">Secondary</ion-button>
diff --git a/core/src/components/button/test/size/index.html b/core/src/components/button/test/size/index.html
index 507156f72e..38eb1902e1 100644
--- a/core/src/components/button/test/size/index.html
+++ b/core/src/components/button/test/size/index.html
@@ -20,7 +20,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content id="content" padding no-bounce>
+    <ion-content class="ion-padding" id="content" no-bounce>
       <p>
         <ion-button>Default</ion-button>
         <ion-button href="#">Default</ion-button>
diff --git a/core/src/components/button/test/strong/index.html b/core/src/components/button/test/strong/index.html
index 04d4bfd179..d70f56e2d1 100644
--- a/core/src/components/button/test/strong/index.html
+++ b/core/src/components/button/test/strong/index.html
@@ -20,7 +20,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content id="content" padding no-bounce>
+    <ion-content class="ion-padding" id="content" no-bounce>
       <p>
         <ion-button strong>Default</ion-button>
       </p>
diff --git a/core/src/components/button/test/toolbar/index.html b/core/src/components/button/test/toolbar/index.html
index 4e53da07c6..aeee0f75c1 100644
--- a/core/src/components/button/test/toolbar/index.html
+++ b/core/src/components/button/test/toolbar/index.html
@@ -21,7 +21,7 @@
     </ion-header>
 
     <ion-content id="content">
-      <ion-toolbar no-padding>
+      <ion-toolbar class="ion-no-padding">
         <ion-title>This should have no padding</ion-title>
       </ion-toolbar>
 
diff --git a/core/src/components/buttons/test/icon/index.html b/core/src/components/buttons/test/icon/index.html
index a8e0e96d11..8b377b421d 100644
--- a/core/src/components/buttons/test/icon/index.html
+++ b/core/src/components/buttons/test/icon/index.html
@@ -27,7 +27,7 @@
         </ion-buttons>
       </ion-toolbar>
     </ion-header>
-    <ion-content padding no-bounce text-center>
+    <ion-content class="ion-padding ion-text-center" no-bounce>
       Content
     </ion-content>
 
diff --git a/core/src/components/card/test/translucent/index.html b/core/src/components/card/test/translucent/index.html
index 1ccc71b6a0..00ec14a647 100644
--- a/core/src/components/card/test/translucent/index.html
+++ b/core/src/components/card/test/translucent/index.html
@@ -108,13 +108,13 @@
 
         <ion-grid>
           <ion-row>
-            <ion-col no-padding>
+            <ion-col class="ion-no-padding">
               <ion-button fill="clear" size="small">
                 <ion-icon slot="start" name="star"></ion-icon>
                 Star
               </ion-button>
             </ion-col>
-            <ion-col no-padding text-right>
+            <ion-col class="ion-no-padding ion-text-right">
               <ion-button fill="clear" size="small" class="activated">
                 <ion-icon slot="start" name="share"></ion-icon>
                 Activated
@@ -184,19 +184,19 @@
 
         <ion-grid>
           <ion-row>
-            <ion-col no-padding>
+            <ion-col class="ion-no-padding">
               <ion-button fill="clear" size="small">
                 <ion-icon slot="start" name="star"></ion-icon>
                 Favorite
               </ion-button>
             </ion-col>
-            <ion-col no-padding text-center>
+            <ion-col class="ion-no-padding ion-text-center">
               <ion-button fill="clear" size="small">
                 <ion-icon slot="start" name="musical-notes"></ion-icon>
                 Listen
               </ion-button>
             </ion-col>
-            <ion-col no-padding align-self-center padding-end text-right>
+            <ion-col class="ion-no-padding ion-padding-end ion-text-right ion-align-self-center">
               <ion-note>
                 11h ago
               </ion-note>
@@ -205,7 +205,7 @@
         </ion-grid>
       </ion-card>
 
-      <ion-card no-margin>
+      <ion-card class="ion-no-margin">
 
         <div>
           <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
@@ -217,20 +217,20 @@
 
         <ion-grid>
           <ion-row>
-            <ion-col no-padding>
+            <ion-col class="ion-no-padding">
               <ion-button fill="clear" size="small" color="dark">
                 <ion-icon slot="start" name="star"></ion-icon>
                 Favorite
               </ion-button>
             </ion-col>
 
-            <ion-col no-padding text-center>
+            <ion-col class="ion-no-padding ion-text-center">
               <ion-button fill="clear" size="small" color="dark">
                 <ion-icon slot="start" name="musical-notes"></ion-icon>
                 Listen
               </ion-button>
             </ion-col>
-            <ion-col no-padding text-right>
+            <ion-col class="ion-no-padding ion-text-right">
               <ion-button fill="clear" size="small" color="dark">
                 <ion-icon slot="start" name="share-alt"></ion-icon>
                 Share
diff --git a/core/src/components/checkbox/test/standalone/index.html b/core/src/components/checkbox/test/standalone/index.html
index 52b1db5ebd..302e3d9df5 100644
--- a/core/src/components/checkbox/test/standalone/index.html
+++ b/core/src/components/checkbox/test/standalone/index.html
@@ -11,7 +11,7 @@
   <script src="../../../../../dist/ionic.js"></script>
 </head>
 
-<body padding>
+<body class="ion-padding">
   <h1>Default</h1>
   <ion-checkbox></ion-checkbox>
   <ion-checkbox checked></ion-checkbox>
diff --git a/core/src/components/chip/test/basic/index.html b/core/src/components/chip/test/basic/index.html
index 05e501cc51..773cc4626d 100644
--- a/core/src/components/chip/test/basic/index.html
+++ b/core/src/components/chip/test/basic/index.html
@@ -20,7 +20,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content id="content" padding style="text-align: center">
+    <ion-content class="ion-padding" id="content" style="text-align: center">
 
         <h2>Basic Chips</h2>
         <ion-chip>
diff --git a/core/src/components/chip/test/preview/index.html b/core/src/components/chip/test/preview/index.html
index 0bc5a2ff38..f5001dc299 100644
--- a/core/src/components/chip/test/preview/index.html
+++ b/core/src/components/chip/test/preview/index.html
@@ -20,7 +20,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content id="content" padding text-center fullscreen>
+    <ion-content class="ion-padding ion-text-center" id="content" fullscreen>
 
       <h2>Basic Chips</h2>
       <ion-chip>
diff --git a/core/src/components/content/test/basic/index.html b/core/src/components/content/test/basic/index.html
index 6dbfc79eaf..ac5ca4b8e9 100644
--- a/core/src/components/content/test/basic/index.html
+++ b/core/src/components/content/test/basic/index.html
@@ -24,7 +24,7 @@
     </ion-header>
 
     <div style="display: flex; flex: 1">
-      <ion-content padding style="text-align: center; flex: 2" id="content">
+      <ion-content class="ion-padding" style="text-align: center; flex: 2" id="content">
         <ion-content>
         <f style="height: 50%"></f>
         <ion-button onclick="toggleFullscreen()">Toggle content.fullscreen</ion-button>
@@ -50,7 +50,7 @@
         <f></f>
       </ion-content>
       </ion-content>
-      <ion-content padding style="display: none" id="content3">
+      <ion-content class="ion-padding" style="display: none" id="content3">
         <f></f>
         <f></f>
         <f></f>
@@ -60,7 +60,7 @@
       </ion-content>
     </div>
 
-    <ion-content padding style="display: none" id="content2">
+    <ion-content class="ion-padding" style="display: none" id="content2">
       <f></f>
       <f></f>
       <f></f>
diff --git a/core/src/components/content/test/fullscreen/index.html b/core/src/components/content/test/fullscreen/index.html
index b6f160162c..a91771e764 100644
--- a/core/src/components/content/test/fullscreen/index.html
+++ b/core/src/components/content/test/fullscreen/index.html
@@ -19,7 +19,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content padding fullscreen>
+    <ion-content class="ion-padding" fullscreen>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis pretium urna. Aliquam nec bibendum odio. Aenean nec elementum magna. Sed dolor leo, efficitur quis pretium quis, efficitur gravida est. Vivamus finibus, dui ut rutrum mattis, ligula turpis ornare magna, id condimentum urna mi at nisi. Aliquam ornare sodales viverra. Donec semper lacus ac turpis luctus mollis. Donec quis sem vel lacus ullamcorper cursus. Donec auctor auctor enim eu condimentum.</p>
       <p>Suspendisse erat leo, dapibus eu vehicula vitae, porttitor sit amet odio. Phasellus et dui sed metus ullamcorper feugiat in a libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas in lectus sit amet mi placerat rhoncus. Maecenas a dui in nulla sodales viverra sed at diam. Curabitur aliquam, neque id accumsan efficitur, est enim consequat nisl, a rutrum felis magna porta nisl. Phasellus suscipit feugiat turpis, nec interdum mi ultrices a. Curabitur cursus ligula sapien, non dictum libero dictum molestie. Praesent at metus mauris. Sed vitae tellus et nunc vehicula maximus ut quis erat.</p>
       <p>Nunc vulputate venenatis ex, in suscipit metus aliquet ac. Nunc maximus laoreet metus, blandit accumsan quam feugiat ac. In finibus efficitur feugiat. Aliquam erat volutpat. Integer fermentum non arcu eget gravida. Ut congue magna sit amet purus aliquet accumsan. Pellentesque a dui ac enim vulputate sodales. Ut pulvinar sapien vel mauris convallis, eu pellentesque justo semper. Suspendisse non odio vitae ex efficitur placerat ut vel mauris. Suspendisse ante massa, malesuada nec laoreet nec, aliquam id nunc. Phasellus fermentum consequat eros eget sollicitudin. Sed hendrerit laoreet nibh in fringilla. Vestibulum porta ultricies enim vel ornare. Integer luctus faucibus nunc, non mattis nisl consectetur at. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
diff --git a/core/src/components/content/test/preview/index.html b/core/src/components/content/test/preview/index.html
index eff5176df7..07961faaea 100644
--- a/core/src/components/content/test/preview/index.html
+++ b/core/src/components/content/test/preview/index.html
@@ -24,7 +24,7 @@
     </ion-header>
 
     <div style="display: flex; flex: 1">
-      <ion-content padding fullscreen text-center style="flex: 2" id="content">
+      <ion-content class="ion-padding ion-text-center" id="content" fullscreen style="flex: 2">
         <f></f>
         <ion-button onclick="toggleFullscreen()">Toggle content.fullscreen</ion-button>
         <p>
@@ -48,7 +48,7 @@
         <f></f>
         <f></f>
       </ion-content>
-      <ion-content padding style="display: none" id="content3">
+      <ion-content class="ion-padding" style="display: none" id="content3">
         <f></f>
         <f></f>
         <f></f>
@@ -58,7 +58,7 @@
       </ion-content>
     </div>
 
-    <ion-content padding style="display: none" id="content2">
+    <ion-content class="ion-padding" style="display: none" id="content2">
       <f></f>
       <f></f>
       <f></f>
diff --git a/core/src/components/content/test/standalone/index.html b/core/src/components/content/test/standalone/index.html
index 2fe6a9d0e4..6a405bdb39 100644
--- a/core/src/components/content/test/standalone/index.html
+++ b/core/src/components/content/test/standalone/index.html
@@ -11,7 +11,7 @@
 </head>
 <body>
   <div class="content-height">
-    <ion-content padding>
+    <ion-content class="ion-padding">
       <h1>Heading</h1>
       <h2>Heading</h2>
       <h3>Heading</h3>
@@ -24,7 +24,7 @@
   </div>
 
   <div class="content-height">
-    <ion-content padding color="secondary">
+    <ion-content class="ion-padding" color="secondary">
       <h1>Heading</h1>
       <h2>Heading</h2>
       <h3>Heading</h3>
@@ -37,7 +37,7 @@
   </div>
 
   <div class="content-height">
-    <ion-content padding class="custom-color">
+    <ion-content class="ion-padding custom-color">
       <h1>Heading</h1>
       <h2>Heading</h2>
       <h3>Heading</h3>
@@ -50,7 +50,7 @@
   </div>
 
   <div class="content-height">
-    <ion-content padding class="outer-content">
+    <ion-content class="ion-padding outer-content">
       <h1>Heading</h1>
       <h2>Heading</h2>
       <h3>Heading</h3>
@@ -63,7 +63,7 @@
   </div>
 
   <div class="content-height">
-    <ion-content padding class="outer-content">
+    <ion-content class="ion-padding outer-content">
       <h1>Heading</h1>
       <h2>Heading</h2>
       <h3>Heading</h3>
diff --git a/core/src/components/fab/test/basic/index.html b/core/src/components/fab/test/basic/index.html
index 85a8bdb090..d15666bd2b 100644
--- a/core/src/components/fab/test/basic/index.html
+++ b/core/src/components/fab/test/basic/index.html
@@ -20,7 +20,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content id="content" padding fullscreen>
+    <ion-content class="ion-padding" id="content" fullscreen>
       <f></f>
       <f></f>
 
diff --git a/core/src/components/fab/test/preview/index.html b/core/src/components/fab/test/preview/index.html
index 9c2208651f..49203528ef 100644
--- a/core/src/components/fab/test/preview/index.html
+++ b/core/src/components/fab/test/preview/index.html
@@ -20,7 +20,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content id="content" padding fullscreen>
+    <ion-content class="ion-padding" id="content" fullscreen>
       <f></f>
       <f></f>
 
diff --git a/core/src/components/grid/test/basic/index.html b/core/src/components/grid/test/basic/index.html
index 16d1281e2a..d75b3740c9 100644
--- a/core/src/components/grid/test/basic/index.html
+++ b/core/src/components/grid/test/basic/index.html
@@ -122,17 +122,17 @@
         </ion-row>
 
         <ion-row>
-          <ion-col align-self-start>
+          <ion-col class="ion-align-self-start">
             <div>
               ion-col[top]
             </div>
           </ion-col>
-          <ion-col align-self-center>
+          <ion-col class="ion-align-self-center">
             <div>
               ion-col[center]
             </div>
           </ion-col>
-          <ion-col align-self-end>
+          <ion-col class="ion-align-self-end">
             <div>
               ion-col[bottom]
             </div>
@@ -146,7 +146,7 @@
           </ion-col>
         </ion-row>
 
-        <ion-row align-items-start>
+        <ion-row class="ion-align-items-start">
           <ion-col>
             <div>
               [top] ion-col
@@ -157,7 +157,7 @@
               [top] ion-col
             </div>
           </ion-col>
-          <ion-col align-self-end>
+          <ion-col class="ion-align-self-end">
             <div>
               [top] ion-col[bottom]
             </div>
@@ -171,7 +171,7 @@
           </ion-col>
         </ion-row>
 
-        <ion-row align-items-center>
+        <ion-row class="ion-align-items-center">
           <ion-col>
             <div>
               [center] ion-col
@@ -196,13 +196,13 @@
           </ion-col>
         </ion-row>
 
-        <ion-row align-items-end>
+        <ion-row class="ion-align-items-end">
           <ion-col>
             <div>
               [bottom] ion-col
             </div>
           </ion-col>
-          <ion-col align-self-start>
+          <ion-col class="ion-align-self-start">
             <div>
               [bottom] ion-col[top]
             </div>
diff --git a/core/src/components/grid/test/offsets/index.html b/core/src/components/grid/test/offsets/index.html
index bf4ab7a3bd..7425e1e04f 100644
--- a/core/src/components/grid/test/offsets/index.html
+++ b/core/src/components/grid/test/offsets/index.html
@@ -21,7 +21,7 @@
     </ion-header>
 
     <ion-content id="content" class="grid-demo">
-      <h2 padding-start>Push</h2>
+      <h2 class="ion-padding-start">Push</h2>
       <ion-grid>
         <ion-row>
           <ion-col size="auto" push="1">
@@ -37,7 +37,7 @@
         </ion-row>
       </ion-grid>
 
-      <h2 padding-start>Push and Pull</h2>
+      <h2 class="ion-padding-start">Push and Pull</h2>
       <ion-grid>
         <ion-row>
           <ion-col size="9" push="3">
@@ -68,7 +68,7 @@
         </ion-row>
       </ion-grid>
 
-      <h2 padding-start>Offset</h2>
+      <h2 class="ion-padding-start">Offset</h2>
       <ion-grid>
         <ion-row>
           <ion-col offset="5">
diff --git a/core/src/components/grid/test/padding/index.html b/core/src/components/grid/test/padding/index.html
index ac192cf178..5e761df671 100644
--- a/core/src/components/grid/test/padding/index.html
+++ b/core/src/components/grid/test/padding/index.html
@@ -21,8 +21,8 @@
     </ion-header>
 
     <ion-content id="content" class="grid-demo">
-      <h2 padding-start>No Grid Padding</h2>
-      <ion-grid no-padding>
+      <h2 class="ion-padding-start">No Grid Padding</h2>
+      <ion-grid class="ion-no-padding">
         <ion-row>
           <ion-col>
             <div>
@@ -47,8 +47,8 @@
         </ion-row>
       </ion-grid>
 
-      <h2 padding-start>No Grid Padding / Nested</h2>
-      <ion-grid no-padding>
+      <h2 class="ion-padding-start">No Grid Padding / Nested</h2>
+      <ion-grid class="ion-no-padding">
         <ion-row>
           <ion-col>
             <ion-grid>
@@ -84,7 +84,7 @@
         </ion-row>
       </ion-grid>
 
-      <h2 padding-start>Default Grid Padding</h2>
+      <h2 class="ion-padding-start">Default Grid Padding</h2>
       <ion-grid>
         <ion-row>
           <ion-col>
@@ -110,7 +110,7 @@
         </ion-row>
       </ion-grid>
 
-      <h2 padding-start>Custom Grid Padding By Breakpoint</h2>
+      <h2 class="ion-padding-start">Custom Grid Padding By Breakpoint</h2>
       <ion-grid class="custom-grid-padding">
         <ion-row>
           <ion-col>
@@ -136,7 +136,7 @@
         </ion-row>
       </ion-grid>
 
-      <h2 padding-start>Custom Column Padding By Breakpoint</h2>
+      <h2 class="ion-padding-start">Custom Column Padding By Breakpoint</h2>
       <ion-grid class="custom-column-padding">
         <ion-row>
           <ion-col>
diff --git a/core/src/components/grid/test/preview/index.html b/core/src/components/grid/test/preview/index.html
index 0c5d0280fc..2d0e3b0ab3 100644
--- a/core/src/components/grid/test/preview/index.html
+++ b/core/src/components/grid/test/preview/index.html
@@ -124,17 +124,17 @@
         </ion-row>
 
         <ion-row>
-          <ion-col align-self-start>
+          <ion-col class="ion-align-self-start">
             <div>
               ion-col [start]
             </div>
           </ion-col>
-          <ion-col align-self-center>
+          <ion-col class="ion-align-self-center">
             <div>
               ion-col [center]
             </div>
           </ion-col>
-          <ion-col align-self-end>
+          <ion-col class="ion-align-self-end">
             <div>
               ion-col [end]
             </div>
@@ -148,7 +148,7 @@
           </ion-col>
         </ion-row>
 
-        <ion-row align-items-start>
+        <ion-row class="ion-align-items-start">
           <ion-col>
             <div>
               [start] ion-col
@@ -159,7 +159,7 @@
               [start] ion-col
             </div>
           </ion-col>
-          <ion-col align-self-end>
+          <ion-col class="ion-align-self-end">
             <div>
               [start] ion-col [end]
             </div>
@@ -173,7 +173,7 @@
           </ion-col>
         </ion-row>
 
-        <ion-row align-items-center>
+        <ion-row class="ion-align-items-center">
           <ion-col>
             <div>
               [center] ion-col
@@ -198,13 +198,13 @@
           </ion-col>
         </ion-row>
 
-        <ion-row align-items-end>
+        <ion-row class="ion-align-items-end">
           <ion-col>
             <div>
               [end] ion-col
             </div>
           </ion-col>
-          <ion-col align-self-start>
+          <ion-col class="ion-align-self-start">
             <div>
               [end] ion-col [start]
             </div>
diff --git a/core/src/components/grid/test/sizes/index.html b/core/src/components/grid/test/sizes/index.html
index b6bed004a6..4814e6d556 100644
--- a/core/src/components/grid/test/sizes/index.html
+++ b/core/src/components/grid/test/sizes/index.html
@@ -21,12 +21,12 @@
     </ion-header>
 
     <ion-content id="content" class="grid-demo">
-      <h2 padding-start>10 Column Layout</h2>
+      <h2 class="ion-padding-start">10 Column Layout</h2>
       <ion-grid class="grid-10">
         <ion-row id="row10"></ion-row>
       </ion-grid>
 
-      <h2 padding-start>Responsive sm</h2>
+      <h2 class="ion-padding-start">Responsive sm</h2>
       <ion-grid>
         <ion-row>
           <ion-col size="12" size-sm>
@@ -52,7 +52,7 @@
         </ion-row>
       </ion-grid>
 
-      <h2 padding-start>Size auto</h2>
+      <h2 class="ion-padding-start">Size auto</h2>
       <ion-grid>
         <ion-row>
           <ion-col>
@@ -78,7 +78,7 @@
         </ion-row>
       </ion-grid>
 
-      <h2 padding-start>Breakpoint Sizes</h2>
+      <h2 class="ion-padding-start">Breakpoint Sizes</h2>
       <ion-grid>
         <ion-row>
           <ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1">
diff --git a/core/src/components/grid/test/standalone/index.html b/core/src/components/grid/test/standalone/index.html
index ad103265dd..35868c09c5 100644
--- a/core/src/components/grid/test/standalone/index.html
+++ b/core/src/components/grid/test/standalone/index.html
@@ -115,17 +115,17 @@
     </ion-row>
 
     <ion-row>
-      <ion-col align-self-start>
+      <ion-col class="ion-align-self-start">
         <div>
           ion-col[top]
         </div>
       </ion-col>
-      <ion-col align-self-center>
+      <ion-col class="ion-align-self-center">
         <div>
           ion-col[center]
         </div>
       </ion-col>
-      <ion-col align-self-end>
+      <ion-col class="ion-align-self-end">
         <div>
           ion-col[bottom]
         </div>
@@ -139,7 +139,7 @@
       </ion-col>
     </ion-row>
 
-    <ion-row align-items-start>
+    <ion-row class="ion-align-items-start">
       <ion-col>
         <div>
           [top] ion-col
@@ -150,7 +150,7 @@
           [top] ion-col
         </div>
       </ion-col>
-      <ion-col align-self-end>
+      <ion-col class="ion-align-self-end">
         <div>
           [top] ion-col[bottom]
         </div>
@@ -164,7 +164,7 @@
       </ion-col>
     </ion-row>
 
-    <ion-row align-items-center>
+    <ion-row class="ion-align-items-center">
       <ion-col>
         <div>
           [center] ion-col
@@ -189,13 +189,13 @@
       </ion-col>
     </ion-row>
 
-    <ion-row align-items-end>
+    <ion-row class="ion-align-items-end">
       <ion-col>
         <div>
           [bottom] ion-col
         </div>
       </ion-col>
-      <ion-col align-self-start>
+      <ion-col class="ion-align-self-start">
         <div>
           [bottom] ion-col[top]
         </div>
diff --git a/core/src/components/icon/test/dir/index.html b/core/src/components/icon/test/dir/index.html
index a7ea0e86f2..4267095007 100644
--- a/core/src/components/icon/test/dir/index.html
+++ b/core/src/components/icon/test/dir/index.html
@@ -26,7 +26,7 @@
       <h1>Flip RTL</h1>
 
       <ion-grid>
-        <ion-row align-items-center>
+        <ion-row class="ion-align-items-center">
           <ion-col size="auto"><code>null</code></ion-col>
           <ion-col><ion-icon name="call" color="primary"></ion-icon></ion-col>
           <ion-col><ion-icon name="cut" color="secondary"></ion-icon></ion-col>
@@ -36,7 +36,7 @@
           <ion-col><ion-icon name="brush" color="danger"></ion-icon></ion-col>
           <ion-col><ion-icon name="bicycle" color="medium"></ion-icon></ion-col>
         </ion-row>
-        <ion-row align-items-center>
+        <ion-row class="ion-align-items-center">
           <ion-col size="auto"><code>true</code></ion-col>
           <ion-col><ion-icon name="call" color="primary" flip-rtl></ion-icon></ion-col>
           <ion-col><ion-icon name="cut" color="secondary" flip-rtl></ion-icon></ion-col>
@@ -49,7 +49,7 @@
       </ion-grid>
 
       <ion-grid>
-        <ion-row align-items-center>
+        <ion-row class="ion-align-items-center">
           <ion-col size="auto"><code>null</code></ion-col>
           <ion-col><ion-icon name="arrow-dropright"></ion-icon></ion-col>
           <ion-col><ion-icon name="arrow-dropright-circle"></ion-icon></ion-col>
@@ -60,7 +60,7 @@
           <ion-col><ion-icon name="arrow-back"></ion-icon></ion-col>
           <ion-col><ion-icon name="arrow-round-back"></ion-icon></ion-col>
         </ion-row>
-        <ion-row align-items-center>
+        <ion-row class="ion-align-items-center">
           <ion-col size="auto"><code>false</code></ion-col>
           <ion-col><ion-icon name="arrow-dropright" flip-rtl="false"></ion-icon></ion-col>
           <ion-col><ion-icon name="arrow-dropright-circle" flip-rtl="false"></ion-icon></ion-col>
diff --git a/core/src/components/img/test/basic/index.html b/core/src/components/img/test/basic/index.html
index 71b054c6c4..dfc85cb861 100644
--- a/core/src/components/img/test/basic/index.html
+++ b/core/src/components/img/test/basic/index.html
@@ -20,7 +20,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content padding>
+    <ion-content class="ion-padding">
       <f></f>
       <f></f>
       <ion-img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAARQAQMAAAA2ut43AAAABlBMVEXMzMz////TjRV2AAAEPUlEQVR42u3RMREAMBDDsPAn/eXhavOq87Ztu7u7+6eBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBf2hvgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgatgn4GBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGr7S0wMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDBwFewzMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwcLW9BQYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBq6CfQYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgautrfAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAVbDPwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwNX2FhgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGLgK9hkYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBi42t4CAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDV8E+AwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDA1fbW2BgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYOAq2GdgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGDgansLDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMXAX7DAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDFxtb4GBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGrYJ+BgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBq+0tMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwcBXsMzAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMHC1vQUGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgaugn0GBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGjvYD5WuYrpZqdmcAAAAASUVORK5CYII="></ion-img>
diff --git a/core/src/components/img/test/standalone/index.html b/core/src/components/img/test/standalone/index.html
index 235b315584..5ae98c110e 100644
--- a/core/src/components/img/test/standalone/index.html
+++ b/core/src/components/img/test/standalone/index.html
@@ -11,7 +11,7 @@
   <script src="../../../../../dist/ionic.js"></script>
 </head>
 
-<body padding onLoad="render()">
+<body class="ion-padding" onLoad="render()">
   <h2>Default</h2>
   <ion-img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAARQAQMAAAA2ut43AAAABlBMVEXMzMz////TjRV2AAAEPUlEQVR42u3RMREAMBDDsPAn/eXhavOq87Ztu7u7+6eBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBf2hvgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgatgn4GBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGr7S0wMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDBwFewzMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwcLW9BQYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBq6CfQYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgautrfAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAVbDPwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwNX2FhgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGLgK9hkYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBi42t4CAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDV8E+AwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDA1fbW2BgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYOAq2GdgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGDgansLDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMXAX7DAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDFxtb4GBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGrYJ+BgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBq+0tMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwcBXsMzAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMHC1vQUGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgaugn0GBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGjvYD5WuYrpZqdmcAAAAASUVORK5CYII="></ion-img>
 
diff --git a/core/src/components/infinite-scroll/test/basic/index.html b/core/src/components/infinite-scroll/test/basic/index.html
index b424b4874d..ac81a8a09e 100644
--- a/core/src/components/infinite-scroll/test/basic/index.html
+++ b/core/src/components/infinite-scroll/test/basic/index.html
@@ -21,7 +21,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content id="content" padding>
+    <ion-content class="ion-padding" id="content">
 
       <ion-button onclick="toggleInfiniteScroll()" expand="block">
         Toggle InfiniteScroll
diff --git a/core/src/components/infinite-scroll/test/preview/index.html b/core/src/components/infinite-scroll/test/preview/index.html
index 0b387001d2..aa4cd34f5f 100644
--- a/core/src/components/infinite-scroll/test/preview/index.html
+++ b/core/src/components/infinite-scroll/test/preview/index.html
@@ -19,7 +19,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content id="content" padding fullscreen>
+    <ion-content class="ion-padding" id="content" fullscreen>
 
       <ion-button onclick="toggleInfiniteScroll()" block>
         Toggle InfiniteScroll
diff --git a/core/src/components/infinite-scroll/test/top/index.html b/core/src/components/infinite-scroll/test/top/index.html
index 3febf95aa4..240c2cd264 100644
--- a/core/src/components/infinite-scroll/test/top/index.html
+++ b/core/src/components/infinite-scroll/test/top/index.html
@@ -21,7 +21,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content id="content" padding>
+    <ion-content class="ion-padding" id="content">
 
       <ion-infinite-scroll threshold="100px" id="infinite-scroll" position="top">
         <ion-infinite-scroll-content loading-spinner="bubbles" loading-text="Loading more data...">
diff --git a/core/src/components/input/test/basic/index.html b/core/src/components/input/test/basic/index.html
index 2b0a8b4dad..47622e8023 100644
--- a/core/src/components/input/test/basic/index.html
+++ b/core/src/components/input/test/basic/index.html
@@ -103,7 +103,7 @@
         </ion-item>
       </ion-list>
 
-      <div text-center>
+      <div class="ion-text-center">
         <ion-button onclick="toggleBoolean('dynamicDisabled', 'disabled')">
           Toggle Disabled
         </ion-button>
@@ -125,12 +125,12 @@
 
       <ion-item style="max-width: 250px">
         <ion-input value="Narrow input"></ion-input>
-        <ion-label text-right>Left</ion-label>
+        <ion-label class="ion-text-right">Left</ion-label>
       </ion-item>
 
       <ion-item style="max-width: 250px">
         <ion-label>Right</ion-label>
-        <ion-input text-right value="Narrow input"></ion-input>
+        <ion-input class="ion-text-right" value="Narrow input"></ion-input>
       </ion-item>
 
     </ion-content>
diff --git a/core/src/components/input/test/preview/index.html b/core/src/components/input/test/preview/index.html
index afab7666bc..97b34c7745 100644
--- a/core/src/components/input/test/preview/index.html
+++ b/core/src/components/input/test/preview/index.html
@@ -87,7 +87,7 @@
         </ion-item>
       </ion-list>
 
-      <div text-center>
+      <div class="ion-text-center">
         <ion-button onclick="toggleBoolean('dynamicDisabled', 'disabled')">
           Toggle Disabled
         </ion-button>
diff --git a/core/src/components/item-divider/test/preview/index.html b/core/src/components/item-divider/test/preview/index.html
index 01c0fe367f..6635bd2756 100644
--- a/core/src/components/item-divider/test/preview/index.html
+++ b/core/src/components/item-divider/test/preview/index.html
@@ -85,7 +85,7 @@
         </ion-item-divider>
 
         <ion-item class="custom-item">
-          <ion-label text-wrap>
+          <ion-label class="ion-text-wrap">
             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>
diff --git a/core/src/components/item-sliding/test/basic/index.html b/core/src/components/item-sliding/test/basic/index.html
index 4e3649ec2d..fcd994ffb7 100644
--- a/core/src/components/item-sliding/test/basic/index.html
+++ b/core/src/components/item-sliding/test/basic/index.html
@@ -34,7 +34,7 @@
       </ion-refresher>
 
 
-      <div padding>
+      <div class="ion-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>
@@ -149,7 +149,7 @@
 
           <ion-item-sliding id="item0">
             <ion-item onclick="clickedItem('item0')">
-              <ion-label text-wrap>
+              <ion-label class="ion-text-wrap">
                 <h2>RIGHT side - no icons</h2>
                 <p>Hey do you want to go to the game tonight?</p>
               </ion-label>
@@ -162,7 +162,7 @@
 
           <ion-item-sliding id="item1">
             <ion-item detail href="#" class="activated">
-              <ion-label text-wrap>
+              <ion-label class="ion-text-wrap">
                 <h2>LEFT side - no icons</h2>
                 <p>I think I figured out how to get more Mountain Dew</p>
               </ion-label>
@@ -176,7 +176,7 @@
 
           <ion-item-sliding id="item2">
             <ion-item detail>
-              <ion-label text-wrap>
+              <ion-label class="ion-text-wrap">
                 <h2>RIGHT/LEFT side - icons</h2>
                 <p>I think I figured out how to get more Mountain Dew</p>
               </ion-label>
@@ -202,7 +202,7 @@
 
           <ion-item-sliding id="item3">
             <ion-item detail>
-              <ion-label text-wrap>
+              <ion-label class="ion-text-wrap">
                 <h2>RIGHT/LEFT side - icons (slot="start")</h2>
                 <p>I think I figured out how to get more Mountain Dew</p>
               </ion-label>
@@ -325,7 +325,7 @@
 
           <ion-item-sliding id="item10">
             <ion-item detail>
-              <ion-label text-wrap>
+              <ion-label class="ion-text-wrap">
                 <h2>RIGHT/LEFT side - many buttons</h2>
                 <p>Use mobile emulator to check</p>
               </ion-label>
@@ -370,14 +370,14 @@
           </ion-item-sliding>
 
           <ion-item>
-            <ion-label text-wrap>
+            <ion-label class="ion-text-wrap">
               <h2>Normal ion-item (no sliding)</h2>
               <p>Paragraph text.</p>
             </ion-label>
           </ion-item>
 
           <ion-item onclick="clickedItem('item9')">
-            <ion-label text-wrap>
+            <ion-label class="ion-text-wrap">
               <h2>Normal button (no sliding)</h2>
               <p>Hey do you want to go to the game tonight?</p>
             </ion-label>
diff --git a/core/src/components/item-sliding/test/preview/index.html b/core/src/components/item-sliding/test/preview/index.html
index ff0ec61081..64683d516c 100644
--- a/core/src/components/item-sliding/test/preview/index.html
+++ b/core/src/components/item-sliding/test/preview/index.html
@@ -28,7 +28,7 @@
 
     <ion-content fullscreen>
 
-      <div padding>
+      <div class="ion-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>
@@ -117,7 +117,7 @@
 
           <ion-item-sliding id="item0">
             <ion-item onclick="clickedItem('item0')">
-              <ion-label text-wrap>
+              <ion-label class="ion-text-wrap">
                 <h2>RIGHT side - no icons</h2>
                 <p>Hey do you want to go to the game tonight?</p>
               </ion-label>
@@ -130,7 +130,7 @@
 
           <ion-item-sliding id="item1">
             <ion-item detail href="#" class="activated">
-              <ion-label text-wrap>
+              <ion-label class="ion-text-wrap">
                 <h2>LEFT side - no icons</h2>
                 <p>I think I figured out how to get more Mountain Dew</p>
               </ion-label>
@@ -144,7 +144,7 @@
 
           <ion-item-sliding id="item2">
             <ion-item detail>
-              <ion-label text-wrap>
+              <ion-label class="ion-text-wrap">
                 <h2>RIGHT/LEFT side - icons</h2>
                 <p>I think I figured out how to get more Mountain Dew</p>
               </ion-label>
@@ -167,7 +167,7 @@
 
           <ion-item-sliding id="item3">
             <ion-item detail>
-              <ion-label text-wrap>
+              <ion-label class="ion-text-wrap">
                 <h2>RIGHT/LEFT side - icons (slot="start")</h2>
                 <p>I think I figured out how to get more Mountain Dew</p>
               </ion-label>
@@ -282,14 +282,14 @@
           </ion-item-sliding>
 
           <ion-item>
-            <ion-label text-wrap>
+            <ion-label class="ion-text-wrap">
               <h2>Normal ion-item (no sliding)</h2>
               <p>Paragraph text.</p>
             </ion-label>
           </ion-item>
 
           <ion-item onclick="clickedItem('item9')">
-            <ion-label text-wrap>
+            <ion-label class="ion-text-wrap">
               <h2>Normal button (no sliding)</h2>
               <p>Hey do you want to go to the game tonight?</p>
             </ion-label>
diff --git a/core/src/components/item/test/basic/index.html b/core/src/components/item/test/basic/index.html
index ba10da05d4..37ecb9bd70 100644
--- a/core/src/components/item/test/basic/index.html
+++ b/core/src/components/item/test/basic/index.html
@@ -63,27 +63,27 @@
       </ion-item>
 
       <ion-item>
-        <ion-label text-wrap>
+        <ion-label class="ion-text-wrap">
           Multiline text that should wrap when it is too long to fit on one line in the item. Attribute on ion-label
         </ion-label>
       </ion-item>
 
       <ion-item color="secondary">
-        <ion-label text-wrap>
+        <ion-label class="ion-text-wrap">
           <h1>H1 Title Text</h1>
           <p>Paragraph line 1</p>
         </ion-label>
       </ion-item>
 
       <ion-item>
-        <ion-label text-wrap>
+        <ion-label class="ion-text-wrap">
           <h2>H2 Title Text</h2>
           <p>Paragraph line 1</p>
         </ion-label>
       </ion-item>
 
       <ion-item>
-        <ion-label text-wrap>
+        <ion-label class="ion-text-wrap">
           <ion-text color="primary">
             <h3>H3 Title Text</h3>
           </ion-text>
@@ -95,7 +95,7 @@
       </ion-item>
 
       <ion-item>
-        <ion-label text-wrap>
+        <ion-label class="ion-text-wrap">
           <h4>H4 Title Text</h4>
           <p>Paragraph line 1</p>
           <p>Paragraph line 2</p>
diff --git a/core/src/components/item/test/buttons/index.html b/core/src/components/item/test/buttons/index.html
index 99a65d19d6..f61389c42e 100644
--- a/core/src/components/item/test/buttons/index.html
+++ b/core/src/components/item/test/buttons/index.html
@@ -113,7 +113,7 @@
       </ion-item>
 
       <ion-item>
-        <ion-label text-wrap>
+        <ion-label class="ion-text-wrap">
           This is multiline text that has a long description of about how the text is really long and a
           <a href="#" onclick="testClick(event)">link</a>.
         </ion-label>
diff --git a/core/src/components/item/test/dividers/index.html b/core/src/components/item/test/dividers/index.html
index 4c7080e803..5923f0e416 100644
--- a/core/src/components/item/test/dividers/index.html
+++ b/core/src/components/item/test/dividers/index.html
@@ -78,7 +78,7 @@
         </ion-item-divider>
 
         <ion-item class="custom-item">
-          <ion-label text-wrap>
+          <ion-label class="ion-text-wrap">
             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>
@@ -102,7 +102,7 @@
         </ion-item-divider>
 
         <ion-item>
-          <ion-label text-wrap>
+          <ion-label class="ion-text-wrap">
             <h1>H1 Title Text</h1>
           </ion-label>
         </ion-item>
diff --git a/core/src/components/item/test/inputs/index.html b/core/src/components/item/test/inputs/index.html
index 044dc36fd6..32a3286cd4 100644
--- a/core/src/components/item/test/inputs/index.html
+++ b/core/src/components/item/test/inputs/index.html
@@ -20,7 +20,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content padding-vertical>
+    <ion-content class="ion-padding-vertical">
       <form onsubmit="return onSubmit(event)">
       <ion-list>
         <ion-item>
diff --git a/core/src/components/item/test/preview/index.html b/core/src/components/item/test/preview/index.html
index a6e6e0fce1..0a3105d3f0 100644
--- a/core/src/components/item/test/preview/index.html
+++ b/core/src/components/item/test/preview/index.html
@@ -116,7 +116,7 @@
 
         <!-- Multiline text Item -->
         <ion-item>
-          <ion-label text-wrap>
+          <ion-label class="ion-text-wrap">
           Multiline text that should wrap when it is too long
           to fit on one line in the item.
           </ion-label>
@@ -124,7 +124,7 @@
 
         <!-- Title and paragraph-->
         <ion-item>
-          <ion-label text-wrap>
+          <ion-label class="ion-text-wrap">
             <ion-text color="primary">
               <h3>H3 Primary Title</h3>
             </ion-text>
diff --git a/core/src/components/item/test/text/index.html b/core/src/components/item/test/text/index.html
index 9eea8796ea..cab4826d7d 100644
--- a/core/src/components/item/test/text/index.html
+++ b/core/src/components/item/test/text/index.html
@@ -64,27 +64,27 @@
       </ion-item>
 
       <ion-item>
-        <ion-label text-wrap>
+        <ion-label class="ion-text-wrap">
           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 color="secondary">
-        <ion-label text-wrap>
+        <ion-label class="ion-text-wrap">
           <h1>H1 Title Text</h1>
           <p>Paragraph line 1</p>
         </ion-label>
       </ion-item>
 
       <ion-item>
-        <ion-label text-wrap>
+        <ion-label class="ion-text-wrap">
           <h2>H2 Title Text</h2>
           <p>Paragraph line 1</p>
         </ion-label>
       </ion-item>
 
       <ion-item>
-        <ion-label text-wrap>
+        <ion-label class="ion-text-wrap">
           <ion-text color="primary">
             <h3>H3 Title Text</h3>
           </ion-text>
@@ -96,7 +96,7 @@
       </ion-item>
 
       <ion-item>
-        <ion-label text-wrap>
+        <ion-label class="ion-text-wrap">
           <h4>H4 Title Text</h4>
           <p>Paragraph line 1</p>
           <p>Paragraph line 2</p>
diff --git a/core/src/components/label/label.ios.scss b/core/src/components/label/label.ios.scss
index de5cbc5f83..3fe36683b7 100644
--- a/core/src/components/label/label.ios.scss
+++ b/core/src/components/label/label.ios.scss
@@ -4,6 +4,7 @@
 // iOS Label
 // --------------------------------------------------
 
+:host(.ion-text-wrap),
 :host([text-wrap]) {
   font-size: $label-ios-text-wrap-font-size;
 
diff --git a/core/src/components/label/label.md.scss b/core/src/components/label/label.md.scss
index f94aa59013..bbad75b69c 100644
--- a/core/src/components/label/label.md.scss
+++ b/core/src/components/label/label.md.scss
@@ -4,6 +4,7 @@
 // Material Design Label
 // --------------------------------------------------
 
+:host(.ion-text-wrap),
 :host([text-wrap]) {
   line-height: $label-md-text-wrap-line-height;
 }
diff --git a/core/src/components/label/label.scss b/core/src/components/label/label.scss
index 160ff547e3..d2d00d4a54 100644
--- a/core/src/components/label/label.scss
+++ b/core/src/components/label/label.scss
@@ -29,6 +29,7 @@
   color: current-color(base);
 }
 
+:host(.ion-text-wrap),
 :host([text-wrap]) {
   white-space: normal;
 }
diff --git a/core/src/components/label/test/basic/index.html b/core/src/components/label/test/basic/index.html
index d4934273a7..f9b619c00d 100644
--- a/core/src/components/label/test/basic/index.html
+++ b/core/src/components/label/test/basic/index.html
@@ -21,7 +21,7 @@
     </ion-header>
 
     <ion-content>
-      <div padding>
+      <div class="ion-padding">
         <ion-label>Default</ion-label>
 
         <ion-label color="secondary">Secondary</ion-label>
@@ -47,7 +47,7 @@
           <ion-input></ion-input>
         </ion-item>
         <ion-item>
-          <ion-label text-wrap>Wrap label this label just goes on and on and on</ion-label>
+          <ion-label class="ion-text-wrap">Wrap label this label just goes on and on and on</ion-label>
           <ion-input></ion-input>
         </ion-item>
         <ion-item>
diff --git a/core/src/components/label/test/preview/index.html b/core/src/components/label/test/preview/index.html
index 72906f9b4a..7d82f7cc74 100644
--- a/core/src/components/label/test/preview/index.html
+++ b/core/src/components/label/test/preview/index.html
@@ -27,7 +27,7 @@
           <ion-input></ion-input>
         </ion-item>
         <ion-item>
-          <ion-label text-wrap>Wrap label this label just goes on and on and on</ion-label>
+          <ion-label class="ion-text-wrap">Wrap label this label just goes on and on and on</ion-label>
           <ion-input></ion-input>
         </ion-item>
         <ion-item>
diff --git a/core/src/components/list/test/spec/index.html b/core/src/components/list/test/spec/index.html
index 6c989bc1b3..8c733289ec 100644
--- a/core/src/components/list/test/spec/index.html
+++ b/core/src/components/list/test/spec/index.html
@@ -137,7 +137,7 @@
     </ion-item>
 
     <ion-item>
-      <ion-label text-wrap>
+      <ion-label class="ion-text-wrap">
         Three-line item
         <p>Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
       </ion-label>
@@ -154,7 +154,7 @@
 
     <ion-item>
       <ion-icon slot="start" name="bluetooth"></ion-icon>
-      <ion-label text-wrap>
+      <ion-label class="ion-text-wrap">
         Three-line item
         <p>Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
       </ion-label>
@@ -164,7 +164,7 @@
       <ion-avatar slot="start">
         <img src="/src/components/avatar/test/avatar.svg">
       </ion-avatar>
-      <ion-label text-wrap>
+      <ion-label class="ion-text-wrap">
         Three-line item
         <p>Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
       </ion-label>
@@ -174,7 +174,7 @@
       <ion-thumbnail slot="start">
         <img src="/src/components/thumbnail/test/thumbnail.svg">
       </ion-thumbnail>
-      <ion-label text-wrap>
+      <ion-label class="ion-text-wrap">
         Three-line item
         <p>Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
       </ion-label>
@@ -271,7 +271,7 @@
     </ion-item>
 
     <ion-item>
-      <ion-label text-wrap>
+      <ion-label class="ion-text-wrap">
         Three-line item
         <p>Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
       </ion-label>
@@ -280,7 +280,7 @@
 
     <ion-item>
       <ion-icon slot="end" name="bluetooth"></ion-icon>
-      <ion-label text-wrap>
+      <ion-label class="ion-text-wrap">
         Three-line item
         <p>Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
       </ion-label>
@@ -290,7 +290,7 @@
       <ion-avatar slot="end">
         <img src="/src/components/avatar/test/avatar.svg">
       </ion-avatar>
-      <ion-label text-wrap>
+      <ion-label class="ion-text-wrap">
         Three-line item
         <p>Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
       </ion-label>
@@ -300,7 +300,7 @@
       <ion-thumbnail slot="end">
         <img src="/src/components/thumbnail/test/thumbnail.svg">
       </ion-thumbnail>
-      <ion-label text-wrap>
+      <ion-label class="ion-text-wrap">
         Three-line item
         <p>Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
       </ion-label>
diff --git a/core/src/components/loading/test/basic/index.html b/core/src/components/loading/test/basic/index.html
index 3f86ba7e00..fd41056dcf 100644
--- a/core/src/components/loading/test/basic/index.html
+++ b/core/src/components/loading/test/basic/index.html
@@ -20,7 +20,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content padding>
+    <ion-content class="ion-padding">
       <ion-button id="basic-loading" 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 id="long-content-loading" expand="block" onclick="presentLoadingWithOptions({duration: 2000, 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.'})">Show Loading with long message</ion-button>
@@ -86,7 +86,7 @@
     .html-loading {
       --max-width: auto;
     }
-    
+
     .custom-loading {
       --background: rgba(37, 210, 223, 0.8);
       --spinner-color: white;
diff --git a/core/src/components/loading/test/preview/index.html b/core/src/components/loading/test/preview/index.html
index e29f55849a..6b0b8ae37b 100644
--- a/core/src/components/loading/test/preview/index.html
+++ b/core/src/components/loading/test/preview/index.html
@@ -20,7 +20,7 @@
         </ion-toolbar>
       </ion-header>
 
-      <ion-content padding fullscreen>
+      <ion-content class="ion-padding" fullscreen>
         <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>
diff --git a/core/src/components/menu-toggle/test/basic/index.html b/core/src/components/menu-toggle/test/basic/index.html
index 6ae06ebecd..e0b5eaf532 100644
--- a/core/src/components/menu-toggle/test/basic/index.html
+++ b/core/src/components/menu-toggle/test/basic/index.html
@@ -53,7 +53,7 @@
         </ion-toolbar>
       </ion-header>
 
-      <ion-content padding>
+      <ion-content class="ion-padding">
         hola macho
       </ion-content>
     </ion-menu>
@@ -73,7 +73,7 @@
         </ion-toolbar>
       </ion-header>
 
-      <ion-content padding>
+      <ion-content class="ion-padding">
         <div>
           <ion-button onclick="openDefault()">Menu Button Will Open Default</ion-button>
         </div>
diff --git a/core/src/components/menu-toggle/test/button/index.html b/core/src/components/menu-toggle/test/button/index.html
index 93698990d5..5b4f79d5d4 100644
--- a/core/src/components/menu-toggle/test/button/index.html
+++ b/core/src/components/menu-toggle/test/button/index.html
@@ -54,7 +54,7 @@
         </ion-toolbar>
       </ion-header>
 
-      <ion-content padding>
+      <ion-content class="ion-padding">
         <ion-menu-toggle>
           <ion-button>Toggle Menu</ion-button>
         </ion-menu-toggle>
diff --git a/core/src/components/menu-toggle/test/list/index.html b/core/src/components/menu-toggle/test/list/index.html
index a4d44721bf..4f4abc588d 100644
--- a/core/src/components/menu-toggle/test/list/index.html
+++ b/core/src/components/menu-toggle/test/list/index.html
@@ -41,7 +41,7 @@
         </ion-toolbar>
       </ion-header>
 
-      <ion-content padding>
+      <ion-content class="ion-padding">
         <ion-list>
 
           <!-- <ion-menu-toggle> -->
diff --git a/core/src/components/menu-toggle/test/preview/index.html b/core/src/components/menu-toggle/test/preview/index.html
index 67cf572bc4..6e5aff4167 100644
--- a/core/src/components/menu-toggle/test/preview/index.html
+++ b/core/src/components/menu-toggle/test/preview/index.html
@@ -53,7 +53,7 @@
         </ion-toolbar>
       </ion-header>
 
-      <ion-content padding>
+      <ion-content class="ion-padding">
         hola macho
       </ion-content>
     </ion-menu>
@@ -69,7 +69,7 @@
         </ion-toolbar>
       </ion-header>
 
-      <ion-content padding>
+      <ion-content class="ion-padding">
         <div>
           <ion-button onclick="openDefault()">Menu Button Will Open Default</ion-button>
         </div>
diff --git a/core/src/components/menu/test/basic/index.html b/core/src/components/menu/test/basic/index.html
index 5b8a9c4225..3ff926ccf5 100644
--- a/core/src/components/menu/test/basic/index.html
+++ b/core/src/components/menu/test/basic/index.html
@@ -47,7 +47,7 @@
       </ion-content>
     </ion-menu>
 
-    <ion-menu side="end" type="push" id="end-menu"> 
+    <ion-menu side="end" type="push" id="end-menu">
       <ion-header>
         <ion-toolbar color="danger">
           <ion-title>End Menu</ion-title>
@@ -70,7 +70,7 @@
           <ion-title>Menu - Basic</ion-title>
         </ion-toolbar>
       </ion-header>
-      <ion-content padding>
+      <ion-content class="ion-padding">
         <ion-button expand="block" onclick="openFirst()">Open Start Menu</ion-button>
         <ion-button expand="block" onclick="openEnd()">Open End Menu</ion-button>
         <ion-button expand="block" onclick="openCustom()">Open Custom Menu</ion-button>
diff --git a/core/src/components/menu/test/preview/index.html b/core/src/components/menu/test/preview/index.html
index 26f4dd2f65..7a558dd55d 100644
--- a/core/src/components/menu/test/preview/index.html
+++ b/core/src/components/menu/test/preview/index.html
@@ -63,7 +63,7 @@
         </ion-toolbar>
       </ion-header>
 
-      <ion-content padding>
+      <ion-content class="ion-padding">
         hola macho
       </ion-content>
     </ion-menu>
@@ -76,7 +76,7 @@
         </ion-toolbar>
       </ion-header>
 
-      <ion-content padding>
+      <ion-content class="ion-padding">
         <p>
           <ion-button id="left" onclick="openStart()">Open start menu</ion-button>
           <ion-button onclick="openEnd()">Open end menu</ion-button>
diff --git a/core/src/components/modal/test/basic/index.html b/core/src/components/modal/test/basic/index.html
index a761148273..0763213dd5 100644
--- a/core/src/components/modal/test/basic/index.html
+++ b/core/src/components/modal/test/basic/index.html
@@ -29,7 +29,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content padding>
+    <ion-content class="ion-padding">
       <p>
         <ion-button id="basic-modal" onclick="presentModal()">Present modal</ion-button>
       </p>
diff --git a/core/src/components/modal/test/custom/index.html b/core/src/components/modal/test/custom/index.html
index 11249022e6..02fd3b93a9 100644
--- a/core/src/components/modal/test/custom/index.html
+++ b/core/src/components/modal/test/custom/index.html
@@ -39,7 +39,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content padding>
+    <ion-content class="ion-padding">
       <p>
         <ion-button id="custom-modal" class="e2ePresentModal" onclick="presentModal()">Present modal</ion-button>
       </p>
diff --git a/core/src/components/modal/test/host-elements/index.html b/core/src/components/modal/test/host-elements/index.html
index b8d261a6ae..eec76a5a4d 100644
--- a/core/src/components/modal/test/host-elements/index.html
+++ b/core/src/components/modal/test/host-elements/index.html
@@ -20,7 +20,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content padding>
+    <ion-content class="ion-padding">
       <p>
         <ion-button class="e2ePresentModal" onclick="presentModal()">Present modal</ion-button>
       </p>
diff --git a/core/src/components/modal/test/preview/index.html b/core/src/components/modal/test/preview/index.html
index 45527d98a7..466c044df6 100644
--- a/core/src/components/modal/test/preview/index.html
+++ b/core/src/components/modal/test/preview/index.html
@@ -20,7 +20,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content padding fullscreen>
+    <ion-content class="ion-padding" fullscreen>
       <p>
         <ion-button id="presentModal" class="e2ePresentModal" onclick="presentModal()">Present modal</ion-button>
       </p>
diff --git a/core/src/components/nav-pop/test/basic/index.html b/core/src/components/nav-pop/test/basic/index.html
index 7788029fc6..c589c970c3 100644
--- a/core/src/components/nav-pop/test/basic/index.html
+++ b/core/src/components/nav-pop/test/basic/index.html
@@ -44,7 +44,7 @@
           <ion-title>Page One</ion-title>
         </ion-toolbar>
       </ion-header>
-      <ion-content padding>
+      <ion-content class="ion-padding">
         <h1>Page One</h1>
         <ion-button class="next">Go to Page Two</ion-button>
       </ion-content>
@@ -68,7 +68,7 @@
           <ion-title>Page Two</ion-title>
         </ion-toolbar>
       </ion-header>
-      <ion-content padding>
+      <ion-content class="ion-padding">
         <h1>Page Two</h1>
         <ion-button class="next">Go to Page Three</ion-button>
         <ion-nav-pop>
@@ -95,7 +95,7 @@
           <ion-title>Page Three</ion-title>
         </ion-toolbar>
       </ion-header>
-      <ion-content padding>
+      <ion-content class="ion-padding">
         <h1>Page Three</h1>
         <ion-nav-pop>
           <ion-button class="previous">Go Back</ion-button>
diff --git a/core/src/components/nav-pop/test/preview/index.html b/core/src/components/nav-pop/test/preview/index.html
index 5ba302e65e..bbfa5e4754 100644
--- a/core/src/components/nav-pop/test/preview/index.html
+++ b/core/src/components/nav-pop/test/preview/index.html
@@ -45,7 +45,7 @@
           <ion-title>Page One</ion-title>
         </ion-toolbar>
       </ion-header>
-      <ion-content padding fullscreen>
+      <ion-content class="ion-padding" fullscreen>
         <h1>Page One</h1>
         <ion-button class="next">Go to Page Two</ion-button>
       </ion-content>
@@ -69,7 +69,7 @@
           <ion-title>Page Two</ion-title>
         </ion-toolbar>
       </ion-header>
-      <ion-content padding fullscreen>
+      <ion-content class="ion-padding" fullscreen>
         <h1>Page Two</h1>
         <ion-button class="next">Go to Page Three</ion-button>
         <ion-nav-pop>
@@ -96,7 +96,7 @@
           <ion-title>Page Three</ion-title>
         </ion-toolbar>
       </ion-header>
-      <ion-content padding fullscreen>
+      <ion-content class="ion-padding" fullscreen>
         <h1>Page Three</h1>
         <ion-nav-pop>
           <ion-button class="previous">Go Back</ion-button>
diff --git a/core/src/components/nav-push/test/basic/index.html b/core/src/components/nav-push/test/basic/index.html
index 83f4f639ed..86c4042689 100644
--- a/core/src/components/nav-push/test/basic/index.html
+++ b/core/src/components/nav-push/test/basic/index.html
@@ -42,7 +42,7 @@
             <ion-title>Page One</ion-title>
           </ion-toolbar>
         </ion-header>
-        <ion-content padding>
+        <ion-content class="ion-padding">
           <h1>Page One</h1>
           <ion-nav-push component="page-two">
             <ion-button class="next">Go to Page Two</ion-button>
@@ -61,7 +61,7 @@
             <ion-title>Page Two</ion-title>
           </ion-toolbar>
         </ion-header>
-        <ion-content padding>
+        <ion-content class="ion-padding">
           <h1>Page Two</h1>
           <ion-nav-push component="page-three">
             <ion-button class="next">Go to Page Three</ion-button>
@@ -83,7 +83,7 @@
             <ion-title>Page Three</ion-title>
           </ion-toolbar>
         </ion-header>
-        <ion-content padding>
+        <ion-content class="ion-padding">
           <h1>Page Three</h1>
           <ion-nav-pop>
             <ion-button class="back">Go Back</ion-button>
diff --git a/core/src/components/nav-push/test/preview/index.html b/core/src/components/nav-push/test/preview/index.html
index d79d89624a..ab832ab912 100644
--- a/core/src/components/nav-push/test/preview/index.html
+++ b/core/src/components/nav-push/test/preview/index.html
@@ -43,7 +43,7 @@
             <ion-title>Page One</ion-title>
           </ion-toolbar>
         </ion-header>
-        <ion-content padding fullscreen>
+        <ion-content class="ion-padding" fullscreen>
           <h1>Page One</h1>
           <ion-nav-push component="page-two">
             <ion-button class="next">Go to Page Two</ion-button>
@@ -62,7 +62,7 @@
             <ion-title>Page Two</ion-title>
           </ion-toolbar>
         </ion-header>
-        <ion-content padding fullscreen>
+        <ion-content class="ion-padding" fullscreen>
           <h1>Page Two</h1>
           <ion-nav-push component="page-three">
             <ion-button class="next">Go to Page Three</ion-button>
@@ -84,7 +84,7 @@
             <ion-title>Page Three</ion-title>
           </ion-toolbar>
         </ion-header>
-        <ion-content padding fullscreen>
+        <ion-content class="ion-padding" fullscreen>
           <h1>Page Three</h1>
           <ion-nav-pop>
             <ion-button class="back">Go Back</ion-button>
diff --git a/core/src/components/nav-set-root/test/basic/index.html b/core/src/components/nav-set-root/test/basic/index.html
index 90729d7cab..95ed7a6379 100644
--- a/core/src/components/nav-set-root/test/basic/index.html
+++ b/core/src/components/nav-set-root/test/basic/index.html
@@ -28,7 +28,7 @@
             <ion-title>Page One</ion-title>
           </ion-toolbar>
         </ion-header>
-        <ion-content padding>
+        <ion-content class="ion-padding">
           <h1>Page One</h1>
           <ion-nav-set-root component="page-two">
             <ion-button class="next">Go to Page Two</ion-button>
@@ -47,7 +47,7 @@
             <ion-title>Page Two</ion-title>
           </ion-toolbar>
         </ion-header>
-        <ion-content padding>
+        <ion-content class="ion-padding">
           <h1>Page Two</h1>
           <ion-nav-set-root component="page-three">
             <ion-button class="next">Go to Page Three</ion-button>
@@ -65,7 +65,7 @@
             <ion-title>Page Three</ion-title>
           </ion-toolbar>
         </ion-header>
-        <ion-content padding>
+        <ion-content class="ion-padding">
           <h1>Page Three</h1>
         </ion-content>
       `;
diff --git a/core/src/components/nav-set-root/test/preview/index.html b/core/src/components/nav-set-root/test/preview/index.html
index 433802ded2..761942dcac 100644
--- a/core/src/components/nav-set-root/test/preview/index.html
+++ b/core/src/components/nav-set-root/test/preview/index.html
@@ -28,7 +28,7 @@
             <ion-title>Page One</ion-title>
           </ion-toolbar>
         </ion-header>
-        <ion-content padding fullscreen>
+        <ion-content class="ion-padding" fullscreen>
           <h1>Page One</h1>
           <ion-nav-set-root component="page-two">
             <ion-button class="next">Go to Page Two</ion-button>
@@ -47,7 +47,7 @@
             <ion-title>Page Two</ion-title>
           </ion-toolbar>
         </ion-header>
-        <ion-content padding fullscreen>
+        <ion-content class="ion-padding" fullscreen>
           <h1>Page Two</h1>
           <ion-nav-set-root component="page-three">
             <ion-button class="next">Go to Page Three</ion-button>
@@ -65,7 +65,7 @@
             <ion-title>Page Three</ion-title>
           </ion-toolbar>
         </ion-header>
-        <ion-content padding fullscreen>
+        <ion-content class="ion-padding" fullscreen>
           <h1>Page Three</h1>
         </ion-content>
       `;
diff --git a/core/src/components/nav/test/basic/index.html b/core/src/components/nav/test/basic/index.html
index 9fde24c2f7..92000e3b95 100644
--- a/core/src/components/nav/test/basic/index.html
+++ b/core/src/components/nav/test/basic/index.html
@@ -53,7 +53,7 @@
               <ion-title>Page One</ion-title>
             </ion-toolbar>
           </ion-header>
-          <ion-content padding>
+          <ion-content class="ion-padding">
             <h1>Page One</h1>
             <ion-nav-push component="page-two">
               <ion-button mode="md" class="next">Go to Page Two</ion-button>
@@ -86,7 +86,7 @@
               </ion-buttons>
             </ion-toolbar>
           </ion-header>
-          <ion-content padding>
+          <ion-content class="ion-padding">
             <h1>Page Two</h1>
             <div>
               <ion-nav-push component="page-three">
@@ -117,7 +117,7 @@
               <ion-title>Page Three</ion-title>
             </ion-toolbar>
           </ion-header>
-          <ion-content padding>
+          <ion-content class="ion-padding">
             <h1>Page Three</h1>
           </ion-content>
         `;
diff --git a/core/src/components/nav/test/nested/index.html b/core/src/components/nav/test/nested/index.html
index 0378b09fbd..bb3d24c4df 100644
--- a/core/src/components/nav/test/nested/index.html
+++ b/core/src/components/nav/test/nested/index.html
@@ -18,7 +18,7 @@
               <ion-title>Page 1</ion-title>
             </ion-toolbar>
           </ion-header>
-          <ion-content padding>
+          <ion-content class="ion-padding">
             <h1>Page 1</h1>
             <ion-nav-push component="page-two">
               <ion-button class="next">Go to Page 2</ion-button>
@@ -47,7 +47,7 @@
               <ion-title>Page 2.1</ion-title>
             </ion-toolbar>
           </ion-header>
-          <ion-content padding>
+          <ion-content class="ion-padding">
             <h1>Page 2.1</h1>
             <div>
               <ion-nav-push component="page-two-two">
@@ -71,7 +71,7 @@
               <ion-title>Page 2.2</ion-title>
             </ion-toolbar>
           </ion-header>
-          <ion-content padding>
+          <ion-content class="ion-padding">
             <h1>Page 2.2</h1>
             <div>
               <ion-nav-push component="page-three">
@@ -94,7 +94,7 @@
               <ion-title>Page 3</ion-title>
             </ion-toolbar>
           </ion-header>
-          <ion-content padding>
+          <ion-content class="ion-padding">
             <h1>Page 3</h1>
           </ion-content>
         `;
diff --git a/core/src/components/nav/test/preview/index.html b/core/src/components/nav/test/preview/index.html
index cf9985682f..4d5bb7f5d6 100644
--- a/core/src/components/nav/test/preview/index.html
+++ b/core/src/components/nav/test/preview/index.html
@@ -18,7 +18,7 @@
               <ion-title>Page One</ion-title>
             </ion-toolbar>
           </ion-header>
-          <ion-content padding fullscreen>
+          <ion-content class="ion-padding" fullscreen>
             <h1>Page One</h1>
             <ion-nav-push component="page-two">
               <ion-button class="next">Go to Page Two</ion-button>
@@ -38,7 +38,7 @@
               <ion-title>Page Two</ion-title>
             </ion-toolbar>
           </ion-header>
-          <ion-content padding fullscreen>
+          <ion-content class="ion-padding" fullscreen>
             <h1>Page Two</h1>
             <div>
               <ion-nav-push component="page-three">
@@ -60,7 +60,7 @@
               <ion-title>Page Three</ion-title>
             </ion-toolbar>
           </ion-header>
-          <ion-content padding fullscreen>
+          <ion-content class="ion-padding" fullscreen>
             <h1>Page Three</h1>
           </ion-content>
         `;
diff --git a/core/src/components/nav/test/routing/index.html b/core/src/components/nav/test/routing/index.html
index 91f6c1208e..040e2885ed 100644
--- a/core/src/components/nav/test/routing/index.html
+++ b/core/src/components/nav/test/routing/index.html
@@ -18,7 +18,7 @@
               <ion-title>Root</ion-title>
             </ion-toolbar>
           </ion-header>
-          <ion-content padding>
+          <ion-content class="ion-padding">
             <h1>Root</h1>
             <div>
               <ion-nav-push component="page-one">
@@ -40,7 +40,7 @@
               <ion-title>Page One</ion-title>
             </ion-toolbar>
           </ion-header>
-          <ion-content padding>
+          <ion-content class="ion-padding">
             <h1>Page One</h1>
             <ion-nav-push component="page-two">
               <ion-button class="next">Go to Page Two</ion-button>
@@ -60,7 +60,7 @@
               <ion-title>Page Two</ion-title>
             </ion-toolbar>
           </ion-header>
-          <ion-content padding>
+          <ion-content class="ion-padding">
             <h1>Page Two</h1>
             <div>
               <ion-nav-push component="page-three">
@@ -82,7 +82,7 @@
               <ion-title>Page Three</ion-title>
             </ion-toolbar>
           </ion-header>
-          <ion-content padding>
+          <ion-content class="ion-padding">
             <h1>Page Three</h1>
           </ion-content>
         `;
diff --git a/core/src/components/picker/test/basic/index.html b/core/src/components/picker/test/basic/index.html
index aaf6464f2d..251562a892 100644
--- a/core/src/components/picker/test/basic/index.html
+++ b/core/src/components/picker/test/basic/index.html
@@ -20,7 +20,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content padding>
+    <ion-content class="ion-padding">
       <ion-button id="basic" expand="block" onclick="presentPicker()">Show Picker</ion-button>
       <ion-button id="custom" expand="block" onclick="presentPicker('my-custom-class')">Show Custom Picker</ion-button>
     </ion-content>
diff --git a/core/src/components/popover/test/basic/index.html b/core/src/components/popover/test/basic/index.html
index 5bbcd18372..60b941a15a 100644
--- a/core/src/components/popover/test/basic/index.html
+++ b/core/src/components/popover/test/basic/index.html
@@ -25,7 +25,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content id="content" padding>
+    <ion-content class="ion-padding" id="content">
       <ion-button id="basic-popover" expand="block" onclick="presentPopover({ component: 'profile-page', event: event })">Show Popover</ion-button>
       <ion-button id="translucent-popover" expand="block" onclick="presentPopover({ component: 'translucent-page', event: event, translucent: true })">Show Translucent Popover</ion-button>
       <ion-button id="long-list-popover" expand="block" color="secondary" onclick="presentPopover({ component: 'list-page', event: event })">Show Long List Popover</ion-button>
@@ -119,7 +119,7 @@
 
       connectedCallback() {
         this.innerHTML = `
-          <div padding>
+          <div class="ion-padding">
             <h1>Translucent Popover</h1>
           </div>
         `;
diff --git a/core/src/components/popover/test/preview/index.html b/core/src/components/popover/test/preview/index.html
index d6bdc554cd..4d08e0578f 100644
--- a/core/src/components/popover/test/preview/index.html
+++ b/core/src/components/popover/test/preview/index.html
@@ -25,7 +25,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content id="content" padding>
+    <ion-content class="ion-padding" id="content">
       <ion-button class="e2eShowPopover" expand="block" onclick="presentPopover({ component: 'profile-page', event: event })">Show Popover</ion-button>
       <ion-button expand="block" onclick="presentPopover({ component: 'translucent-page', event: event, translucent: true })">Show Translucent Popover</ion-button>
       <ion-button expand="block" color="secondary" onclick="presentPopover({ component: 'list-page', event: event })">Show Long List Popover</ion-button>
@@ -111,7 +111,7 @@
 
       connectedCallback() {
         this.innerHTML = `
-          <div padding>
+          <div class="ion-padding">
             <h1>Translucent Popover</h1>
           </div>
         `;
diff --git a/core/src/components/popover/test/standalone/index.html b/core/src/components/popover/test/standalone/index.html
index 187ca833ef..13c6509767 100644
--- a/core/src/components/popover/test/standalone/index.html
+++ b/core/src/components/popover/test/standalone/index.html
@@ -94,7 +94,7 @@
 
       connectedCallback() {
         this.innerHTML = `
-          <div padding>
+          <div class="ion-padding">
             <h1>Translucent Popover</h1>
           </div>
         `;
diff --git a/core/src/components/ripple-effect/test/basic/index.html b/core/src/components/ripple-effect/test/basic/index.html
index 89bb9e7527..d7fd1d62e6 100644
--- a/core/src/components/ripple-effect/test/basic/index.html
+++ b/core/src/components/ripple-effect/test/basic/index.html
@@ -44,7 +44,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content padding no-bounce>
+    <ion-content class="ion-padding" no-bounce>
       <p>
         <ion-button size="small">Small</ion-button>
       </p>
diff --git a/core/src/components/ripple-effect/test/preview/index.html b/core/src/components/ripple-effect/test/preview/index.html
index 982e335b80..5660ab6a84 100644
--- a/core/src/components/ripple-effect/test/preview/index.html
+++ b/core/src/components/ripple-effect/test/preview/index.html
@@ -31,7 +31,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content padding no-bounce fullscreen>
+    <ion-content class="ion-padding" no-bounce fullscreen>
       <p>
         <ion-button size="small">Small</ion-button>
       </p>
diff --git a/core/src/components/router-outlet/test/basic/index.html b/core/src/components/router-outlet/test/basic/index.html
index b4f6b8701c..9886672562 100644
--- a/core/src/components/router-outlet/test/basic/index.html
+++ b/core/src/components/router-outlet/test/basic/index.html
@@ -18,7 +18,7 @@
               <ion-title>Page One</ion-title>
             </ion-toolbar>
           </ion-header>
-          <ion-content padding>
+          <ion-content class="ion-padding">
             <h1>Page One</h1>
             <ion-button href="#/two">Go to Page Two</ion-button>
           </ion-content>
@@ -36,7 +36,7 @@
               <ion-title>Page Two</ion-title>
             </ion-toolbar>
           </ion-header>
-          <ion-content padding>
+          <ion-content class="ion-padding">
             <h1>Page Two</h1>
             <div>
               <ion-nav-push component="page-three">
@@ -58,7 +58,7 @@
               <ion-title>Page Three</ion-title>
             </ion-toolbar>
           </ion-header>
-          <ion-content padding>
+          <ion-content class="ion-padding">
             <h1>Page Three</h1>
           </ion-content>
         `;
diff --git a/core/src/components/searchbar/test/basic/index.html b/core/src/components/searchbar/test/basic/index.html
index 12e54d9be6..3817cefb12 100644
--- a/core/src/components/searchbar/test/basic/index.html
+++ b/core/src/components/searchbar/test/basic/index.html
@@ -21,72 +21,72 @@
     </ion-header>
 
     <ion-content id="content">
-      <h5 padding-start padding-top> Search - Default </h5>
+      <h5 class="ion-padding-start ion-padding-top"> Search - Default </h5>
       <ion-searchbar id="basic" value="test" type="tel" show-cancel-button debounce="500">
       </ion-searchbar>
 
-      <h5 padding-start padding-top> Search - No Cancel Button </h5>
+      <h5 class="ion-padding-start ion-padding-top"> Search - No Cancel Button </h5>
       <ion-searchbar id="noCancel" value="after view" autocorrect="off" autocomplete="off" spellcheck="true" type="text" show-cancel-button="false">
       </ion-searchbar>
 
-      <h5 padding-start padding-top> Search - Disabled </h5>
+      <h5 class="ion-padding-start ion-padding-top"> Search - Disabled </h5>
       <ion-searchbar id="disabled" value="disabled" type="text" disabled="true">
       </ion-searchbar>
 
-      <h5 padding-start padding-top> Search - Danger </h5>
+      <h5 class="ion-padding-start ion-padding-top"> Search - Danger </h5>
       <ion-searchbar color="danger" show-cancel-button>
       </ion-searchbar>
 
-      <h5 padding-start padding-top> Search - Custom Search Icon </h5>
+      <h5 class="ion-padding-start ion-padding-top"> Search - Custom Search Icon </h5>
       <ion-searchbar search-icon="home" show-cancel-button debounce="500">
       </ion-searchbar>
 
-      <h5 padding-start padding-top> Search - Animated </h5>
+      <h5 class="ion-padding-start ion-padding-top"> Search - Animated </h5>
       <ion-searchbar animated="true" show-cancel-button debounce="500">
       </ion-searchbar>
 
-      <h5 padding-start padding-top> Search - Custom Placeholder </h5>
+      <h5 class="ion-padding-start ion-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-start padding-top> Search - Custom Cancel Button Danger </h5>
+      <h5 class="ion-padding-start ion-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-start padding-top> Search - Value passed </h5>
+      <h5 class="ion-padding-start ion-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-start padding-top> Search - Mode iOS</h5>
+      <h5 class="ion-padding-start ion-padding-top"> Search - Mode iOS</h5>
       <ion-searchbar mode="ios" animated="true" show-cancel-button placeholder="Search">
       </ion-searchbar>
 
-      <h5 padding-start padding-top> Search - Mode MD</h5>
+      <h5 class="ion-padding-start ion-padding-top"> Search - Mode MD</h5>
       <ion-searchbar mode="md" animated="true" show-cancel-button placeholder="Search">
       </ion-searchbar>
 
-      <h5 padding-start padding-top> Search - DebounceTime </h5>
+      <h5 class="ion-padding-start ion-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-start padding-top> Search - Animated and No Cancel</h5>
+      <h5 class="ion-padding-start ion-padding-top"> Search - Animated and No Cancel</h5>
       <ion-searchbar id="dynamicAttr" placeholder="Search" animated="true" show-cancel-button="false">
       </ion-searchbar>
 
-      <p padding>
+      <p class="ion-padding">
         <ion-button expand="block" (click)="changeValue()">Change Value</ion-button>
       </p>
 
-      <div padding-horizontal>
+      <div class="ion-padding-horizontal">
         <ion-button expand="block" onClick="toggleProp()">Toggle Property</ion-button>
       </div>
-      <div padding>
+      <div class="ion-padding">
         <ion-button expand="block" color="secondary" onClick="toggleAttr()">Toggle Attribute</ion-button>
       </div>
 
-      <div padding-horizontal>
+      <div class="ion-padding-horizontal">
         <ion-button expand="block" color="secondary" onClick="toggleDisabled()">Toggle disabled</ion-button>
       </div>
 
diff --git a/core/src/components/searchbar/test/preview/index.html b/core/src/components/searchbar/test/preview/index.html
index 2b0f0c8a43..5360759859 100644
--- a/core/src/components/searchbar/test/preview/index.html
+++ b/core/src/components/searchbar/test/preview/index.html
@@ -21,56 +21,56 @@
     </ion-header>
 
     <ion-content id="content" fullscreen>
-      <h5 padding-start padding-top> Search - Default </h5>
+      <h5 class="ion-padding-start ion-padding-top"> Search - Default </h5>
       <ion-searchbar value="test" type="tel" show-cancel-button debounce="500">
       </ion-searchbar>
 
-      <h5 padding-start padding-top> Search - Animated </h5>
+      <h5 class="ion-padding-start ion-padding-top"> Search - Animated </h5>
       <ion-searchbar animated="true" show-cancel-button debounce="500">
       </ion-searchbar>
 
-      <h5 padding-start padding-top> Search - Custom Placeholder </h5>
+      <h5 class="ion-padding-start ion-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-start padding-top> Search - No Cancel Button </h5>
+      <h5 class="ion-padding-start ion-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-start padding-top> Search - Custom Cancel Button Danger </h5>
+      <h5 class="ion-padding-start ion-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-start padding-top> Search - Value passed </h5>
+      <h5 class="ion-padding-start ion-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-start padding-top> Search - Mode iOS</h5>
+      <h5 class="ion-padding-start ion-padding-top"> Search - Mode iOS</h5>
       <ion-searchbar mode="ios" animated="true" show-cancel-button placeholder="Search">
       </ion-searchbar>
 
-      <h5 padding-start padding-top> Search - Mode MD</h5>
+      <h5 class="ion-padding-start ion-padding-top"> Search - Mode MD</h5>
       <ion-searchbar mode="md" animated="true" show-cancel-button placeholder="Search">
       </ion-searchbar>
 
-      <h5 padding-start padding-top> Search - DebounceTime </h5>
+      <h5 class="ion-padding-start ion-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-start padding-top> Search - Animated and No Cancel</h5>
+      <h5 class="ion-padding-start ion-padding-top"> Search - Animated and No Cancel</h5>
       <ion-searchbar id="dynamicAttr" placeholder="Search" animated="true" show-cancel-button="false">
       </ion-searchbar>
 
-      <p padding>
+      <p class="ion-padding">
         <ion-button expand="block" (click)="changeValue()">Change Value</ion-button>
       </p>
 
-      <div padding-horizontal>
+      <div class="ion-padding-horizontal">
         <ion-button expand="block" onClick="toggleProp()">Toggle Property</ion-button>
       </div>
-      <div padding>
+      <div class="ion-padding">
         <ion-button expand="block" color="secondary" onClick="toggleAttr()">Toggle Attribute</ion-button>
       </div>
 
diff --git a/core/src/components/searchbar/test/toolbar/index.html b/core/src/components/searchbar/test/toolbar/index.html
index 177e86ce41..3eb58e4213 100644
--- a/core/src/components/searchbar/test/toolbar/index.html
+++ b/core/src/components/searchbar/test/toolbar/index.html
@@ -24,62 +24,62 @@
       </ion-header>
 
       <ion-content id="content" fullscreen>
-        <h5 padding-start padding-top> Search - Transparent Toolbar </h5>
+        <h5 class="ion-padding-start ion-padding-top"> Search - Transparent Toolbar </h5>
         <ion-toolbar transparent>
           <ion-searchbar show-cancel-button></ion-searchbar>
         </ion-toolbar>
 
-        <h5 padding-start padding-top> Search - Default Toolbar </h5>
+        <h5 class="ion-padding-start ion-padding-top"> Search - Default Toolbar </h5>
         <ion-toolbar>
           <ion-searchbar show-cancel-button></ion-searchbar>
         </ion-toolbar>
 
-        <h5 padding-start padding-top> Search - Primary Toolbar </h5>
+        <h5 class="ion-padding-start ion-padding-top"> Search - Primary Toolbar </h5>
         <ion-toolbar color="primary">
           <ion-searchbar show-cancel-button></ion-searchbar>
         </ion-toolbar>
 
-        <h5 padding-start padding-top> Search - Secondary Toolbar </h5>
+        <h5 class="ion-padding-start ion-padding-top"> Search - Secondary Toolbar </h5>
         <ion-toolbar color="secondary">
           <ion-searchbar show-cancel-button></ion-searchbar>
         </ion-toolbar>
 
-        <h5 padding-start padding-top> Search - Tertiary Toolbar </h5>
+        <h5 class="ion-padding-start ion-padding-top"> Search - Tertiary Toolbar </h5>
         <ion-toolbar color="tertiary">
           <ion-searchbar show-cancel-button></ion-searchbar>
         </ion-toolbar>
 
-        <h5 padding-start padding-top> Search - Success Toolbar </h5>
+        <h5 class="ion-padding-start ion-padding-top"> Search - Success Toolbar </h5>
         <ion-toolbar color="success">
           <ion-searchbar show-cancel-button></ion-searchbar>
         </ion-toolbar>
 
-        <h5 padding-start padding-top> Search - Warning Toolbar </h5>
+        <h5 class="ion-padding-start ion-padding-top"> Search - Warning Toolbar </h5>
         <ion-toolbar color="warning">
           <ion-searchbar show-cancel-button></ion-searchbar>
         </ion-toolbar>
 
-        <h5 padding-start padding-top> Search - Danger Toolbar </h5>
+        <h5 class="ion-padding-start ion-padding-top"> Search - Danger Toolbar </h5>
         <ion-toolbar color="danger">
           <ion-searchbar show-cancel-button></ion-searchbar>
         </ion-toolbar>
 
-        <h5 padding-start padding-top> Search - Light Toolbar </h5>
+        <h5 class="ion-padding-start ion-padding-top"> Search - Light Toolbar </h5>
         <ion-toolbar color="light">
           <ion-searchbar show-cancel-button></ion-searchbar>
         </ion-toolbar>
 
-        <h5 padding-start padding-top> Search - Medium Toolbar </h5>
+        <h5 class="ion-padding-start ion-padding-top"> Search - Medium Toolbar </h5>
         <ion-toolbar color="medium">
           <ion-searchbar show-cancel-button></ion-searchbar>
         </ion-toolbar>
 
-        <h5 padding-start padding-top> Search - Dark Toolbar </h5>
+        <h5 class="ion-padding-start ion-padding-top"> Search - Dark Toolbar </h5>
         <ion-toolbar color="dark">
           <ion-searchbar show-cancel-button placeholder="Filter Schedules"></ion-searchbar>
         </ion-toolbar>
-        
-        <h5 padding-start padding-top> Search - Dark Toolbar, Primary Search </h5>
+
+        <h5 class="ion-padding-start ion-padding-top"> Search - Dark Toolbar, Primary Search </h5>
         <ion-toolbar color="dark">
           <ion-searchbar show-cancel-button color="primary" placeholder="Filter Schedules"></ion-searchbar>
         </ion-toolbar>
diff --git a/core/src/components/segment/test/basic/index.html b/core/src/components/segment/test/basic/index.html
index b3bdfe210d..f5a0ce848c 100644
--- a/core/src/components/segment/test/basic/index.html
+++ b/core/src/components/segment/test/basic/index.html
@@ -85,7 +85,7 @@
     </ion-header>
 
     <ion-content>
-      <div padding>
+      <div class="ion-padding">
         <ion-segment>
           <ion-segment-button><ion-label>Seg 1</ion-label></ion-segment-button>
           <ion-segment-button><ion-label>Seg 2</ion-label></ion-segment-button>
@@ -123,8 +123,8 @@
           <ion-segment-button value="custom">
             <ion-icon name="create"></ion-icon>
           </ion-segment-button>
-    </ion-segment>  
-    
+    </ion-segment>
+
         <ion-segment name="dynamicPropDisable" disabled color="danger">
           <ion-segment-button value="Bookmarks">
             <ion-label>Bookmarks</ion-label>
@@ -165,10 +165,10 @@
         <ion-segment id="dynamicButtons" color="dark"></ion-segment>
       </div>
 
-      <div padding-horizontal>
+      <div class="ion-padding-horizontal">
         <ion-button expand="block" onClick="toggleDisabled()">Toggle Disabled</ion-button>
       </div>
-      <div padding>
+      <div class="ion-padding">
         <ion-button expand="block" color="secondary" onClick="toggleValue()">Toggle Value</ion-button>
       </div>
 
diff --git a/core/src/components/segment/test/toolbar/index.html b/core/src/components/segment/test/toolbar/index.html
index 383f3a7cf6..0f07d145ed 100644
--- a/core/src/components/segment/test/toolbar/index.html
+++ b/core/src/components/segment/test/toolbar/index.html
@@ -254,7 +254,7 @@
 
     </ion-header>
 
-    <ion-content padding>
+    <ion-content class="ion-padding">
       Segment in Toolbar
     </ion-content>
 
diff --git a/core/src/components/select/test/basic/index.html b/core/src/components/select/test/basic/index.html
index 1bd5403f97..c22104bac7 100644
--- a/core/src/components/select/test/basic/index.html
+++ b/core/src/components/select/test/basic/index.html
@@ -274,7 +274,7 @@
         </ion-item>
       </ion-list>
 
-      <div text-center>
+      <div class="ion-text-center">
         <ion-button onclick="toggleBoolean('dynamicDisabled', 'disabled')">
           Toggle Disabled
         </ion-button>
@@ -313,13 +313,13 @@
 
       let objectSelectElement = document.getElementById('objectSelectCompareWith');
       objectSelectElement.compareWith = compareWithFn; // 'id';
-      
+
       objectOptions.forEach((option, i) => {
         let selectOption = document.createElement('ion-select-option');
         selectOption.value = option;
         selectOption.textContent = option.first + ' ' + option.last;
         selectOption.selected = (i === 0);
-        
+
         objectSelectElement.appendChild(selectOption)
       });
 
@@ -330,7 +330,7 @@
           last: 'Smith',
         };
       }, 3000);
-      
+
       var pets = document.getElementById('pets');
       pets.value = ['bird', 'dog'];
 
diff --git a/core/src/components/select/test/multiple-value/index.html b/core/src/components/select/test/multiple-value/index.html
index 3a602d3320..d2459da57f 100644
--- a/core/src/components/select/test/multiple-value/index.html
+++ b/core/src/components/select/test/multiple-value/index.html
@@ -76,7 +76,7 @@
         </ion-select>
       </ion-item>
 
-      <p aria-hidden="true" padding>
+      <p aria-hidden="true" class="ion-padding">
         <code>toppings: <span id="toppingsResult"></span></code>
         <br>
         <code>carFeatures: <span id="carFeaturesResult"></span></code>
@@ -86,7 +86,7 @@
       </p>
 
       <form>
-        <ion-list padding-vertical>
+        <ion-list class="ion-padding-vertical">
           <ion-item>
             <ion-input type="text"></ion-input>
           </ion-item>
diff --git a/core/src/components/select/test/single-value/index.html b/core/src/components/select/test/single-value/index.html
index edf8ed5061..d10668a567 100644
--- a/core/src/components/select/test/single-value/index.html
+++ b/core/src/components/select/test/single-value/index.html
@@ -141,7 +141,7 @@
 
       <ion-button onclick="resetGender()">Reset Gender</ion-button>
 
-      <p aria-hidden="true" padding>
+      <p aria-hidden="true" class="ion-padding">
         <code>gender: <span id="genderResult"></span></code>
         <br>
         <code>gaming: <span id="gamingResult"></span></code>
diff --git a/core/src/components/slides/test/app-intro/index.html b/core/src/components/slides/test/app-intro/index.html
index 3658839528..6e991e3a8e 100644
--- a/core/src/components/slides/test/app-intro/index.html
+++ b/core/src/components/slides/test/app-intro/index.html
@@ -44,7 +44,7 @@
         <ion-slide>
           <img src="https://images.unsplash.com/photo-1490718687940-0ecadf414600?auto=format&fit=crop&w=1352&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"
             class="slide-image" />
-          <div padding>
+          <div class="ion-padding">
             <h2 class="slide-title">
               Welcome to
               <b>ICA</b>
@@ -60,7 +60,7 @@
         <ion-slide>
           <img src="https://images.unsplash.com/photo-1504703500545-4c4ee081b155?auto=format&fit=crop&w=1350&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"
             class="slide-image" />
-          <div padding>
+          <div class="ion-padding">
             <h2 class="slide-title">What is Ionic?</h2>
             <p>
               <b>Ionic Framework</b> is an open source SDK that enables developers to build high quality mobile apps with web
@@ -71,7 +71,7 @@
         <ion-slide>
           <img src="https://images.unsplash.com/photo-1501879779179-4576bae71d8d?auto=format&fit=crop&w=1350&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"
             class="slide-image" />
-          <div padding>
+          <div class="ion-padding">
             <h2 class="slide-title">What is Ionic Pro?</h2>
             <p>
               <b>Ionic Pro</b> is a powerful set of services and features built on top of Ionic Framework that brings a totally
diff --git a/core/src/components/split-pane/test/basic/index.html b/core/src/components/split-pane/test/basic/index.html
index c69a47dce8..e1ae75dddb 100644
--- a/core/src/components/split-pane/test/basic/index.html
+++ b/core/src/components/split-pane/test/basic/index.html
@@ -61,7 +61,7 @@
           </ion-toolbar>
         </ion-header>
 
-        <ion-content padding>
+        <ion-content class="ion-padding">
           <h1>Page 1</h1>
           <ion-button onclick="push()">Push</ion-button>
           <ion-button onclick="menu()">Disable/enable menu</ion-button>
diff --git a/core/src/components/split-pane/test/preview/index.html b/core/src/components/split-pane/test/preview/index.html
index ac550ed4dd..980edb6fdd 100644
--- a/core/src/components/split-pane/test/preview/index.html
+++ b/core/src/components/split-pane/test/preview/index.html
@@ -61,7 +61,7 @@
           </ion-toolbar>
         </ion-header>
 
-        <ion-content padding>
+        <ion-content class="ion-padding">
           <h1>Page 1</h1>
           <ion-button onclick="push()">Push</ion-button>
           <ion-button onclick="menu()">Disable/enable menu</ion-button>
diff --git a/core/src/components/tabs/test/basic/index.html b/core/src/components/tabs/test/basic/index.html
index 3ab4eb95c0..ee2c610323 100644
--- a/core/src/components/tabs/test/basic/index.html
+++ b/core/src/components/tabs/test/basic/index.html
@@ -28,7 +28,7 @@
             <ion-title>Tab One</ion-title>
           </ion-toolbar>
         </ion-header>
-        <ion-content padding>
+        <ion-content class="ion-padding">
           <h1>Tab One</h1>
           <ion-button expand="block" onclick="updateBadgeCount()">Update Badge Count</ion-button>
           <ion-button color="secondary" expand="block" onclick="updateBadgeColor()">Update Badge Color</ion-button>
@@ -41,7 +41,7 @@
             <ion-title>Tab Two</ion-title>
           </ion-toolbar>
         </ion-header>
-        <ion-content padding>
+        <ion-content class="ion-padding">
           <h1>Tab Two</h1>
         </ion-content>
       </ion-tab>
@@ -52,7 +52,7 @@
             <ion-title>Tab Three</ion-title>
           </ion-toolbar>
         </ion-header>
-        <ion-content padding>
+        <ion-content class="ion-padding">
           <h1>Tab Three</h1>
         </ion-content>
       </ion-tab>
@@ -63,7 +63,7 @@
             <ion-title>Hidden Tab</ion-title>
           </ion-toolbar>
         </ion-header>
-        <ion-content padding>
+        <ion-content class="ion-padding">
           <h1>Hidden Tab</h1>
         </ion-content>
       </ion-tab>
@@ -112,7 +112,7 @@
               <ion-title>Page Four</ion-title>
             </ion-toolbar>
           </ion-header>
-          <ion-content padding>
+          <ion-content class="ion-padding">
             Page Four
           </ion-content>
         `;
diff --git a/core/src/components/tabs/test/placements/index.html b/core/src/components/tabs/test/placements/index.html
index b870d721e0..1775fda82e 100644
--- a/core/src/components/tabs/test/placements/index.html
+++ b/core/src/components/tabs/test/placements/index.html
@@ -22,7 +22,7 @@
             <ion-title>Tab One</ion-title>
           </ion-toolbar>
         </ion-header>
-        <ion-content padding>
+        <ion-content class="ion-padding">
           Tab One
         </ion-content>
 
@@ -35,7 +35,7 @@
             <ion-title>Tab Two</ion-title>
           </ion-toolbar>
         </ion-header>
-        <ion-content padding>
+        <ion-content class="ion-padding">
           Tab Two
         </ion-content>
 
@@ -48,7 +48,7 @@
             <ion-title>Tab Three</ion-title>
           </ion-toolbar>
         </ion-header>
-        <ion-content padding>
+        <ion-content class="ion-padding">
           Tab Three
         </ion-content>
 
diff --git a/core/src/components/tabs/test/preview/index.html b/core/src/components/tabs/test/preview/index.html
index 114777c453..00a654ff9f 100644
--- a/core/src/components/tabs/test/preview/index.html
+++ b/core/src/components/tabs/test/preview/index.html
@@ -22,7 +22,7 @@
             <ion-title>Tab One</ion-title>
           </ion-toolbar>
         </ion-header>
-        <ion-content padding fullscreen>
+        <ion-content class="ion-padding" fullscreen>
           Tab One
         </ion-content>
       </ion-tab>
@@ -34,7 +34,7 @@
             <ion-title>Tab Two</ion-title>
           </ion-toolbar>
         </ion-header>
-        <ion-content padding fullscreen>
+        <ion-content class="ion-padding" fullscreen>
           Tab Two
         </ion-content>
 
@@ -47,7 +47,7 @@
             <ion-title>Tab Three</ion-title>
           </ion-toolbar>
         </ion-header>
-        <ion-content padding fullscreen>
+        <ion-content class="ion-padding" fullscreen>
           Tab Three
         </ion-content>
 
diff --git a/core/src/components/text/test/basic/index.html b/core/src/components/text/test/basic/index.html
index 2c22b2efe1..37ca518933 100644
--- a/core/src/components/text/test/basic/index.html
+++ b/core/src/components/text/test/basic/index.html
@@ -20,7 +20,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content id="content" padding>
+    <ion-content class="ion-padding" id="content">
       <ion-text color="secondary">
         <h1>H1: The quick brown fox jumps over the lazy dog</h1>
       </ion-text>
diff --git a/core/src/components/text/test/preview/index.html b/core/src/components/text/test/preview/index.html
index 4f8a7eda5e..27650d4d16 100644
--- a/core/src/components/text/test/preview/index.html
+++ b/core/src/components/text/test/preview/index.html
@@ -20,7 +20,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content id="content" padding fullscreen>
+    <ion-content class="ion-padding" id="content" fullscreen>
       <ion-text color="secondary">
         <h1>H1: The quick brown fox jumps over the lazy dog</h1>
       </ion-text>
diff --git a/core/src/components/textarea/test/basic/index.html b/core/src/components/textarea/test/basic/index.html
index 3ebe9a154d..71e02ed76c 100644
--- a/core/src/components/textarea/test/basic/index.html
+++ b/core/src/components/textarea/test/basic/index.html
@@ -66,14 +66,14 @@
           <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">Autogrow</ion-label>
           <ion-textarea auto-grow="true"></ion-textarea>
         </ion-item>
       </ion-list>
 
-      <div text-center>
+      <div class="ion-text-center">
         <ion-button onclick="toggleBoolean('dynamicDisabled', 'disabled')">
           Toggle Disabled
         </ion-button>
diff --git a/core/src/components/textarea/test/preview/index.html b/core/src/components/textarea/test/preview/index.html
index 9bf5257e8a..d7eee9a95d 100644
--- a/core/src/components/textarea/test/preview/index.html
+++ b/core/src/components/textarea/test/preview/index.html
@@ -77,7 +77,7 @@
         </ion-item>
       </ion-list>
 
-      <div text-center>
+      <div class="ion-text-center">
         <ion-button onclick="toggleBoolean('dynamicDisabled', 'disabled')">
           Toggle Disabled
         </ion-button>
diff --git a/core/src/components/toast/test/basic/index.html b/core/src/components/toast/test/basic/index.html
index 23cb2de7b3..522a4c5102 100644
--- a/core/src/components/toast/test/basic/index.html
+++ b/core/src/components/toast/test/basic/index.html
@@ -19,7 +19,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content id="content" padding>
+    <ion-content class="ion-padding" id="content">
       <ion-button expand="block" id="show-bottom-toast" onclick="presentToast('bottom')">
         Position Bottom
       </ion-button>
diff --git a/core/src/components/toast/test/buttons/index.html b/core/src/components/toast/test/buttons/index.html
index 3973f100ad..0ddbf0d86c 100644
--- a/core/src/components/toast/test/buttons/index.html
+++ b/core/src/components/toast/test/buttons/index.html
@@ -19,7 +19,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content id="content" padding>
+    <ion-content class="ion-padding" id="content">
       <!-- Old way using close button properties -->
       <ion-button id="closeProp" expand="block" onclick="presentClosePropToast()">
         Close Button Property
diff --git a/core/src/components/toggle/test/basic/index.html b/core/src/components/toggle/test/basic/index.html
index 1bcdca4698..96dca30140 100644
--- a/core/src/components/toggle/test/basic/index.html
+++ b/core/src/components/toggle/test/basic/index.html
@@ -74,7 +74,7 @@
       </ion-list>
 
 
-      <p aria-hidden="true" text-center>
+      <p aria-hidden="true"class="ion-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>
diff --git a/core/src/components/toggle/test/preview/index.html b/core/src/components/toggle/test/preview/index.html
index 88afa7e917..eecc6184ad 100644
--- a/core/src/components/toggle/test/preview/index.html
+++ b/core/src/components/toggle/test/preview/index.html
@@ -67,7 +67,7 @@
         </ion-item>
       </ion-list>
 
-      <p aria-hidden="true" text-center>
+      <p aria-hidden="true"class="ion-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>
diff --git a/core/src/components/toolbar/test/scenarios/index.html b/core/src/components/toolbar/test/scenarios/index.html
index 5f311c829a..1e41029115 100644
--- a/core/src/components/toolbar/test/scenarios/index.html
+++ b/core/src/components/toolbar/test/scenarios/index.html
@@ -14,7 +14,7 @@
 <body>
   <ion-app>
     <ion-content id="content">
-      <ion-toolbar no-padding>
+      <ion-toolbar class="ion-no-padding">
         <ion-title>This should have no padding</ion-title>
       </ion-toolbar>
 
diff --git a/core/src/themes/test/css-variables/index.html b/core/src/themes/test/css-variables/index.html
index 39b02f30df..9487b2ac6a 100644
--- a/core/src/themes/test/css-variables/index.html
+++ b/core/src/themes/test/css-variables/index.html
@@ -106,7 +106,7 @@
           </ion-toolbar>
         </ion-header>
 
-        <ion-content padding>
+        <ion-content class="ion-padding">
           <div class="wrapper">
             <section>
               <ion-card>
@@ -359,7 +359,7 @@
           </ion-toolbar>
         </ion-header>
 
-        <ion-content padding>
+        <ion-content class="ion-padding">
           <div class="wrapper">
             <section>
               <p>
diff --git a/core/src/themes/test/steps/index.html b/core/src/themes/test/steps/index.html
index 662fd022fe..e7f4162b22 100644
--- a/core/src/themes/test/steps/index.html
+++ b/core/src/themes/test/steps/index.html
@@ -175,7 +175,7 @@
 
 <body>
   <ion-app>
-    <ion-content padding>
+    <ion-content class="ion-padding">
       <div class="block">Background</div>
       <div class="block background-step-50">Step 50</div>
       <div class="block background-step-100">Step 100</div>
diff --git a/core/src/utils/sanitization/test/index.html b/core/src/utils/sanitization/test/index.html
index fed2f3b7a5..4beb164a91 100644
--- a/core/src/utils/sanitization/test/index.html
+++ b/core/src/utils/sanitization/test/index.html
@@ -8,7 +8,7 @@
   <link href="../../../../scripts/testing/styles.css" rel="stylesheet">
   <script src="../../../../scripts/testing/scripts.js"></script>
   <script src="../../../../dist/ionic.js"></script>
-  <script type="module">   
+  <script type="module">
     import { sanitizeDOMString } from '../../../../dist/collection/utils/sanitization/index.js';
     window.sanitizeDOMString = sanitizeDOMString;
   </script>
@@ -31,9 +31,9 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content id="content" padding>
+    <ion-content class="ion-padding" id="content">
       <div class="results">Results will appear here</div>
-    
+
       <ion-button onclick="testA()" id="testA">Test A</ion-button>
       <ion-button onclick="testB()" id="testB">Test B</ion-button>
       <ion-button onclick="testC()" id="testC">Test C</ion-button>
@@ -45,65 +45,65 @@
     </ion-content>
 
   </ion-app>
-  
+
   <script>
     const results = document.querySelector('.results');
-    
+
     window.alert = () => {
       throw new Error('sanitizeFailed');
     }
-    
+
     function runTest(inputString) {
       console.log(`Sanitizing ${inputString}`);
       const sanitizedResult = sanitizeDOMString(inputString);
-      
+
       results.innerHTML = sanitizedResult;
       console.log(`Result ${sanitizedResult}`)
     }
-    
+
     function testA() {
       runTest('<img src="x" onerror="alert(document.cookie);">');
     }
-    
+
     function testB() {
       runTest('<button id="myButton" name="myButton" onclick="alert(document.cookie);">harmless button</button>');
-      
+
       const buttom = results.querySelector('button');
       buttom.click();
     }
 
     function testC() {
       runTest('<a href="javascript:alert(document.cookie)">harmless link</a>');
-      
+
       const link = results.querySelector('a');
       link.click();
     }
-    
+
     function testD() {
       runTest('<a class="link" href="Javascript&#58;alert(document.cookie)">harmless link</a>');
-      
+
       const link = results.querySelector('a');
       link.click();
     }
-    
+
     function testE() {
       runTest('<iframe src="javascript:alert(document.cookie)"></iframe>');
     }
-    
+
     function testF() {
       runTest('<div><button><a href="javascript:alert(document.cookie)">click me</a></button></div>');
-      
+
       const link = results.querySelector('a');
       link.click();
     }
-    
+
     function testG() {
       runTest('<object><img src="x" onerror="alert(document.cookie);"></object>');
     }
-    
+
     function testH() {
       runTest('<ion-item><ion-label>Hello!</ion-label><ion-button onclick="alert(document.cookie);">Click me</ion-button>');
-      
+
       const button = results.querySelector('ion-button');
       button.click();
     }