diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css
index 1f0d81fb0b..d8b470020f 100644
--- a/dist/css/ionic-ios7.css
+++ b/dist/css/ionic-ios7.css
@@ -960,9 +960,6 @@ address {
   padding-bottom: 1px;
   padding-left: 0; }
 
-/**
- * An individual list item.
- */
 .list-item {
   position: relative;
   z-index: 2;
@@ -1101,20 +1098,35 @@ a.list-item {
   left: 0px;
   opacity: 1; }
 
-/**
- * The content area of a complex list item. This area can
- * Slide left and right and be dragged to support different
- * UI interactions.
- */
 .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;
-  padding: 15px 45px 15px 15px;
+  overflow: hidden;
+  padding: 15px 40px 15px 15px;
   border: none;
   background-color: #fff;
   box-shadow: inset 0 0 1px #666666;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   font-size: 16px;
   -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
+  .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 {
+    margin-bottom: 0; }
+
+.list-item-text-wrap {
+  overflow: auto;
+  white-space: normal; }
 
 .list-item-content i {
   position: absolute;
@@ -1137,6 +1149,7 @@ a.list-item {
 
 a .list-item-content:after,
 button .list-item-content:after {
+  /* By default, both <a> and <button> have right side arrow icons */
   position: absolute;
   top: 0;
   right: 11px;
@@ -1159,23 +1172,27 @@ a.list-icon-right .list-item-content:after,
 button.list-icon-right .list-item-content:after {
   display: none; }
 
-.list-thumbnail h2 {
-  overflow: hidden;
+.list-thumbnail h2,
+.list-thumbnail-lrg h2 {
   margin: 0 0 8px 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   font-size: 16px; }
 
-.list-thumbnail p {
-  overflow: hidden;
-  margin-bottom: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap; }
-
 .list-thumbnail .list-item-content {
+  padding-left: 70px;
+  min-height: 70px; }
+  .list-thumbnail .list-item-content img:first-child, .list-thumbnail .list-item-content .list-img {
+    position: absolute;
+    top: 15px;
+    left: 15px;
+    max-width: 40px;
+    max-height: 40px;
+    width: 100%;
+    border-radius: 4px; }
+
+.list-thumbnail-lrg .list-item-content {
   padding-left: 95px;
   min-height: 80px; }
-  .list-thumbnail .list-item-content img:first-child, .list-thumbnail .list-item-content .list-img {
+  .list-thumbnail-lrg .list-item-content img:first-child, .list-thumbnail-lrg .list-item-content .list-img {
     position: absolute;
     top: 0;
     left: 0;
@@ -1183,6 +1200,26 @@ button.list-icon-right .list-item-content:after {
     max-height: 80px;
     width: 100%; }
 
+.list-header {
+  margin-top: 20px;
+  padding: 5px 15px;
+  background-color: transparent;
+  color: #222222;
+  font-weight: bold; }
+
+.list-divider {
+  margin: -1px;
+  padding: 5px 15px;
+  border: none;
+  background-color: whitesmoke;
+  box-shadow: inset 0 0 1px #666666;
+  color: #222222;
+  font-weight: bold; }
+
+.card.list .list-divider {
+  margin-right: 0;
+  margin-left: 0; }
+
 .list-item-sliding {
   -webkit-transition: -webkit-transform 0.1s ease-in-out; }
 
@@ -1253,43 +1290,19 @@ button.list-icon-right .list-item-content:after {
     border: none;
     border-radius: 0; }
 
-/**
- * A list header.
- */
-.list-header {
-  margin-top: 20px;
-  padding: 5px 15px;
-  background-color: transparent;
-  color: #222222;
-  font-weight: bold; }
-
-/**
- * A list divider.
- */
-.list-divider {
-  margin: -1px;
-  padding: 5px 15px;
-  border: none;
-  background-color: whitesmoke;
-  box-shadow: inset 0 0 1px #666666;
-  color: #222222;
-  font-weight: bold; }
-
-.card.list .list-divider {
-  margin-left: 0;
-  margin-right: 0; }
+.list-refresher {
+  overflow: hidden;
+  height: 0;
+  background-color: red; }
 
 .card.list .list-item {
   padding-right: 1px;
   padding-left: 1px; }
 
-/**
- * List refreser elements
- */
-.list-refresher {
-  overflow: hidden;
-  height: 0;
-  background-color: red; }
+.list-label-right {
+  float: right;
+  color: #aaa;
+  font-size: 14px; }
 
 form {
   margin: 0 0 1.42857; }
@@ -1886,11 +1899,11 @@ a.button {
 .badge {
   display: inline-block;
   min-width: 10px;
-  padding: 3px 7px;
-  font-size: 11px;
+  padding: 3px 8px;
+  font-size: 14px;
   font-weight: bold;
   color: white;
-  line-height: 1;
+  line-height: 16px;
   vertical-align: baseline;
   white-space: nowrap;
   text-align: center;
@@ -1903,6 +1916,45 @@ a.button {
   position: relative;
   top: -1px; }
 
+.badge-default {
+  background: white; }
+
+.badge-secondary {
+  background: whitesmoke; }
+
+.badge-primary {
+  background: #4a87ee; }
+
+.badge-info {
+  background: #43cee6; }
+
+.badge-success {
+  background: #66cc33; }
+
+.badge-warning {
+  background: #f0b840; }
+
+.badge-danger {
+  background: #ef4e3a; }
+
+.badge-dark {
+  background: #444444; }
+
+.badge-gray-darker {
+  background: #222222; }
+
+.badge-gray-dark {
+  background: #333333; }
+
+.badge-gray {
+  background: #555555; }
+
+.badge-gray-light {
+  background: #999999; }
+
+.badge-gray-ligher {
+  background: #eeeeee; }
+
 .alert {
   margin: 10px;
   padding: 8px 35px 8px 14px;
@@ -2099,6 +2151,19 @@ a.button {
     -webkit-animation: fadeIn 0.3s;
     animation: fadeIn 0.3s; }
 
+@-moz-keyframes spin {
+  100% {
+    -moz-transform: rotate(360deg); } }
+
+@-webkit-keyframes spin {
+  100% {
+    -webkit-transform: rotate(360deg); } }
+
+@keyframes spin {
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg); } }
+
 .fill-icon {
   color: white !important; }
   .fill-icon:before {
@@ -2133,6 +2198,36 @@ a.button {
   .fill-icon.gray-lighter:before {
     background: #eeeeee; }
 
+.icon-loading {
+  font-family: 'ionicons';
+  speak: none;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-animation: spin 0.75s linear infinite;
+  -moz-animation: spin 0.75s linear infinite;
+  animation: spin 0.75s linear infinite; }
+  .icon-loading:before {
+    content: "\e036"; }
+
+.icon-refreshing {
+  font-family: 'ionicons';
+  speak: none;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-animation: spin 0.75s linear infinite;
+  -moz-animation: spin 0.75s linear infinite;
+  animation: spin 0.75s linear infinite; }
+  .icon-refreshing:before {
+    content: "\e036"; }
+
 .hidden,
 .hide {
   display: none !important; }
diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css
index d81c602258..f3e04f3121 100644
--- a/dist/css/ionic-scoped.css
+++ b/dist/css/ionic-scoped.css
@@ -149,18 +149,10 @@
   /**
    * Modals are independent windows that slide in from off-screen.
    */
-  /**
-   * An individual list item.
-   */
   /**
    * List editing styles. These trigger when the entire list goes into
    * "edit mode"
    */
-  /**
-   * The content area of a complex list item. This area can
-   * Slide left and right and be dragged to support different
-   * UI interactions.
-   */
   /**
    * The left-side edit area of a complex list item. This area shows
    * whe the list item is in edit mode.
@@ -169,15 +161,6 @@
    * The hidden right-side buttons that can be exposed under a list item
    * with dragging.
    */
-  /**
-   * A list header.
-   */
-  /**
-   * A list divider.
-   */
-  /**
-   * List refreser elements
-   */
   /* the checkmark within the box */
   /* what the background looks like when its checked */
   /* what the checkmark looks like when its checked */
@@ -220,6 +203,19 @@
 
     to {
       opacity: 1; } }
+
+  @-moz-keyframes spin {
+    100% {
+      -moz-transform: rotate(360deg); } }
+
+  @-webkit-keyframes spin {
+    100% {
+      -webkit-transform: rotate(360deg); } }
+
+  @keyframes spin {
+    100% {
+      -webkit-transform: rotate(360deg);
+      transform: rotate(360deg); } }
  }
   .ionic [data-icon]:before {
     font-family: 'ionicons';
@@ -1820,14 +1816,33 @@
     left: 0px;
     opacity: 1; }
   .ionic .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;
-    padding: 15px 45px 15px 15px;
+    overflow: hidden;
+    padding: 15px 40px 15px 15px;
     border: none;
     background-color: #fff;
     box-shadow: inset 0 0 1px #666666;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     font-size: 16px;
     -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
+    .ionic .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 {
+      margin-bottom: 0; }
+  .ionic .list-item-text-wrap {
+    overflow: auto;
+    white-space: normal; }
   .ionic .list-item-content i {
     position: absolute;
     top: 0;
@@ -1845,6 +1860,7 @@
     left: auto; }
   .ionic a .list-item-content:after,
   .ionic button .list-item-content:after {
+    /* By default, both <a> and <button> have right side arrow icons */
     position: absolute;
     top: 0;
     right: 11px;
@@ -1865,27 +1881,48 @@
   .ionic a.list-icon-right .list-item-content:after,
   .ionic button.list-icon-right .list-item-content:after {
     display: none; }
-  .ionic .list-thumbnail h2 {
-    overflow: hidden;
+  .ionic .list-thumbnail h2,
+  .ionic .list-thumbnail-lrg h2 {
     margin: 0 0 8px 0;
-    text-overflow: ellipsis;
-    white-space: nowrap;
     font-size: 16px; }
-  .ionic .list-thumbnail p {
-    overflow: hidden;
-    margin-bottom: 0;
-    text-overflow: ellipsis;
-    white-space: nowrap; }
   .ionic .list-thumbnail .list-item-content {
+    padding-left: 70px;
+    min-height: 70px; }
+    .ionic .list-thumbnail .list-item-content img:first-child, .ionic .list-thumbnail .list-item-content .list-img {
+      position: absolute;
+      top: 15px;
+      left: 15px;
+      max-width: 40px;
+      max-height: 40px;
+      width: 100%;
+      border-radius: 4px; }
+  .ionic .list-thumbnail-lrg .list-item-content {
     padding-left: 95px;
     min-height: 80px; }
-    .ionic .list-thumbnail .list-item-content img:first-child, .ionic .list-thumbnail .list-item-content .list-img {
+    .ionic .list-thumbnail-lrg .list-item-content img:first-child, .ionic .list-thumbnail-lrg .list-item-content .list-img {
       position: absolute;
       top: 0;
       left: 0;
       max-width: 80px;
       max-height: 80px;
       width: 100%; }
+  .ionic .list-header {
+    margin-top: 20px;
+    padding: 5px 15px;
+    background-color: transparent;
+    color: #222222;
+    font-weight: bold; }
+  .ionic .list-divider {
+    margin: -1px;
+    padding: 5px 15px;
+    border: none;
+    background-color: whitesmoke;
+    box-shadow: inset 0 0 1px #666666;
+    color: #222222;
+    font-weight: bold; }
+  .ionic .card.list .list-divider {
+    margin-right: 0;
+    margin-left: 0; }
   .ionic .list-item-sliding {
     -webkit-transition: -webkit-transform 0.1s ease-in-out; }
   .ionic .list-item-reordering {
@@ -1942,30 +1979,17 @@
       height: 100%;
       border: none;
       border-radius: 0; }
-  .ionic .list-header {
-    margin-top: 20px;
-    padding: 5px 15px;
-    background-color: transparent;
-    color: #222222;
-    font-weight: bold; }
-  .ionic .list-divider {
-    margin: -1px;
-    padding: 5px 15px;
-    border: none;
-    background-color: whitesmoke;
-    box-shadow: inset 0 0 1px #666666;
-    color: #222222;
-    font-weight: bold; }
-  .ionic .card.list .list-divider {
-    margin-left: 0;
-    margin-right: 0; }
-  .ionic .card.list .list-item {
-    padding-right: 1px;
-    padding-left: 1px; }
   .ionic .list-refresher {
     overflow: hidden;
     height: 0;
     background-color: red; }
+  .ionic .card.list .list-item {
+    padding-right: 1px;
+    padding-left: 1px; }
+  .ionic .list-label-right {
+    float: right;
+    color: #aaa;
+    font-size: 14px; }
   .ionic form {
     margin: 0 0 1.42857; }
   .ionic legend {
@@ -2577,11 +2601,11 @@
   .ionic .badge {
     display: inline-block;
     min-width: 10px;
-    padding: 3px 7px;
-    font-size: 11px;
+    padding: 3px 8px;
+    font-size: 14px;
     font-weight: bold;
     color: white;
-    line-height: 1;
+    line-height: 16px;
     vertical-align: baseline;
     white-space: nowrap;
     text-align: center;
@@ -2592,6 +2616,32 @@
   .ionic .button .badge {
     position: relative;
     top: -1px; }
+  .ionic .badge-default {
+    background: white; }
+  .ionic .badge-secondary {
+    background: whitesmoke; }
+  .ionic .badge-primary {
+    background: #4a87ee; }
+  .ionic .badge-info {
+    background: #43cee6; }
+  .ionic .badge-success {
+    background: #66cc33; }
+  .ionic .badge-warning {
+    background: #f0b840; }
+  .ionic .badge-danger {
+    background: #ef4e3a; }
+  .ionic .badge-dark {
+    background: #444444; }
+  .ionic .badge-gray-darker {
+    background: #222222; }
+  .ionic .badge-gray-dark {
+    background: #333333; }
+  .ionic .badge-gray {
+    background: #555555; }
+  .ionic .badge-gray-light {
+    background: #999999; }
+  .ionic .badge-gray-ligher {
+    background: #eeeeee; }
   .ionic .alert {
     margin: 10px;
     padding: 8px 35px 8px 14px;
@@ -2764,6 +2814,34 @@
       background: #999999; }
     .ionic .fill-icon.gray-lighter:before {
       background: #eeeeee; }
+  .ionic .icon-loading {
+    font-family: 'ionicons';
+    speak: none;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-animation: spin 0.75s linear infinite;
+    -moz-animation: spin 0.75s linear infinite;
+    animation: spin 0.75s linear infinite; }
+    .ionic .icon-loading:before {
+      content: "\e036"; }
+  .ionic .icon-refreshing {
+    font-family: 'ionicons';
+    speak: none;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-animation: spin 0.75s linear infinite;
+    -moz-animation: spin 0.75s linear infinite;
+    animation: spin 0.75s linear infinite; }
+    .ionic .icon-refreshing:before {
+      content: "\e036"; }
   .ionic .hidden,
   .ionic .hide {
     display: none !important; }
diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index 4f37073687..2234d6315e 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -2103,9 +2103,6 @@ address {
   padding-bottom: 1px;
   padding-left: 0; }
 
-/**
- * An individual list item.
- */
 .list-item {
   position: relative;
   z-index: 2;
@@ -2244,20 +2241,35 @@ a.list-item {
   left: 0px;
   opacity: 1; }
 
-/**
- * The content area of a complex list item. This area can
- * Slide left and right and be dragged to support different
- * UI interactions.
- */
 .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;
-  padding: 15px 45px 15px 15px;
+  overflow: hidden;
+  padding: 15px 40px 15px 15px;
   border: none;
   background-color: #fff;
   box-shadow: inset 0 0 1px #666666;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   font-size: 16px;
   -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
+  .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 {
+    margin-bottom: 0; }
+
+.list-item-text-wrap {
+  overflow: auto;
+  white-space: normal; }
 
 .list-item-content i {
   position: absolute;
@@ -2280,6 +2292,7 @@ a.list-item {
 
 a .list-item-content:after,
 button .list-item-content:after {
+  /* By default, both <a> and <button> have right side arrow icons */
   position: absolute;
   top: 0;
   right: 11px;
@@ -2302,23 +2315,27 @@ a.list-icon-right .list-item-content:after,
 button.list-icon-right .list-item-content:after {
   display: none; }
 
-.list-thumbnail h2 {
-  overflow: hidden;
+.list-thumbnail h2,
+.list-thumbnail-lrg h2 {
   margin: 0 0 8px 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   font-size: 16px; }
 
-.list-thumbnail p {
-  overflow: hidden;
-  margin-bottom: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap; }
-
 .list-thumbnail .list-item-content {
+  padding-left: 70px;
+  min-height: 70px; }
+  .list-thumbnail .list-item-content img:first-child, .list-thumbnail .list-item-content .list-img {
+    position: absolute;
+    top: 15px;
+    left: 15px;
+    max-width: 40px;
+    max-height: 40px;
+    width: 100%;
+    border-radius: 4px; }
+
+.list-thumbnail-lrg .list-item-content {
   padding-left: 95px;
   min-height: 80px; }
-  .list-thumbnail .list-item-content img:first-child, .list-thumbnail .list-item-content .list-img {
+  .list-thumbnail-lrg .list-item-content img:first-child, .list-thumbnail-lrg .list-item-content .list-img {
     position: absolute;
     top: 0;
     left: 0;
@@ -2326,6 +2343,26 @@ button.list-icon-right .list-item-content:after {
     max-height: 80px;
     width: 100%; }
 
+.list-header {
+  margin-top: 20px;
+  padding: 5px 15px;
+  background-color: transparent;
+  color: #222222;
+  font-weight: bold; }
+
+.list-divider {
+  margin: -1px;
+  padding: 5px 15px;
+  border: none;
+  background-color: whitesmoke;
+  box-shadow: inset 0 0 1px #666666;
+  color: #222222;
+  font-weight: bold; }
+
+.card.list .list-divider {
+  margin-right: 0;
+  margin-left: 0; }
+
 .list-item-sliding {
   -webkit-transition: -webkit-transform 0.1s ease-in-out; }
 
@@ -2396,43 +2433,19 @@ button.list-icon-right .list-item-content:after {
     border: none;
     border-radius: 0; }
 
-/**
- * A list header.
- */
-.list-header {
-  margin-top: 20px;
-  padding: 5px 15px;
-  background-color: transparent;
-  color: #222222;
-  font-weight: bold; }
-
-/**
- * A list divider.
- */
-.list-divider {
-  margin: -1px;
-  padding: 5px 15px;
-  border: none;
-  background-color: whitesmoke;
-  box-shadow: inset 0 0 1px #666666;
-  color: #222222;
-  font-weight: bold; }
-
-.card.list .list-divider {
-  margin-left: 0;
-  margin-right: 0; }
+.list-refresher {
+  overflow: hidden;
+  height: 0;
+  background-color: red; }
 
 .card.list .list-item {
   padding-right: 1px;
   padding-left: 1px; }
 
-/**
- * List refreser elements
- */
-.list-refresher {
-  overflow: hidden;
-  height: 0;
-  background-color: red; }
+.list-label-right {
+  float: right;
+  color: #aaa;
+  font-size: 14px; }
 
 form {
   margin: 0 0 1.42857; }
@@ -3107,11 +3120,11 @@ a.button {
 .badge {
   display: inline-block;
   min-width: 10px;
-  padding: 3px 7px;
-  font-size: 11px;
+  padding: 3px 8px;
+  font-size: 14px;
   font-weight: bold;
   color: white;
-  line-height: 1;
+  line-height: 16px;
   vertical-align: baseline;
   white-space: nowrap;
   text-align: center;
@@ -3124,6 +3137,45 @@ a.button {
   position: relative;
   top: -1px; }
 
+.badge-default {
+  background: white; }
+
+.badge-secondary {
+  background: whitesmoke; }
+
+.badge-primary {
+  background: #4a87ee; }
+
+.badge-info {
+  background: #43cee6; }
+
+.badge-success {
+  background: #66cc33; }
+
+.badge-warning {
+  background: #f0b840; }
+
+.badge-danger {
+  background: #ef4e3a; }
+
+.badge-dark {
+  background: #444444; }
+
+.badge-gray-darker {
+  background: #222222; }
+
+.badge-gray-dark {
+  background: #333333; }
+
+.badge-gray {
+  background: #555555; }
+
+.badge-gray-light {
+  background: #999999; }
+
+.badge-gray-ligher {
+  background: #eeeeee; }
+
 .alert {
   margin: 10px;
   padding: 8px 35px 8px 14px;
@@ -3371,6 +3423,19 @@ a.button {
     -webkit-animation: fadeIn 0.3s;
     animation: fadeIn 0.3s; }
 
+@-moz-keyframes spin {
+  100% {
+    -moz-transform: rotate(360deg); } }
+
+@-webkit-keyframes spin {
+  100% {
+    -webkit-transform: rotate(360deg); } }
+
+@keyframes spin {
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg); } }
+
 .fill-icon {
   color: white !important; }
   .fill-icon:before {
@@ -3405,6 +3470,36 @@ a.button {
   .fill-icon.gray-lighter:before {
     background: #eeeeee; }
 
+.icon-loading {
+  font-family: 'ionicons';
+  speak: none;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-animation: spin 0.75s linear infinite;
+  -moz-animation: spin 0.75s linear infinite;
+  animation: spin 0.75s linear infinite; }
+  .icon-loading:before {
+    content: "\e036"; }
+
+.icon-refreshing {
+  font-family: 'ionicons';
+  speak: none;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-animation: spin 0.75s linear infinite;
+  -moz-animation: spin 0.75s linear infinite;
+  animation: spin 0.75s linear infinite; }
+  .icon-refreshing:before {
+    content: "\e036"; }
+
 .hidden,
 .hide {
   display: none !important; }
diff --git a/scss/ionic/_card.scss b/scss/ionic/_card.scss
index c6e94dd137..a5750cb6dd 100644
--- a/scss/ionic/_card.scss
+++ b/scss/ionic/_card.scss
@@ -1,3 +1,7 @@
+
+// Cards
+// --------------------------------------------------
+
 .card {
   margin: $content-padding;
   border: none;
diff --git a/scss/ionic/_list.scss b/scss/ionic/_list.scss
index 6c8f683396..09fb8c71a1 100644
--- a/scss/ionic/_list.scss
+++ b/scss/ionic/_list.scss
@@ -1,5 +1,8 @@
-.list {
 
+// List
+// -------------------------------
+
+.list {
   position: relative;
   overflow: hidden;
   // No need to set list-style: none; since .list-item is block level
@@ -11,9 +14,10 @@
   // make room for the list item borders
 }
 
-/**
- * An individual list item.
- */
+
+// List Item
+// -------------------------------
+
 .list-item {
   position: relative;
 
@@ -86,27 +90,50 @@ a.list-item {
 }
 
 
+// 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.
- */
 .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;
-  //margin: $list-item-border-width * -1;
-  padding: $list-item-padding ($list-item-padding * 3) $list-item-padding $list-item-padding;
+  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;
+
+  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 {
   position: absolute;
   top: 0;
@@ -134,6 +161,7 @@ a.list-item {
 
 a .list-item-content:after,
 button .list-item-content:after {
+  /* By default, both <a> and <button> have right side arrow icons */
   position: absolute;
   top: 0;
   right: $list-item-padding - 4;
@@ -162,35 +190,85 @@ button.list-icon-right {
 }
 
 
-.list-thumbnail h2 {
-  overflow: hidden;
+// List Thumbnails
+// -------------------------------
+
+.list-thumbnail h2,
+.list-thumbnail-lrg h2 {
   margin: 0 0 8px 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   font-size: 16px;
 }
 
-.list-thumbnail p {
-  overflow: hidden;
-  margin-bottom: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.list-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-thumbnail .list-item-content {
-  padding-left: $list-thumbnail-width + $list-item-padding;
-  min-height: $list-thumbnail-width;
+.list-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-width;
-    max-height: $list-thumbnail-width;
+    max-width: $list-thumbnail-lrg-width;
+    max-height: $list-thumbnail-lrg-height;
     width: 100%;
   }
 }
 
+
+// List Header
+// -------------------------------
+
+.list-header {
+  margin-top: $list-header-margin-top;
+  padding: $list-header-padding;
+  background-color: $list-header-bg;
+  color: $list-header-color;
+  font-weight: bold;
+}
+
+
+// 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;
 }
@@ -282,40 +360,15 @@ button.list-icon-right {
 }
 
 
-/**
- * A list header.
- */
-.list-header {
-  margin-top: $list-header-margin-top;
-  padding: $list-header-padding;
-  background-color: $list-header-bg;
-  color: $list-header-color;
-  font-weight: bold;
-}
+// List Refresher
+// -------------------------------
 
-
-/**
- * A 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;
+.list-refresher {
+  overflow: hidden;
+  height: 0;
+  background-color: red;
 }
-.card.list .list-divider {
-  margin-left: 0;
-  margin-right: 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-refreshing {
 }
 
 
@@ -325,13 +378,8 @@ button.list-icon-right {
   padding-left: 1px;
 }
 
-/**
- * List refreser elements
- */
-.list-refresher {
-  overflow: hidden;
-  height: 0;
-  background-color: red;
-}
-.list-refreshing {
+.list-label-right {
+  float: right;
+  color: #aaa;
+  font-size: 14px;
 }
diff --git a/scss/ionic/_variables.scss b/scss/ionic/_variables.scss
index ea6ddd32cd..e2f9aa9d6f 100644
--- a/scss/ionic/_variables.scss
+++ b/scss/ionic/_variables.scss
@@ -381,7 +381,11 @@ $list-dark-border:                $brand-dark;
 
 $list-icon-font-size:             28px !default;
 
-$list-thumbnail-width:            80px !default;
+$list-thumbnail-width:           40px !default;
+$list-thumbnail-height:          40px !default;
+
+$list-thumbnail-lrg-width:        80px !default;
+$list-thumbnail-lrg-height:       80px !default;
 
 
 // Icons
@@ -435,8 +439,9 @@ $badge-bg:                    $gray-light !default;
 $badge-active-color:          $link-color !default;
 $badge-active-bg:             #fff !default;
 
+$badge-font-size:             14px !default;
+$badge-line-height:           16px !default;
 $badge-font-weight:           bold !default;
-$badge-line-height:           1 !default;
 $badge-border-radius:         10px !default;
 
 
diff --git a/test/lists.html b/test/lists.html
index 66b336f85a..79da867f1c 100644
--- a/test/lists.html
+++ b/test/lists.html
@@ -16,6 +16,94 @@
     <main class="content-wrapper">
       <div class="content has-header">
 
+        <div class="list">
+
+          <div class="list-divider">
+            Work
+          </div>
+
+          <a href="#" class="list-item list-icon-left">
+            <div class="list-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">
+              <i class="icon-chatbubble-working"></i>
+              Call Ma
+              <span class="list-label-right">
+                Cell
+              </span>
+            </div>
+          </a>
+
+          <a href="#" class="list-item list-icon-left">
+            <div class="list-item-content">
+              <i class="icon-mic-a"></i>
+              Record album
+              <span class="list-label-right">
+                Grammy
+              </span>
+            </div>
+          </a>
+
+          <a href="#" class="list-item list-icon-left">
+            <div class="list-item-content">
+              <i class="icon-flask"></i>
+              Breaking Bad
+              <span class="list-label-right">
+                Blue, yellow, pink
+              </span>
+            </div>
+          </a>
+
+          <div class="list-divider">
+            Leisure
+          </div>
+
+          <a href="#" class="list-item list-icon-left">
+            <div class="list-item-content">
+              <i class="icon-game-controller-b"></i>
+              Games
+              <span class="list-label-right">
+                Super Mario
+              </span>
+            </div>
+          </a>
+
+          <a href="#" class="list-item list-icon-left">
+            <div class="list-item-content">
+              <i class="icon-music-note"></i>
+              Music
+              <span class="list-label-right">
+                JT
+              </span>
+            </div>
+          </a>
+
+          <a href="#" class="list-item list-icon-left">
+            <div class="list-item-content">
+              <i class="icon-bag"></i>
+              Shopping
+              <span class="list-label-right">
+                Bag
+              </span>
+            </div>
+          </a>
+
+          <a href="#" class="list-item list-icon-left">
+            <div class="list-item-content">
+              <i class="icon-person-stalker"></i>
+              Friends
+              <span class="badge badge-danger">0</span>
+            </div>
+          </a>
+
+        </div>
+
         <div class="list">
 
           <div class="list-header">
@@ -36,8 +124,8 @@
 
           <a href="#" class="list-item list-icon-right">
             <div class="list-item-content slide-right">
-              Custom Right Icon
-              <i class="icon-ios7-information-outline"></i>
+              Processing Icon
+              <i class="icon-loading"></i>
             </div>
           </a>
 
@@ -202,17 +290,21 @@
 
         <div class="list padding">
 
+          <div class="list-header">
+            Me List Header
+          </div>
+
           <a href="#" class="list-item list-icon-left">
             <div class="list-item-content">
               <i class="icon-heart brand-danger fill-icon"></i>
-              Madison, WI
+              Icon is filled!!
             </div>
           </a>
 
           <a href="#" class="list-item list-icon-left">
             <div class="list-item-content">
               <i class="icon-image brand-warning fill-icon"></i>
-              Driving Directions
+              .fill-icon
             </div>
           </a>
 
@@ -223,7 +315,20 @@
           <a href="#" class="list-item list-icon-left list-icon-right">
             <div class="list-item-content slide-left slide-right">
               <i class="icon-ios7-cog gray fill-icon"></i>
-              This is a list item with really really really really really
+              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">
+             <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">
+              <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
               really really really really long long long long long long
               text text text texxxxxttt text testy text!!!
               <i class="icon-chevron-right"></i>
@@ -240,11 +345,12 @@
           <button class="button button-secondary" id="btn-test-left">Test Slide Left</button>
         </div>
 
+        <h3>Thumbnails .list-thumbnail</h3>
         <div class="list">
 
           <a href="#" class="list-item list-thumbnail">
             <div class="list-item-content">
-              <img src="//ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
+              <img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
               <h2>Pretty Hate Machine</h2>
               <p>Nine Inch Nails</p>
             </div>
@@ -252,15 +358,7 @@
 
           <a href="#" class="list-item list-thumbnail">
             <div class="list-item-content">
-              <img src="//ecx.images-amazon.com/images/I/41H62046AHL.jpg">
-              <h2>Siamese Dream</h2>
-              <p>Smashing Pumpkins</p>
-            </div>
-          </a>
-
-          <a href="#" class="list-item list-thumbnail">
-            <div class="list-item-content">
-              <img src="//ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg">
+              <img src="http://ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg">
               <h2>Nevermind</h2>
               <p>Nirvana</p>
             </div>
@@ -268,7 +366,7 @@
 
           <a href="#" class="list-item list-thumbnail">
             <div class="list-item-content">
-              <img src="//ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
+              <img src="http://ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
               <h2>License To Ill</h2>
               <p>Bestie Boys</p>
             </div>
@@ -276,7 +374,44 @@
 
           <a href="#" class="list-item list-thumbnail">
             <div class="list-item-content">
-              <img src="//ecx.images-amazon.com/images/I/61e6mUocZNL.jpg">
+              <img src="http://ecx.images-amazon.com/images/I/61e6mUocZNL.jpg">
+              <h2>Dookie</h2>
+              <p>Green Day</p>
+            </div>
+          </a>
+
+        </div>
+
+        <h3>Large Thumbnails .list-thumbnail-lrg</h3>
+        <div class="list">
+
+          <a href="#" class="list-item list-thumbnail-lrg">
+            <div class="list-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-thumbnail-lrg">
+            <div class="list-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-thumbnail-lrg">
+            <div class="list-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-thumbnail-lrg">
+            <div class="list-item-content">
+              <img src="http://ecx.images-amazon.com/images/I/61e6mUocZNL.jpg">
               <h2>Dookie</h2>
               <p>Green Day</p>
             </div>