diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css
index 06358bcebf..2b49a29820 100644
--- a/dist/css/ionic-ios7.css
+++ b/dist/css/ionic-ios7.css
@@ -969,9 +969,35 @@ a.subdued‎ {
   z-index: 2;
   display: block;
   margin: -1px;
+  padding: 15px 40px 15px 15px;
   border: none;
   background-color: white;
-  box-shadow: inset 0 0 1px #666666; }
+  box-shadow: inset 0 0 1px #666666;
+  font-size: 16px;
+  -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
+  .item h2 {
+    margin: 0 0 4px 0;
+    font-size: 16px; }
+  .item h3 {
+    margin: 0 0 4px 0;
+    font-size: 14px; }
+  .item h4 {
+    margin: 0 0 4px 0;
+    font-size: 12px; }
+  .item h5, .item h6 {
+    margin: 0 0 3px 0;
+    font-size: 10px; }
+  .item p {
+    color: #666;
+    font-size: 14px; }
+  .item h1:last-child,
+  .item h2:last-child,
+  .item h3:last-child,
+  .item h4:last-child,
+  .item h5:last-child,
+  .item h6:last-child,
+  .item p:last-child {
+    margin-bottom: 0; }
   .item .badge {
     float: right; }
   .item .badge + .badge {
@@ -1085,13 +1111,22 @@ a.subdued‎ {
         background-color: #444444;
         color: white; }
 
+.item,
+.item-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap; }
+
 a.item {
   color: #333333;
   text-decoration: none; }
   a.item:hover, a.item:focus {
     text-decoration: none; }
 
-.item-content {
+.item-slider {
+  padding: 0; }
+
+.item-slider .item-content {
   /**
    * The content area of a complex list item. This area can
    * Slide left and right and be dragged to support different
@@ -1099,44 +1134,24 @@ a.item {
    */
   position: relative;
   z-index: 2;
-  overflow: hidden;
   padding: 15px 40px 15px 15px;
   border: none;
-  background-color: #fff;
+  background-color: white;
   box-shadow: inset 0 0 1px #666666;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 16px;
   -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
-  .item-content h2 {
-    margin: 0 0 4px 0;
-    font-size: 16px; }
-  .item-content h3 {
-    margin: 0 0 4px 0;
-    font-size: 14px; }
-  .item-content h3 {
-    margin: 0 0 4px 0;
-    font-size: 12px; }
-  .item-content h4, .item-content h5, .item-content h6 {
-    margin: 0 0 3px 0;
-    font-size: 10px; }
-  .item-content p {
-    color: #666;
-    font-size: 14px; }
-  .item-content h1:last-child,
-  .item-content h2:last-child,
-  .item-content h3:last-child,
-  .item-content h4:last-child,
-  .item-content h5:last-child,
-  .item-content h6:last-child,
-  .item-content p:last-child {
-    margin-bottom: 0; }
 
 .item-text-wrap {
   overflow: auto;
   white-space: normal; }
 
-.item-content i {
+.item-slider.item-text-wrap {
+  overflow: hidden;
+  white-space: nowrap; }
+  .item-slider.item-text-wrap .item-content {
+    overflow: auto;
+    white-space: normal; }
+
+.item i {
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-flex;
@@ -1152,22 +1167,30 @@ a.item {
   height: 100%;
   font-size: 32px; }
 
-.item-content .fill-icon {
+.item .fill-icon {
   font-size: 28px; }
 
-.item-icon-left .item-content {
+.item-icon-left {
   padding-left: 45px; }
-  .item-icon-left .item-content i {
+  .item-icon-left i {
     left: 7.5px; }
 
-.item-icon-right .item-content i {
+.item-slider.item-icon-left {
+  padding-left: 0; }
+  .item-slider.item-icon-left .item-content {
+    padding-left: 45px; }
+
+.item-icon-right i {
   right: 7.5px; }
 
-.item-icon-left.item-icon-right .item-content i:last-child {
+.item-icon-left.item-icon-right i:first-child {
+  right: auto; }
+
+.item-icon-left.item-icon-right i:last-child {
   left: auto; }
 
-a .item-content:after,
-button .item-content:after {
+a.item:after,
+button.item:after {
   /* By default, both <a> and <button> have right side arrow icons */
   display: -webkit-box;
   display: -webkit-flex;
@@ -1195,14 +1218,14 @@ button .item-content:after {
   speak: none;
   -webkit-font-smoothing: antialiased; }
 
-a.item-icon-right .item-content:after,
-button.item-icon-right .item-content:after {
+a.item-icon-right:after,
+button.item-icon-right:after {
   display: none; }
 
-.item-thumbnail .item-content {
+.item-avitar {
   padding-left: 70px;
   min-height: 70px; }
-  .item-thumbnail .item-content img:first-child, .item-thumbnail .item-content .item-img {
+  .item-avitar img:first-child, .item-avitar .item-img {
     position: absolute;
     top: 15px;
     left: 15px;
@@ -1211,10 +1234,10 @@ button.item-icon-right .item-content:after {
     width: 100%;
     border-radius: 4px; }
 
-.item-thumbnail-lrg .item-content {
+.item-thumbnail-left {
   padding-left: 95px;
   min-height: 80px; }
-  .item-thumbnail-lrg .item-content img:first-child, .item-thumbnail-lrg .item-content .item-img {
+  .item-thumbnail-left img:first-child, .item-thumbnail-left .item-image {
     position: absolute;
     top: 0;
     left: 0;
@@ -1222,19 +1245,30 @@ button.item-icon-right .item-content:after {
     max-height: 80px;
     width: 100%; }
 
-.item-image .item-content {
-  padding: 0;
-  text-align: center; }
-  .item-image .item-content img:first-child, .item-image .item-content .list-img {
-    vertical-align: middle;
+.item-thumbnail-right {
+  padding-right: 95px;
+  min-height: 80px; }
+  .item-thumbnail-right img:first-child, .item-thumbnail-right .item-image {
+    position: absolute;
+    top: 0;
+    right: 0;
+    max-width: 80px;
+    max-height: 80px;
     width: 100%; }
 
-.item-body .item-content {
+.item-image {
+  padding: 0;
+  text-align: center; }
+  .item-image img:first-child, .item-image .list-img {
+    width: 100%;
+    vertical-align: middle; }
+
+.item-body {
   overflow: auto;
   padding: 15px;
   text-overflow: inherit;
   white-space: normal; }
-  .item-body .item-content h1, .item-body .item-content h2, .item-body .item-content h3, .item-body .item-content h4, .item-body .item-content h5, .item-body .item-content h6, .item-body .item-content p {
+  .item-body h1, .item-body h2, .item-body h3, .item-body h4, .item-body h5, .item-body h6, .item-body p {
     margin-top: 15px;
     margin-bottom: 15px; }
 
@@ -1306,13 +1340,13 @@ button.item-icon-right .item-content:after {
  * The hidden right-side buttons that can be exposed under a list item
  * with dragging.
  */
-.item-buttons {
+.item-options {
   position: absolute;
   top: 0;
   right: 0;
   z-index: 1;
   height: 100%; }
-  .item-buttons .button {
+  .item-options .button {
     height: 100%;
     border: none;
     border-radius: 0; }
@@ -1368,51 +1402,51 @@ button.item-icon-right .item-content:after {
   border-radius: 2px; }
 
 .card {
+  padding-top: 1px;
+  padding-bottom: 1px;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); }
 
-.card .item,
-.list-inset .item,
-.padding > .list .item {
-  margin-left: 0;
-  margin-right: 0; }
-  .card .item:first-child,
-  .list-inset .item:first-child,
-  .padding > .list .item:first-child {
-    margin-top: 0;
+.card .item:first-child,
+.list-inset .item:first-child,
+.padding > .list .item:first-child {
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px; }
+  .card .item:first-child .item-content,
+  .list-inset .item:first-child .item-content,
+  .padding > .list .item:first-child .item-content {
     border-top-left-radius: 2px;
     border-top-right-radius: 2px; }
-    .card .item:first-child .item-content,
-    .list-inset .item:first-child .item-content,
-    .padding > .list .item:first-child .item-content {
-      border-top-left-radius: 2px;
-      border-top-right-radius: 2px; }
-  .card .item:last-child,
-  .list-inset .item:last-child,
-  .padding > .list .item:last-child {
-    margin-bottom: 0;
+.card .item:last-child,
+.list-inset .item:last-child,
+.padding > .list .item:last-child {
+  border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 2px; }
+  .card .item:last-child .item-content,
+  .list-inset .item:last-child .item-content,
+  .padding > .list .item:last-child .item-content {
     border-bottom-left-radius: 2px;
     border-bottom-right-radius: 2px; }
-    .card .item:last-child .item-content,
-    .list-inset .item:last-child .item-content,
-    .padding > .list .item:last-child .item-content {
-      border-bottom-left-radius: 2px;
-      border-bottom-right-radius: 2px; }
 
-.card.list .item:last-child,
+.card .item:last-child,
 .list-inset .item:last-child {
   margin-bottom: -1px; }
 
-.card.list .item-divider,
+.card .item,
+.card .item-divider,
 .list-inset .item-divider,
 .padding > .list .item,
-.padding-horizontal > .list .item {
-  margin-right: 0;
+.padding-horizontal > .list .item,
+.padding > .list .item-divider,
+.padding-horizontal > .list .item-divider {
+  margin-left: 0;
+  margin-right: 0; }
+
+.padding-left > .list .item,
+.padding-left > .list .item-divider {
   margin-left: 0; }
 
-.padding-left > .list .item {
-  margin-left: 0; }
-
-.padding-right > .list .item {
+.padding-right > .list .item,
+.padding-right > .list .item-divider {
   margin-right: 0; }
 
 form {
diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css
index d50c3c740e..cd80eb3f07 100644
--- a/dist/css/ionic-scoped.css
+++ b/dist/css/ionic-scoped.css
@@ -1696,9 +1696,35 @@
     z-index: 2;
     display: block;
     margin: -1px;
+    padding: 15px 40px 15px 15px;
     border: none;
     background-color: white;
-    box-shadow: inset 0 0 1px #666666; }
+    box-shadow: inset 0 0 1px #666666;
+    font-size: 16px;
+    -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
+    .ionic .item h2 {
+      margin: 0 0 4px 0;
+      font-size: 16px; }
+    .ionic .item h3 {
+      margin: 0 0 4px 0;
+      font-size: 14px; }
+    .ionic .item h4 {
+      margin: 0 0 4px 0;
+      font-size: 12px; }
+    .ionic .item h5, .ionic .item h6 {
+      margin: 0 0 3px 0;
+      font-size: 10px; }
+    .ionic .item p {
+      color: #666;
+      font-size: 14px; }
+    .ionic .item h1:last-child,
+    .ionic .item h2:last-child,
+    .ionic .item h3:last-child,
+    .ionic .item h4:last-child,
+    .ionic .item h5:last-child,
+    .ionic .item h6:last-child,
+    .ionic .item p:last-child {
+      margin-bottom: 0; }
     .ionic .item .badge {
       float: right; }
     .ionic .item .badge + .badge {
@@ -1811,12 +1837,19 @@
         .ionic .item.item-dark.active .list-item-content, .ionic .item.item-dark:active .list-item-content {
           background-color: #444444;
           color: white; }
+  .ionic .item,
+  .ionic .item-content {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap; }
   .ionic a.item {
     color: #333333;
     text-decoration: none; }
     .ionic a.item:hover, .ionic a.item:focus {
       text-decoration: none; }
-  .ionic .item-content {
+  .ionic .item-slider {
+    padding: 0; }
+  .ionic .item-slider .item-content {
     /**
      * The content area of a complex list item. This area can
      * Slide left and right and be dragged to support different
@@ -1824,42 +1857,21 @@
      */
     position: relative;
     z-index: 2;
-    overflow: hidden;
     padding: 15px 40px 15px 15px;
     border: none;
-    background-color: #fff;
+    background-color: white;
     box-shadow: inset 0 0 1px #666666;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-size: 16px;
     -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
-    .ionic .item-content h2 {
-      margin: 0 0 4px 0;
-      font-size: 16px; }
-    .ionic .item-content h3 {
-      margin: 0 0 4px 0;
-      font-size: 14px; }
-    .ionic .item-content h3 {
-      margin: 0 0 4px 0;
-      font-size: 12px; }
-    .ionic .item-content h4, .ionic .item-content h5, .ionic .item-content h6 {
-      margin: 0 0 3px 0;
-      font-size: 10px; }
-    .ionic .item-content p {
-      color: #666;
-      font-size: 14px; }
-    .ionic .item-content h1:last-child,
-    .ionic .item-content h2:last-child,
-    .ionic .item-content h3:last-child,
-    .ionic .item-content h4:last-child,
-    .ionic .item-content h5:last-child,
-    .ionic .item-content h6:last-child,
-    .ionic .item-content p:last-child {
-      margin-bottom: 0; }
   .ionic .item-text-wrap {
     overflow: auto;
     white-space: normal; }
-  .ionic .item-content i {
+  .ionic .item-slider.item-text-wrap {
+    overflow: hidden;
+    white-space: nowrap; }
+    .ionic .item-slider.item-text-wrap .item-content {
+      overflow: auto;
+      white-space: normal; }
+  .ionic .item i {
     display: -webkit-box;
     display: -webkit-flex;
     display: -moz-flex;
@@ -1874,18 +1886,24 @@
     top: 0;
     height: 100%;
     font-size: 32px; }
-  .ionic .item-content .fill-icon {
+  .ionic .item .fill-icon {
     font-size: 28px; }
-  .ionic .item-icon-left .item-content {
+  .ionic .item-icon-left {
     padding-left: 45px; }
-    .ionic .item-icon-left .item-content i {
+    .ionic .item-icon-left i {
       left: 7.5px; }
-  .ionic .item-icon-right .item-content i {
+  .ionic .item-slider.item-icon-left {
+    padding-left: 0; }
+    .ionic .item-slider.item-icon-left .item-content {
+      padding-left: 45px; }
+  .ionic .item-icon-right i {
     right: 7.5px; }
-  .ionic .item-icon-left.item-icon-right .item-content i:last-child {
+  .ionic .item-icon-left.item-icon-right i:first-child {
+    right: auto; }
+  .ionic .item-icon-left.item-icon-right i:last-child {
     left: auto; }
-  .ionic a .item-content:after,
-  .ionic button .item-content:after {
+  .ionic a.item:after,
+  .ionic button.item:after {
     /* By default, both <a> and <button> have right side arrow icons */
     display: -webkit-box;
     display: -webkit-flex;
@@ -1912,13 +1930,13 @@
     line-height: 1;
     speak: none;
     -webkit-font-smoothing: antialiased; }
-  .ionic a.item-icon-right .item-content:after,
-  .ionic button.item-icon-right .item-content:after {
+  .ionic a.item-icon-right:after,
+  .ionic button.item-icon-right:after {
     display: none; }
-  .ionic .item-thumbnail .item-content {
+  .ionic .item-avitar {
     padding-left: 70px;
     min-height: 70px; }
-    .ionic .item-thumbnail .item-content img:first-child, .ionic .item-thumbnail .item-content .item-img {
+    .ionic .item-avitar img:first-child, .ionic .item-avitar .item-img {
       position: absolute;
       top: 15px;
       left: 15px;
@@ -1926,28 +1944,38 @@
       max-height: 40px;
       width: 100%;
       border-radius: 4px; }
-  .ionic .item-thumbnail-lrg .item-content {
+  .ionic .item-thumbnail-left {
     padding-left: 95px;
     min-height: 80px; }
-    .ionic .item-thumbnail-lrg .item-content img:first-child, .ionic .item-thumbnail-lrg .item-content .item-img {
+    .ionic .item-thumbnail-left img:first-child, .ionic .item-thumbnail-left .item-image {
       position: absolute;
       top: 0;
       left: 0;
       max-width: 80px;
       max-height: 80px;
       width: 100%; }
-  .ionic .item-image .item-content {
+  .ionic .item-thumbnail-right {
+    padding-right: 95px;
+    min-height: 80px; }
+    .ionic .item-thumbnail-right img:first-child, .ionic .item-thumbnail-right .item-image {
+      position: absolute;
+      top: 0;
+      right: 0;
+      max-width: 80px;
+      max-height: 80px;
+      width: 100%; }
+  .ionic .item-image {
     padding: 0;
     text-align: center; }
-    .ionic .item-image .item-content img:first-child, .ionic .item-image .item-content .list-img {
-      vertical-align: middle;
-      width: 100%; }
-  .ionic .item-body .item-content {
+    .ionic .item-image img:first-child, .ionic .item-image .list-img {
+      width: 100%;
+      vertical-align: middle; }
+  .ionic .item-body {
     overflow: auto;
     padding: 15px;
     text-overflow: inherit;
     white-space: normal; }
-    .ionic .item-body .item-content h1, .ionic .item-body .item-content h2, .ionic .item-body .item-content h3, .ionic .item-body .item-content h4, .ionic .item-body .item-content h5, .ionic .item-body .item-content h6, .ionic .item-body .item-content p {
+    .ionic .item-body h1, .ionic .item-body h2, .ionic .item-body h3, .ionic .item-body h4, .ionic .item-body h5, .ionic .item-body h6, .ionic .item-body p {
       margin-top: 15px;
       margin-bottom: 15px; }
   .ionic .item-divider {
@@ -2004,13 +2032,13 @@
       height: 100%;
       border: none;
       border-radius: 0; }
-  .ionic .item-buttons {
+  .ionic .item-options {
     position: absolute;
     top: 0;
     right: 0;
     z-index: 1;
     height: 100%; }
-    .ionic .item-buttons .button {
+    .ionic .item-options .button {
       height: 100%;
       border: none;
       border-radius: 0; }
@@ -2051,46 +2079,46 @@
     background-color: white;
     border-radius: 2px; }
   .ionic .card {
+    padding-top: 1px;
+    padding-bottom: 1px;
     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); }
-  .ionic .card .item,
-  .ionic .list-inset .item,
-  .ionic .padding > .list .item {
-    margin-left: 0;
-    margin-right: 0; }
-    .ionic .card .item:first-child,
-    .ionic .list-inset .item:first-child,
-    .ionic .padding > .list .item:first-child {
-      margin-top: 0;
+  .ionic .card .item:first-child,
+  .ionic .list-inset .item:first-child,
+  .ionic .padding > .list .item:first-child {
+    border-top-left-radius: 2px;
+    border-top-right-radius: 2px; }
+    .ionic .card .item:first-child .item-content,
+    .ionic .list-inset .item:first-child .item-content,
+    .ionic .padding > .list .item:first-child .item-content {
       border-top-left-radius: 2px;
       border-top-right-radius: 2px; }
-      .ionic .card .item:first-child .item-content,
-      .ionic .list-inset .item:first-child .item-content,
-      .ionic .padding > .list .item:first-child .item-content {
-        border-top-left-radius: 2px;
-        border-top-right-radius: 2px; }
-    .ionic .card .item:last-child,
-    .ionic .list-inset .item:last-child,
-    .ionic .padding > .list .item:last-child {
-      margin-bottom: 0;
+  .ionic .card .item:last-child,
+  .ionic .list-inset .item:last-child,
+  .ionic .padding > .list .item:last-child {
+    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: 2px; }
+    .ionic .card .item:last-child .item-content,
+    .ionic .list-inset .item:last-child .item-content,
+    .ionic .padding > .list .item:last-child .item-content {
       border-bottom-left-radius: 2px;
       border-bottom-right-radius: 2px; }
-      .ionic .card .item:last-child .item-content,
-      .ionic .list-inset .item:last-child .item-content,
-      .ionic .padding > .list .item:last-child .item-content {
-        border-bottom-left-radius: 2px;
-        border-bottom-right-radius: 2px; }
-  .ionic .card.list .item:last-child,
+  .ionic .card .item:last-child,
   .ionic .list-inset .item:last-child {
     margin-bottom: -1px; }
-  .ionic .card.list .item-divider,
+  .ionic .card .item,
+  .ionic .card .item-divider,
   .ionic .list-inset .item-divider,
   .ionic .padding > .list .item,
-  .ionic .padding-horizontal > .list .item {
-    margin-right: 0;
+  .ionic .padding-horizontal > .list .item,
+  .ionic .padding > .list .item-divider,
+  .ionic .padding-horizontal > .list .item-divider {
+    margin-left: 0;
+    margin-right: 0; }
+  .ionic .padding-left > .list .item,
+  .ionic .padding-left > .list .item-divider {
     margin-left: 0; }
-  .ionic .padding-left > .list .item {
-    margin-left: 0; }
-  .ionic .padding-right > .list .item {
+  .ionic .padding-right > .list .item,
+  .ionic .padding-right > .list .item-divider {
     margin-right: 0; }
   .ionic form {
     margin: 0 0 1.42857; }
diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index 31b354e01c..86bbb57db1 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -2112,9 +2112,35 @@ a.subdued‎ {
   z-index: 2;
   display: block;
   margin: -1px;
+  padding: 15px 40px 15px 15px;
   border: none;
   background-color: white;
-  box-shadow: inset 0 0 1px #666666; }
+  box-shadow: inset 0 0 1px #666666;
+  font-size: 16px;
+  -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
+  .item h2 {
+    margin: 0 0 4px 0;
+    font-size: 16px; }
+  .item h3 {
+    margin: 0 0 4px 0;
+    font-size: 14px; }
+  .item h4 {
+    margin: 0 0 4px 0;
+    font-size: 12px; }
+  .item h5, .item h6 {
+    margin: 0 0 3px 0;
+    font-size: 10px; }
+  .item p {
+    color: #666;
+    font-size: 14px; }
+  .item h1:last-child,
+  .item h2:last-child,
+  .item h3:last-child,
+  .item h4:last-child,
+  .item h5:last-child,
+  .item h6:last-child,
+  .item p:last-child {
+    margin-bottom: 0; }
   .item .badge {
     float: right; }
   .item .badge + .badge {
@@ -2228,13 +2254,22 @@ a.subdued‎ {
         background-color: #444444;
         color: white; }
 
+.item,
+.item-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap; }
+
 a.item {
   color: #333333;
   text-decoration: none; }
   a.item:hover, a.item:focus {
     text-decoration: none; }
 
-.item-content {
+.item-slider {
+  padding: 0; }
+
+.item-slider .item-content {
   /**
    * The content area of a complex list item. This area can
    * Slide left and right and be dragged to support different
@@ -2242,44 +2277,24 @@ a.item {
    */
   position: relative;
   z-index: 2;
-  overflow: hidden;
   padding: 15px 40px 15px 15px;
   border: none;
-  background-color: #fff;
+  background-color: white;
   box-shadow: inset 0 0 1px #666666;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 16px;
   -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
-  .item-content h2 {
-    margin: 0 0 4px 0;
-    font-size: 16px; }
-  .item-content h3 {
-    margin: 0 0 4px 0;
-    font-size: 14px; }
-  .item-content h3 {
-    margin: 0 0 4px 0;
-    font-size: 12px; }
-  .item-content h4, .item-content h5, .item-content h6 {
-    margin: 0 0 3px 0;
-    font-size: 10px; }
-  .item-content p {
-    color: #666;
-    font-size: 14px; }
-  .item-content h1:last-child,
-  .item-content h2:last-child,
-  .item-content h3:last-child,
-  .item-content h4:last-child,
-  .item-content h5:last-child,
-  .item-content h6:last-child,
-  .item-content p:last-child {
-    margin-bottom: 0; }
 
 .item-text-wrap {
   overflow: auto;
   white-space: normal; }
 
-.item-content i {
+.item-slider.item-text-wrap {
+  overflow: hidden;
+  white-space: nowrap; }
+  .item-slider.item-text-wrap .item-content {
+    overflow: auto;
+    white-space: normal; }
+
+.item i {
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-flex;
@@ -2295,22 +2310,30 @@ a.item {
   height: 100%;
   font-size: 32px; }
 
-.item-content .fill-icon {
+.item .fill-icon {
   font-size: 28px; }
 
-.item-icon-left .item-content {
+.item-icon-left {
   padding-left: 45px; }
-  .item-icon-left .item-content i {
+  .item-icon-left i {
     left: 7.5px; }
 
-.item-icon-right .item-content i {
+.item-slider.item-icon-left {
+  padding-left: 0; }
+  .item-slider.item-icon-left .item-content {
+    padding-left: 45px; }
+
+.item-icon-right i {
   right: 7.5px; }
 
-.item-icon-left.item-icon-right .item-content i:last-child {
+.item-icon-left.item-icon-right i:first-child {
+  right: auto; }
+
+.item-icon-left.item-icon-right i:last-child {
   left: auto; }
 
-a .item-content:after,
-button .item-content:after {
+a.item:after,
+button.item:after {
   /* By default, both <a> and <button> have right side arrow icons */
   display: -webkit-box;
   display: -webkit-flex;
@@ -2338,14 +2361,14 @@ button .item-content:after {
   speak: none;
   -webkit-font-smoothing: antialiased; }
 
-a.item-icon-right .item-content:after,
-button.item-icon-right .item-content:after {
+a.item-icon-right:after,
+button.item-icon-right:after {
   display: none; }
 
-.item-thumbnail .item-content {
+.item-avitar {
   padding-left: 70px;
   min-height: 70px; }
-  .item-thumbnail .item-content img:first-child, .item-thumbnail .item-content .item-img {
+  .item-avitar img:first-child, .item-avitar .item-img {
     position: absolute;
     top: 15px;
     left: 15px;
@@ -2354,10 +2377,10 @@ button.item-icon-right .item-content:after {
     width: 100%;
     border-radius: 4px; }
 
-.item-thumbnail-lrg .item-content {
+.item-thumbnail-left {
   padding-left: 95px;
   min-height: 80px; }
-  .item-thumbnail-lrg .item-content img:first-child, .item-thumbnail-lrg .item-content .item-img {
+  .item-thumbnail-left img:first-child, .item-thumbnail-left .item-image {
     position: absolute;
     top: 0;
     left: 0;
@@ -2365,19 +2388,30 @@ button.item-icon-right .item-content:after {
     max-height: 80px;
     width: 100%; }
 
-.item-image .item-content {
-  padding: 0;
-  text-align: center; }
-  .item-image .item-content img:first-child, .item-image .item-content .list-img {
-    vertical-align: middle;
+.item-thumbnail-right {
+  padding-right: 95px;
+  min-height: 80px; }
+  .item-thumbnail-right img:first-child, .item-thumbnail-right .item-image {
+    position: absolute;
+    top: 0;
+    right: 0;
+    max-width: 80px;
+    max-height: 80px;
     width: 100%; }
 
-.item-body .item-content {
+.item-image {
+  padding: 0;
+  text-align: center; }
+  .item-image img:first-child, .item-image .list-img {
+    width: 100%;
+    vertical-align: middle; }
+
+.item-body {
   overflow: auto;
   padding: 15px;
   text-overflow: inherit;
   white-space: normal; }
-  .item-body .item-content h1, .item-body .item-content h2, .item-body .item-content h3, .item-body .item-content h4, .item-body .item-content h5, .item-body .item-content h6, .item-body .item-content p {
+  .item-body h1, .item-body h2, .item-body h3, .item-body h4, .item-body h5, .item-body h6, .item-body p {
     margin-top: 15px;
     margin-bottom: 15px; }
 
@@ -2449,13 +2483,13 @@ button.item-icon-right .item-content:after {
  * The hidden right-side buttons that can be exposed under a list item
  * with dragging.
  */
-.item-buttons {
+.item-options {
   position: absolute;
   top: 0;
   right: 0;
   z-index: 1;
   height: 100%; }
-  .item-buttons .button {
+  .item-options .button {
     height: 100%;
     border: none;
     border-radius: 0; }
@@ -2511,51 +2545,51 @@ button.item-icon-right .item-content:after {
   border-radius: 2px; }
 
 .card {
+  padding-top: 1px;
+  padding-bottom: 1px;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); }
 
-.card .item,
-.list-inset .item,
-.padding > .list .item {
-  margin-left: 0;
-  margin-right: 0; }
-  .card .item:first-child,
-  .list-inset .item:first-child,
-  .padding > .list .item:first-child {
-    margin-top: 0;
+.card .item:first-child,
+.list-inset .item:first-child,
+.padding > .list .item:first-child {
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px; }
+  .card .item:first-child .item-content,
+  .list-inset .item:first-child .item-content,
+  .padding > .list .item:first-child .item-content {
     border-top-left-radius: 2px;
     border-top-right-radius: 2px; }
-    .card .item:first-child .item-content,
-    .list-inset .item:first-child .item-content,
-    .padding > .list .item:first-child .item-content {
-      border-top-left-radius: 2px;
-      border-top-right-radius: 2px; }
-  .card .item:last-child,
-  .list-inset .item:last-child,
-  .padding > .list .item:last-child {
-    margin-bottom: 0;
+.card .item:last-child,
+.list-inset .item:last-child,
+.padding > .list .item:last-child {
+  border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 2px; }
+  .card .item:last-child .item-content,
+  .list-inset .item:last-child .item-content,
+  .padding > .list .item:last-child .item-content {
     border-bottom-left-radius: 2px;
     border-bottom-right-radius: 2px; }
-    .card .item:last-child .item-content,
-    .list-inset .item:last-child .item-content,
-    .padding > .list .item:last-child .item-content {
-      border-bottom-left-radius: 2px;
-      border-bottom-right-radius: 2px; }
 
-.card.list .item:last-child,
+.card .item:last-child,
 .list-inset .item:last-child {
   margin-bottom: -1px; }
 
-.card.list .item-divider,
+.card .item,
+.card .item-divider,
 .list-inset .item-divider,
 .padding > .list .item,
-.padding-horizontal > .list .item {
-  margin-right: 0;
+.padding-horizontal > .list .item,
+.padding > .list .item-divider,
+.padding-horizontal > .list .item-divider {
+  margin-left: 0;
+  margin-right: 0; }
+
+.padding-left > .list .item,
+.padding-left > .list .item-divider {
   margin-left: 0; }
 
-.padding-left > .list .item {
-  margin-left: 0; }
-
-.padding-right > .list .item {
+.padding-right > .list .item,
+.padding-right > .list .item-divider {
   margin-right: 0; }
 
 form {
diff --git a/scss/ionic/_items.scss b/scss/ionic/_items.scss
index a0323f4f6c..eb3368234b 100644
--- a/scss/ionic/_items.scss
+++ b/scss/ionic/_items.scss
@@ -9,16 +9,50 @@
   display: block;
   margin: $item-border-width * -1;
 
-  border: none;
+  padding: $item-padding (($item-padding * 3) - 5) $item-padding $item-padding;
 
+  border: none;
   background-color: $list-default-background;
   box-shadow: $item-box-shadow;
+  font-size: $list-font-size;
+
+  -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
+
+  h2 {
+    margin: 0 0 4px 0;
+    font-size: 16px;
+  }
+  h3 {
+    margin: 0 0 4px 0;
+    font-size: 14px;
+  }
+  h4 {
+    margin: 0 0 4px 0;
+    font-size: 12px;
+  }
+  h5, h6 {
+    margin: 0 0 3px 0;
+    font-size: 10px;
+  }
+  p {
+    color: #666;
+    font-size: 14px;
+  }
+
+  h1:last-child,
+  h2:last-child,
+  h3:last-child,
+  h4:last-child,
+  h5:last-child,
+  h6:last-child,
+  p:last-child {
+    margin-bottom: 0;
+  }
 
   // Align badges within list items
   .badge {
     float: right;
   }
-
   .badge + .badge {
     margin-right: 5px;
   }
@@ -46,6 +80,14 @@
   &.item-dark { @include item-style-active($brand-dark, $gray-dark, $white); }
 }
 
+// Handle text overflow
+.item,
+.item-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 // Linked list items
 a.item {
   color: $gray-dark;
@@ -59,10 +101,12 @@ a.item {
 }
 
 
-// List Item Content
+// Slidable Item Content
 // -------------------------------
-
-.item-content {
+.item-slider {
+  padding: 0;
+}
+.item-slider .item-content {
   /**
    * The content area of a complex list item. This area can
    * Slide left and right and be dragged to support different
@@ -71,60 +115,33 @@ a.item {
   position: relative;
 
   z-index: 2;
-  overflow: hidden;
   padding: $item-padding (($item-padding * 3) - 5) $item-padding $item-padding;
 
   border: none;
-  background-color: #fff;
+  background-color: $list-default-background;
   box-shadow: $item-box-shadow;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: $list-font-size;
 
   -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
-
-  h2 {
-    margin: 0 0 4px 0;
-    font-size: 16px;
-  }
-  h3 {
-    margin: 0 0 4px 0;
-    font-size: 14px;
-  }
-  h3 {
-    margin: 0 0 4px 0;
-    font-size: 12px;
-  }
-  h4, h5, h6 {
-    margin: 0 0 3px 0;
-    font-size: 10px;
-  }
-  p {
-    color: #666;
-    font-size: 14px;
-  }
-
-  h1:last-child,
-  h2:last-child,
-  h3:last-child,
-  h4:last-child,
-  h5:last-child,
-  h6:last-child,
-  p:last-child {
-    margin-bottom: 0;
-  }
 }
 
 .item-text-wrap {
   overflow: auto;
   white-space: normal;
 }
+.item-slider.item-text-wrap {
+  overflow: hidden;
+  white-space: nowrap;
+  .item-content {
+    overflow: auto;
+    white-space: normal;   
+  }
+}
 
 
 // List Icons
 // -------------------------------
 
-.item-content i {
+.item i {
   @include display-flex();
   @include align-items(center);
   position: absolute;
@@ -133,28 +150,38 @@ a.item {
   font-size: $item-icon-font-size;
 }
 
-.item-content .fill-icon {
+.item .fill-icon {
   font-size: $item-icon-fill-font-size;
 }
 
-.item-icon-left .item-content {
+.item-icon-left {
   padding-left: ($item-padding * 3);
 
   i {
     left: $item-padding / 2;
   }
 }
+.item-slider.item-icon-left {
+  padding-left: 0;
 
-.item-icon-right .item-content i {
+  .item-content {
+    padding-left: ($item-padding * 3);
+  }
+}
+
+.item-icon-right i {
   right: $item-padding / 2;
 }
 
-.item-icon-left.item-icon-right .item-content i:last-child {
+.item-icon-left.item-icon-right i:first-child {
+  right: auto;
+}
+.item-icon-left.item-icon-right i:last-child {
   left: auto;
 }
 
-a .item-content:after,
-button .item-content:after {
+a.item:after,
+button.item:after {
   /* By default, both <a> and <button> have right side arrow icons */
   @include display-flex();
   @include align-items(center);
@@ -176,10 +203,27 @@ button .item-content:after {
 }
 
 // do not show the default right arrow when they want their own right side icon
-a.item-icon-right,
-button.item-icon-right {
-  .item-content:after {
-    display: none;
+a.item-icon-right:after,
+button.item-icon-right:after {
+  display: none;
+}
+
+
+// Item Avitar
+// -------------------------------
+
+.item-avitar {
+  padding-left: $item-avitar-width + ($item-padding * 2);
+  min-height: $item-avitar-width + ($item-padding * 2);
+
+  img:first-child, .item-img {
+    position: absolute;
+    top: $item-padding;
+    left: $item-padding;
+    max-width: $item-avitar-width;
+    max-height: $item-avitar-height;
+    width: 100%;
+    border-radius: 4px;
   }
 }
 
@@ -187,31 +231,30 @@ button.item-icon-right {
 // Item Thumbnails
 // -------------------------------
 
-.item-thumbnail .item-content {
-  padding-left: $item-thumbnail-width + ($item-padding * 2);
-  min-height: $item-thumbnail-width + ($item-padding * 2);
+.item-thumbnail-left {
+  padding-left: $item-thumbnail-width + $item-padding;
+  min-height: $item-thumbnail-height;
 
-  img:first-child, .item-img {
-    position: absolute;
-    top: $item-padding;
-    left: $item-padding;
-    max-width: $item-thumbnail-width;
-    max-height: $item-thumbnail-height;
-    width: 100%;
-    border-radius: 4px;
-  }
-}
-
-.item-thumbnail-lrg .item-content {
-  padding-left: $item-thumbnail-lrg-width + $item-padding;
-  min-height: $item-thumbnail-lrg-height;
-
-  img:first-child, .item-img {
+  img:first-child, .item-image {
     position: absolute;
     top: 0;
     left: 0;
-    max-width: $item-thumbnail-lrg-width;
-    max-height: $item-thumbnail-lrg-height;
+    max-width: $item-thumbnail-width;
+    max-height: $item-thumbnail-height;
+    width: 100%;
+  }
+}
+
+.item-thumbnail-right {
+  padding-right: $item-thumbnail-width + $item-padding;
+  min-height: $item-thumbnail-height;
+
+  img:first-child, .item-image {
+    position: absolute;
+    top: 0;
+    right: 0;
+    max-width: $item-thumbnail-width;
+    max-height: $item-thumbnail-height;
     width: 100%;
   }
 }
@@ -220,13 +263,13 @@ button.item-icon-right {
 // Item Image
 // -------------------------------
 
-.item-image .item-content {
+.item-image {
   padding: 0;
   text-align: center;
   
   img:first-child, .list-img {
-    vertical-align: middle;
     width: 100%;
+    vertical-align: middle;
   }
 }
 
@@ -234,7 +277,7 @@ button.item-icon-right {
 // Item Body
 // -------------------------------
 
-.item-body .item-content {
+.item-body {
   overflow: auto;
   padding: $item-padding;
   text-overflow: inherit;
@@ -339,7 +382,7 @@ button.item-icon-right {
  * The hidden right-side buttons that can be exposed under a list item
  * with dragging.
  */
-.item-buttons {
+.item-options {
   position: absolute;
   top: 0;
   right: 0;
diff --git a/scss/ionic/_list.scss b/scss/ionic/_list.scss
index 3da616695f..9aff44bdd1 100644
--- a/scss/ionic/_list.scss
+++ b/scss/ionic/_list.scss
@@ -79,6 +79,8 @@
 }
 
 .card {
+  padding-top: $item-border-width;
+  padding-bottom: $item-border-width;
   box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
 }
 
@@ -86,11 +88,8 @@
 .list-inset .item,
 .padding > .list .item
 {
-  margin-left: 0;
-  margin-right: 0;
-
   &:first-child {
-    margin-top: 0;
+    //margin-top: 0;
     border-top-left-radius: $card-border-radius;
     border-top-right-radius: $card-border-radius;
 
@@ -100,7 +99,7 @@
     }
   }
   &:last-child {
-    margin-bottom: 0;
+    //margin-bottom: 0;
     border-bottom-left-radius: $card-border-radius;
     border-bottom-right-radius: $card-border-radius;
 
@@ -111,21 +110,26 @@
   }
 }
 
-.card.list .item:last-child, 
+.card .item:last-child, 
 .list-inset .item:last-child {
   margin-bottom: $item-border-width * -1;
 }
 
-.card.list .item-divider,
+.card .item,
+.card .item-divider,
 .list-inset .item-divider,
 .padding > .list .item,
-.padding-horizontal > .list .item {
-  margin-right: 0;
+.padding-horizontal > .list .item,
+.padding > .list .item-divider,
+.padding-horizontal > .list .item-divider {
   margin-left: 0;
-}
-.padding-left > .list .item {
-  margin-left: 0;
-}
-.padding-right > .list .item {
+  margin-right: 0;
+}
+.padding-left > .list .item,
+.padding-left > .list .item-divider {
+  margin-left: 0;
+}
+.padding-right > .list .item,
+.padding-right > .list .item-divider {
   margin-right: 0;
 }
diff --git a/scss/ionic/_variables.scss b/scss/ionic/_variables.scss
index d0ad74ace5..b0a74a5216 100644
--- a/scss/ionic/_variables.scss
+++ b/scss/ionic/_variables.scss
@@ -394,11 +394,11 @@ $item-divider-padding:         5px 15px;
 $item-icon-font-size:          32px !default;
 $item-icon-fill-font-size:     28px !default;
 
-$item-thumbnail-width:         40px !default;
-$item-thumbnail-height:        40px !default;
+$item-avitar-width:            40px !default;
+$item-avitar-height:           40px !default;
 
-$item-thumbnail-lrg-width:     80px !default;
-$item-thumbnail-lrg-height:    80px !default;
+$item-thumbnail-width:         80px !default;
+$item-thumbnail-height:        80px !default;
 
 
 // Icons
diff --git a/test/cards.html b/test/cards.html
index eb4fb42667..f069875204 100644
--- a/test/cards.html
+++ b/test/cards.html
@@ -18,28 +18,28 @@
       <main class="content has-header">
         
         <div class="card">
-          <div class="item item-content item-text-wrap">
+          <div class="item item-text-wrap">
             This is a basic Card with some text.
           </div>
         </div>
         
         <div class="card">
-          <div class="item item-divider">
+          <div class="item-divider">
             I'm a Header in a Card!
           </div>
-          <div class="item item-content item-text-wrap">
+          <div class="item item-text-wrap">
             This is a basic Card with some text.
           </div>
         </div>
         
         <div class="card">
-          <div class="item item-divider">
+          <div class="item-divider">
             I'm a Header in a Card!
           </div>
-          <div class="item item-content item-text-wrap">
+          <div class="item item-text-wrap">
             This is a basic Card with some text.
           </div>
-          <div class="item item-divider">
+          <div class="item-divider">
             I'm a Footer in a Card!
           </div>
         </div>
@@ -47,83 +47,65 @@
         <div class="list card">
 
           <a href="#" class="item item-icon-left">
-            <div class="item-content">
-              <i class="icon-home"></i>
-              Enter home address
-            </div>
+            <i class="icon-home"></i>
+            Enter home address
           </a>
 
           <a href="#" class="item item-icon-left">
-            <div class="item-content">
-              <i class="icon-ios7-telephone"></i>
-              Enter phone number
-            </div>
+            <i class="icon-ios7-telephone"></i>
+            Enter phone number
           </a>
 
           <a href="#" class="item item-icon-left">
-            <div class="item-content">
-              <i class="icon-wifi"></i>
-              Enter wireless password
-            </div>
+            <i class="icon-wifi"></i>
+            Enter wireless password
           </a>
 
           <a href="#" class="item item-icon-left">
-            <div class="item-content">
-              <i class="icon-card"></i>
-              Enter card information
-            </div>
+            <i class="icon-card"></i>
+            Enter card information
           </a>
 
         </div>
 
         <div class="list card">
 
-          <div class="item item-thumbnail">
-            <div class="item-content">
-              <img src="http://tutupash.com/site/assets/nin_logo.jpeg">
-              <h2>Pretty Hate Machine</h2>
-              <p>Nine Inch Nails</p>
-            </div>
+          <div class="item item-avitar">
+            <img src="http://tutupash.com/site/assets/nin_logo.jpeg">
+            <h2>Pretty Hate Machine</h2>
+            <p>Nine Inch Nails</p>
           </div>
 
           <div class="item item-image">
-            <div class="item-content">
-              <img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
-            </div>
+            <img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
           </div>
 
           <a href="#" class="item item-icon-left">
-            <div class="item-content">
-              <i class="icon-music-note"></i>
-              Start listening
-            </div>
+            <i class="icon-music-note"></i>
+            Start listening
           </a>
 
         </div>
 
         <div class="list card">
 
-          <div class="item item-thumbnail">
-            <div class="item-content">
-              <img src="http://mimg.ugo.com/201001/34590/cuts/marty-mcfly_288x288.jpg">
-              <h2>Marty McFly</h2>
-              <p>November 05, 1955</p>
-            </div>
+          <div class="item item-avitar">
+            <img src="http://mimg.ugo.com/201001/34590/cuts/marty-mcfly_288x288.jpg">
+            <h2>Marty McFly</h2>
+            <p>November 05, 1955</p>
           </div>
 
           <div class="item item-body">
-            <div class="item-content">
-              <img class="full-image" src="http://paulaubin.com/wp/wp-content/uploads/2012/05/back-to-the-future-delorean.jpg">
-              <p>
-                This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
-                the content is from a card-body consisting of an image and paragraph text. The footer
-                consists of a Tab Bar, icons aligned left, within the card-footer.
-              </p>
-              <p>
-                <a href="#" class="subdued‎">1 Like</a>
-                <a href="#" class="subdued‎">5 Comments</a>
-              </p>
-            </div>
+            <img class="full-image" src="http://paulaubin.com/wp/wp-content/uploads/2012/05/back-to-the-future-delorean.jpg">
+            <p>
+              This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
+              the content is from a card-body consisting of an image and paragraph text. The footer
+              consists of a Tab Bar, icons aligned left, within the card-footer.
+            </p>
+            <p>
+              <a href="#" class="subdued‎">1 Like</a>
+              <a href="#" class="subdued‎">5 Comments</a>
+            </p>
           </div>
 
           <div class="item item-divider">
@@ -132,9 +114,8 @@
 
         </div>
 
-        <hr>
-
         <p><a class="button button-secondary" href="index.html">Homepage</a></p>
+
       </main>
 
     </section>
diff --git a/test/lists.html b/test/lists.html
index 95f79284b1..8fb3d270a0 100644
--- a/test/lists.html
+++ b/test/lists.html
@@ -10,7 +10,7 @@
   <body>
 
     <header class="bar bar-header bar-dark">
-      <h1 class="title">Customers</h1>
+      <h1 class="title">Lists</h1>
     </header>
 
     <main class="content-wrapper">
@@ -23,41 +23,51 @@
           </div>
 
           <a href="#" class="item item-icon-left">
-            <div class="item-content">
-              <i class="icon-email"></i>
-              Check mail
-              <span class="badge badge-info">5</span>
-            </div>
+            <i class="icon-email"></i>
+            Check mail
           </a>
 
           <a href="#" class="item item-icon-left">
-            <div class="item-content">
-              <i class="icon-chatbubble-working"></i>
-              Call Ma
-              <span class="item-label-right">
-                Cell
-              </span>
-            </div>
+            <i class="icon-chatbubble-working"></i>
+            Call Ma
+          </a>
+
+        </div>
+
+        <div class="list">
+
+          <div class="item-divider">
+            Work
+          </div>
+
+          <a href="#" class="item item-icon-left">
+            <i class="icon-email"></i>
+            Check mail
+            <span class="badge badge-info">5</span>
           </a>
 
           <a href="#" class="item item-icon-left">
-            <div class="item-content">
-              <i class="icon-mic-a"></i>
-              Record album
-              <span class="item-label-right">
-                Grammy
-              </span>
-            </div>
+            <i class="icon-chatbubble-working"></i>
+            Call Ma
+            <span class="item-label-right">
+              Cell
+            </span>
           </a>
 
           <a href="#" class="item item-icon-left">
-            <div class="item-content">
-              <i class="icon-flask"></i>
-              Breaking Bad
-              <span class="item-label-right">
-                Blue, yellow, pink
-              </span>
-            </div>
+            <i class="icon-mic-a"></i>
+            Record album
+            <span class="item-label-right">
+              Grammy
+            </span>
+          </a>
+
+          <a href="#" class="item item-icon-left">
+            <i class="icon-flask"></i>
+            Breaking Bad
+            <span class="item-label-right">
+              Blue, yellow, pink
+            </span>
           </a>
 
           <div class="item-divider">
@@ -65,41 +75,33 @@
           </div>
 
           <a href="#" class="item item-icon-left">
-            <div class="item-content">
-              <i class="icon-game-controller-b"></i>
-              Games
-              <span class="item-label-right">
-                Super Mario
-              </span>
-            </div>
+            <i class="icon-game-controller-b"></i>
+            Games
+            <span class="item-label-right">
+              Super Mario
+            </span>
           </a>
 
           <a href="#" class="item item-icon-left">
-            <div class="item-content">
-              <i class="icon-music-note"></i>
-              Music
-              <span class="item-label-right">
-                JT
-              </span>
-            </div>
+            <i class="icon-music-note"></i>
+            Music
+            <span class="item-label-right">
+              JT
+            </span>
           </a>
 
           <a href="#" class="item item-icon-left">
-            <div class="item-content">
-              <i class="icon-bag"></i>
-              Shopping
-              <span class="item-label-right">
-                Bag
-              </span>
-            </div>
+            <i class="icon-bag"></i>
+            Shopping
+            <span class="item-label-right">
+              Bag
+            </span>
           </a>
 
           <a href="#" class="item item-icon-left">
-            <div class="item-content">
-              <i class="icon-person-stalker"></i>
-              Friends
-              <span class="badge badge-danger">0</span>
-            </div>
+            <i class="icon-person-stalker"></i>
+            Friends
+            <span class="badge badge-danger">0</span>
           </a>
 
         </div>
@@ -111,9 +113,7 @@
           </div>
 
           <div href="#" class="item">
-            <div class="item-content">
-              Not a link so no default right arrow
-            </div>
+            Not a link so no default right arrow
           </div>
 
           <a href="#" class="item">
@@ -133,34 +133,34 @@
             List Divider
           </div>
 
-          <a href="#" class="item">
+          <a href="#" class="item item-slider">
             <div class="item-content slide-left">
               Computers
               <span class="badge">Badge</span>
             </div>
-            <div class="item-buttons">
+            <div class="item-options">
              <button class="button">Button</button>
            </div>
           </a>
 
-          <a href="#" class="item">
+          <a href="#" class="item item-slider">
             <div class="item-content slide-left">
               Monitors
               <span class="badge">6</span>
             </div>
-            <div class="item-buttons">
+            <div class="item-options">
              <button class="button">Button</button>
            </div>
           </a>
 
-          <a href="#" class="item">
+          <a href="#" class="item item-slider">
             <div class="item-content slide-left">
               Multiple Badges
               <span class="badge">62</span>
               <span class="badge">4</span>
               <span class="badge">143</span>
             </div>
-            <div class="item-buttons">
+            <div class="item-options">
              <button class="button">Button</button>
            </div>
           </a>
@@ -168,50 +168,52 @@
         </div>
 
         <h3>List with padding</h3>
-        <div class="list padding">
+        <div class="padding">
+          <div class="list">
 
-          <a href="#" class="item">
-            <div class="item-content slide-right">
-              Madison, WI
+            <a href="#" class="item item-slider">
+              <div class="item-content slide-right">
+                Madison, WI
+              </div>
+            </a>
+
+            <div class="item-divider">
+              List Divider
             </div>
-          </a>
 
-          <div class="item-divider">
-            List Divider
+            <a href="#" class="item item-slider">
+              <div class="item-content slide-left">
+                Driving Directions
+              </div>
+              <div class="item-options">
+               <button class="button">Button</button>
+             </div>
+            </a>
+
+            <a href="#" class="item item-slider">
+              <div class="item-content">
+                Computers
+                <span class="badge">3</span>
+              </div>
+            </a>
+
           </div>
-
-          <a href="#" class="item">
-            <div class="item-content slide-left">
-              Driving Directions
-            </div>
-            <div class="item-buttons">
-             <button class="button">Button</button>
-           </div>
-          </a>
-
-          <a href="#" class="item">
-            <div class="item-content">
-              Computers
-              <span class="badge">3</span>
-            </div>
-          </a>
-
         </div>
 
         <h3>List with card</h3>
         <div class="list card">
 
-          <a href="#" class="item">
+          <a href="#" class="item item-slider">
             <div class="item-content slide-right">
               Madison, WI
             </div>
           </a>
 
-          <a href="#" class="item">
+          <a href="#" class="item item-slider">
             <div class="item-content slide-left">
               Driving Directions
             </div>
-            <div class="item-buttons">
+            <div class="item-options">
              <button class="button">Button</button>
            </div>
           </a>
@@ -229,37 +231,33 @@
 
         </div>
 
-        <div class="list padding-bottom">
+        <div class="list">
+
+          <div class="item-divider">
+            Without .item-content
+          </div>
 
           <a href="#" class="item item-icon-left">
-            <div class="item-content slide-left">
-              <i class="icon-heart brand-danger"></i>
-              Madison, WI
-            </div>
-            <div class="item-buttons">
-             <button class="button">Button</button>
-           </div>
+            <i class="icon-heart brand-danger"></i>
+            Madison, WI
           </a>
 
           <a href="#" class="item item-icon-left">
-            <div class="item-content slide-right">
-              <i class="icon-image brand-warning"></i>
-              Driving Directions
-            </div>
+            <i class="icon-image brand-warning"></i>
+            Driving Directions
           </a>
 
-          <a href="#" class="item item-icon-left">
-            <div class="item-content">
-              <i class="icon-ios7-cog gray"></i>
-              Settings
-            </div>
+          <a href="#" class="item item-icon-left item-icon-right">
+            <i class="icon-ios7-cog gray"></i>
+            Settings
+            <i class="icon-ios7-information-outline"></i>
           </a>
 
         </div>
 
-        <div class="list padding-bottom">
+        <div class="list">
 
-          <a href="#" class="item item-icon-left item-icon-right">
+          <a href="#" class="item item-icon-left item-icon-right item-slider">
             <div class="item-content">
               <i class="icon-heart brand-danger fill-icon"></i>
               Madison, WI
@@ -267,18 +265,18 @@
             </div>
           </a>
 
-          <a href="#" class="item item-icon-left item-icon-right">
+          <a href="#" class="item item-icon-left item-icon-right item-slider">
             <div class="item-content slide-left">
               <i class="icon-image brand-warning fill-icon"></i>
               Driving Directions
               <i class="icon-chevron-right"></i>
             </div>
-            <div class="item-buttons">
+            <div class="item-options">
              <button class="button">Button</button>
            </div>
           </a>
 
-          <a href="#" class="item item-icon-left item-icon-right">
+          <a href="#" class="item item-icon-left item-icon-right item-slider">
             <div class="item-content slide-right">
               <i class="icon-ios7-cog gray fill-icon"></i>
               Settings
@@ -288,7 +286,7 @@
 
         </div>
 
-        <div class="list padding">
+        <div class="list">
 
           <div class="list-header">
             Me List Header
@@ -313,27 +311,43 @@
           </div>
 
           <a href="#" class="item item-icon-left item-icon-right">
+            <i class="icon-ios7-cog gray fill-icon"></i>
+            Default has no wrap! This is a list item with really really really really really
+            really really really really long long long long long long
+            text text text texxxxxttt text testy text!!!
+            <i class="icon-chevron-right"></i>
+          </a>
+
+          <a href="#" class="item item-icon-left item-icon-right item-text-wrap">
+            <i class="icon-ios7-cog gray fill-icon"></i>
+            Assigned "item-text-wrap". This is a list item with really really really really really
+            really really really really long long long long long long
+            text text text texxxxxttt text testy text!!!
+            <i class="icon-chevron-right"></i>
+          </a>
+
+          <a href="#" class="item item-icon-left item-icon-right item-slider">
             <div class="item-content slide-left slide-right">
               <i class="icon-ios7-cog gray fill-icon"></i>
-              Default has no wrap! This is a list item with really really really really really
+              Default no wrap and has item-content! This is a list item with really really really really really
               really really really really long long long long long long
               text text text texxxxxttt text testy text!!!
               <i class="icon-chevron-right"></i>
             </div>
-            <div class="item-buttons">
+            <div class="item-options">
              <button class="button">Button</button>
            </div>
           </a>
 
-          <a href="#" class="item item-icon-left item-icon-right">
-            <div class="item-content item-text-wrap slide-left slide-right">
+          <a href="#" class="item item-icon-left item-icon-right item-text-wrap item-slider">
+            <div class="item-content slide-left slide-right">
               <i class="icon-ios7-cog gray fill-icon"></i>
-              Assigned "item-text-wrap". This is a list item with really really really really really
+              Assigned "item-text-wrap" and has item-content. This is a list item with really really really really really
               really really really really long long long long long long
               text text text texxxxxttt text testy text!!!
               <i class="icon-chevron-right"></i>
             </div>
-            <div class="item-buttons">
+            <div class="item-options">
              <button class="button">Button</button>
            </div>
           </a>
@@ -348,7 +362,7 @@
         <h3>Thumbnails .item-thumbnail</h3>
         <div class="list">
 
-          <a href="#" class="item item-thumbnail">
+          <a href="#" class="item item-avitar">
             <div class="item-content">
               <img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
               <h2>Pretty Hate Machine</h2>
@@ -356,7 +370,7 @@
             </div>
           </a>
 
-          <a href="#" class="item item-thumbnail">
+          <a href="#" class="item item-avitar">
             <div class="item-content">
               <img src="http://ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg">
               <h2>Nevermind</h2>
@@ -364,7 +378,7 @@
             </div>
           </a>
 
-          <a href="#" class="item item-thumbnail">
+          <a href="#" class="item item-avitar">
             <div class="item-content">
               <img src="http://ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
               <h2>License To Ill</h2>
@@ -372,7 +386,7 @@
             </div>
           </a>
 
-          <a href="#" class="item item-thumbnail">
+          <a href="#" class="item item-avitar">
             <div class="item-content">
               <img src="http://ecx.images-amazon.com/images/I/61e6mUocZNL.jpg">
               <h2>Dookie</h2>
@@ -382,10 +396,10 @@
 
         </div>
 
-        <h3>Large Thumbnails .item-thumbnail-lrg</h3>
+        <h3>Large Thumbnails .item-thumbnail-left and .item-thumbnail-right</h3>
         <div class="list">
 
-          <a href="#" class="item item-thumbnail-lrg">
+          <a href="#" class="item item-thumbnail-left">
             <div class="item-content">
               <img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
               <h2>Pretty Hate Machine</h2>
@@ -393,7 +407,7 @@
             </div>
           </a>
 
-          <a href="#" class="item item-thumbnail-lrg">
+          <a href="#" class="item item-thumbnail-left">
             <div class="item-content">
               <img src="http://ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg">
               <h2>Nevermind</h2>
@@ -401,7 +415,7 @@
             </div>
           </a>
 
-          <a href="#" class="item item-thumbnail-lrg">
+          <a href="#" class="item item-thumbnail-right">
             <div class="item-content">
               <img src="http://ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
               <h2>License To Ill</h2>
@@ -409,7 +423,7 @@
             </div>
           </a>
 
-          <a href="#" class="item item-thumbnail-lrg">
+          <a href="#" class="item item-thumbnail-right">
             <div class="item-content">
               <img src="http://ecx.images-amazon.com/images/I/61e6mUocZNL.jpg">
               <h2>Dookie</h2>