diff --git a/_posts/2012-07-07-xtag-timedate.html b/_posts/2012-07-07-xtag-timedate.html
index f5c0b4b..01af212 100644
--- a/_posts/2012-07-07-xtag-timedate.html
+++ b/_posts/2012-07-07-xtag-timedate.html
@@ -2,8 +2,33 @@
 title: "Time/Date Picker"
 layout: xtag
 root: "../"
-description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec quam quis purus posuere pellentesque vel ac diam. Aenean sed purus id magna congue accumsan ac et ante."
-use_it: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec quam quis purus posuere pellentesque vel ac diam. Aenean sed purus id magna congue accumsan ac et ante."
-dont_use_it: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec quam quis purus posuere pellentesque vel ac diam. Aenean sed purus id magna congue accumsan ac et ante."
-code_example: "<x-tag></x-tag>"
+description: "A picker allows the users to quickly choose the time, date or other information such as locations from a predefined set of values. It also ensures the data is entered in the correct format."
+use_it: "When you want the user to pick a time, date or other information from a set of values."
 ---
+
+<div class="tips">
+  <h2>Dont's</h2>
+  <ul>
+    <li>- don’t use a picker for action items. Consider dropdown menu or select list instead.</li>
+  </ul>
+</div>
+
+{% include browser.html %}
+
+<h2>Code Example</h2>
+<code>
+  <pre>
+&lt;x-list&gt;
+&lt;/x-list&gt;
+  </pre>
+</code>
+
+<h2>Try It!</h2>
+<div class="sample-run-js">
+  <x-accordion id="list_demo" class="style">
+  </x-accordion>
+</div>
+
+<p>
+  Related: <a href="{{ page.root }}xtag-dropdown/">Dropdown Menu</a>, <a href="{{ page.root }}xtag-selectlist/">Select List</a>
+</p>
diff --git a/_posts/2012-07-08-xtag-dropdown.html b/_posts/2012-07-08-xtag-dropdown.html
index b1b2775..99fe763 100644
--- a/_posts/2012-07-08-xtag-dropdown.html
+++ b/_posts/2012-07-08-xtag-dropdown.html
@@ -2,8 +2,38 @@
 title: "Dropdown Menu"
 layout: xtag
 root: "../"
-description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec quam quis purus posuere pellentesque vel ac diam. Aenean sed purus id magna congue accumsan ac et ante."
-use_it: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec quam quis purus posuere pellentesque vel ac diam. Aenean sed purus id magna congue accumsan ac et ante."
-dont_use_it: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec quam quis purus posuere pellentesque vel ac diam. Aenean sed purus id magna congue accumsan ac et ante."
-code_example: "&lt;x-tag&gt;&lt;/x-tag&gt;"
+description: "A dropdown menu presents a list of options related to the current activity. It is opened when the user touches the dropdown icon. It can include text, image, or both."
+use_it: "When the user has to choose one item from a list."
 ---
+
+<div class="tips">
+  <h2>Do's</h2>
+  <ul>
+    <li>- concise wording. Ex: say "camera" instead of "use camera"</li>
+  </ul>
+
+  <h2>Dont's</h2>
+  <ul>
+    <li>- don’t use it when you have along list (more than 5 items). Use select list instead.</li>
+  </ul>
+</div>
+
+{% include browser.html %}
+
+<h2>Code Example</h2>
+<code>
+  <pre>
+&lt;x-list&gt;
+&lt;/x-list&gt;
+  </pre>
+</code>
+
+<h2>Try It!</h2>
+<div class="sample-run-js">
+  <x-accordion id="list_demo" class="style">
+  </x-accordion>
+</div>
+
+<p>
+  Related: <a href="{{ page.root }}xtag-timedate/">Time/Date Picker</a>, <a href="{{ page.root }}xtag-selectlist/">Select List</a>
+</p>
diff --git a/_posts/2012-07-09-xtag-indexscroller.html b/_posts/2012-07-09-xtag-indexscroller.html
index c30e6c3..b18546f 100644
--- a/_posts/2012-07-09-xtag-indexscroller.html
+++ b/_posts/2012-07-09-xtag-indexscroller.html
@@ -2,8 +2,33 @@
 title: "Index Scroller"
 layout: xtag
 root: "../"
-description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec quam quis purus posuere pellentesque vel ac diam. Aenean sed purus id magna congue accumsan ac et ante."
-use_it: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec quam quis purus posuere pellentesque vel ac diam. Aenean sed purus id magna congue accumsan ac et ante."
-dont_use_it: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec quam quis purus posuere pellentesque vel ac diam. Aenean sed purus id magna congue accumsan ac et ante."
-code_example: "&lt;x-tag&gt;&lt;/x-tag&gt;"
+description: "An index scroller behaves like a normal scrollable list with information overlay. The overlay label does not appear by default and is triggered by fast swipe. The scrollbar is always present and when overlay label appears, it is attached to the label. The user can drag the scrollbar to quickly jump through categories. This element works for an alphabetical or chronological list."
+use_it: "When you have a long list that can be sorted alphabetically or chronologically or by some other ordered category."
 ---
+
+<div class="tips">
+  <h2>Dont's</h2>
+  <ul>
+    <li>- use it when displaying the date or alphabets do not help the current task.</li>
+  </ul>
+</div>
+
+{% include browser.html %}
+
+<h2>Code Example</h2>
+<code>
+  <pre>
+&lt;x-list&gt;
+&lt;/x-list&gt;
+  </pre>
+</code>
+
+<h2>Try It!</h2>
+<div class="sample-run-js">
+  <x-accordion id="list_demo" class="style">
+  </x-accordion>
+</div>
+
+<p>
+  Related: <a href="{{ page.root }}xtag-list/">Plain List</a>, <a href="{{ page.root }}xtag-search/">Search</a>
+</p>