adding more media examples

components.html

@@ -347,7 +347,7 @@ quis nostrud exercitation ullamco.</p>
 
   <article class="component">
     <h3 class="component-title">Table view with chevrons</h3>
-    <p class="component-description">Chevrons are created with CSS3, so no image assets are needed. They should be used to indicate that the item is linked.</p>
+    <p class="component-description">Chevrons should be used to indicate that the item is linked.</p>
 
     <div class="component-example component-example-fullbleed">
       <ul class="table-view">
@@ -464,7 +464,7 @@ quis nostrud exercitation ullamco.</p>
   </article>
 
   <article class="component">
-    <h3 class="component-title">Table view with media</h3>
+    <h3 class="component-title">Table view with media (images)</h3>
 
     <div class="component-example component-example-fullbleed">
       <ul class="table-view">
@@ -473,7 +473,7 @@ quis nostrud exercitation ullamco.</p>
             <img class="media-object pull-left" src="http://placehold.it/42x42">
             <div class="media-body">
               Item 1
-              <p>Chevrons are created with CSS3, so no image assets are needed. They should be used to indicate that the item is linked.</p>
+              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
             </div>
           </a>
         </li>
@@ -482,7 +482,7 @@ quis nostrud exercitation ullamco.</p>
             <img class="media-object pull-left" src="http://placehold.it/42x42">
             <div class="media-body">
               Item 1
-              <p>Chevrons are created with CSS3, so no image assets are needed. They should be used to indicate that the item is linked.</p>
+              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
             </div>
           </a>
         </li>
@@ -491,7 +491,7 @@ quis nostrud exercitation ullamco.</p>
             <img class="media-object pull-left" src="http://placehold.it/42x42">
             <div class="media-body">
               Item 1
-              <p>Chevrons are created with CSS3, so no image assets are needed. They should be used to indicate that the item is linked.</p>
+              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
             </div>
           </a>
         </li>
@@ -505,7 +505,7 @@ quis nostrud exercitation ullamco.</p>
       <img class="media-object pull-left" src="http://placehold.it/42x42">
       <div class="media-body">
         Item 1
-        <p>Chevrons are created with CSS3, so no image assets are needed. They should be used to indicate that the item is linked.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
       </div>
     </a>
   </li>
@@ -514,7 +514,7 @@ quis nostrud exercitation ullamco.</p>
       <img class="media-object pull-left" src="http://placehold.it/42x42">
       <div class="media-body">
         Item 1
-        <p>Chevrons are created with CSS3, so no image assets are needed. They should be used to indicate that the item is linked.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
       </div>
     </a>
   </li>
@@ -523,7 +523,70 @@ quis nostrud exercitation ullamco.</p>
       <img class="media-object pull-left" src="http://placehold.it/42x42">
       <div class="media-body">
         Item 1
-        <p>Chevrons are created with CSS3, so no image assets are needed. They should be used to indicate that the item is linked.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
+      </div>
+    </a>
+  </li>
+</ul>
+{% endhighlight %}
+
+  </article>
+
+  <article class="component">
+    <h3 class="component-title">Table view with media (icons)</h3>
+
+    <div class="component-example component-example-fullbleed">
+      <ul class="table-view">
+        <li class="table-view-cell media">
+          <a class="push-right">
+            <span class="media-object pull-left icon icon-pages"></span>
+            <div class="media-body">
+              Item 1
+            </div>
+          </a>
+        </li>
+        <li class="table-view-cell media">
+          <a class="push-right">
+            <span class="media-object pull-left icon icon-pages"></span>
+            <div class="media-body">
+              Item 2
+            </div>
+          </a>
+        </li>
+        <li class="table-view-cell media">
+          <a class="push-right">
+            <span class="media-object pull-left icon icon-pages"></span>
+            <div class="media-body">
+              Item 3
+            </div>
+          </a>
+        </li>
+      </ul>
+    </div>
+
+{% highlight html %}
+<ul class="table-view">
+  <li class="table-view-cell media">
+    <a class="push-right">
+      <span class="media-object pull-left icon icon-pages"></span>
+      <div class="media-body">
+        Item 1
+      </div>
+    </a>
+  </li>
+  <li class="table-view-cell media">
+    <a class="push-right">
+      <span class="media-object pull-left icon icon-pages"></span>
+      <div class="media-body">
+        Item 2
+      </div>
+    </a>
+  </li>
+  <li class="table-view-cell media">
+    <a class="push-right">
+      <span class="media-object pull-left icon icon-pages"></span>
+      <div class="media-body">
+        Item 3
       </div>
     </a>
   </li>

dist/ratchet.css

@@ -771,10 +771,6 @@ input[type="button"] {
   right: 35px;
 }
 
-.table-view .icon {
-  font-size: inherit;
-}
-
 input,
 textarea,
 button,

lib/sass/table-views.scss

@@ -107,9 +107,3 @@
     }
   }
 }
-
-// Table-views with Ratchicons
-// --------------------------------------------------
-.table-view .icon {
-  font-size: inherit
-}

lib/sass/theme-ios.scss

@@ -46,6 +46,7 @@ a {
   background-color: #efeff4;
 }
 
+
 // Typography
 // --------------------------------------------------