diff --git a/demos/item/index.ts b/demos/item/index.ts
index 31c6dce506a..3567cc0cfd0 100644
--- a/demos/item/index.ts
+++ b/demos/item/index.ts
@@ -1,12 +1,19 @@
-import {Component} from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
+import { Component } from '@angular/core';
+
+import { ionicBootstrap } from 'ionic-angular';
+
+@Component({
+  templateUrl: 'main.html'
+})
+class ApiDemoPage {
+
+}
 
-// Uses the list's demo but passes the demo var to change the title
 @Component({
-  templateUrl: '../list/main.html'
+  template: '<ion-nav [root]="root"></ion-nav>'
 })
 class ApiDemoApp {
-  demo = "Item";
+  root = ApiDemoPage;
 }
 
 ionicBootstrap(ApiDemoApp);
diff --git a/demos/item/main.html b/demos/item/main.html
new file mode 100644
index 00000000000..56f7b703698
--- /dev/null
+++ b/demos/item/main.html
@@ -0,0 +1,100 @@
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Item</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
+
+<ion-content class="outer-content">
+
+  <ion-list>
+    <ion-list-header>
+      Settings
+      <button item-right clear>
+        <ion-icon name="cog"></ion-icon>
+      </button>
+    </ion-list-header>
+
+    <ion-item-group>
+      <ion-item>
+        <ion-icon name="plane" item-left danger></ion-icon>
+        <ion-label>Airplane Mode</ion-label>
+        <ion-toggle secondary></ion-toggle>
+      </ion-item>
+
+      <button ion-item>
+        <ion-icon name="wifi" item-left primary></ion-icon>
+        <ion-label>Wi-Fi</ion-label>
+        <ion-note item-right>The Interwebz</ion-note>
+      </button>
+
+      <button ion-item>
+        <ion-icon name="bluetooth" item-left primary></ion-icon>
+        <ion-label>Bluetooth</ion-label>
+        <ion-note item-right>Off</ion-note>
+      </button>
+    </ion-item-group>
+
+    <ion-item-divider primary>
+      Other Settings
+      <button item-right outline light>Clear</button>
+    </ion-item-divider>
+
+    <button ion-item>
+      <ion-icon name="call" item-left secondary></ion-icon>
+      <ion-label>Cellular</ion-label>
+    </button>
+
+    <button ion-item>
+      <ion-icon name="link" item-left secondary></ion-icon>
+      <ion-label>Personal Hotspot</ion-label>
+      <ion-note item-right>Off</ion-note>
+    </button>
+  </ion-list>
+
+  <ion-list radio-group>
+    <ion-list-header>
+      <ion-icon item-left name="phone-portrait"></ion-icon>
+      Silence Phone
+    </ion-list-header>
+
+    <ion-item>
+      <ion-label dark>Always</ion-label>
+      <ion-radio value="always" checked></ion-radio>
+    </ion-item>
+    <ion-item>
+      <ion-label dark>Only while phone is locked</ion-label>
+      <ion-radio value="locked"></ion-radio>
+    </ion-item>
+  </ion-list>
+
+  <ion-list>
+    <ion-list-header>
+      Apps Installed
+    </ion-list-header>
+
+    <ion-item>
+      <ion-icon name="ionic" item-left primary></ion-icon>
+      <ion-label>Ionic View</ion-label>
+      <button outline item-right>Uninstall</button>
+    </ion-item>
+    <ion-item>
+      <ion-icon name="brush" item-left primary></ion-icon>
+      <ion-label>Ionic Creator</ion-label>
+      <button outline item-right>Uninstall</button>
+    </ion-item>
+    <ion-item>
+      <ion-icon name="logo-octocat" item-left dark></ion-icon>
+      <ion-label>Hubstruck</ion-label>
+      <button outline item-right>Uninstall</button>
+    </ion-item>
+    <ion-item>
+      <ion-icon name="paw" item-left danger></ion-icon>
+      <ion-label>Barkpark</ion-label>
+      <button outline item-right>Uninstall</button>
+    </ion-item>
+  </ion-list>
+
+</ion-content>
diff --git a/demos/list/index.ts b/demos/list/index.ts
index 9355d9a5d39..3567cc0cfd0 100644
--- a/demos/list/index.ts
+++ b/demos/list/index.ts
@@ -1,12 +1,19 @@
-import {Component} from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
+import { Component } from '@angular/core';
 
+import { ionicBootstrap } from 'ionic-angular';
 
 @Component({
   templateUrl: 'main.html'
 })
+class ApiDemoPage {
+
+}
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
 class ApiDemoApp {
-  demo = "List";
+  root = ApiDemoPage;
 }
 
 ionicBootstrap(ApiDemoApp);
diff --git a/demos/list/main.html b/demos/list/main.html
index 9fd653a584b..e0bfac895c3 100644
--- a/demos/list/main.html
+++ b/demos/list/main.html
@@ -1,7 +1,7 @@
 <ion-header>
 
   <ion-toolbar>
-    <ion-title>{{demo}}</ion-title>
+    <ion-title>List</ion-title>
   </ion-toolbar>
 
 </ion-header>
diff --git a/src/components/card/card.ios.scss b/src/components/card/card.ios.scss
index aded02b555b..0b1fab269ff 100644
--- a/src/components/card/card.ios.scss
+++ b/src/components/card/card.ios.scss
@@ -48,14 +48,6 @@ ion-card {
 
   ion-list {
     margin-bottom: 0;
-
-    .item {
-      padding-right: 0;
-    }
-
-    ion-label {
-      padding: 0;
-    }
   }
 
   > .item:last-child,
@@ -63,7 +55,7 @@ ion-card {
     border-bottom: 0;
   }
 
-  .item-inner {
+  .item .item-inner {
     border: 0;
   }
 
diff --git a/src/components/card/card.md.scss b/src/components/card/card.md.scss
index 415869daaea..f4acce29a73 100644
--- a/src/components/card/card.md.scss
+++ b/src/components/card/card.md.scss
@@ -50,14 +50,6 @@ ion-card {
 
   ion-list {
     margin-bottom: 0;
-
-    ion-label {
-      padding: 0;
-    }
-
-    .item-inner {
-      border-bottom: 1px solid $list-md-border-color;
-    }
   }
 
   > .item:last-child,
@@ -65,7 +57,7 @@ ion-card {
     border-bottom: 0;
   }
 
-  .item-inner {
+  .item .item-inner {
     border: 0;
   }
 
diff --git a/src/components/card/card.wp.scss b/src/components/card/card.wp.scss
index 4b805fc3ea5..771d3a1e054 100644
--- a/src/components/card/card.wp.scss
+++ b/src/components/card/card.wp.scss
@@ -51,14 +51,6 @@ ion-card {
 
   ion-list {
     margin-bottom: 0;
-
-    ion-label {
-      padding: 0;
-    }
-
-    .item-inner {
-      border-bottom: 1px solid $list-wp-border-color;
-    }
   }
 
   > .item:last-child,
@@ -66,7 +58,7 @@ ion-card {
     border-bottom: 0;
   }
 
-  .item-inner {
+  .item .item-inner {
     border: 0;
   }
 
diff --git a/src/components/input/test/clear-input/index.ts b/src/components/input/test/clear-input/index.ts
index 0ea4d927a2b..d711527bb45 100644
--- a/src/components/input/test/clear-input/index.ts
+++ b/src/components/input/test/clear-input/index.ts
@@ -7,6 +7,10 @@ import {ionicBootstrap} from '../../../../../src';
 })
 class E2EPage {
   myValue = 'value';
+
+  clicked() {
+    console.log("clicked button");
+  }
 }
 
 @Component({
diff --git a/src/components/input/test/clear-input/main.html b/src/components/input/test/clear-input/main.html
index 643578f4379..ade465cb5a7 100644
--- a/src/components/input/test/clear-input/main.html
+++ b/src/components/input/test/clear-input/main.html
@@ -12,10 +12,16 @@
   <ion-list>
 
     <ion-item>
-      <ion-label>Text 1:</ion-label>
+      <ion-label>Input Clear:</ion-label>
       <ion-input class="e2eClearInput" [(ngModel)]="myValue" clearInput></ion-input>
     </ion-item>
 
+    <ion-item>
+      <ion-label>Button:</ion-label>
+      <ion-input class="e2eClearInput" [(ngModel)]="myValue"></ion-input>
+      <button item-right (click)="clicked()">Button</button>
+    </ion-item>
+
   </ion-list>
 
 </ion-content>
diff --git a/src/components/item/item.ios.scss b/src/components/item/item.ios.scss
index 10a45dae234..e623c02cf87 100644
--- a/src/components/item/item.ios.scss
+++ b/src/components/item/item.ios.scss
@@ -88,7 +88,7 @@ $item-ios-sliding-content-background:     $list-ios-background-color !default;
   transition-duration: 0ms;
 }
 
-.item-inner {
+.item .item-inner {
   padding-right: ($item-ios-padding-right / 2);
 
   border-bottom: 1px solid $list-ios-border-color;
@@ -211,7 +211,7 @@ ion-item-group {
 // --------------------------------------------------
 
 ion-item-divider {
-  padding: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom $item-ios-padding-left;
+  padding-left: $item-ios-padding-left;
 
   color: $item-ios-divider-color;
   background-color: $item-ios-divider-background;
diff --git a/src/components/item/item.md.scss b/src/components/item/item.md.scss
index 03586296cdf..1ad1724890a 100644
--- a/src/components/item/item.md.scss
+++ b/src/components/item/item.md.scss
@@ -81,7 +81,7 @@ $item-md-sliding-content-background: $list-md-background-color !default;
   border-width: 0;
 }
 
-.item-inner {
+.item .item-inner {
   padding-right: ($item-md-padding-right / 2);
 
   border-bottom: 1px solid $list-md-border-color;
@@ -202,7 +202,7 @@ ion-item-group {
 // --------------------------------------------------
 
 ion-item-divider {
-  padding: $item-md-padding-top $item-md-padding-right $item-md-padding-bottom $item-md-padding-left;
+  padding-left: $item-md-padding-left;
 
   color: $item-md-divider-color;
   background-color: $item-md-divider-background;
diff --git a/src/components/item/item.scss b/src/components/item/item.scss
index 3954a82872d..43bcf8d12cf 100644
--- a/src/components/item/item.scss
+++ b/src/components/item/item.scss
@@ -67,9 +67,17 @@ ion-item-group {
 
 ion-item-divider {
   z-index: 1000;
-  display: block;
+  display: flex;
+  overflow: hidden;
+
+  align-items: center;
+  justify-content: space-between;
+
+  margin: 0;
+  padding: 0;
 
   width: 100%;
+
   min-height: 30px;
 
   &[sticky] {
diff --git a/src/components/item/item.ts b/src/components/item/item.ts
index e64d79f812a..49d9aaf510f 100644
--- a/src/components/item/item.ts
+++ b/src/components/item/item.ts
@@ -1,10 +1,10 @@
-import {Component, ContentChildren, forwardRef, Input, ViewChild, ContentChild, Renderer, ElementRef, ChangeDetectionStrategy, ViewEncapsulation} from '@angular/core';
+import { ChangeDetectionStrategy, Component, ContentChild, ContentChildren, Directive, ElementRef, forwardRef, Input, Renderer, ViewChild, ViewEncapsulation } from '@angular/core';
 
-import {Button} from '../button/button';
-import {Form} from '../../util/form';
-import {Icon} from '../icon/icon';
-import {Label} from '../label/label';
-import {ItemReorder} from './item-reorder';
+import { Button } from '../button/button';
+import { Form } from '../../util/form';
+import { Icon } from '../icon/icon';
+import { ItemReorder } from '../item/item-reorder';
+import { Label } from '../label/label';
 
 
 /**
@@ -17,11 +17,13 @@ import {ItemReorder} from './item-reorder';
  *
  *
  * ## Common Usage
- * An item can be written as an `<ion-item>` element or it can be added to any element by adding
- * `ion-item` as an attribute.
+ * There are a few elements that are considered items, but not all of them are styled to look the same.
+ * The basic item can be written as an `<ion-item>` element or it can be added to any element by adding
+ * `ion-item` as an attribute. List headers and item dividers, although styled differently, are also items
+ * and can be written as `<ion-list-header>` and `<ion-item-divider>`, respectively.
  *
  * ### As an Element
- * An item should be written as a `<ion-item>` element when it is not clickable.
+ * A basic item should be written as a `<ion-item>` element when it is not clickable.
  *
  * ```html
  * <ion-item>
@@ -29,6 +31,22 @@ import {ItemReorder} from './item-reorder';
  * </ion-item>
  * ```
  *
+ * A list header should be written as `<ion-list-header>`.
+ *
+ * ```html
+ * <ion-list-header>
+ *   List Header
+ * </ion-list-header>
+ * ```
+ *
+ * An item divider should be written as `<ion-item-divider>`.
+ *
+ * ```html
+ * <ion-item-divider>
+ *   Item Divider
+ * </ion-item-divider>
+ * ```
+ *
  * ### As an Attribute
  * The attribute `ion-item` should be added to a `<button>` when the item can be clicked or tapped. It
  * should be added to an `<a>` element when the item needs to contain a `href`. It can be added as an
@@ -44,6 +62,9 @@ import {ItemReorder} from './item-reorder';
  * </a>
  * ```
  *
+ * Note: do not add `ion-item` as an attribute to an `<ion-list-header>` or `<ion-item-divider>` element
+ * as they are already items and their styling will be changed to look like a basic item.
+ *
  * ## Detail Arrows
  * By default, `<button>` and `<a>` elements with the `ion-item` attribute will display a right arrow icon
  * on `ios` mode. To hide the right arrow icon on either of these elements, add the `detail-none` attribute
@@ -107,6 +128,10 @@ import {ItemReorder} from './item-reorder';
  * ```html
  * <ion-list>
  *
+ *   <ion-list-header>
+ *     Header
+ *   </ion-list-header>
+ *
  *   <ion-item>
  *     Item
  *   </ion-item>
@@ -119,6 +144,10 @@ import {ItemReorder} from './item-reorder';
  *     Button Item
  *   </button>
  *
+ *   <ion-item-divider>
+ *     Item Divider
+ *   </ion-item-divider>
+ *
  *   <button ion-item detail-none (click)="buttonClick()">
  *     Button Item with no Detail Arrow
  *   </button>
@@ -145,6 +174,13 @@ import {ItemReorder} from './item-reorder';
  * ```html
  * <ion-list>
  *
+ *   <!-- List header with buttons on each side -->
+ *   <ion-list-header>
+ *     <button item-left (click)="buttonClick()">Button</button>
+ *     List Header
+ *     <button outline item-right (click)="buttonClick()">Outline</button>
+ *   </ion-list-header>
+ *
  *   <!-- Loops through and creates multiple items -->
  *   <ion-item *ngFor="let item of items">
  *     Item {% raw %}{{item}}{% endraw %}
@@ -173,6 +209,12 @@ import {ItemReorder} from './item-reorder';
  *     <button outline item-right (click)="buttonClick()">Outline</button>
  *   </ion-item>
  *
+ *   <!-- Item divider with a right button -->
+ *   <ion-item-divider>
+ *     Item Divider
+ *     <button item-right>Button</button>
+ *   </ion-item-divider>
+ *
  *   <!-- Disabled button item with left and right buttons -->
  *   <button ion-item disabled>
  *     <button item-left (click)="buttonClick()">
@@ -224,7 +266,7 @@ import {ItemReorder} from './item-reorder';
  * @see {@link ../ItemSliding ItemSliding API Docs}
  */
 @Component({
-  selector: 'ion-item,[ion-item]',
+  selector: 'ion-list-header,ion-item,[ion-item],ion-item-divider',
   template:
     '<ng-content select="[item-left],ion-checkbox:not([item-right])"></ng-content>' +
     '<div class="item-inner">' +
@@ -239,9 +281,6 @@ import {ItemReorder} from './item-reorder';
       '<ion-reorder></ion-reorder>' +
     '</div>' +
     '<ion-button-effect></ion-button-effect>',
-  host: {
-    'class': 'item'
-  },
   directives: [forwardRef(() => ItemReorder)],
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
@@ -256,7 +295,7 @@ export class Item {
    * @private
    */
   @Input() index: number;
-  
+
   /**
    * @private
    */
@@ -366,8 +405,21 @@ export class Item {
 
   /**
    * @private
-   */  
+   */
   height(): number {
     return this._elementRef.nativeElement.offsetHeight;
   }
 }
+
+/**
+ * @private
+ */
+@Directive({
+  selector: 'ion-item,[ion-item]',
+  host: {
+    'class': 'item'
+  }
+})
+export class ItemContent {
+
+}
diff --git a/src/components/item/item.wp.scss b/src/components/item/item.wp.scss
index e9027907cfa..6dc61c00851 100644
--- a/src/components/item/item.wp.scss
+++ b/src/components/item/item.wp.scss
@@ -82,7 +82,7 @@ $item-wp-sliding-content-background: $list-wp-background-color !default;
   border-width: 0;
 }
 
-.item-inner {
+.item .item-inner {
   padding-right: ($item-wp-padding-right / 2);
 
   border-bottom: 1px solid $list-wp-border-color;
@@ -191,7 +191,7 @@ ion-note {
 // --------------------------------------------------
 
 ion-item-divider {
-  padding: $item-wp-padding-top $item-wp-padding-right $item-wp-padding-bottom $item-wp-padding-left;
+  padding-left: $item-wp-padding-left;
 
   color: $item-wp-divider-color;
   background-color: $item-wp-divider-background;
diff --git a/src/components/item/test/dividers/main.html b/src/components/item/test/dividers/main.html
index da648086328..553dc7292d1 100644
--- a/src/components/item/test/dividers/main.html
+++ b/src/components/item/test/dividers/main.html
@@ -13,15 +13,12 @@
     <ion-item>
       Plain Ol' div with some text
     </ion-item>
-
-    <ion-item>
-      Single line text that should have ellipses when it doesn't all fit in the item
-    </ion-item>
   </ion-item-group>
 
   <ion-item-group>
     <ion-item-divider>
       Item Divider
+      <button item-right>button</button>
     </ion-item-divider>
 
     <ion-item text-wrap>
@@ -31,37 +28,51 @@
   </ion-item-group>
 
   <ion-item-group>
-    <ion-item-divider dark>Dark</ion-item-divider>
+    <ion-item-divider dark>
+      <button item-left clear>
+        <ion-icon name="cloudy"></ion-icon>
+      </button>
+      <button item-left clear light>
+        <ion-icon name="rainy"></ion-icon>
+      </button>
+      Dark
+    </ion-item-divider>
 
     <ion-item text-wrap>
       <h1>H1 Title Text</h1>
-      <p>Paragraph line 1</p>
     </ion-item>
 
     <ion-item text-wrap>
       <h2>H2 Title Text</h2>
-      <p>Paragraph line 1</p>
     </ion-item>
   </ion-item-group>
 
   <ion-item-group>
-    <ion-item-divider light>Light</ion-item-divider>
+    <ion-item-divider light>
+      <ion-avatar item-left>
+        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+      </ion-avatar>
+      Light
+      <button item-right clear danger>
+        <ion-icon name="sunny"></ion-icon>
+      </button>
+    </ion-item-divider>
 
     <ion-item text-wrap>
       <h3>H3 Title Text</h3>
-      <p>Paragraph line 1</p>
-      <p>Paragraph line 2</p>
     </ion-item>
   </ion-item-group>
 
   <ion-item-group>
-    <ion-item-divider primary>Primary</ion-item-divider>
+    <ion-item-divider primary>
+      Primary
+      <ion-thumbnail item-right>
+        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+      </ion-thumbnail>
+    </ion-item-divider>
 
     <ion-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-item-group>
 
@@ -80,5 +91,10 @@ <h4>H4 Title Text</h4>
       </ion-label>
     </ion-item>
   </ion-item-group>
-
 </ion-content>
+
+<style>
+  img {
+    height: 100px;
+  }
+</style>
diff --git a/src/components/list/list.ios.scss b/src/components/list/list.ios.scss
index 8fea4238b00..39a22309f10 100644
--- a/src/components/list/list.ios.scss
+++ b/src/components/list/list.ios.scss
@@ -15,7 +15,7 @@ $list-inset-ios-margin-bottom:        16px !default;
 $list-inset-ios-margin-left:          16px !default;
 $list-inset-ios-border-radius:        4px !default;
 
-$list-ios-header-padding:             10px $item-ios-padding-right 10px $item-ios-padding-left !default;
+$list-ios-header-padding-left:             $item-ios-padding-left !default;
 $list-ios-header-font-size:           1.2rem !default;
 $list-ios-header-font-weight:         500 !default;
 $list-ios-header-letter-spacing:      .1rem !default;
@@ -29,7 +29,7 @@ $list-ios-header-color:               #333 !default;
 ion-list-header {
   position: relative;
 
-  padding: $list-ios-header-padding;
+  padding-left: $list-ios-header-padding-left;
 
   border-bottom: 1px solid $list-ios-border-color;
   font-size: $list-ios-header-font-size;
@@ -58,7 +58,7 @@ ion-list {
     }
   }
 
-  .item-inner {
+  .item .item-inner {
     border-bottom: 1px solid $list-ios-border-color;
   }
 
@@ -97,8 +97,6 @@ ion-list {
 }
 
 ion-list + ion-list {
-  margin-top: $list-ios-margin-top + $list-ios-margin-bottom;
-
   ion-list-header {
     margin-top: -$list-ios-margin-top;
     padding-top: 0;
diff --git a/src/components/list/list.md.scss b/src/components/list/list.md.scss
index 4b7018d77c2..d9de0893672 100644
--- a/src/components/list/list.md.scss
+++ b/src/components/list/list.md.scss
@@ -15,7 +15,7 @@ $list-inset-md-margin-bottom:    16px !default;
 $list-inset-md-margin-left:      16px !default;
 $list-inset-md-border-radius:    2px !default;
 
-$list-md-header-padding:         16px $item-md-padding-right 16px $item-md-padding-left !default;
+$list-md-header-padding-left:         $item-md-padding-left !default;
 $list-md-header-font-size:       1.4rem !default;
 $list-md-header-color:           #858585 !default;
 
@@ -27,7 +27,7 @@ $list-md-header-color:           #858585 !default;
 ion-list-header,
 ion-item-divider {
   margin-left: 0;
-  padding: $list-md-header-padding;
+  padding-left: $list-md-header-padding-left;
 
   border-bottom: 1px solid $list-md-border-color;
   font-size: $list-md-header-font-size;
@@ -37,7 +37,7 @@ ion-item-divider {
 ion-list {
   margin: 0 $list-md-margin-right $list-md-margin-bottom $list-md-margin-left;
 
-  .item-inner {
+  .item .item-inner {
     border-bottom: 1px solid $list-md-border-color;
   }
 
@@ -93,8 +93,6 @@ ion-list {
   }
 
   + ion-list {
-    margin-top: $list-md-margin-top + $list-md-margin-bottom;
-
     ion-list-header {
       margin-top: -$list-md-margin-top;
       padding-top: 0;
diff --git a/src/components/list/list.scss b/src/components/list/list.scss
index b589199d1ee..d0e05b613db 100644
--- a/src/components/list/list.scss
+++ b/src/components/list/list.scss
@@ -4,11 +4,17 @@
 // --------------------------------------------------
 
 ion-list-header {
-  display: block;
+  display: flex;
   overflow: hidden;
 
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  align-items: center;
+  justify-content: space-between;
+
+  margin: 0;
+  padding: 0;
+
+  width: 100%;
+  min-height: 4rem;
 }
 
 ion-list {
diff --git a/src/components/list/list.ts b/src/components/list/list.ts
index 58e1a415171..fe81a26140c 100644
--- a/src/components/list/list.ts
+++ b/src/components/list/list.ts
@@ -1,11 +1,11 @@
-import {Directive, ElementRef, EventEmitter, Renderer, Input, Optional, Output, Attribute, NgZone} from '@angular/core';
+import { Attribute, Directive, ElementRef, EventEmitter, Input, NgZone, Optional, Output, Renderer } from '@angular/core';
 
-import {Content} from '../content/content';
-import {Ion} from '../ion';
-import {ItemSlidingGesture} from '../item/item-sliding-gesture';
-import {ItemReorderGesture} from '../item/item-reorder-gesture';
-import {isTrueProperty} from '../../util/util';
-import {nativeTimeout} from '../../util/dom';
+import { Content } from '../content/content';
+import { Ion } from '../ion';
+import { isTrueProperty } from '../../util/util';
+import { ItemSlidingGesture } from '../item/item-sliding-gesture';
+import { ItemReorderGesture } from '../item/item-reorder-gesture';
+import { nativeTimeout } from '../../util/dom';
 
 /**
  * The List is a widely used interface element in almost any mobile app,
@@ -26,7 +26,7 @@ import {nativeTimeout} from '../../util/dom';
 @Directive({
   selector: 'ion-list',
   host: {
-    '[class.reorder-enabled]': '_enableReorder', 
+    '[class.reorder-enabled]': '_enableReorder',
   }
 })
 export class List extends Ion {
@@ -79,7 +79,6 @@ export class List extends Ion {
     if (shouldEnable) {
       console.debug('enableSlidingItems');
       nativeTimeout(() => this._slidingGesture = new ItemSlidingGesture(this));
-
     } else {
       this._slidingGesture && this._slidingGesture.unlisten();
     }
@@ -125,7 +124,7 @@ export class List extends Ion {
 
   /**
    * @private
-   */  
+   */
   scrollContent(scroll: number) {
     let scrollTop = this._content.getScrollTop() + scroll;
     if (scroll !== 0) {
@@ -133,10 +132,10 @@ export class List extends Ion {
     }
     return scrollTop;
   }
-  
+
   /**
    * @private
-   */  
+   */
   reorderReset() {
     let children = this.elementRef.nativeElement.children;
     let len = children.length;
@@ -145,10 +144,10 @@ export class List extends Ion {
     }
     this._lastToIndex = -1;
   }
-  
+
   /**
    * @private
-   */  
+   */
   reorderMove(fromIndex: number, toIndex: number, itemHeight: number) {
     if (this._lastToIndex === -1) {
       this._lastToIndex = fromIndex;
@@ -176,7 +175,7 @@ export class List extends Ion {
     }
   }
 
-  @Input()  
+  @Input()
   get reorder(): boolean {
     return this._enableReorder;
   }
@@ -207,7 +206,6 @@ export class List extends Ion {
   selector: 'ion-list-header'
 })
 export class ListHeader {
-
   constructor(private _renderer: Renderer, private _elementRef: ElementRef, @Attribute('id') private _id: string) { }
 
   public get id(): string {
@@ -218,5 +216,4 @@ export class ListHeader {
     this._id = val;
     this._renderer.setElementAttribute(this._elementRef.nativeElement, 'id', val);
   }
-
 }
diff --git a/src/components/list/list.wp.scss b/src/components/list/list.wp.scss
index e32ddf3d072..3989dc312b2 100644
--- a/src/components/list/list.wp.scss
+++ b/src/components/list/list.wp.scss
@@ -15,7 +15,7 @@ $list-inset-wp-margin-bottom:    16px !default;
 $list-inset-wp-margin-left:      16px !default;
 $list-inset-wp-border-radius:    2px !default;
 
-$list-wp-header-padding:         16px $item-wp-padding-right 16px $item-wp-padding-left !default;
+$list-wp-header-padding-left:    $item-wp-padding-left !default;
 $list-wp-header-font-size:       2rem !default;
 $list-wp-header-color:           $list-wp-text-color !default;
 
@@ -27,7 +27,7 @@ $list-wp-header-color:           $list-wp-text-color !default;
 ion-list-header,
 ion-item-divider {
   margin-left: 0;
-  padding: $list-wp-header-padding;
+  padding-left: $list-wp-header-padding-left;
 
   border-bottom: 1px solid $list-wp-border-color;
   font-size: $list-wp-header-font-size;
@@ -37,7 +37,7 @@ ion-item-divider {
 ion-list {
   margin: 0 $list-wp-margin-right $list-wp-margin-bottom $list-wp-margin-left;
 
-  .item-inner {
+  .item .item-inner {
     border-bottom: 1px solid $list-wp-border-color;
   }
 
@@ -93,8 +93,6 @@ ion-list {
   }
 
   + ion-list {
-    margin-top: $list-wp-margin-top + $list-wp-margin-bottom;
-
     ion-list-header {
       margin-top: -$list-wp-margin-top;
       padding-top: 0;
diff --git a/src/components/list/test/header-scenarios/e2e.ts b/src/components/list/test/header-scenarios/e2e.ts
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/components/list/test/header-scenarios/index.ts b/src/components/list/test/header-scenarios/index.ts
new file mode 100644
index 00000000000..0b3aa892e72
--- /dev/null
+++ b/src/components/list/test/header-scenarios/index.ts
@@ -0,0 +1,22 @@
+import {Component} from '@angular/core';
+import {ionicBootstrap} from '../../../../../src';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+class E2EPage {
+  testClick(ev: UIEvent) {
+    console.log(ev);
+  }
+}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class E2EApp {
+  root = E2EPage;
+}
+
+ionicBootstrap(E2EApp);
diff --git a/src/components/list/test/header-scenarios/main.html b/src/components/list/test/header-scenarios/main.html
new file mode 100644
index 00000000000..dc6446dec96
--- /dev/null
+++ b/src/components/list/test/header-scenarios/main.html
@@ -0,0 +1,93 @@
+<ion-toolbar><ion-title>Items as Links/Buttons</ion-title></ion-toolbar>
+
+<ion-content class="outer-content">
+  <ion-list>
+    <ion-list-header>
+      ion-list-header
+    </ion-list-header>
+
+    <ion-list-header text-wrap>
+      This is multiline text that has a
+      long description of about how the text is really long
+      and a <a href="#" (click)="testClick($event)">link</a>.
+      <button outline item-right (click)="testClick($event)">View</button>
+    </ion-list-header>
+
+    <ion-list-header>
+      <button item-left (click)="testClick($event)">Default</button>
+      Inner Buttons
+      <button outline item-right (click)="testClick($event)">Outline</button>
+    </ion-list-header>
+
+    <ion-list-header disabled>
+      <button item-left (click)="testClick($event)">
+        <ion-icon name="home"></ion-icon>
+        Left Icon
+      </button>
+      disabled left icon buttons
+      <button outline item-right (click)="testClick($event)">
+        <ion-icon name="star"></ion-icon>
+        Left Icon
+      </button>
+    </ion-list-header>
+
+    <ion-list-header>
+      <button item-left (click)="testClick($event)">
+        Right Icon
+        <ion-icon name="home"></ion-icon>
+      </button>
+      right icon buttons
+      <button outline item-right (click)="testClick($event)">
+        Right Icon
+        <ion-icon name="star"></ion-icon>
+      </button>
+    </ion-list-header>
+
+    <ion-list-header>
+      <button clear item-left default (click)="testClick($event)">
+        <ion-icon name="navigate"></ion-icon>
+      </button>
+      icon only buttons default
+      <button clear item-right default (click)="testClick($event)">
+        <ion-icon name="navigate"></ion-icon>
+      </button>
+    </ion-list-header>
+
+    <ion-list-header>
+      ion-list-header right icon/text button large
+      <button item-right large (click)="testClick($event)">
+        <ion-icon name="refresh"></ion-icon>
+        Refresh
+      </button>
+    </ion-list-header>
+
+    <ion-list-header>
+      <button clear item-left small (click)="testClick($event)">
+        <ion-icon name="settings"></ion-icon>
+        Settings
+      </button>
+      ion-list-header left clear button small
+    </ion-list-header>
+
+    <ion-list-header>
+      ion-list-header right clear button
+      <button secondary clear item-right (click)="testClick($event)">
+        Edit
+      </button>
+    </ion-list-header>
+
+    <ion-list-header *ngFor="let data of [0,1,2,3,4]; let i = index" [class.activated]="i == 1">
+      <ion-avatar item-left>
+          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+      </ion-avatar>
+      <p>ng-for {{i}}</p>
+      <ion-badge item-right>{{i + 1}}</ion-badge>
+    </ion-list-header>
+  </ion-list>
+</ion-content>
+
+<style>
+  img {
+    height: 100px;
+  }
+</style>
diff --git a/src/components/list/test/headers/main.html b/src/components/list/test/headers/main.html
index 67465dac268..f2091041436 100644
--- a/src/components/list/test/headers/main.html
+++ b/src/components/list/test/headers/main.html
@@ -13,6 +13,7 @@
 
     <ion-list-header>
       List Header
+      <ion-icon item-right name="star" primary></ion-icon>
     </ion-list-header>
 
     <ion-item>
@@ -44,6 +45,7 @@
 
     <ion-list-header>
       List Header
+      <button item-right outline>Info</button>
     </ion-list-header>
 
     <ion-item>
diff --git a/src/config/directives.ts b/src/config/directives.ts
index aea6cdf751d..78a9573093b 100644
--- a/src/config/directives.ts
+++ b/src/config/directives.ts
@@ -18,7 +18,7 @@ import {Slides, Slide, SlideLazy} from '../components/slides/slides';
 import {Tabs} from '../components/tabs/tabs';
 import {Tab} from '../components/tabs/tab';
 import {List, ListHeader} from '../components/list/list';
-import {Item} from '../components/item/item';
+import {Item, ItemContent} from '../components/item/item';
 import {ItemSliding, ItemOptions} from '../components/item/item-sliding';
 import {VirtualScroll} from '../components/virtual-scroll/virtual-scroll';
 import {VirtualItem, VirtualHeader, VirtualFooter} from '../components/virtual-scroll/virtual-item';
@@ -75,6 +75,7 @@ import {ShowWhen, HideWhen} from '../components/show-hide-when/show-hide-when';
  * - List
  * - ListHeader
  * - Item
+ * - ItemContent
  * - ItemSliding
  * - VirtualScroll
  * - VirtualItem
@@ -140,6 +141,7 @@ export const IONIC_DIRECTIVES: any[] = [
   List,
   ListHeader,
   Item,
+  ItemContent,
   ItemSliding,
   ItemOptions,
   VirtualScroll,