diff --git a/ionic/components/app/test/music/main.html b/ionic/components/app/test/music/main.html
index 59f82f8d92..62e1c37b0d 100644
--- a/ionic/components/app/test/music/main.html
+++ b/ionic/components/app/test/music/main.html
@@ -40,7 +40,7 @@
       background: transparent;
       min-height: 55px;
     }
-    .mode-ios ion-list .item .item-content {
+    .mode-ios ion-list .item ion-item-content {
       background: transparent;
       color: rgba(255,255,255,0.8);
       padding: 10px;
@@ -57,7 +57,7 @@
     ion-content {
       background: transparent !important;
     }
-    .mode-ios #menu .item-content:after {
+    .mode-ios #menu ion-item-content:after {
       background: none;
     }
     .mode-ios .item:first-of-type:before {
diff --git a/ionic/components/app/test/sink/pages/list.ts b/ionic/components/app/test/sink/pages/list.ts
index e2d3a0f849..3758e25f82 100644
--- a/ionic/components/app/test/sink/pages/list.ts
+++ b/ionic/components/app/test/sink/pages/list.ts
@@ -26,14 +26,12 @@ import {SinkPage} from '../sink-page';
       <ion-item>
         <input control="email" type="email" placeholder="Your email">
       </ion-item>
-      <div class="item">
-        <div class="item-content">
-          <div class="item-title">
-            Item
-          </div>
-        </div>
-      </div>
-      <ion-item>Item</ion-item>
+      <ion-item>
+        Item
+      </ion-item>
+      <ion-item>
+        Item
+      </ion-item>
 
     </ion-list>
   </ion-content>
diff --git a/ionic/components/app/test/snapcat/main.html b/ionic/components/app/test/snapcat/main.html
index 5f6ae001fe..76aa5eedd3 100644
--- a/ionic/components/app/test/snapcat/main.html
+++ b/ionic/components/app/test/snapcat/main.html
@@ -64,7 +64,7 @@
     font-family: 'lato';
     font-size: 16px;
   }
-  .item-content {
+  ion-item-content {
     min-height: 70px !important;
   }
   ion-toolbar {
@@ -83,7 +83,7 @@
   }
   .mode-ios .item:first-of-type:before,
   .mode-ios .item:last-of-type:after,
-  .mode-ios .item-content:after {
+  .mode-ios ion-item-content:after {
     background-color: #F5F5F5 !important;
   }
   #p1toolbar {
diff --git a/ionic/components/card/modes/material.scss b/ionic/components/card/modes/material.scss
index 9212b9a1d5..4210b43766 100644
--- a/ionic/components/card/modes/material.scss
+++ b/ionic/components/card/modes/material.scss
@@ -50,8 +50,8 @@ $card-md-header-font-size:            1.6rem !default;
     }
   }
 
-  .item-content button:first-child,
-  .item-content [button]:first-child {
+  ion-item-content button:first-child,
+  ion-item-content [button]:first-child {
     margin-left: 0;
   }
 
diff --git a/ionic/components/card/test/advanced/main.html b/ionic/components/card/test/advanced/main.html
index ac0f5bec22..40c542515c 100644
--- a/ionic/components/card/test/advanced/main.html
+++ b/ionic/components/card/test/advanced/main.html
@@ -10,7 +10,7 @@
 
 
   <div class="item item-text-wrap">
-    <div class="item-content">
+    <ion-item-content>
 
       <h2 class="card-title">
         Card Title Goes Here
@@ -20,15 +20,15 @@
         Keep close to Nature's heart... and break clear away,
         once in awhile, and climb a mountain. I am within a paragraph element.
       </p>
-    </div>
+    </ion-item-content>
   </div>
 
   <ion-item actions>
-    <button clear>
+    <button clear item-left>
       <icon name="ion-star"></icon>
       Favorite
     </button>
-    <button clear>
+    <button clear item-right>
       <icon name="ion-reply"></icon>
       Reply
     </button>
@@ -43,10 +43,10 @@
     <div class="item-media">
       <img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
     </div>
-    <div class="item-content">
+    <ion-item-content>
       <h2>Card With An Inset Picture</h2>
       <p>Isn't it beautiful</p>
-    </div>
+    </ion-item-content>
   </div>
 
   <div class="item">
@@ -54,9 +54,9 @@
   </div>
 
   <div class="item item-text-wrap">
-    <div class="item-content">
+    <ion-item-content>
       Hello. I am a one liner, not a paragraph.
-    </div>
+    </ion-item-content>
   </div>
 
 </ion-card>
diff --git a/ionic/components/card/test/basic/main.html b/ionic/components/card/test/basic/main.html
index f553b019a5..7b79bd5af4 100644
--- a/ionic/components/card/test/basic/main.html
+++ b/ionic/components/card/test/basic/main.html
@@ -9,9 +9,9 @@
   </ion-header>
 
   <div class="item item-text-wrap">
-    <div class="item-content">
+    <ion-item-content>
       Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week in the woods. Wash your spirit clean.
-    </div>
+    </ion-item-content>
   </div>
 
 </ion-card>
@@ -21,32 +21,32 @@
 
   <div class="item">
     <icon name="ion-location"></icon>
-    <div class="item-content">
+    <ion-item-content>
       All Out Card
-    </div>
+    </ion-item-content>
     <button outline>View</button>
   </div>
 
   <div class="item item-text-wrap">
-    <div class="item-content">
+    <ion-item-content>
       This is a multiline content within a card that should
       take up multiple lines and stuff.
-    </div>
+    </ion-item-content>
   </div>
 
   <div class="item">
-    <div class="item-content">
+    <ion-item-content>
       <icon small name="ion-star"></icon>
       <span>255</span>
-    </div>
-    <div class="item-content">
+    </ion-item-content>
+    <ion-item-content>
       <icon small name="ion-reply"></icon>
       <span>Reply</span>
-    </div>
-    <div class="item-content">
+    </ion-item-content>
+    <ion-item-content>
       <icon small name="ion-forward"></icon>
       Forward
-    </div>
+    </ion-item-content>
   </div>
 
 </ion-card>
@@ -55,9 +55,9 @@
 <ion-card>
 
   <div class="item">
-    <div class="item-content">
+    <ion-item-content>
       Card, no header
-    </div>
+    </ion-item-content>
   </div>
 
 </ion-card>
diff --git a/ionic/components/card/test/images/main.html b/ionic/components/card/test/images/main.html
index 683db2615d..763573e6d9 100644
--- a/ionic/components/card/test/images/main.html
+++ b/ionic/components/card/test/images/main.html
@@ -7,22 +7,22 @@
     <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
   </div>
   <div class="item no-border-bottom">
-    <div class="item-content">
+    <ion-item-content>
       <h4 style="color:gray">Item with no-border-bottom</h4>
-    </div>
+    </ion-item-content>
   </div>
   <div class="item item-text-wrap">
-    <div class="item-content">
+    <ion-item-content>
       <p>This is content text and stuff.</p>
-    </div>
+    </ion-item-content>
   </div>
   <div class="item">
-    <div class="item-content">
+    <ion-item-content>
       <a href="#">Like</a>
-    </div>
-    <div class="item-content align-right">
+    </ion-item-content>
+    <ion-item-content class="align-right">
       <a href="#">Share</a>
-    </div>
+    </ion-item-content>
   </div>
 </ion-card>
 
@@ -33,31 +33,31 @@
     <div class="item-media">
       <img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
     </div>
-    <div class="item-content">
+    <ion-item-content>
       <h2>Card With An Inset Picture</h2>
       <p>Isn't it beautiful</p>
-    </div>
+    </ion-item-content>
   </div>
 
   <div class="item">
-    <div class="item-content">
+    <ion-item-content>
       <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
-    </div>
+    </ion-item-content>
   </div>
 
   <div class="item">
-    <div class="item-content">
+    <ion-item-content>
       <icon small name="ion-star"></icon>
       <span>255</span>
-    </div>
-    <div class="item-content">
+    </ion-item-content>
+    <ion-item-content>
       <icon small name="ion-reply"></icon>
       <span>Reply</span>
-    </div>
-    <div class="item-content">
+    </ion-item-content>
+    <ion-item-content>
       <icon small name="ion-forward"></icon>
       Forward
-    </div>
+    </ion-item-content>
   </div>
 
 </ion-card>
diff --git a/ionic/components/card/test/links/main.html b/ionic/components/card/test/links/main.html
index 074ea809da..4cbb63721d 100644
--- a/ionic/components/card/test/links/main.html
+++ b/ionic/components/card/test/links/main.html
@@ -6,33 +6,33 @@
 
   <a class="item" href="#">
     <icon name="ion-ionic"></icon>
-    <div class="item-content">
+    <ion-item-content>
       Link 1
-    </div>
+    </ion-item-content>
     <icon forward></icon>
   </a>
 
   <a class="item" href="#">
     <icon name="ion-ionic"></icon>
-    <div class="item-content">
+    <ion-item-content>
       Link 2
-    </div>
+    </ion-item-content>
     <icon forward></icon>
   </a>
 
   <button class="item">
     <icon name="ion-ionic"></icon>
-    <div class="item-content">
+    <ion-item-content>
       Button 1
-    </div>
+    </ion-item-content>
     <icon forward></icon>
   </button>
 
   <button class="item">
     <icon name="ion-ionic"></icon>
-    <div class="item-content">
+    <ion-item-content>
       Button 2
-    </div>
+    </ion-item-content>
     <icon forward></icon>
   </button>
 
@@ -47,33 +47,33 @@
 
   <a class="item" href="#">
     <icon name="ion-ionic"></icon>
-    <div class="item-content">
+    <ion-item-content>
       Link 1
-    </div>
+    </ion-item-content>
     <icon forward></icon>
   </a>
 
   <a class="item" href="#">
     <icon name="ion-ionic"></icon>
-    <div class="item-content">
+    <ion-item-content>
       Link 2
-    </div>
+    </ion-item-content>
     <icon forward></icon>
   </a>
 
   <a class="item" href="#">
     <icon name="ion-ionic"></icon>
-    <div class="item-content">
+    <ion-item-content>
       Link 3
-    </div>
+    </ion-item-content>
     <icon forward></icon>
   </a>
 
   <a class="item" href="#">
     <icon name="ion-ionic"></icon>
-    <div class="item-content">
+    <ion-item-content>
       Link 4
-    </div>
+    </ion-item-content>
     <icon forward></icon>
   </a>
 
diff --git a/ionic/components/checkbox/checkbox.ts b/ionic/components/checkbox/checkbox.ts
index c5dfc069ec..7bda684ea8 100644
--- a/ionic/components/checkbox/checkbox.ts
+++ b/ionic/components/checkbox/checkbox.ts
@@ -36,9 +36,9 @@ import {TapClick} from '../button/button';
   '<div class="item-media media-checkbox">' +
     '<div class="checkbox-icon"></div>' +
   '</div>' +
-  '<div class="item-content" id="{{labelId}}">' +
+  '<ion-item-content id="{{labelId}}">' +
     '<ng-content></ng-content>' +
-  '</div>'
+  '</ion-item-content>'
 })
 export class Checkbox extends Ion {
   constructor(
diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss
index b16057a4e1..fc6595e9c0 100644
--- a/ionic/components/item/item.scss
+++ b/ionic/components/item/item.scss
@@ -34,7 +34,7 @@ button.item.item {
   font-weight: normal;
 }
 
-.item-content {
+ion-item-content {
   margin: 0;
   flex: 1;
   white-space: nowrap;
@@ -42,8 +42,7 @@ button.item.item {
   text-overflow: ellipsis;
 }
 
-.item-text-wrap,
-.item-text-wrap .item-content {
+.item-text-wrap ion-item-content {
   white-space: normal;
 }
 
@@ -72,15 +71,15 @@ button.item.item {
 
 .list .item.item {
 
-  .item-content + button,
-  .item-content + [button],
-  button + .item-content,
-  [button] + .item-content,
+  ion-item-content + button,
+  ion-item-content + [button],
+  button + ion-item-content,
+  [button] + ion-item-content,
   icon + icon,
-  .item-content + icon,
-  .item-media + .item-content,
-  .item-content + .item-media,
-  .item-content + .item-content,
+  ion-item-content + icon,
+  .item-media + ion-item-content,
+  ion-item-content + .item-media,
+  ion-item-content + ion-item-content,
   icon + .input,
   .input + icon,
   icon + .input-label,
diff --git a/ionic/components/item/item.ts b/ionic/components/item/item.ts
index d6e10b8923..fbfc9c3f2c 100644
--- a/ionic/components/item/item.ts
+++ b/ionic/components/item/item.ts
@@ -1,4 +1,4 @@
-import {Component, View, ElementRef} from 'angular2/angular2';
+import {Component, Directive, View, ElementRef, NgIf, ViewQuery, QueryList} from 'angular2/angular2';
 
 import {ItemPrimaryOptions, ItemSecondaryOptions} from './item-options';
 import {ItemPrimarySwipeButtons, ItemSecondarySwipeButtons} from './item-swipe-buttons';
@@ -6,16 +6,19 @@ import {dom} from 'ionic/util';
 
 
 @Component({
-  selector: 'ion-item',
+  selector: 'ion-item,[ion-item]',
   host: {
     'class': 'item'
   }
 })
 @View({
   template:
-    '<div class="item-content">' +
+    '<ng-content select="[item-left]"></ng-content>' +
+    '<ion-item-content>' +
       '<ng-content></ng-content>'+
-    '</div>'
+    '</ion-item-content>' +
+    '<ng-content select="[item-right]"></ng-content>',
+  directives: [NgIf]
 })
 export class Item {
   constructor(elementRef: ElementRef) {
@@ -28,6 +31,7 @@ export class Item {
     this.swipeButtons = {};
     this.optionButtons = {};
   }
+
 }
 
 
diff --git a/ionic/components/item/modes/ios.scss b/ionic/components/item/modes/ios.scss
index 7d7c021677..231c131196 100644
--- a/ionic/components/item/modes/ios.scss
+++ b/ionic/components/item/modes/ios.scss
@@ -66,7 +66,7 @@ $item-ios-forward-icon-color:     $item-ios-border-color !default;
   }
 
   .input-label,
-  .item-content,
+  ion-item-content,
   .item-note {
     margin: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom $item-ios-padding-left;
   }
@@ -79,7 +79,7 @@ $item-ios-forward-icon-color:     $item-ios-border-color !default;
     color: $item-ios-note-color;
   }
 
-  .item icon + .item-content {
+  .item icon + ion-item-content {
     margin-left: 0;
   }
 
diff --git a/ionic/components/item/modes/material.scss b/ionic/components/item/modes/material.scss
index 2d105987f4..558047293f 100644
--- a/ionic/components/item/modes/material.scss
+++ b/ionic/components/item/modes/material.scss
@@ -49,13 +49,12 @@ $item-md-forward-icon-color:     $item-md-border-color !default;
   }
 
   .input-label,
-  .item-content,
+  ion-item-content,
   .item-note {
     margin: $item-md-padding-top $item-md-padding-right $item-md-padding-bottom $item-md-padding-left;
   }
 
-  .item-text-wrap,
-  .item-text-wrap .item-content {
+  .item-text-wrap ion-item-content {
     font-size: $item-md-body-text-font-size;
     line-height: $item-md-body-text-line-height;
   }
@@ -92,7 +91,7 @@ $item-md-forward-icon-color:     $item-md-border-color !default;
     margin-top: $item-md-padding-media-top;
   }
 
-  .item[actions] .item-content {
+  .item[actions] ion-item-content {
     margin: 8px;
   }
 
diff --git a/ionic/components/item/test/buttons/main.html b/ionic/components/item/test/buttons/main.html
index fc8a3c0fd6..35adff7bde 100644
--- a/ionic/components/item/test/buttons/main.html
+++ b/ionic/components/item/test/buttons/main.html
@@ -2,103 +2,70 @@
 
 <ion-list>
 
-  <a class="item" href="#">
-    <div class="item-content">
-      a.item
-    </div>
-    <icon forward></icon>
+  <a ion-item href="#">
+    a.item
+    <icon forward item-right></icon>
   </a>
 
-  <a class="item activated" href="#">
-    <div class="item-content">
-      a.item.activated
-    </div>
-    <icon forward></icon>
+  <a ion-item class="activated" href="#">
+    a.item.activated
+    <icon forward item-right></icon>
   </a>
 
-  <button class="item">
-    <div class="item-content">
-      button.item
-    </div>
-    <icon forward></icon>
+  <button ion-item>
+    button.item
+    <icon forward item-right></icon>
   </button>
 
-  <button class="item activated">
-    <div class="item-content">
-      button.item.activated
-    </div>
-    <icon forward></icon>
+  <button ion-item class="activated">
+    button.item.activated
+    <icon forward item-right></icon>
   </button>
 
-  <div class="item">
-    <button>Edit</button>
-    <div class="item-content">
-      div.item left button
-    </div>
-  </div>
+  <ion-item>
+    <button item-left>Edit</button>
+    div.item left button
+  </ion-item>
 
-  <div class="item">
-    <div class="item-content">
-      div.item right button[outline][secondary]
-    </div>
-    <button secondary outline>Open</button>
-  </div>
+  <ion-item>
+    div.item right button[outline][secondary]
+    <button secondary outline item-right>Open</button>
+  </ion-item>
 
-  <div class="item">
-    <div class="item-content">
-      div.item icon only button
-    </div>
-    <button>
+  <ion-item>
+    div.item icon only button
+    <button item-right>
       <icon name="ion-help-circled"></icon>
     </button>
-  </div>
+  </ion-item>
 
-  <div class="item">
-    <div class="item-content">
-      div.item right icon/text button
-    </div>
-    <button>
+  <ion-item>
+    div.item right icon/text button
+    <button item-right>
       <icon name="ion-refresh"></icon>
       Refresh
     </button>
-  </div>
+  </ion-item>
 
-  <div class="item">
-    <button clear>
+  <ion-item>
+    <button clear item-left>
       <icon name="ion-wrench"></icon>
       Fix
     </button>
-    <div class="item-content">
-      div.item left clear button
-    </div>
-  </div>
+    div.item left clear button
+  </ion-item>
 
-  <div class="item">
-    <div class="item-content">
-      div.item right clear button
-    </div>
-    <button secondary clear>
+  <ion-item>
+    div.item right clear button
+    <button secondary clear item-right>
       Edit
     </button>
-  </div>
+  </ion-item>
 
-  <div class="item">
-    <div class="item-content item-text-wrap">
-      This is multiline text that has a
-      long description of about how the text is really long.
-    </div>
-    <button outline>View</button>
-  </div>
+  <ion-item class="item-text-wrap">
+    This is multiline text that has a
+    long description of about how the text is really long.
+    <button outline item-right>View</button>
+  </ion-item>
 
 </ion-list>
-
-
-<style>
-  body {
-    //background-image: url(/ionic2-iOS-component-design.png);
-    background-repeat: no-repeat;
-    background-size: 3906px 634px;
-    background-position: -384px -53px;
-  }
-</style>
-
diff --git a/ionic/components/item/test/icons/main.html b/ionic/components/item/test/icons/main.html
index 01ed6f5ad3..0634f66464 100644
--- a/ionic/components/item/test/icons/main.html
+++ b/ionic/components/item/test/icons/main.html
@@ -2,94 +2,62 @@
 
 <ion-list>
 
-  <div class="item">
-    <div class="item-content">
-      Div with forward icon
-    </div>
-    <icon forward></icon>
-  </div>
+  <ion-item>
+    Div with forward icon
+    <icon forward item-right></icon>
+  </ion-item>
 
-  <a class="item" href="#">
-    <div class="item-content">
-      Link with forward icon
-    </div>
-    <icon forward></icon>
+  <a ion-item href="#">
+    Link with forward icon
+    <icon forward item-right></icon>
   </a>
 
-  <button class="item">
-    <div class="item-content">
-      Button with forward icon
-    </div>
-    <icon forward></icon>
+  <button ion-item>
+    Button with forward icon
+    <icon forward item-right></icon>
   </button>
 
-  <a class="item" href="#">
-    <div class="item-content">
-      Link with right side default icon
-    </div>
-    <icon name="ion-ios-information-outline"></icon>
+  <a ion-item href="#">
+    Link with right side default icon
+    <icon name="ion-ios-information-outline" item-right></icon>
   </a>
 
-  <a class="item" href="#">
-    <div class="item-content">
-      Link with right side large icon
-    </div>
-    <icon large name="ion-ios-information-outline"></icon>
+  <a ion-item href="#">
+    Link with right side large icon
+    <icon large name="ion-ios-information-outline" item-right></icon>
   </a>
 
-  <a class="item" href="#">
-    <div class="item-content">
-      Link with right side small icon
-    </div>
-    <icon small name="ion-ios-information-outline"></icon>
+  <a ion-item href="#">
+    Link with right side small icon
+    <icon small name="ion-ios-information-outline" item-right></icon>
   </a>
 
-  <button class="item">
-    <icon name="ion-star"></icon>
-    <div class="item-content">
-      Button with left side icon
-    </div>
+  <button ion-item>
+    <icon name="ion-star" item-left></icon>
+    Button with left side icon
   </button>
 
-  <button class="item">
-    <icon name="ion-flag"></icon>
-    <div class="item-content">
-      Button with both side icons
-    </div>
-    <icon name="ion-ios-checkmark"></icon>
+  <button ion-item>
+    <icon name="ion-flag" item-left></icon>
+    Button with both side icons
+    <icon name="ion-ios-checkmark" item-right></icon>
   </button>
 
-  <a class="item" href="#">
-    <div class="item-content">
-      Link with two right side icons
-    </div>
-    <icon name="ion-checkmark-circled"></icon>
-    <icon name="ion-shuffle"></icon>
+  <a ion-item href="#">
+    Link with two right side icons
+    <icon name="ion-checkmark-circled" item-right></icon>
+    <icon name="ion-shuffle" item-right></icon>
   </a>
 
-  <button class="item">
-    <icon name="ion-clipboard"></icon>
-    <icon name="ion-minus-circled"></icon>
-    <div class="item-content">
-      Button with two left side icons
-    </div>
+  <button ion-item>
+    <icon name="ion-clipboard" item-left></icon>
+    <icon name="ion-minus-circled" item-left></icon>
+    Button with two left side icons
   </button>
 
-  <button class="item">
-    <div class="item-content">
-      Red Balloons
-    </div>
-    <div class="badge">99</div>
+  <button ion-item>
+    Red Balloons
+    <div class="badge" item-right>99</div>
   </button>
 
 </ion-list>
-
-
-<style>
-  body {
-    //background-image: url(/ionic2-iOS-component-design.png);
-    background-repeat: no-repeat;
-    background-size: 3906px 634px;
-    background-position: -34px -53px;
-  }
-</style>
diff --git a/ionic/components/item/test/images/main.html b/ionic/components/item/test/images/main.html
index 45a7efc80e..46ffa05583 100644
--- a/ionic/components/item/test/images/main.html
+++ b/ionic/components/item/test/images/main.html
@@ -2,77 +2,61 @@
 
 <ion-list>
 
-  <div class="item">
-    <div class="item-content">
-      Plain Ol' div w/ some text, no images
-    </div>
-  </div>
+  <ion-item>
+    Plain Ol' div w/ some text, no images
+  </ion-item>
 
-  <div class="item">
-    <icon name="ion-email"></icon>
-    <div class="item-content">
-      One Line w/ Icon, div only text
-    </div>
-  </div>
+  <ion-item>
+    <icon name="ion-email" item-left></icon>
+    One Line w/ Icon, div only text
+  </ion-item>
 
-  <div class="item">
-    <icon name="ion-email"></icon>
-    <div class="item-content">
-      <h2>Two Lines w/ Icon, H2 Header</h2>
-      <p>Paragraph text.</p>
-    </div>
-  </div>
+  <ion-item>
+    <icon name="ion-email" item-left></icon>
+    <h2>Two Lines w/ Icon, H2 Header</h2>
+    <p>Paragraph text.</p>
+  </ion-item>
 
-  <div class="item">
-    <div class="item-media">
+  <ion-item>
+    <div class="item-media" item-left>
       <img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
     </div>
-    <div class="item-content">
-      One Line w/ Avatar, div only text
-    </div>
-  </div>
+    One Line w/ Avatar, div only text
+  </ion-item>
 
-  <div class="item">
-    <div class="item-media">
+  <ion-item>
+    <div class="item-media" item-left>
       <img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
     </div>
-    <div class="item-content">
-      <h2>Two Lines w/ Avatar, H2 Header</h2>
-      <p>Paragraph text.</p>
-    </div>
-  </div>
+    <h2>Two Lines w/ Avatar, H2 Header</h2>
+    <p>Paragraph text.</p>
+  </ion-item>
 
-  <div class="item">
-    <div class="item-media">
+  <ion-item>
+    <div class="item-media" item-left>
       <img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
     </div>
-    <div class="item-content">
-      <h2>Three Lines w/ Avatar, H2 Header</h2>
-      <p>Paragraph text.</p>
-      <p>Paragraph text.</p>
-    </div>
-  </div>
+    <h2>Three Lines w/ Avatar, H2 Header</h2>
+    <p>Paragraph text.</p>
+    <p>Paragraph text.</p>
+  </ion-item>
 
-  <div class="item">
-    <div class="item-media">
+  <ion-item>
+    <div class="item-media" item-left>
       <img class="thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
     </div>
-    <div class="item-content">
-      <h2>Two Lines w/ Thumbnail, H2 Header</h2>
-      <p>Paragraph text.</p>
-    </div>
-  </div>
+    <h2>Two Lines w/ Thumbnail, H2 Header</h2>
+    <p>Paragraph text.</p>
+  </ion-item>
 
-  <div class="item">
-    <div class="item-media">
+  <ion-item>
+    <div class="item-media" item-left>
       <img class="thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
     </div>
-    <div class="item-content">
-      <h2>Three Lines w/ Thumbnail, H2 Header</h2>
-      <p>Paragraph text.</p>
-      <p>Paragraph text.</p>
-    </div>
-  </div>
+    <h2>Three Lines w/ Thumbnail, H2 Header</h2>
+    <p>Paragraph text.</p>
+    <p>Paragraph text.</p>
+  </ion-item>
 
 </ion-list>
 
diff --git a/ionic/components/item/test/media/main.html b/ionic/components/item/test/media/main.html
index 6a57146354..a69352d7ed 100644
--- a/ionic/components/item/test/media/main.html
+++ b/ionic/components/item/test/media/main.html
@@ -8,75 +8,61 @@
 
 <ion-list>
 
-  <button class="item">
-    <div class="item-media">
+  <button ion-item>
+    <div class="item-media" item-left>
       <img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
     </div>
-    <div class="item-content">
-      Media/Avatar left, button.item
-    </div>
+    Media/Avatar left, button.item
   </button>
 
-  <a class="item" href="#">
-    <div class="item-content">
-      Media/Avatar right, a.item
-    </div>
-    <div class="item-media">
+  <a ion-item href="#">
+    Media/Avatar right, a.item
+    <div class="item-media" item-right>
       <img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
     </div>
   </a>
 
-  <div class="item">
-    <div class="item-media">
+  <ion-item>
+    <div class="item-media" item-left>
       <img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
     </div>
-    <div class="item-content">
-      Media/Avatar, right button
-    </div>
-    <button outline>View</button>
-  </div>
+    Media/Avatar, right button
+    <button outline item-right>View</button>
+  </ion-item>
 
-  <a class="item" href="#">
-    <div class="item-media">
+  <a ion-item href="#">
+    <div class="item-media" item-left>
       <img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
     </div>
-    <div class="item-content">
-      <h2>H2 Title Text</h2>
-      <p>Paragraph text</p>
-    </div>
+    <h2>H2 Title Text</h2>
+    <p>Paragraph text</p>
   </a>
 
-  <a class="item" href="#">
-    <div class="item-content">
-      Media/Thumbnail right side, a.item
-    </div>
-    <div class="item-media">
+  <a ion-item href="#">
+    Media/Thumbnail right side, a.item
+    <div class="item-media" item-right>
       <img class="thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
     </div>
   </a>
 
-  <div class="item">
-    <div class="item-media">
+  <ion-item>
+    <div class="item-media" item-left>
       <img class="thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
     </div>
-    <div class="item-content">
-      <h2>H2 Title Text</h2>
-      <p>Button on right</p>
-    </div>
-    <button outline>View</button>
-  </div>
+    <h2>H2 Title Text</h2>
+    <p>Button on right</p>
+    <button outline item-right>View</button>
+  </ion-item>
 
-  <button class="item">
-    <div class="item-media">
+  <button ion-item>
+    <div class="item-media" item-left>
       <img class="thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
     </div>
-    <div class="item-content">
-      <h3>H3 Title Text</h3>
-      <p>Icon on right</p>
-      <p>Vertically align top</p>
-      <p>button.item</p>
-    </div>
-    <icon name="ion-close-circled"></icon>
+    <h3>H3 Title Text</h3>
+    <p>Icon on right</p>
+    <p>Vertically align top</p>
+    <p>button.item</p>
+    <icon name="ion-close-circled" item-right></icon>
   </button>
 
 </ion-list>
diff --git a/ionic/components/item/test/text/main.html b/ionic/components/item/test/text/main.html
index 136628cb91..bbb03d4143 100644
--- a/ionic/components/item/test/text/main.html
+++ b/ionic/components/item/test/text/main.html
@@ -2,86 +2,40 @@
 
 <ion-list>
 
-  <div class="item">
-    <div class="item-content">
-      Plain Ol' div with some text
-    </div>
-  </div>
+  <ion-item>
+    Plain Ol' div with some text
+  </ion-item>
 
-  <div class="item">
-    <div class="item-content">
-      Single line text that should have ellipses when it doesn't all fit in the item
-    </div>
-  </div>
+  <ion-item>
+    Single line text that should have ellipses when it doesn't all fit in the item
+  </ion-item>
 
-  <div class="item">
-    <div class="item-content">
-      Column
-    </div>
-    <div class="item-content">
-      Column
-    </div>
-    <div class="item-content">
-      Column
-    </div>
-    <div class="item-content">
-      Column
-    </div>
-  </div>
+  <ion-item class="item-text-wrap">
+    Multiline text that should wrap when it is too long
+    to fit on one line in the item. Class on .item
+  </ion-item>
 
-  <div class="item">
-    <div class="item-content align-left">
-      align-left
-    </div>
-    <div class="item-content align-center">
-      align-center
-    </div>
-    <div class="item-content align-right">
-      align-right
-    </div>
-  </div>
+  <ion-item class="item-text-wrap">
+    <h1>H1 Title Text</h1>
+    <p>Paragraph line 1</p>
+  </ion-item>
 
-  <div class="item">
-    <div class="item-content item-text-wrap">
-      Multiline text that should wrap when it is too long to fit on one line in the item. Class on .item-content
-    </div>
-  </div>
+  <ion-item class="item-text-wrap">
+    <h2>H2 Title Text</h2>
+    <p>Paragraph line 1</p>
+  </ion-item>
 
-  <div class="item item-text-wrap">
-    <div class="item-content">
-      Multiline text that should wrap when it is too long to fit on one line in the item. Class on .item
-    </div>
-  </div>
+  <ion-item class="item-text-wrap">
+    <h3>H3 Title Text</h3>
+    <p>Paragraph line 1</p>
+    <p>Paragraph line 2</p>
+  </ion-item>
 
-  <div class="item item-text-wrap">
-    <div class="item-content">
-      <h1>H1 Title Text</h1>
-      <p>Paragraph line 1</p>
-    </div>
-  </div>
-
-  <div class="item item-text-wrap">
-    <div class="item-content">
-      <h2>H2 Title Text</h2>
-      <p>Paragraph line 1</p>
-    </div>
-  </div>
-
-  <div class="item item-text-wrap">
-    <div class="item-content">
-      <h3>H3 Title Text</h3>
-      <p>Paragraph line 1</p>
-      <p>Paragraph line 2</p>
-    </div>
-  </div>
-
-  <div class="item item-text-wrap">
-    <div class="item-content">
-      <h4>H4 Title Text</h4>
-      <p>Paragraph line 1</p>
-      <p>Paragraph line 2</p>
-      <p>Paragraph line 3</p>
-    </div>
-  </div>
+  <ion-item class="item-text-wrap">
+    <h4>H4 Title Text</h4>
+    <p>Paragraph line 1</p>
+    <p>Paragraph line 2</p>
+    <p>Paragraph line 3</p>
+  </ion-item>
 
 </ion-list>
diff --git a/ionic/components/list/test/headers/main.html b/ionic/components/list/test/headers/main.html
index 98bfda4eef..062ca5986d 100644
--- a/ionic/components/list/test/headers/main.html
+++ b/ionic/components/list/test/headers/main.html
@@ -6,118 +6,101 @@
     List Header
   </ion-header>
 
-  <div class="item">
-    <icon name="ion-wifi"></icon>
-    <div class="item-content">
-      Wifi
-    </div>
-    <div class="item-note">
+  <ion-item>
+    <icon name="ion-wifi" item-left></icon>
+    Wifi
+    <div class="item-note" item-right>
       Terrible
     </div>
-  </div>
+  </ion-item>
 
-  <div class="item">
-    <icon name="ion-heart"></icon>
-    <div class="item-content">
-      Affection
-    </div>
-    <div class="item-note">
+  <ion-item>
+    <icon name="ion-heart" item-left></icon>
+    Affection
+    <div class="item-note" item-right>
       Very Little
     </div>
-  </div>
+  </ion-item>
 
-  <div class="item">
-    <icon name="ion-home"></icon>
-    <div class="item-content">
-      Home
-    </div>
-    <div class="item-note">
+  <ion-item>
+    <icon name="ion-home" item-left></icon>
+    Home
+    <div class="item-note" item-right>
       Where the heart is
     </div>
-  </div>
+  </ion-item>
 
 </ion-list>
 
+
 <ion-list>
 
   <ion-header>
     List Header
   </ion-header>
 
-  <div class="item">
-    <icon name="ion-wand"></icon>
-    <div class="item-content">
-      Magic
-    </div>
-    <div class="item-note">
+  <ion-item>
+    <icon name="ion-wand" item-left></icon>
+    Magic
+    <div class="item-note" item-right>
       Activated
     </div>
-  </div>
+  </ion-item>
 
-  <div class="item">
-    <icon name="ion-star"></icon>
-    <div class="item-content">
-      Star status
-    </div>
-    <div class="item-note">
+  <ion-item>
+    <icon name="ion-star" item-left></icon>
+    Star status
+    <div class="item-note" item-right>
       Super
     </div>
-  </div>
+  </ion-item>
 
 </ion-list>
 
+
 <ion-list>
 
   <ion-header>
     List Header with text that is too long to fit inside the list header
   </ion-header>
 
-  <div class="item">
-    <icon name="ion-pizza"></icon>
-    <div class="item-content">
-      Pizza
-    </div>
-    <div class="item-note">
+  <ion-item>
+    <icon name="ion-pizza" item-left></icon>
+    Pizza
+    <div class="item-note" item-right>
       Always
     </div>
-  </div>
+  </ion-item>
 
-  <div class="item">
-    <icon name="ion-beer"></icon>
-    <div class="item-content">
-      Beer
-    </div>
-    <div class="item-note">
+  <ion-item>
+    <icon name="ion-beer" item-left></icon>
+    Beer
+    <div class="item-note" item-right>
       Yes Plz
     </div>
-  </div>
+  </ion-item>
 
-  <div class="item">
-    <icon name="ion-wineglass"></icon>
-    <div class="item-content">
-      Wine
-    </div>
-    <div class="item-note">
+  <ion-item>
+    <icon name="ion-wineglass" item-left></icon>
+    Wine
+    <div class="item-note" item-right>
       All the time
     </div>
-  </div>
+  </ion-item>
 
 </ion-list>
 
+
 <ion-list>
 
-  <div class="item">
-    <icon name="ion-chatbox"></icon>
-    <div class="item-content">
-      New List, no header, Item 1
-    </div>
-  </div>
+  <ion-item>
+    <icon name="ion-chatbox" item-left></icon>
+    New List, no header, Item 1
+  </ion-item>
 
-  <div class="item">
-    <icon name="ion-chatbox"></icon>
-    <div class="item-content">
-      New List, no header, Item 2
-    </div>
-  </div>
+  <ion-item>
+    <icon name="ion-chatbox" item-left></icon>
+    New List, no header, Item 2
+  </ion-item>
 
 </ion-list>
diff --git a/ionic/components/list/test/inset/main.html b/ionic/components/list/test/inset/main.html
index b0cd9f8cdb..cc98c74243 100644
--- a/ionic/components/list/test/inset/main.html
+++ b/ionic/components/list/test/inset/main.html
@@ -6,55 +6,33 @@
   <ion-header>
     Inset List Header
   </ion-header>
-  <div class="item item-text-wrap">
-    <div class="item-content">
-      Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week in the woods. Wash your spirit clean.
-    </div>
-  </div>
+  <ion-item class="item-text-wrap">
+    Keep close to Nature's heart... and break clear away, once in awhile, and
+    climb a mountain or spend a week in the woods. Wash your spirit clean.
+  </ion-item>
 </ion-list>
 
 
 <ion-list inset>
 
-  <div class="item">
-    <icon name="ion-location"></icon>
-    <div class="item-content">
-      All Out Inset List
-    </div>
-    <button outline>View</button>
-  </div>
+  <ion-item>
+    <icon name="ion-location" item-left></icon>
+    All Out Inset List
+    <button outline item-right>View</button>
+  </ion-item>
 
-  <div class="item item-text-wrap">
-    <div class="item-content">
-      This is a multiline content within a list that should
-      take up multiple lines and stuff.
-    </div>
-  </div>
-
-  <div class="item">
-    <div class="item-content">
-      <icon small name="ion-star"></icon>
-      <span>255</span>
-    </div>
-    <div class="item-content">
-      <icon small name="ion-reply"></icon>
-      <span>Reply</span>
-    </div>
-    <div class="item-content">
-      <icon small name="ion-forward"></icon>
-      Forward
-    </div>
-  </div>
+  <ion-item class="item-text-wrap">
+    This is a multiline content within a list that should
+    take up multiple lines and stuff.
+  </ion-item>
 
 </ion-list>
 
 
 <ion-list inset>
 
-  <div class="item">
-    <div class="item-content">
-      Inset List, no header
-    </div>
-  </div>
+  <ion-item>
+    Inset List, no header
+  </ion-item>
 
 </ion-list>
diff --git a/ionic/components/radio/radio.ts b/ionic/components/radio/radio.ts
index 1af82a330e..9965de86c9 100644
--- a/ionic/components/radio/radio.ts
+++ b/ionic/components/radio/radio.ts
@@ -101,9 +101,9 @@ export class RadioGroup extends Ion {
 })
 @IonicView({
   template:
-  '<div class="item-content" id="{{labelId}}">' +
+  '<ion-item-content id="{{labelId}}">' +
     '<ng-content></ng-content>' +
-  '</div>' +
+  '</ion-item-content>' +
   '<div class="item-media media-radio">' +
     '<div class="radio-icon"></div>' +
   '</div>'
diff --git a/ionic/components/switch/switch.ts b/ionic/components/switch/switch.ts
index 2ebce23e2c..ae77cf9ef9 100644
--- a/ionic/components/switch/switch.ts
+++ b/ionic/components/switch/switch.ts
@@ -124,9 +124,9 @@ class MediaSwitch {
 })
 @IonicView({
   template:
-  '<div class="item-content" id="{{labelId}}">' +
+  '<ion-item-content id="{{labelId}}">' +
     '<ng-content></ng-content>' +
-  '</div>' +
+  '</ion-item-content>' +
   '<div class="item-media media-switch">' +
     '<div class="switch-icon"></div>' +
   '</div>',