diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css
index 72bc1a2467..9fda294c21 100644
--- a/dist/css/ionic-ios7.css
+++ b/dist/css/ionic-ios7.css
@@ -952,15 +952,7 @@ address {
   .modal.active {
     height: 100%; }
 
-.list {
-  position: relative;
-  overflow: hidden;
-  margin-bottom: 20px;
-  padding-top: 1px;
-  padding-bottom: 1px;
-  padding-left: 0; }
-
-.list-item {
+.item {
   position: relative;
   z-index: 2;
   display: block;
@@ -968,137 +960,126 @@ address {
   border: none;
   background-color: white;
   box-shadow: inset 0 0 1px #666666; }
-  .list-item .badge {
+  .item .badge {
     float: right; }
-  .list-item .badge + .badge {
+  .item .badge + .badge {
     margin-right: 5px; }
-  .list-item.active, .list-item.active:hover, .list-item.active:focus {
+  .item.active, .item.active:hover, .item.active:focus {
     z-index: 2; }
-    .list-item.active .list-item-heading, .list-item.active:hover .list-item-heading, .list-item.active:focus .list-item-heading {
+    .item.active .item-heading, .item.active:hover .item-heading, .item.active:focus .item-heading {
       color: inherit; }
-  .list-item.list-item-default {
+  .item.item-default {
     /*
     color: $color;
     background-color: $bgColor;
     border-color: $borderColor;
     */ }
-    .list-item.list-item-default.active, .list-item.list-item-default:active {
+    .item.item-default.active, .item.item-default:active {
       color: #333333;
       background-color: white;
       border-color: #333333; }
-      .list-item.list-item-default.active .list-item-content, .list-item.list-item-default:active .list-item-content {
+      .item.item-default.active .list-item-content, .item.item-default:active .list-item-content {
         background-color: white;
         color: #333333; }
-  .list-item.list-item-secondary {
+  .item.item-secondary {
     /*
     color: $color;
     background-color: $bgColor;
     border-color: $borderColor;
     */ }
-    .list-item.list-item-secondary.active, .list-item.list-item-secondary:active {
+    .item.item-secondary.active, .item.item-secondary:active {
       color: #333333;
       background-color: white;
       border-color: #333333; }
-      .list-item.list-item-secondary.active .list-item-content, .list-item.list-item-secondary:active .list-item-content {
+      .item.item-secondary.active .list-item-content, .item.item-secondary:active .list-item-content {
         background-color: white;
         color: #333333; }
-  .list-item.list-item-primary {
+  .item.item-primary {
     /*
     color: $color;
     background-color: $bgColor;
     border-color: $borderColor;
     */ }
-    .list-item.list-item-primary.active, .list-item.list-item-primary:active {
+    .item.item-primary.active, .item.item-primary:active {
       color: white;
       background-color: #4a87ee;
       border-color: #333333; }
-      .list-item.list-item-primary.active .list-item-content, .list-item.list-item-primary:active .list-item-content {
+      .item.item-primary.active .list-item-content, .item.item-primary:active .list-item-content {
         background-color: #4a87ee;
         color: white; }
-  .list-item.list-item-info {
+  .item.item-info {
     /*
     color: $color;
     background-color: $bgColor;
     border-color: $borderColor;
     */ }
-    .list-item.list-item-info.active, .list-item.list-item-info:active {
+    .item.item-info.active, .item.item-info:active {
       color: white;
       background-color: #43cee6;
       border-color: #333333; }
-      .list-item.list-item-info.active .list-item-content, .list-item.list-item-info:active .list-item-content {
+      .item.item-info.active .list-item-content, .item.item-info:active .list-item-content {
         background-color: #43cee6;
         color: white; }
-  .list-item.list-item-success {
+  .item.item-success {
     /*
     color: $color;
     background-color: $bgColor;
     border-color: $borderColor;
     */ }
-    .list-item.list-item-success.active, .list-item.list-item-success:active {
+    .item.item-success.active, .item.item-success:active {
       color: white;
       background-color: #66cc33;
       border-color: #333333; }
-      .list-item.list-item-success.active .list-item-content, .list-item.list-item-success:active .list-item-content {
+      .item.item-success.active .list-item-content, .item.item-success:active .list-item-content {
         background-color: #66cc33;
         color: white; }
-  .list-item.list-item-warning {
+  .item.item-warning {
     /*
     color: $color;
     background-color: $bgColor;
     border-color: $borderColor;
     */ }
-    .list-item.list-item-warning.active, .list-item.list-item-warning:active {
+    .item.item-warning.active, .item.item-warning:active {
       color: white;
       background-color: #f0b840;
       border-color: #333333; }
-      .list-item.list-item-warning.active .list-item-content, .list-item.list-item-warning:active .list-item-content {
+      .item.item-warning.active .list-item-content, .item.item-warning:active .list-item-content {
         background-color: #f0b840;
         color: white; }
-  .list-item.list-item-danger {
+  .item.item-danger {
     /*
     color: $color;
     background-color: $bgColor;
     border-color: $borderColor;
     */ }
-    .list-item.list-item-danger.active, .list-item.list-item-danger:active {
+    .item.item-danger.active, .item.item-danger:active {
       color: white;
       background-color: #ef4e3a;
       border-color: #333333; }
-      .list-item.list-item-danger.active .list-item-content, .list-item.list-item-danger:active .list-item-content {
+      .item.item-danger.active .list-item-content, .item.item-danger:active .list-item-content {
         background-color: #ef4e3a;
         color: white; }
-  .list-item.list-item-dark {
+  .item.item-dark {
     /*
     color: $color;
     background-color: $bgColor;
     border-color: $borderColor;
     */ }
-    .list-item.list-item-dark.active, .list-item.list-item-dark:active {
+    .item.item-dark.active, .item.item-dark:active {
       color: white;
       background-color: #444444;
       border-color: #333333; }
-      .list-item.list-item-dark.active .list-item-content, .list-item.list-item-dark:active .list-item-content {
+      .item.item-dark.active .list-item-content, .item.item-dark:active .list-item-content {
         background-color: #444444;
         color: white; }
 
-a.list-item {
+a.item {
   color: #333333;
   text-decoration: none; }
-  a.list-item:hover, a.list-item:focus {
+  a.item:hover, a.item:focus {
     text-decoration: none; }
 
-/**
- * List editing styles. These trigger when the entire list goes into
- * "edit mode"
- */
-.list-editing .list-item-content {
-  margin-right: 30px;
-  margin-left: 30px; }
-.list-editing .list-item-edit {
-  left: 0px;
-  opacity: 1; }
-
-.list-item-content {
+.item-content {
   /**
    * The content area of a complex list item. This area can
    * Slide left and right and be dragged to support different
@@ -1115,35 +1096,35 @@ a.list-item {
   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; }
-  .list-item-content h2 {
+  .item-content h2 {
     margin: 0 0 4px 0;
     font-size: 16px; }
-  .list-item-content h3 {
+  .item-content h3 {
     margin: 0 0 4px 0;
     font-size: 14px; }
-  .list-item-content h3 {
+  .item-content h3 {
     margin: 0 0 4px 0;
     font-size: 12px; }
-  .list-item-content h4, .list-item-content h5, .list-item-content h6 {
+  .item-content h4, .item-content h5, .item-content h6 {
     margin: 0 0 3px 0;
     font-size: 10px; }
-  .list-item-content p {
+  .item-content p {
     color: #666;
     font-size: 14px; }
-  .list-item-content h1:last-child,
-  .list-item-content h2:last-child,
-  .list-item-content h3:last-child,
-  .list-item-content h4:last-child,
-  .list-item-content h5:last-child,
-  .list-item-content h6:last-child,
-  .list-item-content p:last-child {
+  .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; }
 
-.list-item-text-wrap {
+.item-text-wrap {
   overflow: auto;
   white-space: normal; }
 
-.list-item-content i {
+.item-content i {
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-flex;
@@ -1159,19 +1140,19 @@ a.list-item {
   height: 100%;
   font-size: 28px; }
 
-.list-icon-left .list-item-content {
+.item-icon-left .item-content {
   padding-left: 45px; }
-  .list-icon-left .list-item-content i {
+  .item-icon-left .item-content i {
     left: 7.5px; }
 
-.list-icon-right .list-item-content i {
+.item-icon-right .item-content i {
   right: 7.5px; }
 
-.list-icon-left.list-icon-right .list-item-content i:last-child {
+.item-icon-left.item-icon-right .item-content i:last-child {
   left: auto; }
 
-a .list-item-content:after,
-button .list-item-content:after {
+a .item-content:after,
+button .item-content:after {
   /* By default, both <a> and <button> have right side arrow icons */
   display: -webkit-box;
   display: -webkit-flex;
@@ -1199,14 +1180,14 @@ button .list-item-content:after {
   speak: none;
   -webkit-font-smoothing: antialiased; }
 
-a.list-icon-right .list-item-content:after,
-button.list-icon-right .list-item-content:after {
+a.item-icon-right .item-content:after,
+button.item-icon-right .item-content:after {
   display: none; }
 
-.list-item-thumbnail .list-item-content {
+.item-thumbnail .item-content {
   padding-left: 70px;
   min-height: 70px; }
-  .list-item-thumbnail .list-item-content img:first-child, .list-item-thumbnail .list-item-content .list-img {
+  .item-thumbnail .item-content img:first-child, .item-thumbnail .item-content .item-img {
     position: absolute;
     top: 15px;
     left: 15px;
@@ -1215,10 +1196,10 @@ button.list-icon-right .list-item-content:after {
     width: 100%;
     border-radius: 4px; }
 
-.list-item-thumbnail-lrg .list-item-content {
+.item-thumbnail-lrg .item-content {
   padding-left: 95px;
   min-height: 80px; }
-  .list-item-thumbnail-lrg .list-item-content img:first-child, .list-item-thumbnail-lrg .list-item-content .list-img {
+  .item-thumbnail-lrg .item-content img:first-child, .item-thumbnail-lrg .item-content .item-img {
     position: absolute;
     top: 0;
     left: 0;
@@ -1226,20 +1207,13 @@ button.list-icon-right .list-item-content:after {
     max-height: 80px;
     width: 100%; }
 
-.list-item-image .list-item-content {
+.item-image .item-content {
   text-align: center;
   padding: 0; }
-  .list-item-image .list-item-content img:first-child, .list-item-image .list-item-content .list-img {
+  .item-image .item-content img:first-child, .item-image .item-content .list-img {
     width: 100%; }
 
-.list-header {
-  margin-top: 20px;
-  padding: 5px 15px;
-  background-color: transparent;
-  color: #222222;
-  font-weight: bold; }
-
-.list-divider {
+.item-divider {
   margin: -1px;
   padding: 5px 15px;
   border: none;
@@ -1248,25 +1222,25 @@ button.list-icon-right .list-item-content:after {
   color: #222222;
   font-weight: bold; }
 
-.card.list .list-divider {
+.card.list .item-divider {
   margin-right: 0;
   margin-left: 0; }
 
-.list-item-sliding {
+.item-sliding {
   -webkit-transition: -webkit-transform 0.1s ease-in-out; }
 
-.list-item-reordering {
+.item-reordering {
   position: absolute;
   width: 100%; }
 
-.list-item-placeholder {
+.item-placeholder {
   opacity: 0.7; }
 
 /**
  * The left-side edit area of a complex list item. This area shows
  * whe the list item is in edit mode.
  */
-.list-item-edit {
+.item-edit {
   position: absolute;
   top: 0;
   left: -48px;
@@ -1276,33 +1250,33 @@ button.list-icon-right .list-item-content:after {
   line-height: 100%;
   opacity: 0;
   -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
-  .list-item-edit .button {
+  .item-edit .button {
     height: 100%; }
-  .list-item-edit i {
+  .item-edit i {
     color: #ef4e3a;
     font-size: 24px; }
-  .list-item-edit.ng-enter {
+  .item-edit.ng-enter {
     left: -48px;
     opacity: 0;
     -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
-  .list-item-edit.ng-enter-active {
+  .item-edit.ng-enter-active {
     left: 0;
     opacity: 1; }
-  .list-item-edit.ng-leave {
+  .item-edit.ng-leave {
     left: 0px;
     opacity: 1;
     -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
-  .list-item-edit.ng-leave-active {
+  .item-edit.ng-leave-active {
     left: -48px;
     opacity: 0; }
 
-.list-item-drag {
+.item-drag {
   position: absolute;
   top: 0;
   right: 0;
   z-index: 0;
   height: 100%; }
-  .list-item-drag .button {
+  .item-drag .button {
     height: 100%;
     border: none;
     border-radius: 0; }
@@ -1311,17 +1285,43 @@ button.list-icon-right .list-item-content:after {
  * The hidden right-side buttons that can be exposed under a list item
  * with dragging.
  */
-.list-item-buttons {
+.item-buttons {
   position: absolute;
   top: 0;
   right: 0;
   z-index: 1;
   height: 100%; }
-  .list-item-buttons .button {
+  .item-buttons .button {
     height: 100%;
     border: none;
     border-radius: 0; }
 
+.list {
+  position: relative;
+  overflow: hidden;
+  margin-bottom: 20px;
+  padding-top: 1px;
+  padding-bottom: 1px;
+  padding-left: 0; }
+
+/**
+ * List editing styles. These trigger when the entire list goes into
+ * "edit mode"
+ */
+.list-editing .item-content {
+  margin-right: 30px;
+  margin-left: 30px; }
+.list-editing .item-edit {
+  left: 0px;
+  opacity: 1; }
+
+.list-header {
+  margin-top: 20px;
+  padding: 5px 15px;
+  background-color: transparent;
+  color: #222222;
+  font-weight: bold; }
+
 .list-refresher {
   overflow: hidden;
   height: 0;
@@ -1336,6 +1336,45 @@ button.list-icon-right .list-item-content:after {
   color: #aaa;
   font-size: 14px; }
 
+.card {
+  overflow: hidden;
+  margin: 20px 10px;
+  border: none;
+  border-radius: 2px;
+  background-color: white;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
+
+.card-header {
+  padding: 10px;
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+  background-color: whitesmoke; }
+  .card-header.card-header-secondary {
+    background-color: whitesmoke; }
+  .card-header.card-header-primary {
+    background-color: #4a87ee; }
+  .card-header.card-header-info {
+    background-color: #43cee6; }
+  .card-header.card-header-success {
+    background-color: #66cc33; }
+  .card-header.card-header-warning {
+    background-color: #f0b840; }
+  .card-header.card-header-danger {
+    background-color: #ef4e3a; }
+  .card-header.card-header-dark {
+    background-color: #444444; }
+
+.card-body {
+  padding: 10px; }
+  .card-body h1, .card-body h2, .card-body h3, .card-body h4, .card-body h5, .card-body h6, .card-body p {
+    margin-top: 10px; }
+
+.card-footer {
+  padding: 10px;
+  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: 2px;
+  background-color: whitesmoke; }
+
 form {
   margin: 0 0 1.42857; }
 
@@ -1599,11 +1638,11 @@ input[type="checkbox"][readonly] {
     -webkit-transform: none;
     transition-delay: 0.05s, 0s; }
 
-.radio-buttton-list .list-item-content {
+.item-radio .item-content {
   /* give some room to the right for the checkmark icon */
   padding-right: 60px; }
 
-.radio-buttton-list .radio-button-icon {
+.item-radio .radio-icon {
   /* checkmark icon will be hidden by default */
   position: absolute;
   top: 0;
@@ -1614,13 +1653,13 @@ input[type="checkbox"][readonly] {
   height: 100%;
   font-size: 24px; }
 
-.radio-buttton-list input[type="radio"] {
+.item-radio input[type="radio"] {
   /* hide any radio button inputs elements (the ugly circles) */
   display: none; }
-  .radio-buttton-list input[type="radio"]:checked ~ .list-item-content {
-    /* style the list item content when its checked */
+  .item-radio input[type="radio"]:checked ~ .item-content {
+    /* style the item content when its checked */
     background: #f7f7f7; }
-  .radio-buttton-list input[type="radio"]:checked ~ .radio-button-icon {
+  .item-radio input[type="radio"]:checked ~ .radio-icon {
     /* show the checkmark icon when its checked */
     visibility: visible; }
 
@@ -2042,45 +2081,6 @@ a.button {
 .alert-info h4 {
   color: #3a87ad; }
 
-.card {
-  overflow: hidden;
-  margin: 20px 10px;
-  border: none;
-  border-radius: 2px;
-  background-color: white;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
-
-.card-header {
-  padding: 10px;
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
-  background-color: whitesmoke; }
-  .card-header.card-header-secondary {
-    background-color: whitesmoke; }
-  .card-header.card-header-primary {
-    background-color: #4a87ee; }
-  .card-header.card-header-info {
-    background-color: #43cee6; }
-  .card-header.card-header-success {
-    background-color: #66cc33; }
-  .card-header.card-header-warning {
-    background-color: #f0b840; }
-  .card-header.card-header-danger {
-    background-color: #ef4e3a; }
-  .card-header.card-header-dark {
-    background-color: #444444; }
-
-.card-body {
-  padding: 10px; }
-  .card-body h1, .card-body h2, .card-body h3, .card-body h4, .card-body h5, .card-body h6, .card-body p {
-    margin-top: 10px; }
-
-.card-footer {
-  padding: 10px;
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 2px;
-  background-color: whitesmoke; }
-
 .slide-in-up {
   opacity: 0;
   -webkit-transform: translate3d(0, 100%, 0);
diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css
index 46e52709bb..875a83e63d 100644
--- a/dist/css/ionic-scoped.css
+++ b/dist/css/ionic-scoped.css
@@ -149,10 +149,6 @@
   /**
    * Modals are independent windows that slide in from off-screen.
    */
-  /**
-   * List editing styles. These trigger when the entire list goes into
-   * "edit mode"
-   */
   /**
    * The left-side edit area of a complex list item. This area shows
    * whe the list item is in edit mode.
@@ -161,11 +157,15 @@
    * The hidden right-side buttons that can be exposed under a list item
    * with dragging.
    */
+  /**
+   * List editing styles. These trigger when the entire list goes into
+   * "edit mode"
+   */
   /* the checkmark within the box */
   /* what the background looks like when its checked */
   /* what the checkmark looks like when its checked */
-  /* make sure list item content have enough padding on left to fit the checkbox */
-  /* position the checkbox to the left within a list item */
+  /* make sure item content have enough padding on left to fit the checkbox */
+  /* position the checkbox to the left within an item */
   /* the overall container of the toggle */
   /* the handle (circle) thats inside the toggle's track area */
   /* also the appearance when the handle is "off" */
@@ -1677,14 +1677,7 @@
     background-color: white; }
     .ionic .modal.active {
       height: 100%; }
-  .ionic .list {
-    position: relative;
-    overflow: hidden;
-    margin-bottom: 20px;
-    padding-top: 1px;
-    padding-bottom: 1px;
-    padding-left: 0; }
-  .ionic .list-item {
+  .ionic .item {
     position: relative;
     z-index: 2;
     display: block;
@@ -1692,130 +1685,124 @@
     border: none;
     background-color: white;
     box-shadow: inset 0 0 1px #666666; }
-    .ionic .list-item .badge {
+    .ionic .item .badge {
       float: right; }
-    .ionic .list-item .badge + .badge {
+    .ionic .item .badge + .badge {
       margin-right: 5px; }
-    .ionic .list-item.active, .ionic .list-item.active:hover, .ionic .list-item.active:focus {
+    .ionic .item.active, .ionic .item.active:hover, .ionic .item.active:focus {
       z-index: 2; }
-      .ionic .list-item.active .list-item-heading, .ionic .list-item.active:hover .list-item-heading, .ionic .list-item.active:focus .list-item-heading {
+      .ionic .item.active .item-heading, .ionic .item.active:hover .item-heading, .ionic .item.active:focus .item-heading {
         color: inherit; }
-    .ionic .list-item.list-item-default {
+    .ionic .item.item-default {
       /*
       color: $color;
       background-color: $bgColor;
       border-color: $borderColor;
       */ }
-      .ionic .list-item.list-item-default.active, .ionic .list-item.list-item-default:active {
+      .ionic .item.item-default.active, .ionic .item.item-default:active {
         color: #333333;
         background-color: white;
         border-color: #333333; }
-        .ionic .list-item.list-item-default.active .list-item-content, .ionic .list-item.list-item-default:active .list-item-content {
+        .ionic .item.item-default.active .list-item-content, .ionic .item.item-default:active .list-item-content {
           background-color: white;
           color: #333333; }
-    .ionic .list-item.list-item-secondary {
+    .ionic .item.item-secondary {
       /*
       color: $color;
       background-color: $bgColor;
       border-color: $borderColor;
       */ }
-      .ionic .list-item.list-item-secondary.active, .ionic .list-item.list-item-secondary:active {
+      .ionic .item.item-secondary.active, .ionic .item.item-secondary:active {
         color: #333333;
         background-color: white;
         border-color: #333333; }
-        .ionic .list-item.list-item-secondary.active .list-item-content, .ionic .list-item.list-item-secondary:active .list-item-content {
+        .ionic .item.item-secondary.active .list-item-content, .ionic .item.item-secondary:active .list-item-content {
           background-color: white;
           color: #333333; }
-    .ionic .list-item.list-item-primary {
+    .ionic .item.item-primary {
       /*
       color: $color;
       background-color: $bgColor;
       border-color: $borderColor;
       */ }
-      .ionic .list-item.list-item-primary.active, .ionic .list-item.list-item-primary:active {
+      .ionic .item.item-primary.active, .ionic .item.item-primary:active {
         color: white;
         background-color: #4a87ee;
         border-color: #333333; }
-        .ionic .list-item.list-item-primary.active .list-item-content, .ionic .list-item.list-item-primary:active .list-item-content {
+        .ionic .item.item-primary.active .list-item-content, .ionic .item.item-primary:active .list-item-content {
           background-color: #4a87ee;
           color: white; }
-    .ionic .list-item.list-item-info {
+    .ionic .item.item-info {
       /*
       color: $color;
       background-color: $bgColor;
       border-color: $borderColor;
       */ }
-      .ionic .list-item.list-item-info.active, .ionic .list-item.list-item-info:active {
+      .ionic .item.item-info.active, .ionic .item.item-info:active {
         color: white;
         background-color: #43cee6;
         border-color: #333333; }
-        .ionic .list-item.list-item-info.active .list-item-content, .ionic .list-item.list-item-info:active .list-item-content {
+        .ionic .item.item-info.active .list-item-content, .ionic .item.item-info:active .list-item-content {
           background-color: #43cee6;
           color: white; }
-    .ionic .list-item.list-item-success {
+    .ionic .item.item-success {
       /*
       color: $color;
       background-color: $bgColor;
       border-color: $borderColor;
       */ }
-      .ionic .list-item.list-item-success.active, .ionic .list-item.list-item-success:active {
+      .ionic .item.item-success.active, .ionic .item.item-success:active {
         color: white;
         background-color: #66cc33;
         border-color: #333333; }
-        .ionic .list-item.list-item-success.active .list-item-content, .ionic .list-item.list-item-success:active .list-item-content {
+        .ionic .item.item-success.active .list-item-content, .ionic .item.item-success:active .list-item-content {
           background-color: #66cc33;
           color: white; }
-    .ionic .list-item.list-item-warning {
+    .ionic .item.item-warning {
       /*
       color: $color;
       background-color: $bgColor;
       border-color: $borderColor;
       */ }
-      .ionic .list-item.list-item-warning.active, .ionic .list-item.list-item-warning:active {
+      .ionic .item.item-warning.active, .ionic .item.item-warning:active {
         color: white;
         background-color: #f0b840;
         border-color: #333333; }
-        .ionic .list-item.list-item-warning.active .list-item-content, .ionic .list-item.list-item-warning:active .list-item-content {
+        .ionic .item.item-warning.active .list-item-content, .ionic .item.item-warning:active .list-item-content {
           background-color: #f0b840;
           color: white; }
-    .ionic .list-item.list-item-danger {
+    .ionic .item.item-danger {
       /*
       color: $color;
       background-color: $bgColor;
       border-color: $borderColor;
       */ }
-      .ionic .list-item.list-item-danger.active, .ionic .list-item.list-item-danger:active {
+      .ionic .item.item-danger.active, .ionic .item.item-danger:active {
         color: white;
         background-color: #ef4e3a;
         border-color: #333333; }
-        .ionic .list-item.list-item-danger.active .list-item-content, .ionic .list-item.list-item-danger:active .list-item-content {
+        .ionic .item.item-danger.active .list-item-content, .ionic .item.item-danger:active .list-item-content {
           background-color: #ef4e3a;
           color: white; }
-    .ionic .list-item.list-item-dark {
+    .ionic .item.item-dark {
       /*
       color: $color;
       background-color: $bgColor;
       border-color: $borderColor;
       */ }
-      .ionic .list-item.list-item-dark.active, .ionic .list-item.list-item-dark:active {
+      .ionic .item.item-dark.active, .ionic .item.item-dark:active {
         color: white;
         background-color: #444444;
         border-color: #333333; }
-        .ionic .list-item.list-item-dark.active .list-item-content, .ionic .list-item.list-item-dark:active .list-item-content {
+        .ionic .item.item-dark.active .list-item-content, .ionic .item.item-dark:active .list-item-content {
           background-color: #444444;
           color: white; }
-  .ionic a.list-item {
+  .ionic a.item {
     color: #333333;
     text-decoration: none; }
-    .ionic a.list-item:hover, .ionic a.list-item:focus {
+    .ionic a.item:hover, .ionic a.item:focus {
       text-decoration: none; }
-  .ionic .list-editing .list-item-content {
-    margin-right: 30px;
-    margin-left: 30px; }
-  .ionic .list-editing .list-item-edit {
-    left: 0px;
-    opacity: 1; }
-  .ionic .list-item-content {
+  .ionic .item-content {
     /**
      * The content area of a complex list item. This area can
      * Slide left and right and be dragged to support different
@@ -1832,33 +1819,33 @@
     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 .list-item-content h2 {
+    .ionic .item-content h2 {
       margin: 0 0 4px 0;
       font-size: 16px; }
-    .ionic .list-item-content h3 {
+    .ionic .item-content h3 {
       margin: 0 0 4px 0;
       font-size: 14px; }
-    .ionic .list-item-content h3 {
+    .ionic .item-content h3 {
       margin: 0 0 4px 0;
       font-size: 12px; }
-    .ionic .list-item-content h4, .ionic .list-item-content h5, .ionic .list-item-content h6 {
+    .ionic .item-content h4, .ionic .item-content h5, .ionic .item-content h6 {
       margin: 0 0 3px 0;
       font-size: 10px; }
-    .ionic .list-item-content p {
+    .ionic .item-content p {
       color: #666;
       font-size: 14px; }
-    .ionic .list-item-content h1:last-child,
-    .ionic .list-item-content h2:last-child,
-    .ionic .list-item-content h3:last-child,
-    .ionic .list-item-content h4:last-child,
-    .ionic .list-item-content h5:last-child,
-    .ionic .list-item-content h6:last-child,
-    .ionic .list-item-content p:last-child {
+    .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 .list-item-text-wrap {
+  .ionic .item-text-wrap {
     overflow: auto;
     white-space: normal; }
-  .ionic .list-item-content i {
+  .ionic .item-content i {
     display: -webkit-box;
     display: -webkit-flex;
     display: -moz-flex;
@@ -1873,16 +1860,16 @@
     top: 0;
     height: 100%;
     font-size: 28px; }
-  .ionic .list-icon-left .list-item-content {
+  .ionic .item-icon-left .item-content {
     padding-left: 45px; }
-    .ionic .list-icon-left .list-item-content i {
+    .ionic .item-icon-left .item-content i {
       left: 7.5px; }
-  .ionic .list-icon-right .list-item-content i {
+  .ionic .item-icon-right .item-content i {
     right: 7.5px; }
-  .ionic .list-icon-left.list-icon-right .list-item-content i:last-child {
+  .ionic .item-icon-left.item-icon-right .item-content i:last-child {
     left: auto; }
-  .ionic a .list-item-content:after,
-  .ionic button .list-item-content:after {
+  .ionic a .item-content:after,
+  .ionic button .item-content:after {
     /* By default, both <a> and <button> have right side arrow icons */
     display: -webkit-box;
     display: -webkit-flex;
@@ -1909,13 +1896,13 @@
     line-height: 1;
     speak: none;
     -webkit-font-smoothing: antialiased; }
-  .ionic a.list-icon-right .list-item-content:after,
-  .ionic button.list-icon-right .list-item-content:after {
+  .ionic a.item-icon-right .item-content:after,
+  .ionic button.item-icon-right .item-content:after {
     display: none; }
-  .ionic .list-item-thumbnail .list-item-content {
+  .ionic .item-thumbnail .item-content {
     padding-left: 70px;
     min-height: 70px; }
-    .ionic .list-item-thumbnail .list-item-content img:first-child, .ionic .list-item-thumbnail .list-item-content .list-img {
+    .ionic .item-thumbnail .item-content img:first-child, .ionic .item-thumbnail .item-content .item-img {
       position: absolute;
       top: 15px;
       left: 15px;
@@ -1923,28 +1910,22 @@
       max-height: 40px;
       width: 100%;
       border-radius: 4px; }
-  .ionic .list-item-thumbnail-lrg .list-item-content {
+  .ionic .item-thumbnail-lrg .item-content {
     padding-left: 95px;
     min-height: 80px; }
-    .ionic .list-item-thumbnail-lrg .list-item-content img:first-child, .ionic .list-item-thumbnail-lrg .list-item-content .list-img {
+    .ionic .item-thumbnail-lrg .item-content img:first-child, .ionic .item-thumbnail-lrg .item-content .item-img {
       position: absolute;
       top: 0;
       left: 0;
       max-width: 80px;
       max-height: 80px;
       width: 100%; }
-  .ionic .list-item-image .list-item-content {
+  .ionic .item-image .item-content {
     text-align: center;
     padding: 0; }
-    .ionic .list-item-image .list-item-content img:first-child, .ionic .list-item-image .list-item-content .list-img {
+    .ionic .item-image .item-content img:first-child, .ionic .item-image .item-content .list-img {
       width: 100%; }
-  .ionic .list-header {
-    margin-top: 20px;
-    padding: 5px 15px;
-    background-color: transparent;
-    color: #222222;
-    font-weight: bold; }
-  .ionic .list-divider {
+  .ionic .item-divider {
     margin: -1px;
     padding: 5px 15px;
     border: none;
@@ -1952,17 +1933,17 @@
     box-shadow: inset 0 0 1px #666666;
     color: #222222;
     font-weight: bold; }
-  .ionic .card.list .list-divider {
+  .ionic .card.list .item-divider {
     margin-right: 0;
     margin-left: 0; }
-  .ionic .list-item-sliding {
+  .ionic .item-sliding {
     -webkit-transition: -webkit-transform 0.1s ease-in-out; }
-  .ionic .list-item-reordering {
+  .ionic .item-reordering {
     position: absolute;
     width: 100%; }
-  .ionic .list-item-placeholder {
+  .ionic .item-placeholder {
     opacity: 0.7; }
-  .ionic .list-item-edit {
+  .ionic .item-edit {
     position: absolute;
     top: 0;
     left: -48px;
@@ -1972,45 +1953,64 @@
     line-height: 100%;
     opacity: 0;
     -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
-    .ionic .list-item-edit .button {
+    .ionic .item-edit .button {
       height: 100%; }
-    .ionic .list-item-edit i {
+    .ionic .item-edit i {
       color: #ef4e3a;
       font-size: 24px; }
-    .ionic .list-item-edit.ng-enter {
+    .ionic .item-edit.ng-enter {
       left: -48px;
       opacity: 0;
       -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
-    .ionic .list-item-edit.ng-enter-active {
+    .ionic .item-edit.ng-enter-active {
       left: 0;
       opacity: 1; }
-    .ionic .list-item-edit.ng-leave {
+    .ionic .item-edit.ng-leave {
       left: 0px;
       opacity: 1;
       -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
-    .ionic .list-item-edit.ng-leave-active {
+    .ionic .item-edit.ng-leave-active {
       left: -48px;
       opacity: 0; }
-  .ionic .list-item-drag {
+  .ionic .item-drag {
     position: absolute;
     top: 0;
     right: 0;
     z-index: 0;
     height: 100%; }
-    .ionic .list-item-drag .button {
+    .ionic .item-drag .button {
       height: 100%;
       border: none;
       border-radius: 0; }
-  .ionic .list-item-buttons {
+  .ionic .item-buttons {
     position: absolute;
     top: 0;
     right: 0;
     z-index: 1;
     height: 100%; }
-    .ionic .list-item-buttons .button {
+    .ionic .item-buttons .button {
       height: 100%;
       border: none;
       border-radius: 0; }
+  .ionic .list {
+    position: relative;
+    overflow: hidden;
+    margin-bottom: 20px;
+    padding-top: 1px;
+    padding-bottom: 1px;
+    padding-left: 0; }
+  .ionic .list-editing .item-content {
+    margin-right: 30px;
+    margin-left: 30px; }
+  .ionic .list-editing .item-edit {
+    left: 0px;
+    opacity: 1; }
+  .ionic .list-header {
+    margin-top: 20px;
+    padding: 5px 15px;
+    background-color: transparent;
+    color: #222222;
+    font-weight: bold; }
   .ionic .list-refresher {
     overflow: hidden;
     height: 0;
@@ -2022,6 +2022,41 @@
     float: right;
     color: #aaa;
     font-size: 14px; }
+  .ionic .card {
+    overflow: hidden;
+    margin: 20px 10px;
+    border: none;
+    border-radius: 2px;
+    background-color: white;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
+  .ionic .card-header {
+    padding: 10px;
+    border-top-left-radius: 2px;
+    border-top-right-radius: 2px;
+    background-color: whitesmoke; }
+    .ionic .card-header.card-header-secondary {
+      background-color: whitesmoke; }
+    .ionic .card-header.card-header-primary {
+      background-color: #4a87ee; }
+    .ionic .card-header.card-header-info {
+      background-color: #43cee6; }
+    .ionic .card-header.card-header-success {
+      background-color: #66cc33; }
+    .ionic .card-header.card-header-warning {
+      background-color: #f0b840; }
+    .ionic .card-header.card-header-danger {
+      background-color: #ef4e3a; }
+    .ionic .card-header.card-header-dark {
+      background-color: #444444; }
+  .ionic .card-body {
+    padding: 10px; }
+    .ionic .card-body h1, .ionic .card-body h2, .ionic .card-body h3, .ionic .card-body h4, .ionic .card-body h5, .ionic .card-body h6, .ionic .card-body p {
+      margin-top: 10px; }
+  .ionic .card-footer {
+    padding: 10px;
+    border-bottom-right-radius: 2px;
+    border-bottom-left-radius: 2px;
+    background-color: whitesmoke; }
   .ionic form {
     margin: 0 0 1.42857; }
   .ionic legend {
@@ -2247,9 +2282,9 @@
     background: #4a87ee; }
   .ionic .checkbox input:checked:after {
     opacity: 1; }
-  .ionic .checkbox-item .list-item-content {
+  .ionic .item-checkbox .item-content {
     padding-left: 58px; }
-  .ionic .checkbox-item .checkbox {
+  .ionic .item-checkbox .checkbox {
     position: absolute;
     top: 0;
     left: 7.5px;
@@ -2260,7 +2295,7 @@
   .ionic .toggle {
     position: relative;
     display: inline-block; }
-  .ionic .toggle input {
+  .ionic .toggle input[type="checkbox"] {
     /* set the actual checkbox input to have a width/height */
     /* but hide its appearance, then use :after to style it */
     width: 54px;
@@ -2269,7 +2304,7 @@
     background: transparent;
     -webkit-appearance: none;
     /* the track appearance when the toggle is "off" */ }
-    .ionic .toggle input:after {
+    .ionic .toggle input[type="checkbox"]:after {
       display: inline-block;
       box-sizing: border-box;
       width: 100%;
@@ -2306,17 +2341,17 @@
   .ionic .toggle input:checked + .handle {
     background-color: white;
     -webkit-transform: translate3d(22px, 0, 0); }
-  .ionic .toggle-item .list-item-content {
+  .ionic .item-toggle .item-content {
     padding-right: 99px; }
-  .ionic .toggle-item .toggle {
+  .ionic .item-toggle .toggle {
     position: absolute;
     top: 7.5px;
     right: 15px;
     z-index: 3; }
-  .ionic .radio-buttton-list .list-item-content {
+  .ionic .item-radio .item-content {
     /* give some room to the right for the checkmark icon */
     padding-right: 60px; }
-  .ionic .radio-buttton-list .radio-button-icon {
+  .ionic .item-radio .radio-icon {
     /* checkmark icon will be hidden by default */
     position: absolute;
     top: 0;
@@ -2326,13 +2361,13 @@
     padding: 13px;
     height: 100%;
     font-size: 24px; }
-  .ionic .radio-buttton-list input[type="radio"] {
+  .ionic .item-radio input[type="radio"] {
     /* hide any radio button inputs elements (the ugly circles) */
     display: none; }
-    .ionic .radio-buttton-list input[type="radio"]:checked ~ .list-item-content {
-      /* style the list item content when its checked */
+    .ionic .item-radio input[type="radio"]:checked ~ .item-content {
+      /* style the item content when its checked */
       background: #f7f7f7; }
-    .ionic .radio-buttton-list input[type="radio"]:checked ~ .radio-button-icon {
+    .ionic .item-radio input[type="radio"]:checked ~ .radio-icon {
       /* show the checkmark icon when its checked */
       visibility: visible; }
   .ionic input[type="range"] {
@@ -2717,41 +2752,6 @@
     color: #3a87ad; }
   .ionic .alert-info h4 {
     color: #3a87ad; }
-  .ionic .card {
-    overflow: hidden;
-    margin: 20px 10px;
-    border: none;
-    border-radius: 2px;
-    background-color: white;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
-  .ionic .card-header {
-    padding: 10px;
-    border-top-left-radius: 2px;
-    border-top-right-radius: 2px;
-    background-color: whitesmoke; }
-    .ionic .card-header.card-header-secondary {
-      background-color: whitesmoke; }
-    .ionic .card-header.card-header-primary {
-      background-color: #4a87ee; }
-    .ionic .card-header.card-header-info {
-      background-color: #43cee6; }
-    .ionic .card-header.card-header-success {
-      background-color: #66cc33; }
-    .ionic .card-header.card-header-warning {
-      background-color: #f0b840; }
-    .ionic .card-header.card-header-danger {
-      background-color: #ef4e3a; }
-    .ionic .card-header.card-header-dark {
-      background-color: #444444; }
-  .ionic .card-body {
-    padding: 10px; }
-    .ionic .card-body h1, .ionic .card-body h2, .ionic .card-body h3, .ionic .card-body h4, .ionic .card-body h5, .ionic .card-body h6, .ionic .card-body p {
-      margin-top: 10px; }
-  .ionic .card-footer {
-    padding: 10px;
-    border-bottom-right-radius: 2px;
-    border-bottom-left-radius: 2px;
-    background-color: whitesmoke; }
   .ionic .slide-in-up {
     opacity: 0;
     -webkit-transform: translate3d(0, 100%, 0);
diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index ecb3a48a6c..d1796520ee 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -2095,15 +2095,7 @@ address {
   .loading h1, .loading h2, .loading h3, .loading h4, .loading h5 {
     color: #fff; }
 
-.list {
-  position: relative;
-  overflow: hidden;
-  margin-bottom: 20px;
-  padding-top: 1px;
-  padding-bottom: 1px;
-  padding-left: 0; }
-
-.list-item {
+.item {
   position: relative;
   z-index: 2;
   display: block;
@@ -2111,137 +2103,126 @@ address {
   border: none;
   background-color: white;
   box-shadow: inset 0 0 1px #666666; }
-  .list-item .badge {
+  .item .badge {
     float: right; }
-  .list-item .badge + .badge {
+  .item .badge + .badge {
     margin-right: 5px; }
-  .list-item.active, .list-item.active:hover, .list-item.active:focus {
+  .item.active, .item.active:hover, .item.active:focus {
     z-index: 2; }
-    .list-item.active .list-item-heading, .list-item.active:hover .list-item-heading, .list-item.active:focus .list-item-heading {
+    .item.active .item-heading, .item.active:hover .item-heading, .item.active:focus .item-heading {
       color: inherit; }
-  .list-item.list-item-default {
+  .item.item-default {
     /*
     color: $color;
     background-color: $bgColor;
     border-color: $borderColor;
     */ }
-    .list-item.list-item-default.active, .list-item.list-item-default:active {
+    .item.item-default.active, .item.item-default:active {
       color: #333333;
       background-color: white;
       border-color: #333333; }
-      .list-item.list-item-default.active .list-item-content, .list-item.list-item-default:active .list-item-content {
+      .item.item-default.active .list-item-content, .item.item-default:active .list-item-content {
         background-color: white;
         color: #333333; }
-  .list-item.list-item-secondary {
+  .item.item-secondary {
     /*
     color: $color;
     background-color: $bgColor;
     border-color: $borderColor;
     */ }
-    .list-item.list-item-secondary.active, .list-item.list-item-secondary:active {
+    .item.item-secondary.active, .item.item-secondary:active {
       color: #333333;
       background-color: white;
       border-color: #333333; }
-      .list-item.list-item-secondary.active .list-item-content, .list-item.list-item-secondary:active .list-item-content {
+      .item.item-secondary.active .list-item-content, .item.item-secondary:active .list-item-content {
         background-color: white;
         color: #333333; }
-  .list-item.list-item-primary {
+  .item.item-primary {
     /*
     color: $color;
     background-color: $bgColor;
     border-color: $borderColor;
     */ }
-    .list-item.list-item-primary.active, .list-item.list-item-primary:active {
+    .item.item-primary.active, .item.item-primary:active {
       color: white;
       background-color: #4a87ee;
       border-color: #333333; }
-      .list-item.list-item-primary.active .list-item-content, .list-item.list-item-primary:active .list-item-content {
+      .item.item-primary.active .list-item-content, .item.item-primary:active .list-item-content {
         background-color: #4a87ee;
         color: white; }
-  .list-item.list-item-info {
+  .item.item-info {
     /*
     color: $color;
     background-color: $bgColor;
     border-color: $borderColor;
     */ }
-    .list-item.list-item-info.active, .list-item.list-item-info:active {
+    .item.item-info.active, .item.item-info:active {
       color: white;
       background-color: #43cee6;
       border-color: #333333; }
-      .list-item.list-item-info.active .list-item-content, .list-item.list-item-info:active .list-item-content {
+      .item.item-info.active .list-item-content, .item.item-info:active .list-item-content {
         background-color: #43cee6;
         color: white; }
-  .list-item.list-item-success {
+  .item.item-success {
     /*
     color: $color;
     background-color: $bgColor;
     border-color: $borderColor;
     */ }
-    .list-item.list-item-success.active, .list-item.list-item-success:active {
+    .item.item-success.active, .item.item-success:active {
       color: white;
       background-color: #66cc33;
       border-color: #333333; }
-      .list-item.list-item-success.active .list-item-content, .list-item.list-item-success:active .list-item-content {
+      .item.item-success.active .list-item-content, .item.item-success:active .list-item-content {
         background-color: #66cc33;
         color: white; }
-  .list-item.list-item-warning {
+  .item.item-warning {
     /*
     color: $color;
     background-color: $bgColor;
     border-color: $borderColor;
     */ }
-    .list-item.list-item-warning.active, .list-item.list-item-warning:active {
+    .item.item-warning.active, .item.item-warning:active {
       color: white;
       background-color: #f0b840;
       border-color: #333333; }
-      .list-item.list-item-warning.active .list-item-content, .list-item.list-item-warning:active .list-item-content {
+      .item.item-warning.active .list-item-content, .item.item-warning:active .list-item-content {
         background-color: #f0b840;
         color: white; }
-  .list-item.list-item-danger {
+  .item.item-danger {
     /*
     color: $color;
     background-color: $bgColor;
     border-color: $borderColor;
     */ }
-    .list-item.list-item-danger.active, .list-item.list-item-danger:active {
+    .item.item-danger.active, .item.item-danger:active {
       color: white;
       background-color: #ef4e3a;
       border-color: #333333; }
-      .list-item.list-item-danger.active .list-item-content, .list-item.list-item-danger:active .list-item-content {
+      .item.item-danger.active .list-item-content, .item.item-danger:active .list-item-content {
         background-color: #ef4e3a;
         color: white; }
-  .list-item.list-item-dark {
+  .item.item-dark {
     /*
     color: $color;
     background-color: $bgColor;
     border-color: $borderColor;
     */ }
-    .list-item.list-item-dark.active, .list-item.list-item-dark:active {
+    .item.item-dark.active, .item.item-dark:active {
       color: white;
       background-color: #444444;
       border-color: #333333; }
-      .list-item.list-item-dark.active .list-item-content, .list-item.list-item-dark:active .list-item-content {
+      .item.item-dark.active .list-item-content, .item.item-dark:active .list-item-content {
         background-color: #444444;
         color: white; }
 
-a.list-item {
+a.item {
   color: #333333;
   text-decoration: none; }
-  a.list-item:hover, a.list-item:focus {
+  a.item:hover, a.item:focus {
     text-decoration: none; }
 
-/**
- * List editing styles. These trigger when the entire list goes into
- * "edit mode"
- */
-.list-editing .list-item-content {
-  margin-right: 30px;
-  margin-left: 30px; }
-.list-editing .list-item-edit {
-  left: 0px;
-  opacity: 1; }
-
-.list-item-content {
+.item-content {
   /**
    * The content area of a complex list item. This area can
    * Slide left and right and be dragged to support different
@@ -2258,35 +2239,35 @@ a.list-item {
   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; }
-  .list-item-content h2 {
+  .item-content h2 {
     margin: 0 0 4px 0;
     font-size: 16px; }
-  .list-item-content h3 {
+  .item-content h3 {
     margin: 0 0 4px 0;
     font-size: 14px; }
-  .list-item-content h3 {
+  .item-content h3 {
     margin: 0 0 4px 0;
     font-size: 12px; }
-  .list-item-content h4, .list-item-content h5, .list-item-content h6 {
+  .item-content h4, .item-content h5, .item-content h6 {
     margin: 0 0 3px 0;
     font-size: 10px; }
-  .list-item-content p {
+  .item-content p {
     color: #666;
     font-size: 14px; }
-  .list-item-content h1:last-child,
-  .list-item-content h2:last-child,
-  .list-item-content h3:last-child,
-  .list-item-content h4:last-child,
-  .list-item-content h5:last-child,
-  .list-item-content h6:last-child,
-  .list-item-content p:last-child {
+  .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; }
 
-.list-item-text-wrap {
+.item-text-wrap {
   overflow: auto;
   white-space: normal; }
 
-.list-item-content i {
+.item-content i {
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-flex;
@@ -2302,19 +2283,19 @@ a.list-item {
   height: 100%;
   font-size: 28px; }
 
-.list-icon-left .list-item-content {
+.item-icon-left .item-content {
   padding-left: 45px; }
-  .list-icon-left .list-item-content i {
+  .item-icon-left .item-content i {
     left: 7.5px; }
 
-.list-icon-right .list-item-content i {
+.item-icon-right .item-content i {
   right: 7.5px; }
 
-.list-icon-left.list-icon-right .list-item-content i:last-child {
+.item-icon-left.item-icon-right .item-content i:last-child {
   left: auto; }
 
-a .list-item-content:after,
-button .list-item-content:after {
+a .item-content:after,
+button .item-content:after {
   /* By default, both <a> and <button> have right side arrow icons */
   display: -webkit-box;
   display: -webkit-flex;
@@ -2342,14 +2323,14 @@ button .list-item-content:after {
   speak: none;
   -webkit-font-smoothing: antialiased; }
 
-a.list-icon-right .list-item-content:after,
-button.list-icon-right .list-item-content:after {
+a.item-icon-right .item-content:after,
+button.item-icon-right .item-content:after {
   display: none; }
 
-.list-item-thumbnail .list-item-content {
+.item-thumbnail .item-content {
   padding-left: 70px;
   min-height: 70px; }
-  .list-item-thumbnail .list-item-content img:first-child, .list-item-thumbnail .list-item-content .list-img {
+  .item-thumbnail .item-content img:first-child, .item-thumbnail .item-content .item-img {
     position: absolute;
     top: 15px;
     left: 15px;
@@ -2358,10 +2339,10 @@ button.list-icon-right .list-item-content:after {
     width: 100%;
     border-radius: 4px; }
 
-.list-item-thumbnail-lrg .list-item-content {
+.item-thumbnail-lrg .item-content {
   padding-left: 95px;
   min-height: 80px; }
-  .list-item-thumbnail-lrg .list-item-content img:first-child, .list-item-thumbnail-lrg .list-item-content .list-img {
+  .item-thumbnail-lrg .item-content img:first-child, .item-thumbnail-lrg .item-content .item-img {
     position: absolute;
     top: 0;
     left: 0;
@@ -2369,20 +2350,13 @@ button.list-icon-right .list-item-content:after {
     max-height: 80px;
     width: 100%; }
 
-.list-item-image .list-item-content {
+.item-image .item-content {
   text-align: center;
   padding: 0; }
-  .list-item-image .list-item-content img:first-child, .list-item-image .list-item-content .list-img {
+  .item-image .item-content img:first-child, .item-image .item-content .list-img {
     width: 100%; }
 
-.list-header {
-  margin-top: 20px;
-  padding: 5px 15px;
-  background-color: transparent;
-  color: #222222;
-  font-weight: bold; }
-
-.list-divider {
+.item-divider {
   margin: -1px;
   padding: 5px 15px;
   border: none;
@@ -2391,25 +2365,25 @@ button.list-icon-right .list-item-content:after {
   color: #222222;
   font-weight: bold; }
 
-.card.list .list-divider {
+.card.list .item-divider {
   margin-right: 0;
   margin-left: 0; }
 
-.list-item-sliding {
+.item-sliding {
   -webkit-transition: -webkit-transform 0.1s ease-in-out; }
 
-.list-item-reordering {
+.item-reordering {
   position: absolute;
   width: 100%; }
 
-.list-item-placeholder {
+.item-placeholder {
   opacity: 0.7; }
 
 /**
  * The left-side edit area of a complex list item. This area shows
  * whe the list item is in edit mode.
  */
-.list-item-edit {
+.item-edit {
   position: absolute;
   top: 0;
   left: -48px;
@@ -2419,33 +2393,33 @@ button.list-icon-right .list-item-content:after {
   line-height: 100%;
   opacity: 0;
   -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
-  .list-item-edit .button {
+  .item-edit .button {
     height: 100%; }
-  .list-item-edit i {
+  .item-edit i {
     color: #ef4e3a;
     font-size: 24px; }
-  .list-item-edit.ng-enter {
+  .item-edit.ng-enter {
     left: -48px;
     opacity: 0;
     -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
-  .list-item-edit.ng-enter-active {
+  .item-edit.ng-enter-active {
     left: 0;
     opacity: 1; }
-  .list-item-edit.ng-leave {
+  .item-edit.ng-leave {
     left: 0px;
     opacity: 1;
     -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
-  .list-item-edit.ng-leave-active {
+  .item-edit.ng-leave-active {
     left: -48px;
     opacity: 0; }
 
-.list-item-drag {
+.item-drag {
   position: absolute;
   top: 0;
   right: 0;
   z-index: 0;
   height: 100%; }
-  .list-item-drag .button {
+  .item-drag .button {
     height: 100%;
     border: none;
     border-radius: 0; }
@@ -2454,17 +2428,43 @@ button.list-icon-right .list-item-content:after {
  * The hidden right-side buttons that can be exposed under a list item
  * with dragging.
  */
-.list-item-buttons {
+.item-buttons {
   position: absolute;
   top: 0;
   right: 0;
   z-index: 1;
   height: 100%; }
-  .list-item-buttons .button {
+  .item-buttons .button {
     height: 100%;
     border: none;
     border-radius: 0; }
 
+.list {
+  position: relative;
+  overflow: hidden;
+  margin-bottom: 20px;
+  padding-top: 1px;
+  padding-bottom: 1px;
+  padding-left: 0; }
+
+/**
+ * List editing styles. These trigger when the entire list goes into
+ * "edit mode"
+ */
+.list-editing .item-content {
+  margin-right: 30px;
+  margin-left: 30px; }
+.list-editing .item-edit {
+  left: 0px;
+  opacity: 1; }
+
+.list-header {
+  margin-top: 20px;
+  padding: 5px 15px;
+  background-color: transparent;
+  color: #222222;
+  font-weight: bold; }
+
 .list-refresher {
   overflow: hidden;
   height: 0;
@@ -2479,6 +2479,45 @@ button.list-icon-right .list-item-content:after {
   color: #aaa;
   font-size: 14px; }
 
+.card {
+  overflow: hidden;
+  margin: 20px 10px;
+  border: none;
+  border-radius: 2px;
+  background-color: white;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
+
+.card-header {
+  padding: 10px;
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+  background-color: whitesmoke; }
+  .card-header.card-header-secondary {
+    background-color: whitesmoke; }
+  .card-header.card-header-primary {
+    background-color: #4a87ee; }
+  .card-header.card-header-info {
+    background-color: #43cee6; }
+  .card-header.card-header-success {
+    background-color: #66cc33; }
+  .card-header.card-header-warning {
+    background-color: #f0b840; }
+  .card-header.card-header-danger {
+    background-color: #ef4e3a; }
+  .card-header.card-header-dark {
+    background-color: #444444; }
+
+.card-body {
+  padding: 10px; }
+  .card-body h1, .card-body h2, .card-body h3, .card-body h4, .card-body h5, .card-body h6, .card-body p {
+    margin-top: 10px; }
+
+.card-footer {
+  padding: 10px;
+  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: 2px;
+  background-color: whitesmoke; }
+
 form {
   margin: 0 0 1.42857; }
 
@@ -2736,12 +2775,12 @@ input[type="checkbox"][readonly] {
 .checkbox input:checked:after {
   opacity: 1; }
 
-/* make sure list item content have enough padding on left to fit the checkbox */
-.checkbox-item .list-item-content {
+/* make sure item content have enough padding on left to fit the checkbox */
+.item-checkbox .item-content {
   padding-left: 58px; }
 
-/* position the checkbox to the left within a list item */
-.checkbox-item .checkbox {
+/* position the checkbox to the left within an item */
+.item-checkbox .checkbox {
   position: absolute;
   top: 0;
   left: 7.5px;
@@ -2755,7 +2794,7 @@ input[type="checkbox"][readonly] {
   position: relative;
   display: inline-block; }
 
-.toggle input {
+.toggle input[type="checkbox"] {
   /* set the actual checkbox input to have a width/height */
   /* but hide its appearance, then use :after to style it */
   width: 54px;
@@ -2764,7 +2803,7 @@ input[type="checkbox"][readonly] {
   background: transparent;
   -webkit-appearance: none;
   /* the track appearance when the toggle is "off" */ }
-  .toggle input:after {
+  .toggle input[type="checkbox"]:after {
     display: inline-block;
     box-sizing: border-box;
     width: 100%;
@@ -2810,21 +2849,21 @@ input[type="checkbox"][readonly] {
   -webkit-transform: translate3d(22px, 0, 0); }
 
 /* make sure list item content have enough padding on right to fit the toggle */
-.toggle-item .list-item-content {
+.item-toggle .item-content {
   padding-right: 99px; }
 
 /* position the toggle to the right within a list item */
-.toggle-item .toggle {
+.item-toggle .toggle {
   position: absolute;
   top: 7.5px;
   right: 15px;
   z-index: 3; }
 
-.radio-buttton-list .list-item-content {
+.item-radio .item-content {
   /* give some room to the right for the checkmark icon */
   padding-right: 60px; }
 
-.radio-buttton-list .radio-button-icon {
+.item-radio .radio-icon {
   /* checkmark icon will be hidden by default */
   position: absolute;
   top: 0;
@@ -2835,13 +2874,13 @@ input[type="checkbox"][readonly] {
   height: 100%;
   font-size: 24px; }
 
-.radio-buttton-list input[type="radio"] {
+.item-radio input[type="radio"] {
   /* hide any radio button inputs elements (the ugly circles) */
   display: none; }
-  .radio-buttton-list input[type="radio"]:checked ~ .list-item-content {
-    /* style the list item content when its checked */
+  .item-radio input[type="radio"]:checked ~ .item-content {
+    /* style the item content when its checked */
     background: #f7f7f7; }
-  .radio-buttton-list input[type="radio"]:checked ~ .radio-button-icon {
+  .item-radio input[type="radio"]:checked ~ .radio-icon {
     /* show the checkmark icon when its checked */
     visibility: visible; }
 
@@ -3263,45 +3302,6 @@ a.button {
 .alert-info h4 {
   color: #3a87ad; }
 
-.card {
-  overflow: hidden;
-  margin: 20px 10px;
-  border: none;
-  border-radius: 2px;
-  background-color: white;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
-
-.card-header {
-  padding: 10px;
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
-  background-color: whitesmoke; }
-  .card-header.card-header-secondary {
-    background-color: whitesmoke; }
-  .card-header.card-header-primary {
-    background-color: #4a87ee; }
-  .card-header.card-header-info {
-    background-color: #43cee6; }
-  .card-header.card-header-success {
-    background-color: #66cc33; }
-  .card-header.card-header-warning {
-    background-color: #f0b840; }
-  .card-header.card-header-danger {
-    background-color: #ef4e3a; }
-  .card-header.card-header-dark {
-    background-color: #444444; }
-
-.card-body {
-  padding: 10px; }
-  .card-body h1, .card-body h2, .card-body h3, .card-body h4, .card-body h5, .card-body h6, .card-body p {
-    margin-top: 10px; }
-
-.card-footer {
-  padding: 10px;
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 2px;
-  background-color: whitesmoke; }
-
 .slide-box {
   background-color: #000;
   position: relative;
diff --git a/scss/ionic-ios7/ionic-ios7.scss b/scss/ionic-ios7/ionic-ios7.scss
index 53861dba82..00a947e345 100644
--- a/scss/ionic-ios7/ionic-ios7.scss
+++ b/scss/ionic-ios7/ionic-ios7.scss
@@ -16,7 +16,9 @@
   "../ionic/tabs",
   "../ionic/menu",
   "../ionic/modal",
+  "../ionic/items",
   "../ionic/list",
+  "../ionic/card",
 
   // Forms
   "../ionic/form",
@@ -33,7 +35,6 @@
 
   // Components
   "../ionic/alerts",
-  "../ionic/card",
 
   // Animations
   "../ionic/animations",
diff --git a/scss/ionic/_checkbox.scss b/scss/ionic/_checkbox.scss
index 18b34e81fc..3ea79e8753 100644
--- a/scss/ionic/_checkbox.scss
+++ b/scss/ionic/_checkbox.scss
@@ -1,4 +1,7 @@
 
+// Checkbox
+// -------------------------------
+
 .checkbox {
   position: relative;
   display: inline-block;
@@ -58,16 +61,16 @@
   opacity: 1;
 }
 
-/* make sure list item content have enough padding on left to fit the checkbox */
-.checkbox-item .list-item-content {
-  padding-left: ($list-item-padding * 2) + $checkbox-width;
+/* make sure item content have enough padding on left to fit the checkbox */
+.item-checkbox .item-content {
+  padding-left: ($item-padding * 2) + $checkbox-width;
 }
 
-/* position the checkbox to the left within a list item */
-.checkbox-item .checkbox {
+/* position the checkbox to the left within an item */
+.item-checkbox .checkbox {
   position: absolute;
   top: 0;
-  left: $list-item-padding / 2;
+  left: $item-padding / 2;
   z-index: 3;
   display: flex;
   height: 100%;
diff --git a/scss/ionic/_items.scss b/scss/ionic/_items.scss
new file mode 100644
index 0000000000..de64c21bd7
--- /dev/null
+++ b/scss/ionic/_items.scss
@@ -0,0 +1,338 @@
+
+// Item
+// -------------------------------
+
+.item {
+  position: relative;
+
+  z-index: 2; // Make sure the borders and stuff don't get hidden by children
+  display: block;
+  margin: $item-border-width * -1;
+
+  border: none;
+
+  background-color: $list-default-background;
+  box-shadow: inset 0 0 $item-border-width #666;
+
+  // Align badges within list items
+  .badge {
+    float: right;
+  }
+
+  .badge + .badge {
+    margin-right: 5px;
+  }
+
+  // Active class on item itself, not parent
+  &.active,
+  &.active:hover,
+  &.active:focus {
+    z-index: 2; 
+
+    // Force color to inherit for custom content
+    .item-heading {
+      color: inherit;
+    }
+  }
+
+  // Different themes for list items
+  &.item-default { @include item-style-active($brand-default, $gray-dark, $gray-dark); }
+  &.item-secondary { @include item-style-active($brand-default, $gray-dark, $gray-dark); }
+  &.item-primary { @include item-style-active($brand-primary, $gray-dark, $white); }
+  &.item-info { @include item-style-active($brand-info, $gray-dark, $white); }
+  &.item-success { @include item-style-active($brand-success, $gray-dark, $white); }
+  &.item-warning { @include item-style-active($brand-warning, $gray-dark, $white); }
+  &.item-danger { @include item-style-active($brand-danger, $gray-dark, $white); }
+  &.item-dark { @include item-style-active($brand-dark, $gray-dark, $white); }
+}
+
+// Linked list items
+a.item {
+  color: $gray-dark;
+  text-decoration: none;
+
+  // Hover state
+  &:hover,
+  &:focus {
+    text-decoration: none;
+  }
+}
+
+
+// List Item Content
+// -------------------------------
+
+.item-content {
+  /**
+   * The content area of a complex list item. This area can
+   * Slide left and right and be dragged to support different
+   * UI interactions.
+   */
+  position: relative;
+
+  z-index: 2;
+  overflow: hidden;
+  padding: $item-padding (($item-padding * 3) - 5) $item-padding $item-padding;
+
+  border: none;
+  background-color: #fff;
+  box-shadow: inset 0 0 $item-border-width #666;
+  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;
+}
+
+
+// List Icons
+// -------------------------------
+
+.item-content i {
+  @include display-flex();
+  @include align-items(center);
+  position: absolute;
+  top: 0;
+  height: 100%;
+  font-size: $item-icon-font-size;
+
+}
+
+.item-icon-left .item-content {
+  padding-left: ($item-padding * 3);
+
+  i {
+    left: $item-padding / 2;
+  }
+}
+
+.item-icon-right .item-content i {
+  right: $item-padding / 2;
+}
+
+.item-icon-left.item-icon-right .item-content i:last-child {
+  left: auto;
+}
+
+a .item-content:after,
+button .item-content:after {
+  /* By default, both <a> and <button> have right side arrow icons */
+  @include display-flex();
+  @include align-items(center);
+  position: absolute;
+  top: 0;
+  right: $item-padding - 4;
+  height: 100%;
+  color: #ccc;
+  content: "\e0fc"; // icon-chevron-right
+  text-transform: none;
+  font-weight: normal;
+  font-style: normal;
+  font-variant: normal;
+  font-size: 16px;
+  font-family: 'ionicons';
+  line-height: 1;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+}
+
+// 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;
+  }
+}
+
+
+// Item Thumbnails
+// -------------------------------
+
+.item-thumbnail .item-content {
+  padding-left: $item-thumbnail-width + ($item-padding * 2);
+  min-height: $item-thumbnail-width + ($item-padding * 2);
+
+  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 {
+    position: absolute;
+    top: 0;
+    left: 0;
+    max-width: $item-thumbnail-lrg-width;
+    max-height: $item-thumbnail-lrg-height;
+    width: 100%;
+  }
+}
+
+
+// Item Image
+// -------------------------------
+
+.item-image .item-content {
+  text-align: center;
+  padding: 0;
+  
+  img:first-child, .list-img {
+    width: 100%;
+  }
+}
+
+
+// Item Divider
+// -------------------------------
+
+.item-divider {
+  margin: $item-border-width * -1;
+  padding: $item-divider-padding;
+  border: none;
+  background-color: $item-divider-bg;
+  box-shadow: inset 0 0 $item-border-width #666;
+  color: $item-divider-color;
+  font-weight: bold;
+}
+.card.list .item-divider {
+  margin-right: 0;
+  margin-left: 0;
+}
+
+
+// Item Animations
+// -------------------------------
+
+.item-sliding {
+  -webkit-transition: -webkit-transform 0.1s ease-in-out;
+}
+
+.item-reordering {
+  position: absolute;
+  width: 100%;
+}
+
+.item-placeholder {
+  opacity: 0.7;
+}
+
+/**
+ * The left-side edit area of a complex list item. This area shows
+ * whe the list item is in edit mode.
+ */
+.item-edit {
+  position: absolute;
+  top: 0;
+  left: -48px;
+  z-index: 0;
+  width: 48px;
+  height: 100%;
+  line-height: 100%;
+  opacity: 0;
+
+  -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
+
+  .button {
+    height: 100%;
+  }
+
+  i {
+    color: $brand-danger;
+    font-size: 24px;
+  }
+
+  &.ng-enter {
+    left: -48px;
+    opacity: 0;
+    -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  }
+  &.ng-enter-active {
+    left: 0;
+    opacity: 1;
+  }
+  &.ng-leave {
+    left: 0px;
+    opacity: 1;
+    -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  }
+  &.ng-leave-active {
+    left: -48px;
+    opacity: 0;
+  }
+}
+
+.item-drag {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 0;
+  height: 100%;
+
+  .button {
+    height: 100%;
+    border: none;
+    border-radius: 0;
+  }
+}
+/**
+ * The hidden right-side buttons that can be exposed under a list item
+ * with dragging.
+ */
+.item-buttons {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1;
+  height: 100%;
+
+  .button {
+    height: 100%;
+    border: none;
+    border-radius: 0;
+  }
+}
\ No newline at end of file
diff --git a/scss/ionic/_list.scss b/scss/ionic/_list.scss
index ab7b036153..0a48beb607 100644
--- a/scss/ionic/_list.scss
+++ b/scss/ionic/_list.scss
@@ -7,257 +7,29 @@
   overflow: hidden;
   // No need to set list-style: none; since .list-item is block level
   margin-bottom: 20px;
-  padding-top: $list-item-border-width;
-  padding-bottom: $list-item-border-width;
+  padding-top: $item-border-width;
+  padding-bottom: $item-border-width;
   padding-left: 0; // reset padding because ul and ol
 
   // make room for the list item borders
 }
 
-
-// List Item
-// -------------------------------
-
-.list-item {
-  position: relative;
-
-  z-index: 2; // Make sure the borders and stuff don't get hidden by children
-  display: block;
-  margin: $list-item-border-width * -1;
-
-  border: none;
-
-  background-color: $list-default-background;
-  box-shadow: inset 0 0 $list-item-border-width #666;
-
-  // Align badges within list items
-  .badge {
-    float: right;
-  }
-
-  .badge + .badge {
-    margin-right: 5px;
-  }
-
-  // Active class on item itself, not parent
-  &.active,
-  &.active:hover,
-  &.active:focus {
-    z-index: 2; 
-
-    // Force color to inherit for custom content
-    .list-item-heading {
-      color: inherit;
-    }
-  }
-
-  // Different themes for list items
-  &.list-item-default { @include list-item-style-active($brand-default, $gray-dark, $gray-dark); }
-  &.list-item-secondary { @include list-item-style-active($brand-default, $gray-dark, $gray-dark); }
-  &.list-item-primary { @include list-item-style-active($brand-primary, $gray-dark, $white); }
-  &.list-item-info { @include list-item-style-active($brand-info, $gray-dark, $white); }
-  &.list-item-success { @include list-item-style-active($brand-success, $gray-dark, $white); }
-  &.list-item-warning { @include list-item-style-active($brand-warning, $gray-dark, $white); }
-  &.list-item-danger { @include list-item-style-active($brand-danger, $gray-dark, $white); }
-  &.list-item-dark { @include list-item-style-active($brand-dark, $gray-dark, $white); }
-}
-
-// Linked list items
-a.list-item {
-  color: $gray-dark;
-  text-decoration: none;
-
-  // Hover state
-  &:hover,
-  &:focus {
-    text-decoration: none;
-  }
-}
-
 /**
  * List editing styles. These trigger when the entire list goes into
  * "edit mode"
  */
 .list-editing {
-  .list-item-content {
+  .item-content {
     margin-right: 30px;
     margin-left: 30px;
   }
-  .list-item-edit {
+  .item-edit {
     left: 0px;
     opacity: 1;
   }
 }
 
 
-// List Item Content
-// -------------------------------
-
-.list-item-content {
-  /**
-   * The content area of a complex list item. This area can
-   * Slide left and right and be dragged to support different
-   * UI interactions.
-   */
-  position: relative;
-
-  z-index: 2;
-  overflow: hidden;
-  padding: $list-item-padding (($list-item-padding * 3) - 5) $list-item-padding $list-item-padding;
-
-  border: none;
-  background-color: #fff;
-  box-shadow: inset 0 0 $list-item-border-width #666;
-  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;
-  }
-}
-
-.list-item-text-wrap {
-  overflow: auto;
-  white-space: normal;
-}
-
-
-// List Icons
-// -------------------------------
-
-.list-item-content i {
-  @include display-flex();
-  @include align-items(center);
-  position: absolute;
-  top: 0;
-  height: 100%;
-  font-size: $list-icon-font-size;
-
-}
-
-.list-icon-left .list-item-content {
-  padding-left: ($list-item-padding * 3);
-
-  i {
-    left: $list-item-padding / 2;
-  }
-}
-
-.list-icon-right .list-item-content i {
-  right: $list-item-padding / 2;
-}
-
-.list-icon-left.list-icon-right .list-item-content i:last-child {
-  left: auto;
-}
-
-a .list-item-content:after,
-button .list-item-content:after {
-  /* By default, both <a> and <button> have right side arrow icons */
-  @include display-flex();
-  @include align-items(center);
-  position: absolute;
-  top: 0;
-  right: $list-item-padding - 4;
-  height: 100%;
-  color: #ccc;
-  content: "\e0fc"; // icon-chevron-right
-  text-transform: none;
-  font-weight: normal;
-  font-style: normal;
-  font-variant: normal;
-  font-size: 16px;
-  font-family: 'ionicons';
-  line-height: 1;
-  speak: none;
-  -webkit-font-smoothing: antialiased;
-}
-
-// do not show the default right arrow when they want their own right side icon
-a.list-icon-right,
-button.list-icon-right {
-  .list-item-content:after {
-    display: none;
-  }
-}
-
-
-// List Thumbnails
-// -------------------------------
-
-.list-item-thumbnail .list-item-content {
-  padding-left: $list-thumbnail-width + ($list-item-padding * 2);
-  min-height: $list-thumbnail-width + ($list-item-padding * 2);
-
-  img:first-child, .list-img {
-    position: absolute;
-    top: $list-item-padding;
-    left: $list-item-padding;
-    max-width: $list-thumbnail-width;
-    max-height: $list-thumbnail-height;
-    width: 100%;
-    border-radius: 4px;
-  }
-}
-
-.list-item-thumbnail-lrg .list-item-content {
-  padding-left: $list-thumbnail-lrg-width + $list-item-padding;
-  min-height: $list-thumbnail-lrg-height;
-
-  img:first-child, .list-img {
-    position: absolute;
-    top: 0;
-    left: 0;
-    max-width: $list-thumbnail-lrg-width;
-    max-height: $list-thumbnail-lrg-height;
-    width: 100%;
-  }
-}
-
-
-// List Image
-// -------------------------------
-
-.list-item-image .list-item-content {
-  text-align: center;
-  padding: 0;
-  
-  img:first-child, .list-img {
-    width: 100%;
-  }
-}
-
-
 // List Header
 // -------------------------------
 
@@ -270,125 +42,6 @@ button.list-icon-right {
 }
 
 
-// List Divider
-// -------------------------------
-
-.list-divider {
-  margin: $list-item-border-width * -1;
-  padding: $list-divider-padding;
-  border: none;
-  background-color: $list-divider-bg;
-  box-shadow: inset 0 0 $list-item-border-width #666;
-  color: $list-divider-color;
-  font-weight: bold;
-}
-.card.list .list-divider {
-  margin-right: 0;
-  margin-left: 0;
-}
-
-// inset so they layout the same as list items
-.list-divider,
-.list-header {
-  //margin-left: $list-item-border-width * -1;
-  //margin-right: $list-item-border-width * -1;
-}
-
-
-// List Animations
-// -------------------------------
-
-.list-item-sliding {
-  -webkit-transition: -webkit-transform 0.1s ease-in-out;
-}
-
-.list-item-reordering {
-  position: absolute;
-  width: 100%;
-}
-
-.list-item-placeholder {
-  opacity: 0.7;
-}
-
-/**
- * The left-side edit area of a complex list item. This area shows
- * whe the list item is in edit mode.
- */
-.list-item-edit {
-  position: absolute;
-  top: 0;
-  left: -48px;
-  z-index: 0;
-  width: 48px;
-  height: 100%;
-  line-height: 100%;
-  opacity: 0;
-
-  -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
-
-  .button {
-    height: 100%;
-  }
-
-  i {
-    color: $brand-danger;
-    font-size: 24px;
-  }
-
-
-  &.ng-enter {
-    left: -48px;
-    opacity: 0;
-    -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
-  }
-  &.ng-enter-active {
-    left: 0;
-    opacity: 1;
-  }
-  &.ng-leave {
-    left: 0px;
-    opacity: 1;
-    -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
-  }
-  &.ng-leave-active {
-    left: -48px;
-    opacity: 0;
-  }
-}
-
-.list-item-drag {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 0;
-  height: 100%;
-
-  .button {
-    height: 100%;
-    border: none;
-    border-radius: 0;
-  }
-}
-/**
- * The hidden right-side buttons that can be exposed under a list item
- * with dragging.
- */
-.list-item-buttons {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 1;
-  height: 100%;
-
-  .button {
-    height: 100%;
-    border: none;
-    border-radius: 0;
-  }
-}
-
-
 // List Refresher
 // -------------------------------
 
diff --git a/scss/ionic/_mixins.scss b/scss/ionic/_mixins.scss
index e16a447df2..60306fb3bb 100644
--- a/scss/ionic/_mixins.scss
+++ b/scss/ionic/_mixins.scss
@@ -51,7 +51,7 @@
   }
 }
 
-@mixin list-style($bgColor, $borderColor, $color) {
+@mixin item-style($bgColor, $borderColor, $color) {
   color: $color;
 	background-color: $bgColor;
 	border-color: $borderColor;
@@ -74,7 +74,7 @@
 }
 
 //$bgColor, $borderColor, $color, 
-@mixin list-item-style-active($activeBgColor, $activeBorderColor, $activeColor) {
+@mixin item-style-active($activeBgColor, $activeBorderColor, $activeColor) {
   /*
   color: $color;
   background-color: $bgColor;
diff --git a/scss/ionic/_radio.scss b/scss/ionic/_radio.scss
index 54beb9f17d..3d05161e45 100644
--- a/scss/ionic/_radio.scss
+++ b/scss/ionic/_radio.scss
@@ -2,33 +2,33 @@
 // Radio Buttons
 // -------------------------------
 
-.radio-buttton-list .list-item-content {
+.item-radio .item-content {
   /* give some room to the right for the checkmark icon */
-  padding-right: $list-item-padding * 4;
+  padding-right: $item-padding * 4;
 }
 
-.radio-buttton-list .radio-button-icon {
+.item-radio .radio-icon {
   /* checkmark icon will be hidden by default */
   position: absolute;
   top: 0;
   right: 0;
   z-index: 3;
   visibility: hidden;
-  padding: $list-item-padding - 2;
+  padding: $item-padding - 2;
   height: 100%;
   font-size: 24px;
 }
 
-.radio-buttton-list input[type="radio"] {
+.item-radio input[type="radio"] {
   /* hide any radio button inputs elements (the ugly circles) */
   display: none;
 
-  &:checked ~ .list-item-content {
-    /* style the list item content when its checked */
+  &:checked ~ .item-content {
+    /* style the item content when its checked */
     background: #f7f7f7;
   }
 
-  &:checked ~ .radio-button-icon {
+  &:checked ~ .radio-icon {
     /* show the checkmark icon when its checked */
     visibility: visible;
   }
diff --git a/scss/ionic/_toggle.scss b/scss/ionic/_toggle.scss
index ed50a33bed..dc659ae9cd 100644
--- a/scss/ionic/_toggle.scss
+++ b/scss/ionic/_toggle.scss
@@ -8,7 +8,7 @@
   display: inline-block;
 }
 
-.toggle input {
+.toggle input[type="checkbox"] {
   /* set the actual checkbox input to have a width/height */
   /* but hide its appearance, then use :after to style it */
   width: $toggle-width;
@@ -72,14 +72,14 @@
 }
 
 /* make sure list item content have enough padding on right to fit the toggle */
-.toggle-item .list-item-content {
-  padding-right: ($list-item-padding * 3) + $toggle-width;
+.item-toggle .item-content {
+  padding-right: ($item-padding * 3) + $toggle-width;
 }
 
 /* position the toggle to the right within a list item */
-.toggle-item .toggle {
+.item-toggle .toggle {
   position: absolute;
-  top: $list-item-padding / 2;
-  right: $list-item-padding;
+  top: $item-padding / 2;
+  right: $item-padding;
   z-index: 3;
 }
diff --git a/scss/ionic/_variables.scss b/scss/ionic/_variables.scss
index efeb334941..fe9819857a 100644
--- a/scss/ionic/_variables.scss
+++ b/scss/ionic/_variables.scss
@@ -347,14 +347,6 @@ $list-header-color:               #222;
 $list-header-padding:             5px 15px;
 $list-header-margin-top:          20px !default;
 
-$list-divider-bg:                 #f5f5f5;
-$list-divider-color:              #222;
-$list-divider-padding:            5px 15px;
-
-$list-item-border-width:          1px !default;
-$list-item-border-color:          #ddd;
-$list-item-padding:               15px !default;
-
 $list-default-background:         $brand-default;
 $list-default-border:             #ddd;
 
@@ -379,13 +371,39 @@ $list-danger-border:              $brand-danger;
 $list-dark-background:            $brand-dark;
 $list-dark-border:                $brand-dark;
 
-$list-icon-font-size:             28px !default;
 
-$list-thumbnail-width:           40px !default;
-$list-thumbnail-height:          40px !default;
+// Cards
+// -------------------------------
 
-$list-thumbnail-lrg-width:        80px !default;
-$list-thumbnail-lrg-height:       80px !default;
+$card-header-bg:            #F5F5F5;
+$card-body-bg:              #fff;
+$card-footer-bg:            #F5F5F5;
+
+$card-padding:              10px !default;
+$card-border-width:         1px !default;
+
+$card-border-color:         #ccc;
+$card-border-radius:        2px !default;
+
+
+// Items
+// -------------------------------
+
+$item-border-width:            1px !default;
+$item-border-color:            #ddd;
+$item-padding:                 15px !default;
+
+$item-divider-bg:              #f5f5f5;
+$item-divider-color:           #222;
+$item-divider-padding:         5px 15px;
+
+$item-icon-font-size:          28px !default;
+
+$item-thumbnail-width:           40px !default;
+$item-thumbnail-height:          40px !default;
+
+$item-thumbnail-lrg-width:        80px !default;
+$item-thumbnail-lrg-height:       80px !default;
 
 
 // Icons
@@ -403,18 +421,6 @@ $menu-width:               270px;
 $menu-animation-speed:     200ms;
 
 
-// Cards
-// -------------------------------
-
-$card-header-bg:            #F5F5F5;
-$card-body-bg:              #fff;
-$card-footer-bg:            #F5F5F5;
-$card-padding:              10px !default;
-$card-border-width:         1px !default;
-$card-border-color:         #ccc;
-$card-border-radius:        2px !default;
-
-
 // Modals
 // -------------------------------
 
diff --git a/scss/ionic/ionic-scoped.scss b/scss/ionic/ionic-scoped.scss
index 199c1a3482..f69e26e762 100644
--- a/scss/ionic/ionic-scoped.scss
+++ b/scss/ionic/ionic-scoped.scss
@@ -22,7 +22,9 @@
   "tabs",
   "menu",
   "modal",
+  "items",
   "list",
+  "card",
 
   // Forms
   "form",
@@ -40,7 +42,6 @@
 
   // Components
   "alerts",
-  "card",
 
   // Animations
   "animations",
diff --git a/scss/ionic/ionic.scss b/scss/ionic/ionic.scss
index aadad20ef0..60e840e68f 100644
--- a/scss/ionic/ionic.scss
+++ b/scss/ionic/ionic.scss
@@ -21,7 +21,9 @@
   "menu",
   "modal",
   "popup",
+  "items",
   "list",
+  "card",
 
   // Forms
   "form",
@@ -39,7 +41,6 @@
 
   // Components
   "alerts",
-  "card",
 
   "slideBox",
   "scroll",
diff --git a/test/input-checkbox.html b/test/input-checkbox.html
index b6e7ccf977..f56d476366 100644
--- a/test/input-checkbox.html
+++ b/test/input-checkbox.html
@@ -13,54 +13,48 @@
       <h1 class="title">Input: Checkbox</h1>
     </header>
 
-    <div class="content-wrapper">
+    <main class="content has-header">
+      
+      <ul class="list">
+        <li class="item item-checkbox">
+           <div class="item-content">
+            Flux Capacitor
+           </div>
+           <label class="checkbox">
+             <input type="checkbox" checked>
+           </label>
+        </li>
+        <li class="item item-checkbox">
+           <div class="item-content">
+            1.21 Gigawatts
+           </div>
+           <label class="checkbox">
+             <input type="checkbox" checked>
+           </label>
+        </li>
+        <li class="item item-checkbox">
+           <div class="item-content">
+            88 MPH
+           </div>
+           <label class="checkbox">
+             <input type="checkbox" checked>
+           </label>
+        </li>
+        <li class="item item-checkbox">
+           <div class="item-content">
+            Plutonium Resupply
+           </div>
+           <label class="checkbox">
+             <input type="checkbox">
+           </label>
+        </li>
+      </ul>
 
-      <main class="content has-header">
-        
-        <ul class="padding">
-          <li class="list-item checkbox-item">
-             <div class="list-item-content">
-              Flux Capacitor
-             </div>
-             <label class="checkbox">
-               <input type="checkbox" checked>
-             </label>
-          </li>
-          <li class="list-item checkbox-item">
-             <div class="list-item-content">
-              1.21 Gigawatts
-             </div>
-             <label class="checkbox">
-               <input type="checkbox" checked>
-             </label>
-          </li>
-          <li class="list-item checkbox-item">
-             <div class="list-item-content">
-              88 MPH
-             </div>
-             <label class="checkbox">
-               <input type="checkbox" checked>
-             </label>
-          </li>
-          <li class="list-item checkbox-item">
-             <div class="list-item-content">
-              Plutonium Resupply
-             </div>
-             <label class="checkbox">
-               <input type="checkbox">
-             </label>
-          </li>
-        </ul>
+      <div class="padding">
+        <p><a class="button button-secondary" href="index.html">Homepage</a></p>
+      </div>
 
-        <div class="padding">
-          <p><a class="button button-secondary" href="index.html">Homepage</a></p>
-        </div>
-
-      </main>
-
-    </div>
-
-    <script src="../dist/js/ionic.js"></script>
+    </main>
 
   </body>
 </html>
diff --git a/test/input-radio.html b/test/input-radio.html
index 7e839237e3..26d7c49264 100644
--- a/test/input-radio.html
+++ b/test/input-radio.html
@@ -21,22 +21,54 @@
 
       <div class="content has-header">
 
-        <div class="radio-buttton-list">
+        <div class="list">
 
-          <label class="list-item">
-            <input type="radio" name="serverside" value="go" checked>
-            <div class="list-item-content">
+          <label class="item item-radio">
+            <input type="radio" name="serverside" value="go" checked="checked">
+            <div class="item-content">
               Go
             </div>
-            <div class="radio-button-icon icon-checkmark"></div>
+            <i class="radio-icon icon-checkmark"></i>
           </label>
 
-          <label class="list-item">
+          <label class="item item-radio">
             <input type="radio" name="serverside" value="python">
-            <div class="list-item-content">
+            <div class="item-content">
               Python
             </div>
-            <div class="radio-button-icon icon-checkmark"></div>
+            <i class="radio-icon icon-checkmark"></i>
+          </label>
+
+          <label class="item item-radio">
+            <input type="radio" name="serverside" value="ruby">
+            <div class="item-content">
+              Ruby
+            </div>
+            <i class="radio-icon icon-checkmark"></i>
+          </label>
+
+          <label class="item item-radio">
+            <input type="radio" name="serverside" value=".net">
+            <div class="item-content">
+              .Net
+            </div>
+            <i class="radio-icon icon-checkmark"></i>
+          </label>
+
+          <label class="item item-radio">
+            <input type="radio" name="serverside" value="java">
+            <div class="item-content">
+              Java
+            </div>
+            <i class="radio-icon icon-checkmark"></i>
+          </label>
+
+          <label class="item item-radio">
+            <input type="radio" name="serverside" value="php">
+            <div class="item-content">
+              PHP
+            </div>
+            <i class="radio-icon icon-checkmark"></i>
           </label>
 
         </div>
diff --git a/test/input-toggle.html b/test/input-toggle.html
index fa723e442c..a4bba7a002 100644
--- a/test/input-toggle.html
+++ b/test/input-toggle.html
@@ -13,52 +13,70 @@
       <h1 class="title">Input: Toggle</h1>
     </header>
 
-    <div class="content-wrapper">
+    <main class="content has-header">
+      
+      <ul class="list">
+        <li class="item item-toggle">
+           <div class="item-content">
+            HTML5
+           </div>
+           <label class="toggle">
+             <input type="checkbox" checked>
+             <div class="handle"></div>
+           </label>
+        </li>
+        <li class="item item-toggle">
+           <div class="item-content">
+            CSS3
+           </div>
+           <label class="toggle">
+             <input type="checkbox" checked>
+             <div class="handle"></div>
+           </label>
+        </li>
+        <li class="item item-toggle">
+           <div class="item-content">
+            Flashplayer
+           </div>
+           <label class="toggle">
+             <input type="checkbox">
+             <div class="handle"></div>
+           </label>
+        </li>
+        <li class="item item-toggle">
+           <div class="item-content">
+            Java Applets
+           </div>
+           <label class="toggle">
+             <input type="checkbox">
+             <div class="handle"></div>
+           </label>
+        </li>
+        <li class="item item-toggle">
+           <div class="item-content">
+            JavaScript
+           </div>
+           <label class="toggle">
+             <input type="checkbox" checked>
+             <div class="handle"></div>
+           </label>
+        </li>
+        <li class="item item-toggle">
+           <div class="item-content">
+            Silverlight
+           </div>
+           <label class="toggle">
+             <input type="checkbox">
+             <div class="handle"></div>
+           </label>
+        </li>
+      </ul>
 
-      <main class="content has-header">
-        
-        <ul>
-          <li class="list-item toggle-item">
-             <div class="list-item-content">
-              Flux Capacitor
-             </div>
-             <label class="toggle">
-               <input type="checkbox" checked>
-               <div class="handle"></div>
-             </label>
-          </li>
-          <li class="list-item toggle-item">
-             <div class="list-item-content">
-              1.21 Gigawatts
-             </div>
-             <label class="toggle">
-               <input type="checkbox" checked>
-               <div class="handle"></div>
-             </label>
-          </li>
-          <li class="list-item toggle-item">
-             <div class="list-item-content">
-              88 MPH
-             </div>
-             <label class="toggle">
-               <input type="checkbox" checked>
-               <div class="handle"></div>
-             </label>
-          </li>
-          <li class="list-item toggle-item">
-             <div class="list-item-content">
-              Plutonium Resupply
-             </div>
-             <label class="toggle">
-               <input type="checkbox">
-               <div class="handle"></div>
-             </label>
-          </li>
-        </ul>
+      <div class="padding">
+        <a class="button button-secondary" href="index.html">Homepage</a>
+      </div>
 
-      </main>
-
-    </div>
+    </main>
 
     <script src="../dist/js/ionic.js"></script>
 
diff --git a/test/lists.html b/test/lists.html
index 81ea558bab..95f79284b1 100644
--- a/test/lists.html
+++ b/test/lists.html
@@ -18,84 +18,84 @@
 
         <div class="list">
 
-          <div class="list-divider">
+          <div class="item-divider">
             Work
           </div>
 
-          <a href="#" class="list-item list-icon-left">
-            <div class="list-item-content">
+          <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>
           </a>
 
-          <a href="#" class="list-item list-icon-left">
-            <div class="list-item-content">
+          <a href="#" class="item item-icon-left">
+            <div class="item-content">
               <i class="icon-chatbubble-working"></i>
               Call Ma
-              <span class="list-label-right">
+              <span class="item-label-right">
                 Cell
               </span>
             </div>
           </a>
 
-          <a href="#" class="list-item list-icon-left">
-            <div class="list-item-content">
+          <a href="#" class="item item-icon-left">
+            <div class="item-content">
               <i class="icon-mic-a"></i>
               Record album
-              <span class="list-label-right">
+              <span class="item-label-right">
                 Grammy
               </span>
             </div>
           </a>
 
-          <a href="#" class="list-item list-icon-left">
-            <div class="list-item-content">
+          <a href="#" class="item item-icon-left">
+            <div class="item-content">
               <i class="icon-flask"></i>
               Breaking Bad
-              <span class="list-label-right">
+              <span class="item-label-right">
                 Blue, yellow, pink
               </span>
             </div>
           </a>
 
-          <div class="list-divider">
+          <div class="item-divider">
             Leisure
           </div>
 
-          <a href="#" class="list-item list-icon-left">
-            <div class="list-item-content">
+          <a href="#" class="item item-icon-left">
+            <div class="item-content">
               <i class="icon-game-controller-b"></i>
               Games
-              <span class="list-label-right">
+              <span class="item-label-right">
                 Super Mario
               </span>
             </div>
           </a>
 
-          <a href="#" class="list-item list-icon-left">
-            <div class="list-item-content">
+          <a href="#" class="item item-icon-left">
+            <div class="item-content">
               <i class="icon-music-note"></i>
               Music
-              <span class="list-label-right">
+              <span class="item-label-right">
                 JT
               </span>
             </div>
           </a>
 
-          <a href="#" class="list-item list-icon-left">
-            <div class="list-item-content">
+          <a href="#" class="item item-icon-left">
+            <div class="item-content">
               <i class="icon-bag"></i>
               Shopping
-              <span class="list-label-right">
+              <span class="item-label-right">
                 Bag
               </span>
             </div>
           </a>
 
-          <a href="#" class="list-item list-icon-left">
-            <div class="list-item-content">
+          <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>
@@ -110,57 +110,57 @@
             List Header
           </div>
 
-          <div href="#" class="list-item">
-            <div class="list-item-content">
+          <div href="#" class="item">
+            <div class="item-content">
               Not a link so no default right arrow
             </div>
           </div>
 
-          <a href="#" class="list-item">
-            <div class="list-item-content slide-right">
+          <a href="#" class="item">
+            <div class="item-content slide-right">
               Auto Right side arrow cuz its a link
             </div>
           </a>
 
-          <a href="#" class="list-item list-icon-right">
-            <div class="list-item-content slide-right">
+          <a href="#" class="item item-icon-right">
+            <div class="item-content slide-right">
               Processing Icon
               <i class="icon-loading"></i>
             </div>
           </a>
 
-          <div class="list-divider">
+          <div class="item-divider">
             List Divider
           </div>
 
-          <a href="#" class="list-item">
-            <div class="list-item-content slide-left">
+          <a href="#" class="item">
+            <div class="item-content slide-left">
               Computers
               <span class="badge">Badge</span>
             </div>
-            <div class="list-item-buttons">
+            <div class="item-buttons">
              <button class="button">Button</button>
            </div>
           </a>
 
-          <a href="#" class="list-item">
-            <div class="list-item-content slide-left">
+          <a href="#" class="item">
+            <div class="item-content slide-left">
               Monitors
               <span class="badge">6</span>
             </div>
-            <div class="list-item-buttons">
+            <div class="item-buttons">
              <button class="button">Button</button>
            </div>
           </a>
 
-          <a href="#" class="list-item">
-            <div class="list-item-content slide-left">
+          <a href="#" class="item">
+            <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="list-item-buttons">
+            <div class="item-buttons">
              <button class="button">Button</button>
            </div>
           </a>
@@ -170,27 +170,27 @@
         <h3>List with padding</h3>
         <div class="list padding">
 
-          <a href="#" class="list-item">
-            <div class="list-item-content slide-right">
+          <a href="#" class="item">
+            <div class="item-content slide-right">
               Madison, WI
             </div>
           </a>
 
-          <div class="list-divider">
+          <div class="item-divider">
             List Divider
           </div>
 
-          <a href="#" class="list-item">
-            <div class="list-item-content slide-left">
+          <a href="#" class="item">
+            <div class="item-content slide-left">
               Driving Directions
             </div>
-            <div class="list-item-buttons">
+            <div class="item-buttons">
              <button class="button">Button</button>
            </div>
           </a>
 
-          <a href="#" class="list-item">
-            <div class="list-item-content">
+          <a href="#" class="item">
+            <div class="item-content">
               Computers
               <span class="badge">3</span>
             </div>
@@ -201,27 +201,27 @@
         <h3>List with card</h3>
         <div class="list card">
 
-          <a href="#" class="list-item">
-            <div class="list-item-content slide-right">
+          <a href="#" class="item">
+            <div class="item-content slide-right">
               Madison, WI
             </div>
           </a>
 
-          <a href="#" class="list-item">
-            <div class="list-item-content slide-left">
+          <a href="#" class="item">
+            <div class="item-content slide-left">
               Driving Directions
             </div>
-            <div class="list-item-buttons">
+            <div class="item-buttons">
              <button class="button">Button</button>
            </div>
           </a>
 
-          <div class="list-divider">
+          <div class="item-divider">
             List Divider
           </div>
 
-          <a href="#" class="list-item">
-            <div class="list-item-content">
+          <a href="#" class="item">
+            <div class="item-content">
               Computers
               <span class="badge">3</span>
             </div>
@@ -231,25 +231,25 @@
 
         <div class="list padding-bottom">
 
-          <a href="#" class="list-item list-icon-left">
-            <div class="list-item-content slide-left">
+          <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="list-item-buttons">
+            <div class="item-buttons">
              <button class="button">Button</button>
            </div>
           </a>
 
-          <a href="#" class="list-item list-icon-left">
-            <div class="list-item-content slide-right">
+          <a href="#" class="item item-icon-left">
+            <div class="item-content slide-right">
               <i class="icon-image brand-warning"></i>
               Driving Directions
             </div>
           </a>
 
-          <a href="#" class="list-item list-icon-left">
-            <div class="list-item-content">
+          <a href="#" class="item item-icon-left">
+            <div class="item-content">
               <i class="icon-ios7-cog gray"></i>
               Settings
             </div>
@@ -259,27 +259,27 @@
 
         <div class="list padding-bottom">
 
-          <a href="#" class="list-item list-icon-left list-icon-right">
-            <div class="list-item-content">
+          <a href="#" class="item item-icon-left item-icon-right">
+            <div class="item-content">
               <i class="icon-heart brand-danger fill-icon"></i>
               Madison, WI
               <i class="icon-chevron-right"></i>
             </div>
           </a>
 
-          <a href="#" class="list-item list-icon-left list-icon-right">
-            <div class="list-item-content slide-left">
+          <a href="#" class="item item-icon-left item-icon-right">
+            <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="list-item-buttons">
+            <div class="item-buttons">
              <button class="button">Button</button>
            </div>
           </a>
 
-          <a href="#" class="list-item list-icon-left list-icon-right">
-            <div class="list-item-content slide-right">
+          <a href="#" class="item item-icon-left item-icon-right">
+            <div class="item-content slide-right">
               <i class="icon-ios7-cog gray fill-icon"></i>
               Settings
               <i class="icon-chevron-right"></i>
@@ -294,46 +294,46 @@
             Me List Header
           </div>
 
-          <a href="#" class="list-item list-icon-left">
-            <div class="list-item-content">
+          <a href="#" class="item item-icon-left">
+            <div class="item-content">
               <i class="icon-heart brand-danger fill-icon"></i>
               Icon is filled!!
             </div>
           </a>
 
-          <a href="#" class="list-item list-icon-left">
-            <div class="list-item-content">
+          <a href="#" class="item item-icon-left">
+            <div class="item-content">
               <i class="icon-image brand-warning fill-icon"></i>
               .fill-icon
             </div>
           </a>
 
-          <div class="list-divider">
+          <div class="item-divider">
             List Divider
           </div>
 
-          <a href="#" class="list-item list-icon-left list-icon-right">
-            <div class="list-item-content slide-left slide-right">
+          <a href="#" class="item item-icon-left item-icon-right">
+            <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
               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="list-item-buttons">
+            <div class="item-buttons">
              <button class="button">Button</button>
            </div>
           </a>
 
-          <a href="#" class="list-item list-icon-left list-icon-right">
-            <div class="list-item-content list-item-text-wrap slide-left slide-right">
+          <a href="#" class="item item-icon-left item-icon-right">
+            <div class="item-content item-text-wrap slide-left slide-right">
               <i class="icon-ios7-cog gray fill-icon"></i>
-              Assigned "list-item-text-wrap". This is a list item with really really really really really
+              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>
             </div>
-            <div class="list-item-buttons">
+            <div class="item-buttons">
              <button class="button">Button</button>
            </div>
           </a>
@@ -345,35 +345,35 @@
           <button class="button button-secondary" id="btn-test-left">Test Slide Left</button>
         </div>
 
-        <h3>Thumbnails .list-item-thumbnail</h3>
+        <h3>Thumbnails .item-thumbnail</h3>
         <div class="list">
 
-          <a href="#" class="list-item list-item-thumbnail">
-            <div class="list-item-content">
+          <a href="#" class="item item-thumbnail">
+            <div class="item-content">
               <img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
               <h2>Pretty Hate Machine</h2>
               <p>Nine Inch Nails</p>
             </div>
           </a>
 
-          <a href="#" class="list-item list-item-thumbnail">
-            <div class="list-item-content">
+          <a href="#" class="item item-thumbnail">
+            <div class="item-content">
               <img src="http://ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg">
               <h2>Nevermind</h2>
               <p>Nirvana</p>
             </div>
           </a>
 
-          <a href="#" class="list-item list-item-thumbnail">
-            <div class="list-item-content">
+          <a href="#" class="item item-thumbnail">
+            <div class="item-content">
               <img src="http://ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
               <h2>License To Ill</h2>
               <p>Bestie Boys</p>
             </div>
           </a>
 
-          <a href="#" class="list-item list-item-thumbnail">
-            <div class="list-item-content">
+          <a href="#" class="item item-thumbnail">
+            <div class="item-content">
               <img src="http://ecx.images-amazon.com/images/I/61e6mUocZNL.jpg">
               <h2>Dookie</h2>
               <p>Green Day</p>
@@ -382,35 +382,35 @@
 
         </div>
 
-        <h3>Large Thumbnails .list-item-thumbnail-lrg</h3>
+        <h3>Large Thumbnails .item-thumbnail-lrg</h3>
         <div class="list">
 
-          <a href="#" class="list-item list-item-thumbnail-lrg">
-            <div class="list-item-content">
+          <a href="#" class="item item-thumbnail-lrg">
+            <div class="item-content">
               <img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
               <h2>Pretty Hate Machine</h2>
               <p>Nine Inch Nails</p>
             </div>
           </a>
 
-          <a href="#" class="list-item list-item-thumbnail-lrg">
-            <div class="list-item-content">
+          <a href="#" class="item item-thumbnail-lrg">
+            <div class="item-content">
               <img src="http://ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg">
               <h2>Nevermind</h2>
               <p>Nirvana</p>
             </div>
           </a>
 
-          <a href="#" class="list-item list-item-thumbnail-lrg">
-            <div class="list-item-content">
+          <a href="#" class="item item-thumbnail-lrg">
+            <div class="item-content">
               <img src="http://ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
               <h2>License To Ill</h2>
               <p>Bestie Boys</p>
             </div>
           </a>
 
-          <a href="#" class="list-item list-item-thumbnail-lrg">
-            <div class="list-item-content">
+          <a href="#" class="item item-thumbnail-lrg">
+            <div class="item-content">
               <img src="http://ecx.images-amazon.com/images/I/61e6mUocZNL.jpg">
               <h2>Dookie</h2>
               <p>Green Day</p>
diff --git a/test/tab-bars.html b/test/tab-bars.html
index dab4d1a9a2..cd98d81568 100644
--- a/test/tab-bars.html
+++ b/test/tab-bars.html
@@ -5,92 +5,47 @@
 
     <!-- Sets initial viewport load and disables zooming  -->
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link href="../dist/ionic.css" rel="stylesheet">
-    <style>
-      .content {
-        height: 100%;
-      }
-      .bar-header {
-        position: relative;
-      }
-      .tabs {
-        position: relative;
-        margin-top: 10px;
-      }
-    </style>
+    <link href="../dist/css/ionic.css" rel="stylesheet">
   </head>
   <body>
 
-    <section>
+    <header class="bar bar-header bar-dark">
+      <h1 class="title">Tab Bars</h1>
+    </header>
 
-      <header class="bar bar-header bar-dark">
-        <h1 class="title">Tab Bars</h1>
-      </header>
+    <main class="content padding has-header">
+      <h1>Icons On Top Of Text</h1>
 
-      <main class="content padding has-header">
-        content
-      </main>
-      
-      <nav id="tab-bar" class="tabs tabs-default">
-        <a class="tab-item tab-item-danger" href="#">
-          <i class="icon-star"></i>
-          Friends
-        </a>
-        <a class="tab-item tab-item-danger">
-          <i class="icon-star-filled"></i>
-          Enemies
-        </a>
-        <a class="tab-item tab-item-danger">
-          <i class="icon-clock"></i>
-          Settings
-        </a>
-        <a class="tab-item tab-item-danger">
-          <i class="icon-keypad-filled"></i>
-          More
-        </a>
-      </nav>
+      <ul>
+        <li><a href="tab-bars-no-icons.html">No Icons</a></li>
+        <li><a href="tab-bars-only-icons.html">Only Icons</a></li>
+        <li><a href="tab-bars-only-icons.html">Icons Left Of Text</a></li>
+      </ul>
 
-    </section>
+    </main>
+    
+    <nav id="tab-bar" class="tabs tabs-default">
+      <a class="tab-item tab-item-danger" href="#">
+        <i class="icon-game-controller-a"></i>
+        Fun
+      </a>
+      <a class="tab-item tab-item-danger">
+        <i class="icon-locked"></i>
+        Security
+      </a>
+      <a class="tab-item tab-item-danger">
+        <i class="icon-heart"></i>
+        Simple
+      </a>
+      <a class="tab-item tab-item-danger">
+        <i class="icon-leaf"></i>
+        Light
+      </a>
+      <a class="tab-item tab-item-danger">
+        <i class="icon-waterdrop"></i>
+        Clean
+      </a>
+    </nav>
 
-    <script src="../dist/ionic.js"></script>
-    <script>
-      var sec = document.getElementsByTagName('section')[0];
-      var types = ['default', 'secondary', 'primary', 'info', 'success', 'warning', 'danger', 'dark'];
-      for(var i = 0; i < types.length; i++) {
-        var t = types[i];
-        sec.innerHTML += '<nav id="tab-bar" class="tabs tabs-' + t + '">' +
-          '<a class="tab-item" href="#">'+
-            '<i class="icon-star"></i>' +
-            'Friends' +
-          '</a>' +
-          '<a class="tab-item">' +
-            '<i class="icon-star-filled"></i>' +
-            'Enemies' +
-          '</a>' +
-          '<a class="tab-item">' +
-            '<i class="icon-clock"></i>' +
-            'Settings' +
-          '</a>' +
-          '<a class="tab-item">' +
-            '<i class="icon-keypad-filled"></i>' +
-            'More' +
-          '</a>' +
-        '</nav>';
-      }
-      var buttons = document.querySelectorAll('.tab-item');
-      var a;
-      for(var i = 0; i < buttons.length; i++) {
-        a = buttons[i];
-        a.addEventListener('touchstart', function() {
-          this.classList.add('active');
-        });
-        a.addEventListener('touchend', function() {
-          this.classList.remove('active');
-        });
-        a.addEventListener('touchcancel', function() {
-          this.classList.remove('active');
-        });
-      }
-    </script>
   </body>
 </html>