diff --git a/docs/config/template/index.template.html b/docs/config/template/index.template.html
index f5704ee2de6..9d029df1ec5 100644
--- a/docs/config/template/index.template.html
+++ b/docs/config/template/index.template.html
@@ -120,7 +120,7 @@ <h2 class="md-toolbar-item md-breadcrumb">
 
     </md-toolbar>
 
-    <md-content ng-view md-scroll-y flex class="md-padding"></md-content>
+    <md-content ng-view md-scroll-y flex layout-padding></md-content>
 
   </div>
   <script>
diff --git a/docs/guides/component/_name_/demoBasicUsage/index.html b/docs/guides/component/_name_/demoBasicUsage/index.html
index dcde66ba677..8cbbf57b102 100644
--- a/docs/guides/component/_name_/demoBasicUsage/index.html
+++ b/docs/guides/component/_name_/demoBasicUsage/index.html
@@ -1,6 +1,6 @@
 
 <div ng-controller="AppCtrl">
-  <md-content class="md-padding">
+  <md-content layout-padding>
 
   </md-content>
 </div>
diff --git a/src/components/autocomplete/demoBasicUsage/index.html b/src/components/autocomplete/demoBasicUsage/index.html
index 5a0ce0caa8f..6605893b9c4 100644
--- a/src/components/autocomplete/demoBasicUsage/index.html
+++ b/src/components/autocomplete/demoBasicUsage/index.html
@@ -1,5 +1,5 @@
 <div ng-app="autocompleteDemo" ng-controller="DemoCtrl as ctrl" layout="column">
-  <md-content class="md-padding" layout="column">
+  <md-content layout-padding layout="column">
     <form ng-submit="$event.preventDefault()">
       <p>Use <code>&lt;md-autocomplete&gt;</code> to search for matches from local or remote data sources.</p>
       <md-autocomplete
diff --git a/src/components/autocomplete/demoFloatingLabel/index.html b/src/components/autocomplete/demoFloatingLabel/index.html
index a1b234b4865..ee476c7a20e 100644
--- a/src/components/autocomplete/demoFloatingLabel/index.html
+++ b/src/components/autocomplete/demoFloatingLabel/index.html
@@ -1,5 +1,5 @@
 <div ng-app="autocompleteFloatingLabelDemo" ng-controller="DemoCtrl as ctrl" layout="column">
-  <md-content class="md-padding" layout="column">
+  <md-content layout-padding layout="column">
     <form ng-submit="$event.preventDefault()">
       <p>The following example demonstrates floating labels being used as a normal form element.</p>
       <div layout-gt-sm="row">
diff --git a/src/components/chips/demoBasicUsage/index.html b/src/components/chips/demoBasicUsage/index.html
index 64402aedc7a..7abf718b587 100644
--- a/src/components/chips/demoBasicUsage/index.html
+++ b/src/components/chips/demoBasicUsage/index.html
@@ -1,6 +1,6 @@
 <div ng-app="inputBasicDemo" ng-controller="BasicDemoCtrl as ctrl" layout="column">
 
-  <md-content class="md-padding" layout="column">
+  <md-content layout-padding layout="column">
     <p>
       Use a cusom chip template.
     </p>
diff --git a/src/components/chips/demoCustomInputs/index.html b/src/components/chips/demoCustomInputs/index.html
index 67d4ff1c71a..55cf8ea7a69 100644
--- a/src/components/chips/demoCustomInputs/index.html
+++ b/src/components/chips/demoCustomInputs/index.html
@@ -1,20 +1,20 @@
 <div ng-app="customInputDemo" ng-controller="CustomInputDemoCtrl as ctrl" layout="column">
 
-  <md-content class="md-padding" layout="column">
+  <md-content layout-padding layout="column">
     <p>Use an <code>&lt;input&gt;</code> element with no model to build an ordered set of chips.</p>
     <md-chips ng-model="ctrl.numberChips">
       <input type="number" placeholder="Enter a number">
     </md-chips>
   </md-content>
 
-  <md-content class="md-padding" layout="column">
+  <md-content layout-padding layout="column">
     <p>Use an <code>&lt;input&gt;</code> element to build an ordered set of chips.</p>
     <md-chips ng-model="ctrl.numberChips2">
       <input type="number" ng-model="ctrl.numberBuffer" placeholder="Enter a number">
     </md-chips>
   </md-content>
 
-  <md-content class="md-padding autocomplete" layout="column">
+  <md-content layout-padding class="autocomplete" layout="column">
 
     <p>Use <code>&lt;md-autocomplete&gt;</code> to build an ordered set of chips.</p>
 
diff --git a/src/components/chips/demoStaticChips/index.html b/src/components/chips/demoStaticChips/index.html
index 4e5897bdeef..4a6bf07155b 100644
--- a/src/components/chips/demoStaticChips/index.html
+++ b/src/components/chips/demoStaticChips/index.html
@@ -1,6 +1,6 @@
 <div ng-app="inputBasicDemo" ng-controller="DemoCtrl as ctrl" layout="column">
 
-  <md-content class="md-padding" layout="column">
+  <md-content layout-padding layout="column">
     <p>Display a set of items as chips.</p>
 
     <md-chips>
diff --git a/src/components/content/content.js b/src/components/content/content.js
index 12cb1359993..cf1755772b6 100644
--- a/src/components/content/content.js
+++ b/src/components/content/content.js
@@ -23,13 +23,12 @@ angular.module('material.components.content', [
  * @description
  * The `<md-content>` directive is a container element useful for scrollable content
  *
- * ### Restrictions
+ * @usage
  *
- * - Add the `md-padding` class to make the content padded.
+ * - Add the `[layout-padding]` attribute to make the content padded.
  *
- * @usage
  * <hljs lang="html">
- *  <md-content class="md-padding">
+ *  <md-content layout-padding>
  *      Lorem ipsum dolor sit amet, ne quod novum mei.
  *  </md-content>
  * </hljs>
diff --git a/src/components/content/content.scss b/src/components/content/content.scss
index 621feb4b5b5..10fcc98848c 100644
--- a/src/components/content/content.scss
+++ b/src/components/content/content.scss
@@ -15,14 +15,5 @@ md-content {
   }
   &[md-scroll-xy] {
   }
-
-  &.md-padding {
-    padding: 8px;
-  }
 }
 
-@media (min-width: $layout-breakpoint-sm) {
-  md-content.md-padding {
-    padding: 16px;
-  }
-}
diff --git a/src/components/content/demoBasicUsage/index.html b/src/components/content/demoBasicUsage/index.html
index 8e4d59b5f62..62aa5bb9cd2 100644
--- a/src/components/content/demoBasicUsage/index.html
+++ b/src/components/content/demoBasicUsage/index.html
@@ -6,7 +6,7 @@ <h2 class="md-flex">Toolbar: md-warn</h2>
     </div>
   </md-toolbar>
 
-  <md-content class="md-padding" style="height: 600px;padding: 24px;">
+  <md-content layout-padding style="height: 600px;padding: 24px;">
     <p>Lorem ipsum dolor sit amet, ne quod novum mei. Sea omnium invenire mediocrem at, in lobortis conclusionemque nam. Ne deleniti appetere reprimique pro, inani labitur disputationi te sed. At vix sale omnesque, id pro labitur reformidans accommodare, cum labores honestatis eu. Nec quem lucilius in, eam praesent reformidans no. Sed laudem aliquam ne.</p>
 
     <p>
diff --git a/src/components/gridList/demoResponsiveUsage/index.html b/src/components/gridList/demoResponsiveUsage/index.html
index 3c64dacff22..48dda21bb91 100644
--- a/src/components/gridList/demoResponsiveUsage/index.html
+++ b/src/components/gridList/demoResponsiveUsage/index.html
@@ -1,5 +1,5 @@
 <div ng-controller="AppCtrl as appCtrl">
-  <md-content class="md-padding">
+  <md-content layout-padding>
     <md-grid-list
         md-cols-gt-md="12" md-cols-sm="3" md-cols-md="8"
         md-row-height-gt-md="1:1" md-row-height="4:3"
diff --git a/src/components/input/demoBasicUsage/index.html b/src/components/input/demoBasicUsage/index.html
index d548a516c1a..e0e765f66e2 100644
--- a/src/components/input/demoBasicUsage/index.html
+++ b/src/components/input/demoBasicUsage/index.html
@@ -1,6 +1,6 @@
 <div ng-app="inputBasicDemo" ng-controller="DemoCtrl" layout="column">
 
-  <md-content md-theme="docs-dark" class="md-padding" layout="row" layout-sm="column">
+  <md-content md-theme="docs-dark" layout-padding layout="row" layout-sm="column">
     <md-input-container>
       <label>Title</label>
       <input ng-model="user.title">
@@ -11,7 +11,7 @@
     </md-input-container>
   </md-content>
 
-  <md-content class="md-padding">
+  <md-content layout-padding>
     <form name="userForm">
 
       <div layout layout-sm="column">
diff --git a/src/components/input/demoErrors/index.html b/src/components/input/demoErrors/index.html
index 50d4c80bf56..52d29ecd559 100644
--- a/src/components/input/demoErrors/index.html
+++ b/src/components/input/demoErrors/index.html
@@ -6,7 +6,7 @@ <h1 class="md-toolbar-tools">
     </h1>
   </md-toolbar>
 
-  <md-content class="md-padding">
+  <md-content layout-padding>
     <form name="projectForm">
       <md-input-container>
         <label>Description</label>
diff --git a/src/components/input/demoIcons/index.html b/src/components/input/demoIcons/index.html
index 90d8d8111e8..1534e8c57c1 100644
--- a/src/components/input/demoIcons/index.html
+++ b/src/components/input/demoIcons/index.html
@@ -1,7 +1,7 @@
 <div ng-app="inputIconDemo" ng-controller="DemoCtrl" layout="column">
 
   <br/>
-  <md-content class="md-padding">
+  <md-content layout-padding>
     <md-input-container md-no-float>
       <md-icon md-svg-src="/demo-partials/input/demoIcons/icons/ic_person_24px.svg" class="name"></md-icon>
       <input ng-model="user.name" type="text" placeholder="Name">
diff --git a/src/components/sidenav/demoBasicUsage/index.html b/src/components/sidenav/demoBasicUsage/index.html
index 5098a8ed505..96745831f30 100644
--- a/src/components/sidenav/demoBasicUsage/index.html
+++ b/src/components/sidenav/demoBasicUsage/index.html
@@ -8,7 +8,7 @@
       <md-toolbar class="md-theme-indigo">
         <h1 class="md-toolbar-tools">Sidenav Left</h1>
       </md-toolbar>
-      <md-content class="md-padding" ng-controller="LeftCtrl">
+      <md-content layout-padding ng-controller="LeftCtrl">
         <md-button ng-click="close()" class="md-primary" hide-gt-md>
           Close Sidenav Left
         </md-button>
@@ -20,7 +20,7 @@ <h1 class="md-toolbar-tools">Sidenav Left</h1>
 
     </md-sidenav>
 
-    <md-content flex class="md-padding">
+    <md-content flex layout-padding>
 
       <div layout="column" layout-fill layout-align="top center">
         <p>
@@ -54,7 +54,7 @@ <h1 class="md-toolbar-tools">Sidenav Left</h1>
       <md-toolbar class="md-theme-light">
         <h1 class="md-toolbar-tools">Sidenav Right</h1>
       </md-toolbar>
-      <md-content ng-controller="RightCtrl" class="md-padding">
+      <md-content ng-controller="RightCtrl" layout-padding>
         <form>
           <md-input-container>
             <label for="testInput">Test input</label>
diff --git a/src/components/slider/demoBasicUsage/index.html b/src/components/slider/demoBasicUsage/index.html
index fa069ebbd7e..3b34cc356f1 100644
--- a/src/components/slider/demoBasicUsage/index.html
+++ b/src/components/slider/demoBasicUsage/index.html
@@ -1,6 +1,6 @@
 
 <div ng-controller="AppCtrl">
-  <md-content class="md-padding">
+  <md-content style="margin: 16px; padding:16px">
 
     <h3>
       RGB <span ng-attr-style="border: 1px solid #333; background: rgb({{color.red}},{{color.green}},{{color.blue}})">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
@@ -8,7 +8,7 @@ <h3>
 
     <div layout>
       <div flex="10" layout layout-align="center center">
-        <span>R</span>
+        <span class="md-body-1">R</span>
       </div>
       <md-slider flex min="0" max="255" ng-model="color.red" aria-label="red" id="red-slider" class="">
       </md-slider>
@@ -19,7 +19,7 @@ <h3>
 
     <div layout>
       <div flex="10" layout layout-align="center center">
-        <span>G</span>
+        <span class="md-body-1">G</span>
       </div>
       <md-slider flex ng-model="color.green" min="0" max="255" aria-label="green" id="green-slider" class="md-accent">
       </md-slider>
@@ -30,7 +30,7 @@ <h3>
 
     <div layout>
       <div flex="10" layout layout-align="center center">
-        <span>B</span>
+        <span class="md-body-1">B</span>
       </div>
       <md-slider flex ng-model="color.blue" min="0" max="255" aria-label="blue" id="blue-slider" class="md-primary">
       </md-slider>
@@ -42,21 +42,21 @@ <h3>
     <h3>Rating: {{rating}}/5 - demo of theming classes</h3>
     <div layout>
       <div flex="10" layout layout-align="center center">
-        <span>default</span>
+        <span class="md-body-1">default</span>
       </div>
       <md-slider flex md-discrete ng-model="rating1" step="1" min="1" max="5" aria-label="rating">
       </md-slider>
     </div>
     <div layout>
       <div flex="10" layout layout-align="center center">
-        <span>md-warn</span>
+        <span class="md-body-1">md-warn</span>
       </div>
       <md-slider flex class="md-warn" md-discrete ng-model="rating2" step="1" min="1" max="5" aria-label="rating">
       </md-slider>
     </div>
     <div layout>
       <div flex="10" layout layout-align="center center">
-        <span>md-primary</span>
+        <span class="md-body-1">md-primary</span>
       </div>
       <md-slider flex class="md-primary" md-discrete ng-model="rating3" step="1" min="1" max="5" aria-label="rating">
       </md-slider>
diff --git a/src/components/subheader/demoBasicUsage/index.html b/src/components/subheader/demoBasicUsage/index.html
index b81b5ef3e0a..6b918320f14 100644
--- a/src/components/subheader/demoBasicUsage/index.html
+++ b/src/components/subheader/demoBasicUsage/index.html
@@ -3,78 +3,62 @@
   <md-content style="height: 600px;">
     <section>
       <md-subheader class="md-primary">Unread Messages</md-subheader>
-      <md-list layout="column">
-        <md-item ng-repeat="message in messages">
-          <md-item-content>
-            <div class="md-tile-left">
-                <img ng-src="{{message.face}}" class="face" alt="{{message.who}}">
-            </div>
-            <div class="md-tile-content">
+      <md-list layout-padding>
+        <md-list-item class="md-3-line" ng-repeat="message in messages">
+            <img ng-src="{{message.face}}" class="md-avatar" alt="{{message.who}}">
+            <div class="md-list-item-text">
               <h3>{{message.what}}</h3>
               <h4>{{message.who}}</h4>
               <p>
                 {{message.notes}}
               </p>
             </div>
-          </md-item-content>
-        </md-item>
+        </md-list-item>
       </md-list>
     </section>
     <section>
       <md-subheader class="md-warn">Late Messages</md-subheader>
-      <md-list layout="column">
-        <md-item ng-repeat="message in messages">
-          <md-item-content>
-            <div class="md-tile-left">
-                <img ng-src="{{message.face}}" class="face" alt="{{message.who}}">
-            </div>
-            <div class="md-tile-content">
-              <h3>{{message.what}}</h3>
-              <h4>{{message.who}}</h4>
-              <p>
-                {{message.notes}}
-              </p>
-            </div>
-          </md-item-content>
-        </md-item>
+      <md-list layout="column" layout-padding>
+        <md-list-item class="md-3-line" ng-repeat="message in messages">
+          <img ng-src="{{message.face}}" class="md-avatar" alt="{{message.who}}">
+          <div class="md-list-item-text">
+            <h3>{{message.what}}</h3>
+            <h4>{{message.who}}</h4>
+            <p>
+              {{message.notes}}
+            </p>
+          </div>
+        </md-list-item>
       </md-list>
     </section>
     <section>
       <md-subheader>Read Messages</md-subheader>
-      <md-list layout="column">
-        <md-item ng-repeat="message in messages">
-          <md-item-content>
-            <div class="md-tile-left">
-                <img ng-src="{{message.face}}" class="face" alt="{{message.who}}">
-            </div>
-            <div class="md-tile-content">
-              <h3>{{message.what}}</h3>
-              <h4>{{message.who}}</h4>
-              <p>
-                {{message.notes}}
-              </p>
-            </div>
-          </md-item-content>
-        </md-item>
+      <md-list layout="column" layout-padding>
+        <md-list-item class="md-3-line" ng-repeat="message in messages">
+          <img ng-src="{{message.face}}" class="md-avatar" alt="{{message.who}}">
+          <div class="md-list-item-text">
+            <h3>{{message.what}}</h3>
+            <h4>{{message.who}}</h4>
+            <p>
+              {{message.notes}}
+            </p>
+          </div>
+        </md-list-item>
       </md-list>
     </section>
     <section>
       <md-subheader class="md-accent">Archived messages</md-subheader>
-      <md-list layout="column">
-        <md-item ng-repeat="message in messages">
-          <md-item-content>
-            <div class="md-tile-left">
-                <img ng-src="{{message.face}}" class="face" alt="{{message.who}}">
-            </div>
-            <div class="md-tile-content">
-              <h3>{{message.what}}</h3>
-              <h4>{{message.who}}</h4>
-              <p>
-                {{message.notes}}
-              </p>
-            </div>
-          </md-item-content>
-        </md-item>
+      <md-list layout="column" layout-padding>
+        <md-list-item class="md-3-line" ng-repeat="message in messages">
+          <img ng-src="{{message.face}}" class="md-avatar" alt="{{message.who}}">
+          <div class="md-list-item-text">
+            <h3>{{message.what}}</h3>
+            <h4>{{message.who}}</h4>
+            <p>
+              {{message.notes}}
+            </p>
+          </div>
+        </md-list-item>
       </md-list>
     </section>
   </md-content>
diff --git a/src/components/toolbar/demoScrollShrink/index.html b/src/components/toolbar/demoScrollShrink/index.html
index fbcb02d9463..8001ab3206f 100644
--- a/src/components/toolbar/demoScrollShrink/index.html
+++ b/src/components/toolbar/demoScrollShrink/index.html
@@ -12,21 +12,17 @@ <h3>
 
     <md-list>
 
-      <md-item ng-repeat="item in todos">
-        <md-item-content>
-          <div class="md-tile-left">
-            <img ng-src="{{item.face}}" alt="{{item.who}}" class="face">
-          </div>
-          <div class="md-tile-content">
-            <h3>{{item.what}}</h3>
-            <h4>{{item.who}}</h4>
-            <p>
-              {{item.notes}}
-            </p>
-          </div>
-        </md-item-content>
+      <md-list-item class="md-3-line" ng-repeat="item in todos">
+        <img ng-src="{{item.face}}" alt="{{item.who}}" class="md-avatar">
+        <div class="md-tile-content">
+          <h3>{{item.what}}</h3>
+          <h4>{{item.who}}</h4>
+          <p>
+            {{item.notes}}
+          </p>
+        </div>
         <md-divider inset></md-divider>
-      </md-item>
+      </md-list-item>
 
     </md-list>
 
diff --git a/src/components/tooltip/demoBasicUsage/index.html b/src/components/tooltip/demoBasicUsage/index.html
index 1fe38cec603..2a10aca7fc8 100644
--- a/src/components/tooltip/demoBasicUsage/index.html
+++ b/src/components/tooltip/demoBasicUsage/index.html
@@ -12,7 +12,7 @@ <h2 class="md-toolbar-tools">
       </md-button>
     </h2>
   </md-toolbar>
-  <md-content class="md-padding">
+  <md-content layout-padding>
 
     <p>
       The tooltip is visible when the button is hovered, focused, or touched.
diff --git a/src/components/whiteframe/demoBasicUsage/index.html b/src/components/whiteframe/demoBasicUsage/index.html
index 3b278dc326f..48a8cd9f1bb 100644
--- a/src/components/whiteframe/demoBasicUsage/index.html
+++ b/src/components/whiteframe/demoBasicUsage/index.html
@@ -1,4 +1,4 @@
-<div layout="column" layout-fill>
+<div layout="column" layout-fill style="padding-bottom: 32px;">
 
   <md-whiteframe class="md-whiteframe-z1" layout layout-align="center center">
     <span>.md-whiteframe-z1</span>