diff --git a/components.html b/components.html
index adc24f3..3cd365d 100644
--- a/components.html
+++ b/components.html
@@ -298,19 +298,19 @@ base_url: "../"
 
     <div class="component-example component-example-fullbleed">
       <ul class="table-view">
-        <li>Item 1</li>
-        <li>Item 2</li>
-        <li class="table-view-divider">Divider</li>
-        <li>Item 3</li>
+        <li class="table-view-cell">Item 1</li>
+        <li class="table-view-cell">Item 2</li>
+        <li class="table-view-cell table-view-divider">Divider</li>
+        <li class="table-view-cell">Item 3</li>
       </ul>
     </div>
 
 {% highlight html %}
 <ul class="table-view">
-  <li>Item 1</li>
-  <li>Item 2</li>
+  <li class="table-view-cell">Item 1</li>
+  <li class="table-view-cell table-view-cell">Item 2</li>
   <li class="table-view-divider">Divider</li>
-  <li>Item 3</li>
+  <li class="table-view-cell">Item 3</li>
 </ul>
 {% endhighlight %}
 
@@ -373,17 +373,17 @@ base_url: "../"
 
     <div class="component-example component-example-fullbleed">
       <ul class="table-view">
-        <li>Item 1 <span class="badge">4</span></li>
-        <li>Item 2 <span class="badge">1</span></li>
-        <li>Item 3 <span class="badge">5</span></li>
+        <li class="table-view-cell">Item 1 <span class="badge">4</span></li>
+        <li class="table-view-cell">Item 2 <span class="badge">1</span></li>
+        <li class="table-view-cell">Item 3 <span class="badge">5</span></li>
       </ul>
     </div>
 
 {% highlight html %}
 <ul class="table-view">
-  <li>Item 1 <span class="badge">4</span></li>
-  <li>Item 2 <span class="badge">1</span></li>
-  <li>Item 3 <span class="badge">5</span></li>
+  <li class="table-view-cell">Item 1 <span class="badge">4</span></li>
+  <li class="table-view-cell">Item 2 <span class="badge">1</span></li>
+  <li class="table-view-cell">Item 3 <span class="badge">5</span></li>
 </ul>
 {% endhighlight %}
 
@@ -394,21 +394,21 @@ base_url: "../"
 
     <div class="component-example component-example-fullbleed">
       <ul class="table-view">
-        <li>
+        <li class="table-view-cell">
           <a>
             Item 1
             <span class="chevron"></span>
             <span class="badge">4</span>
           </a>
         </li>
-        <li>
+        <li class="table-view-cell">
           <a>
             Item 2
             <span class="chevron"></span>
             <span class="badge">1</span>
           </a>
         </li>
-        <li>
+        <li class="table-view-cell">
           <a>
             Item 3
             <span class="chevron"></span>
@@ -420,21 +420,21 @@ base_url: "../"
 
 {% highlight html %}
 <ul class="table-view">
-  <li>
+  <li class="table-view-cell">
     <a>
       Item 1
       <span class="chevron"></span>
       <span class="badge">4</span>
     </a>
   </li>
-  <li>
+  <li class="table-view-cell">
     <a>
       Item 2
       <span class="chevron"></span>
       <span class="badge">1</span>
     </a>
   </li>
-  <li>
+  <li class="table-view-cell">
     <a>
       Item 3
       <span class="chevron"></span>
@@ -451,19 +451,19 @@ base_url: "../"
 
     <div class="component-example component-example-fullbleed">
       <ul class="table-view">
-        <li>Item 1 <a class="button">Button</a></li>
-        <li>Item 2 <a class="button-primary">Button</a></li>
-        <li>Item 3 <a class="button-positive">Button</a></li>
-        <li>Item 4 <a class="button-negative">Button</a></li>
+        <li class="table-view-cell">Item 1 <a class="button">Button</a></li>
+        <li class="table-view-cell">Item 2 <a class="button-primary">Button</a></li>
+        <li class="table-view-cell">Item 3 <a class="button-positive">Button</a></li>
+        <li class="table-view-cell">Item 4 <a class="button-negative">Button</a></li>
       </ul>
     </div>
 
 {% highlight html %}
 <ul class="table-view">
-  <li>Item 1 <a class="button">Button</a></li>
-  <li>Item 2 <a class="button-primary">Button</a></li>
-  <li>Item 3 <a class="button-positive">Button</a></li>
-  <li>Item 4 <a class="button-negative">Button</a></li>
+  <li class="table-view-cell">Item 1 <a class="button">Button</a></li>
+  <li class="table-view-cell">Item 2 <a class="button-primary">Button</a></li>
+  <li class="table-view-cell">Item 3 <a class="button-positive">Button</a></li>
+  <li class="table-view-cell">Item 4 <a class="button-negative">Button</a></li>
 </ul>
 {% endhighlight %}
 
@@ -474,19 +474,19 @@ base_url: "../"
 
     <div class="component-example component-example-fullbleed">
       <ul class="table-view">
-        <li>
+        <li class="table-view-cell">
           Item 1
           <div class="toggle">
             <div class="toggle-handle"></div>
           </div>
         </li>
-        <li>
+        <li class="table-view-cell">
           Item 2
           <div class="toggle active">
             <div class="toggle-handle"></div>
           </div>
         </li>
-        <li>
+        <li class="table-view-cell">
           Item 3
           <div class="toggle">
             <div class="toggle-handle"></div>
@@ -497,19 +497,19 @@ base_url: "../"
 
 {% highlight html %}
 <ul class="table-view">
-  <li>
+  <li class="table-view-cell">
     Item 1
     <div class="toggle">
       <div class="toggle-handle"></div>
     </div>
   </li>
-  <li>
+  <li class="table-view-cell">
     Item 2
     <div class="toggle active">
       <div class="toggle-handle"></div>
     </div>
   </li>
-  <li>
+  <li class="table-view-cell">
     Item 3
     <div class="toggle">
       <div class="toggle-handle"></div>
@@ -525,21 +525,21 @@ base_url: "../"
 
     <div class="component-example">
       <ul class="table-view inset">
-        <li>Item 1</li>
-        <li>Item 2</li>
-        <li class="table-view-divider">Divider</li>
-        <li>Item 3</li>
-        <li>Item 4</li>
+        <li class="table-view-cell">Item 1</li>
+        <li class="table-view-cell">Item 2</li>
+        <li class="table-view-cell table-view-divider">Divider</li>
+        <li class="table-view-cell">Item 3</li>
+        <li class="table-view-cell">Item 4</li>
       </ul>
     </div>
 
 {% highlight html %}
 <ul class="table-view inset">
-  <li>Item 1</li>
-  <li>Item 2</li>
-  <li class="table-view-divider">Divider</li>
-  <li>Item 3</li>
-  <li>Item 4</li>
+  <li class="table-view-cell">Item 1</li>
+  <li class="table-view-cell">Item 2</li>
+  <li class="table-view-cell table-view-divider">Divider</li>
+  <li class="table-view-cell">Item 3</li>
+  <li class="table-view-cell">Item 4</li>
 </ul>
 {% endhighlight %}
 
@@ -637,13 +637,13 @@ base_url: "../"
         </li>
       </ul>
       <ul class="inset table-view">
-        <li id="item1mobile" class="segmented-controller-item selected">
+        <li id="item1mobile" class="table-view-cell segmented-controller-item selected">
           Item 1
         </li>
-        <li id="item2mobile" class="segmented-controller-item">
+        <li id="item2mobile" class="table-view-cell segmented-controller-item">
           Item 2
         </li>
-        <li id="item3mobile" class="segmented-controller-item">
+        <li id="item3mobile" class="table-view-cell segmented-controller-item">
           Item 3
         </li>
       </ul>
@@ -662,13 +662,13 @@ base_url: "../"
   </li>
 </ul>
 <ul class="inset table-view">
-  <li id="item1mobile" class="segmented-controller-item selected">
+  <li id="item1mobile" class="table-view-cell segmented-controller-item selected">
     Item 1
   </li>
-  <li id="item2mobile" class="segmented-controller-item">
+  <li id="item2mobile" class="table-view-cell segmented-controller-item">
     Item 2
   </li>
-  <li id="item3mobile" class="segmented-controller-item">
+  <li id="item3mobile" class="table-view-cell segmented-controller-item">
     Item 3
   </li>
 </ul>
@@ -842,14 +842,14 @@ document
           </a>
         </header>
         <ul class="table-view">
-          <li>Item1</li>
-          <li>Item2</li>
-          <li>Item3</li>
-          <li>Item4</li>
-          <li>Item5</li>
-          <li>Item6</li>
-          <li>Item7</li>
-          <li>Item8</li>
+          <li class="table-view-cell">Item1</li>
+          <li class="table-view-cell">Item2</li>
+          <li class="table-view-cell">Item3</li>
+          <li class="table-view-cell">Item4</li>
+          <li class="table-view-cell">Item5</li>
+          <li class="table-view-cell">Item6</li>
+          <li class="table-view-cell">Item7</li>
+          <li class="table-view-cell">Item8</li>
         </ul>
       </div>
     </div>
@@ -866,14 +866,14 @@ document
     </a>
   </header>
   <ul class="table-view">
-    <li>Item1</li>
-    <li>Item2</li>
-    <li>Item3</li>
-    <li>Item4</li>
-    <li>Item5</li>
-    <li>Item6</li>
-    <li>Item7</li>
-    <li>Item8</li>
+    <li class="table-view-cell">Item1</li>
+    <li class="table-view-cell">Item2</li>
+    <li class="table-view-cell">Item3</li>
+    <li class="table-view-cell">Item4</li>
+    <li class="table-view-cell">Item5</li>
+    <li class="table-view-cell">Item6</li>
+    <li class="table-view-cell">Item7</li>
+    <li class="table-view-cell">Item8</li>
   </ul>
 </div>
 {% endhighlight %}
@@ -1023,7 +1023,7 @@ document
 </header>
 <div class="content">
   <ul class="table-view">
-    <li>
+    <li class="table-view-cell">
       <a href="{{ page.base_url }}two.html" data-transition="slide-in">
         Load new page with push
       </a>