diff --git a/docs/components/index.html b/docs/components/index.html
index 272f3a1d94d..61451b2ff01 100644
--- a/docs/components/index.html
+++ b/docs/components/index.html
@@ -62,81 +62,81 @@ <h3 class="title"><a href="#header">Header</a></h3>
     <div class="bar bar-header bar-light"><div class="h1 title">bar-light</div></div>
   </div>
 {% highlight html %}
-<div class="bar bar-header bar-light">
+<ion-nav-bar class="bar-light">
   <h1 class="title">bar-light</h1>
-</div>
+</ion-nav-bar>
 {% endhighlight %}
 
   <div class="ionic ionic-example">
     <div class="bar bar-header bar-stable"><div class="h1 title">bar-stable</div></div>
   </div>
 {% highlight html %}
-<div class="bar bar-header bar-stable">
+<ion-nav-bar class="bar-stable">
   <h1 class="title">bar-stable</h1>
-</div>
+</ion-nav-bar>
 {% endhighlight %}
 
   <div class="ionic ionic-example">
     <div class="bar bar-header bar-positive"><div class="h1 title">bar-positive</div></div>
   </div>
 {% highlight html %}
-<div class="bar bar-header bar-positive">
+<ion-nav-bar class="bar-positive">
   <h1 class="title">bar-positive</h1>
-</div>
+</ion-nav-bar>
 {% endhighlight %}
 
   <div class="ionic ionic-example">
     <div class="bar bar-header bar-calm"><div class="h1 title">bar-calm</div></div>
   </div>
 {% highlight html %}
-<div class="bar bar-header bar-calm">
+<ion-nav-bar class="bar-calm">
   <h1 class="title">bar-calm</h1>
-</div>
+</ion-nav-bar>
 {% endhighlight %}
 
   <div class="ionic ionic-example">
     <div class="bar bar-header bar-balanced"><div class="h1 title">bar-balanced</div></div>
   </div>
 {% highlight html %}
-<div class="bar bar-header bar-balanced">
+<ion-nav-bar class="bar-balanced">
   <h1 class="title">bar-balanced</h1>
-</div>
+</ion-nav-bar>
 {% endhighlight %}
 
   <div class="ionic ionic-example">
     <div class="bar bar-header bar-energized"><div class="h1 title">bar-energized</div></div>
   </div>
 {% highlight html %}
-<div class="bar bar-header bar-energized">
+<ion-nav-bar class="bar-energized">
   <h1 class="title">bar-energized</h1>
-</div>
+</ion-nav-bar>
 {% endhighlight %}
 
   <div class="ionic ionic-example">
     <div class="bar bar-header bar-assertive"><div class="h1 title">bar-assertive</div></div>
   </div>
 {% highlight html %}
-<div class="bar bar-header bar-assertive">
+<ion-nav-bar class="bar-assertive">
   <h1 class="title">bar-assertive</h1>
-</div>
+</ion-nav-bar>
 {% endhighlight %}
 
   <div class="ionic ionic-example">
     <div class="bar bar-header bar-royal"><div class="h1 title">bar-royal</div></div>
   </div>
 {% highlight html %}
-<div class="bar bar-header bar-royal">
+<ion-nav-bar class="bar-royal">
   <h1 class="title">bar-royal</h1>
-</div>
+</ion-nav-bar>
 {% endhighlight %}
 
   <div class="ionic ionic-example">
     <div class="bar bar-header bar-dark"><div class="h1 title">bar-dark</div></div>
   </div>
 {% highlight html %}
-<div class="bar bar-header bar-dark">
+<ion-nav-bar class="bar bar-header bar-dark">
   <h1 class="title">bar-dark</h1>
-</div>
+</ion-nav-bar>
 {% endhighlight %}
 
   <div class="doc-example ionic">
@@ -856,11 +856,11 @@ <h3 class="title"><a href="#list">List</a></h3>
 
 
 {% highlight html %}
-<ul class="list">
-    <li class="item">
+<ion-list>
+    <ion-item>
       ...
-    </li>
-</ul>
+    </ion-item>
+</ion-list>
 {% endhighlight %}
 
   <p class="advanced-panel">
@@ -931,19 +931,19 @@ <h3 class="title"><a href="#item-dividers">List Dividers</a></h3>
   </p>
 
 {% highlight html %}
-<div class="list">
+<ion-list>
 
-  <div class="item item-divider">
+  <ion-item class="item-divider">
     Candy Bars
-  </div>
+  </ion-item>
 
-  <a class="item" href="#">
+  <ion-item href="#">
     Butterfinger
-  </a>
+  </ion-item>
 
   ...
 
-</div>
+</ion-list>
 {% endhighlight %}
 
   <div class="doc-example ionic">
@@ -1033,34 +1033,34 @@ <h3 class="title"><a href="#item-icons">List Icons</a></h3>
   </p>
 
 {% highlight html %}
-<div class="list">
+<ion-list>
 
-  <a class="item item-icon-left" href="#">
+  <ion-item class="item-icon-left" href="#">
     <i class="icon ion-email"></i>
     Check mail
-  </a>
+  </ion-item>
 
-  <a class="item item-icon-left item-icon-right" href="#">
+  <ion-item class="item-icon-left item-icon-right" href="#">
     <i class="icon ion-chatbubble-working"></i>
     Call Ma
     <i class="icon ion-ios-telephone-outline"></i>
-  </a>
+  </ion-item>
 
-  <a class="item item-icon-left" href="#">
+  <ion-item class="item-icon-left" href="#">
     <i class="icon ion-mic-a"></i>
     Record album
     <span class="item-note">
       Grammy
     </span>
-  </a>
+  </ion-item>
 
-  <a class="item item-icon-left" href="#">
+  <ion-item class="item-icon-left" href="#">
     <i class="icon ion-person-stalker"></i>
     Friends
     <span class="badge badge-assertive">0</span>
-  </a>
+  </ion-item>
 
-</div>
+</ion-list>
 {% endhighlight %}
 
   <div class="doc-example ionic">
@@ -1151,18 +1151,18 @@ <h3 class="title"><a href="#item-buttons">List Buttons</a></h3>
   </p>
 
 {% highlight html %}
-<div class="list">
+<ion-list>
 
-  <div class="item item-button-right">
+  <ion-item class="item-button-right">
     Call Ma
     <button class="button button-positive">
       <i class="icon ion-ios-telephone"></i>
     </button>
-  </div>
+  </ion-item>
 
   ...
 
-</div>
+</ion-list>
 {% endhighlight %}
 
   <div class="doc-example ionic">
@@ -1202,17 +1202,17 @@ <h3 class="title"><a href="#item-avatars">Item Avatars</a></h3>
   </p>
 
 {% highlight html %}
-<div class="list">
+<ion-list>
 
-    <a class="item item-avatar" href="#">
+    <ion-item class="item-avatar" href="#">
       <img src="venkman.jpg">
       <h2>Venkman</h2>
       <p>Back off, man. I'm a scientist.</p>
-    </a>
+    </ion-item>
 
     ...
 
-</div>
+</ion-list>
 {% endhighlight %}
 
   <div class="doc-example ionic">
@@ -1286,17 +1286,17 @@ <h3 class="title"><a href="#item-thumbnails">Item Thumbnails</a></h3>
   </p>
 
 {% highlight html %}
-<div class="list">
+<ion-list>
 
-    <a class="item item-thumbnail-left" href="#">
+    <ion-item class="item item-thumbnail-left" href="#">
       <img src="cover.jpg">
       <h2>Pretty Hate Machine</h2>
       <p>Nine Inch Nails</p>
-    </a>
+    </ion-item>
 
     ...
 
-</div>
+</ion-list>
 {% endhighlight %}
 
   <p>
@@ -1366,15 +1366,15 @@ <h3 class="title"><a href="#list-inset">Inset Lists</a></h3>
   </p>
 
 {% highlight html %}
-<div class="list list-inset">
+<ion-list class="list-inset">
 
-    <div class="item">
+    <ion-item>
       Raiders of the Lost Ark
-    </div>
+    </ion-item>
 
     ...
 
-</div>
+</ion-list>
 {% endhighlight %}
 
   <div class="doc-example ionic">
@@ -1516,29 +1516,29 @@ <h3 class="title"><a href="#card-lists">Card Lists</a></h3>
   </p>
 
 {% highlight html %}
-<div class="list card">
+<ion-list class="card">
 
-  <a href="#" class="item item-icon-left">
+  <ion-item href="#" class="item-icon-left">
     <i class="icon ion-home"></i>
     Enter home address
-  </a>
+  </ion-item>
 
-  <a href="#" class="item item-icon-left">
+  <ion-item href="#" class="item-icon-left">
     <i class="icon ion-ios-telephone"></i>
     Enter phone number
-  </a>
+  </ion-item>
 
-  <a href="#" class="item item-icon-left">
+  <ion-item href="#" class="item-icon-left">
     <i class="icon ion-wifi"></i>
     Enter wireless password
-  </a>
+  </ion-item>
 
-  <a href="#" class="item item-icon-left">
+  <ion-item href="#" class="item-icon-left">
     <i class="icon ion-card"></i>
     Enter card information
-  </a>
+  </ion-item>
 
-</div>
+</ion-list>
 {% endhighlight %}
 
   <div class="doc-example ionic">
@@ -1589,24 +1589,24 @@ <h3 class="title"><a href="#card-images">Card Images</a></h3>
   </p>
 
 {% highlight html %}
-<div class="list card">
+<ion-list class="card">
 
-  <div class="item item-avatar">
+  <ion-item class="item-avatar">
     <img src="avatar.jpg">
     <h2>Pretty Hate Machine</h2>
     <p>Nine Inch Nails</p>
-  </div>
+  </ion-item>
 
-  <div class="item item-image">
+  <ion-item class="item-image">
     <img src="cover.jpg">
-  </div>
+  </ion-item>
 
-  <a class="item item-icon-left assertive" href="#">
+  <ion-item class="item-icon-left assertive" href="#">
     <i class="icon ion-music-note"></i>
     Start listening
-  </a>
+  </ion-item>
 
-</div>
+</ion-list>
 {% endhighlight %}
 
   <div class="doc-example ionic">
@@ -1652,15 +1652,15 @@ <h3 class="title"><a href="#card-showcase">Card Showcase</a></h3>
   </p>
 
 {% highlight html %}
-<div class="list card">
+<ion-list class="card">
 
-  <div class="item item-avatar">
+  <ion-item class="item-avatar">
     <img src="mcfly.jpg">
     <h2>Marty McFly</h2>
     <p>November 05, 1955</p>
-  </div>
+  </ion-item>
 
-  <div class="item item-body">
+  <ion-item class="item-body">
     <img class="full-image" src="delorean.jpg">
     <p>
       This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
@@ -1671,9 +1671,9 @@ <h2>Marty McFly</h2>
       <a href="#" class="subdued">1 Like</a>
       <a href="#" class="subdued">5 Comments</a>
     </p>
-  </div>
+  </ion-item>
 
-  <div class="item tabs tabs-secondary tabs-icon-left">
+  <ion-item class="tabs tabs-secondary tabs-icon-left">
     <a class="tab-item" href="#">
       <i class="icon ion-thumbsup"></i>
       Like
@@ -1686,9 +1686,9 @@ <h2>Marty McFly</h2>
       <i class="icon ion-share"></i>
       Share
     </a>
-  </div>
+  </ion-item>
 
-</div>
+</ion-list>
 {% endhighlight %}
 
   <div class="doc-example ionic">
@@ -1798,17 +1798,17 @@ <h3 class="title"><a href="#forms-placeholder-labels">Text Input: Placeholder La
   </p>
 
 {% highlight html %}
-<div class="list">
-  <label class="item item-input">
+<ion-list>
+  <ion-label class="item item-input">
     <input type="text" placeholder="First Name">
-  </label>
-  <label class="item item-input">
+  </ion-label>
+  <ion-label class="item item-input">
     <input type="text" placeholder="Last Name">
-  </label>
-  <label class="item item-input">
+  </ion-label>
+  <ion-label class="item item-input">
     <textarea placeholder="Comments"></textarea>
-  </label>
-</div>
+  </ion-label>
+</ion-list>
 {% endhighlight %}
 
   <div class="doc-example ionic">
@@ -1850,16 +1850,16 @@ <h3 class="title"><a href="#forms-inline-labels">Text Input: Inline Labels</a></
   </p>
 
 {% highlight html %}
-<div class="list">
-  <label class="item item-input">
+<ion-list>
+  <ion-label class="item item-input">
     <span class="input-label">Username</span>
     <input type="text">
-  </label>
-  <label class="item item-input">
+  </ion-label>
+  <ion-label class="item item-input">
     <span class="input-label">Password</span>
     <input type="password">
-  </label>
-</div>
+  </ion-label>
+</ion-list>
 {% endhighlight %}
 
   <div class="doc-example ionic">
@@ -1902,20 +1902,20 @@ <h3 class="title"><a href="#forms-stacked-labels">Text Input: Stacked Labels</a>
   </p>
 
 {% highlight html %}
-<div class="list">
-  <label class="item item-input item-stacked-label">
+<ion-list>
+  <ion-label class="item item-input item-stacked-label">
     <span class="input-label">First Name</span>
     <input type="text" placeholder="John">
-  </label>
-  <label class="item item-input item-stacked-label">
+  </ion-label>
+  <ion-label class="item item-input item-stacked-label">
     <span class="input-label">Last Name</span>
     <input type="text" placeholder="Suhr">
-  </label>
-  <label class="item item-input item-stacked-label">
+  </ion-label>
+  <ion-label class="item item-input item-stacked-label">
     <span class="input-label">Email</span>
     <input type="text" placeholder="john@suhr.com">
-  </label>
-</div>
+  </ion-label>
+</ion-list>
 {% endhighlight %}
 
   <div class="doc-example ionic">
@@ -1966,20 +1966,20 @@ <h3 class="title"><a href="#forms-floating-labels">Text Input: Floating Labels</
   </p>
 
 {% highlight html %}
-<div class="list">
-  <label class="item item-input item-floating-label">
+<ion-list>
+  <ion-label class="item item-input item-floating-label">
     <span class="input-label">First Name</span>
     <input type="text" placeholder="First Name">
-  </label>
-  <label class="item item-input item-floating-label">
+  </ion-label>
+  <ion-label class="item item-input item-floating-label">
     <span class="input-label">Last Name</span>
     <input type="text" placeholder="Last Name">
-  </label>
-  <label class="item item-input item-floating-label">
+  </ion-label>
+  <ion-label class="item item-input item-floating-label">
     <span class="input-label">Email</span>
     <input type="text" placeholder="Email">
-  </label>
-</div>
+  </ion-label>
+</ion-list>
 {% endhighlight %}
 
   <div class="doc-example ionic"><!-- example already in device-preview --></div>
@@ -2003,14 +2003,14 @@ <h3 class="title"><a href="#inset-forms">Inset Forms</a></h3>
   </p>
 
 {% highlight html %}
-<div class="list list-inset">
-  <label class="item item-input">
+<ion-list class="list-inset">
+  <ion-label class="item item-input">
     <input type="text" placeholder="First Name">
-  </label>
-  <label class="item item-input">
+  </ion-label>
+  <ion-label class="item item-input">
     <input type="text" placeholder="Last Name">
-  </label>
-</div>
+  </ion-label>
+</ion-list>
 {% endhighlight %}
 
   <div class="doc-example ionic">
@@ -2048,18 +2048,18 @@ <h3 class="title"><a href="#item-input-inset">Inset Inputs</a></h3>
   </p>
 
 {% highlight html %}
-<div class="list">
+<ion-list>
 
-  <div class="item item-input-inset">
-    <label class="item-input-wrapper">
+  <ion-input class="item-inset">
+    <ion-label class="item-input-wrapper">
       <input type="text" placeholder="Email">
-    </label>
+    </ion-label>
     <button class="button button-small">
       Submit
     </button>
-  </div>
+  </ion-input>
 
-</div>
+</ion-list>
 {% endhighlight %}
 
   <div class="doc-example ionic">
@@ -2070,7 +2070,7 @@ <h3 class="title"><a href="#item-input-inset">Inset Inputs</a></h3>
 
       <div class="list">
 
-        <div class="item item-input-inset">
+        <div class="item item-input item-inset">
           <label class="item-input-wrapper">
             <input type="text" placeholder="Email">
           </label>
@@ -2102,12 +2102,12 @@ <h3 class="title"><a href="#input-icons">Input Icons</a></h3>
   </p>
 
 {% highlight html %}
-<div class="list list-inset">
-  <label class="item item-input">
+<ion-list class="list-inset">
+  <ion-label class="item item-input">
     <i class="icon ion-search placeholder-icon"></i>
     <input type="text" placeholder="Search">
-  </label>
-</div>
+  </ion-label>
+</ion-list>
 {% endhighlight %}
 
   <div class="doc-example ionic">
@@ -2140,10 +2140,10 @@ <h3 class="title"><a href="#bar-inputs">Header Inputs</a></h3>
 
 {% highlight html %}
 <div class="bar bar-header item-input-inset">
-  <label class="item-input-wrapper">
+  <ion-label class="item-input-wrapper">
     <i class="icon ion-ios-search placeholder-icon"></i>
     <input type="search" placeholder="Search">
-  </label>
+  </ion-label>
   <button class="button button-clear">
     Cancel
   </button>
@@ -2152,10 +2152,10 @@ <h3 class="title"><a href="#bar-inputs">Header Inputs</a></h3>
 
   <div class="doc-example ionic">
     <div class="bar bar-header item-input-inset">
-      <label class="item-input-wrapper">
+      <ion-label class="item-input-wrapper">
         <i class="icon ion-ios-search placeholder-icon"></i>
         <input type="search" placeholder="Search">
-      </label>
+      </ion-label>
       <button class="button button-clear">
         Cancel
       </button>
@@ -2184,12 +2184,12 @@ <h3 class="title"><a href="#toggle">Toggle</a></h3>
   </p>
 
 {% highlight html %}
-<label class="toggle">
+<ion-label class="toggle">
    <input type="checkbox">
    <div class="track">
      <div class="handle"></div>
    </div>
-</label>
+</ion-label>
 {% endhighlight %}
 
   <p>
@@ -2198,21 +2198,21 @@ <h3 class="title"><a href="#toggle">Toggle</a></h3>
   </p>
 
 {% highlight html %}
-<ul class="list">
+<ion-list>
 
-  <li class="item item-toggle">
+  <ion-item class="item-toggle">
      HTML5
-     <label class="toggle toggle-assertive">
+     <ion-label class="toggle toggle-assertive">
        <input type="checkbox">
        <div class="track">
          <div class="handle"></div>
        </div>
-     </label>
-  </li>
+     </ion-label>
+  </ion-item>
 
   ...
 
-</ul>
+</ion-list>
 {% endhighlight %}
 
   <div class="doc-example ionic">
@@ -2222,7 +2222,7 @@ <h3 class="title"><a href="#toggle">Toggle</a></h3>
     <div class="content has-header">
 
       <ul class="list">
-        <li class="item item-toggle">
+        <div class="item item-toggle">
            HTML5
            <label class="toggle toggle-positive">
              <input type="checkbox" checked>
@@ -2230,8 +2230,8 @@ <h3 class="title"><a href="#toggle">Toggle</a></h3>
                <div class="handle"></div>
              </div>
            </label>
-        </li>
-        <li class="item item-toggle">
+        </div>
+        <div class="item item-toggle">
            CSS3
            <label class="toggle toggle-calm">
              <input type="checkbox" checked>
@@ -2239,8 +2239,8 @@ <h3 class="title"><a href="#toggle">Toggle</a></h3>
                <div class="handle"></div>
              </div>
            </label>
-        </li>
-        <li class="item item-toggle">
+        </div>
+        <div class="item item-toggle">
            Flashplayer
            <label class="toggle toggle-balanced">
              <input type="checkbox">
@@ -2248,8 +2248,8 @@ <h3 class="title"><a href="#toggle">Toggle</a></h3>
                <div class="handle"></div>
              </div>
            </label>
-        </li>
-        <li class="item item-toggle">
+        </div>
+        <div class="item item-toggle">
            Java Applets
            <label class="toggle toggle-energized">
              <input type="checkbox">
@@ -2257,8 +2257,8 @@ <h3 class="title"><a href="#toggle">Toggle</a></h3>
                <div class="handle"></div>
              </div>
            </label>
-        </li>
-        <li class="item item-toggle">
+        </div>
+        <div class="item item-toggle">
            JavaScript
            <label class="toggle toggle-assertive">
              <input type="checkbox" checked>
@@ -2266,8 +2266,8 @@ <h3 class="title"><a href="#toggle">Toggle</a></h3>
                <div class="handle"></div>
              </div>
            </label>
-        </li>
-        <li class="item item-toggle">
+        </div>
+        <div class="item item-toggle">
            Silverlight
            <label class="toggle toggle-royal">
              <input type="checkbox">
@@ -2275,8 +2275,8 @@ <h3 class="title"><a href="#toggle">Toggle</a></h3>
                <div class="handle"></div>
              </div>
            </label>
-        </li>
-        <li class="item item-toggle">
+        </div>
+        <div class="item item-toggle">
            Web Components
            <label class="toggle toggle-dark">
              <input type="checkbox" checked>
@@ -2284,8 +2284,8 @@ <h3 class="title"><a href="#toggle">Toggle</a></h3>
                <div class="handle"></div>
              </div>
            </label>
-        </li>
-      </ul>
+        </div>
+      </div>
 
     </div>
   </div>
@@ -2475,19 +2475,19 @@ <h3 class="title"><a href="#range">Range</a></h3>
   </p>
 
 {% highlight html %}
-<div class="item range">
+<ion-item class="range">
   <i class="icon ion-volume-low"></i>
   <input type="range" name="volume">
   <i class="icon ion-volume-high"></i>
-</div>
+</ion-item>
 
-<div class="list">
-  <div class="item range range-positive">
+<ion-list>
+  <ion-item class="range range-positive">
     <i class="icon ion-ios-sunny-outline"></i>
     <input type="range" name="volume" min="0" max="100" value="33">
     <i class="icon ion-ios-sunny"></i>
-  </div>
-</div>
+  </ion-item>
+</ion-list>
 {% endhighlight %}
 
   <div class="doc-example ionic">
@@ -2573,9 +2573,9 @@ <h3 class="title"><a href="#select">Select</a></h3>
   </p>
 
 {% highlight html %}
-<div class="list">
+<ion-list>
 
-  <label class="item item-input item-select">
+  <ion-label class="item item-input item-select">
     <div class="input-label">
       Lightsaber
     </div>
@@ -2584,9 +2584,9 @@ <h3 class="title"><a href="#select">Select</a></h3>
       <option selected>Green</option>
       <option>Red</option>
     </select>
-  </label>
+  </ion-label>
 
-</div>
+</ion-list>
 
 {% endhighlight %}