diff --git a/apps/tests/gestures-tests.ts b/apps/tests/gestures-tests.ts
index 47ccd6be0..c8639856d 100644
--- a/apps/tests/gestures-tests.ts
+++ b/apps/tests/gestures-tests.ts
@@ -1,226 +1,168 @@
 /* tslint:disable:no-unused-variable */
-// <snippet module="ui/gestures" title="gestures">
-// # Gestures
-// Detecting user gestures requires the "ui/gestures" module.
-// ``` JavaScript
+// >> gestures-require
 import gestures = require("ui/gestures");
-// ```
-// </snippet>
+// << gestures-require
 import labelModule = require("ui/label");
 
 export var test_DummyTestForSnippetOnly0 = function () {
-    // <snippet module="ui/gestures" title="gestures">
-    // ### Double Tap
-    // ``` JavaScript
+    // >> gestures-double-tap
     var label = new labelModule.Label();
     var observer = label.on(gestures.GestureTypes.doubleTap, function (args: gestures.GestureEventData) { 
         console.log("Double Tap");
     });
-    // ```
-    // </snippet>
+    // << gestures-double-tap
 }
 
 export var test_DummyTestForSnippetOnly01 = function () {
-    // <snippet module="ui/gestures" title="gestures">
-    // ### Double Tap
-    // ``` JavaScript
+    // >> gestures-double-tap-alt
     var label = new labelModule.Label();
     var observer = label.on("doubleTap", function (args: gestures.GestureEventData) {
         console.log("Double Tap");
     });
-    // ```
-    // </snippet>
+    // << gestures-double-tap-alt
 }
 
 export var test_DummyTestForSnippetOnly1 = function () {
-    // <snippet module="ui/gestures" title="gestures">
-    // ### Long Press
-    // ``` JavaScript
+    // >> gestures-long-press
     var label = new labelModule.Label();
     var observer = label.on(gestures.GestureTypes.longPress, function (args: gestures.GestureEventData) {
         console.log("Long Press");
     });
-    // ```
-    // </snippet>
+    // << gestures-long-press
 }
 
 export var test_DummyTestForSnippetOnly11 = function () {
-    // <snippet module="ui/gestures" title="gestures">
-    // ### Long Press
-    // ``` JavaScript
+    // >> gestures-long-press-alt
     var label = new labelModule.Label();
     var observer = label.on("longPress", function (args: gestures.GestureEventData) {
         console.log("Long Press");
     });
-    // ```
-    // </snippet>
+    // << gestures-long-press-alt
 }
 
 export var test_DummyTestForSnippetOnly2 = function () {
-    // <snippet module="ui/gestures" title="gestures">
-    // ### Pan
-    // ``` JavaScript
+    // >> gestures-pan
     var label = new labelModule.Label();
     var observer = label.on(gestures.GestureTypes.pan, function (args: gestures.PanGestureEventData) {
         console.log("Pan deltaX:" + args.deltaX + "; deltaY:" + args.deltaY + ";");
     });
-    // ```
-    // </snippet>
+    // << gestures-pan
 }
 
 export var test_DummyTestForSnippetOnly22 = function () {
-    // <snippet module="ui/gestures" title="gestures">
-    // ### Pan
-    // ``` JavaScript
+    // >> gestures-pan-alt
     var label = new labelModule.Label();
     var observer = label.on("pan", function (args: gestures.PanGestureEventData) {
         console.log("Pan deltaX:" + args.deltaX + "; deltaY:" + args.deltaY + ";");
     });
-    // ```
-    // </snippet>
+    // << gestures-pan-alt
 }
 
 export var test_DummyTestForSnippetOnly3 = function () {
-    // <snippet module="ui/gestures" title="gestures">
-    // ### Pinch
-    // ``` JavaScript
+    // >> gestures-pan-pinch
     var label = new labelModule.Label();
     var observer = label.on(gestures.GestureTypes.pinch, function (args: gestures.PinchGestureEventData) {
         console.log("Pinch scale: " + args.scale);
     });
-    // ```
-    // </snippet>
+    // << gestures-pan-pinch
 }
 
 export var test_DummyTestForSnippetOnly33 = function () {
-    // <snippet module="ui/gestures" title="gestures">
-    // ### Pinch
-    // ``` JavaScript
+    // >> gestures-pan-pinch-alt
     var label = new labelModule.Label();
     var observer = label.on("pinch", function (args: gestures.PinchGestureEventData) {
         console.log("Pinch scale: " + args.scale);
     });
-    // ```
-    // </snippet>
+    // << gestures-pan-pinch-alt
 }
 
 export var test_DummyTestForSnippetOnly4 = function () {
-    // <snippet module="ui/gestures" title="gestures">
-    // ### Rotation
-    // ``` JavaScript
+    // >> gestures-rotation
     var label = new labelModule.Label();
     var observer = label.on(gestures.GestureTypes.rotation, function (args: gestures.RotationGestureEventData) {
         console.log("Rotation: " + args.rotation);
     });
-    // ```
-    // </snippet>
+    // << gestures-rotation
 }
 
 export var test_DummyTestForSnippetOnly44 = function () {
-    // <snippet module="ui/gestures" title="gestures">
-    // ### Rotation
-    // ``` JavaScript
+    // >> gestures-rotation-alt
     var label = new labelModule.Label();
     var observer = label.on("rotation", function (args: gestures.RotationGestureEventData) {
         console.log("Rotation: " + args.rotation);
     });
-    // ```
-    // </snippet>
+    // << gestures-rotation-alt
 }
 
 export var test_DummyTestForSnippetOnly5 = function () {
-    // <snippet module="ui/gestures" title="gestures">
-    // ### Swipe
-    // ``` JavaScript
+    // >> gestures-swipe
     var label = new labelModule.Label();
     var observer = label.on(gestures.GestureTypes.swipe, function (args: gestures.SwipeGestureEventData) {
         console.log("Swipe direction: " + args.direction);
     });
-    // ```
-    // </snippet>
+    // << gestures-swipe
 }
 
 export var test_DummyTestForSnippetOnly55 = function () {
-    // <snippet module="ui/gestures" title="gestures">
-    // ### Swipe
-    // ``` JavaScript
+    // >> gestures-swipe-alt
     var label = new labelModule.Label();
     var observer = label.on("swipe", function (args: gestures.SwipeGestureEventData) {
         console.log("Swipe direction: " + args.direction);
     });
-    // ```
-    // </snippet>
+    // << gestures-swipe-alt
 }
 
 export var test_DummyTestForSnippetOnly6 = function () {
-    // <snippet module="ui/gestures" title="gestures">
-    // ### Tap
-    // ``` JavaScript
+    // >> gestures-tap
     var label = new labelModule.Label();
     var observer = label.on(gestures.GestureTypes.tap, function (args: gestures.GestureEventData) {
         console.log("Tap");
     });
-    // ```
-    // </snippet>
+    // << gestures-tap
 }
 
 export var test_DummyTestForSnippetOnly66 = function () {
-    // <snippet module="ui/gestures" title="gestures">
-    // ### Tap
-    // ``` JavaScript
+    // >> gestures-tap-alt
     var label = new labelModule.Label();
     var observer = label.on("tap", function (args: gestures.GestureEventData) {
         console.log("Tap");
     });
-    // ```
-    // </snippet>
+    // << gestures-tap-alt
 }
 
 export var test_DummyTestForSnippetOnly7 = function () {
-    // <snippet module="ui/gestures" title="gestures">
-    // ### Stop observing
-    // ``` JavaScript
+    // >> gestures-stop-observe
     var label = new labelModule.Label();
     var observer = label.on(gestures.GestureTypes.tap, function (args: gestures.GestureEventData) {
         console.log("Tap");
     });
     observer.disconnect();
-    // ```
-    // </snippet>
+    // << gestures-stop-observe
 }
 
 export var test_DummyTestForSnippetOnly8 = function () {
-    // <snippet module="ui/gestures" title="gestures">
-    // ### Multiple gestures
-    // ``` JavaScript
+    // >> gestures-multiple
     var label = new labelModule.Label();
     var observer = label.on(gestures.GestureTypes.tap | gestures.GestureTypes.doubleTap | gestures.GestureTypes.longPress, function (args: gestures.GestureEventData) {
         console.log("Event: " + args.eventName);
     });
-    // ```
-    // </snippet>
+    // << gestures-multiple
 }
 
 export var test_DummyTestForSnippetOnly88 = function () {
-    // <snippet module="ui/gestures" title="gestures">
-    // ### Multiple gestures as comma separated string
-    // ``` JavaScript
+    // >> gestures-string
     var label = new labelModule.Label();
     var observer = label.on("tap, doubleTap, longPress", function (args: gestures.GestureEventData) {
         console.log("Event: " + args.eventName);
     });
-    // ```
-    // </snippet>
+    // << gestures-string
 }
 
 export var test_DummyTestForSnippetOnly9 = function () {
-    // <snippet module="ui/gestures" title="gestures">
-    // ### Events combined with gestures as comma separated string
-    // ``` JavaScript
+    // >> gestures-events-string
     var label = new labelModule.Label();
     var observer = label.on("loaded, tap, longPress", function (args: gestures.GestureEventData) {
         console.log("Event: " + args.eventName);
     });
-    // ```
-    // </snippet>
+    // << gestures-events-string
 }
\ No newline at end of file
diff --git a/apps/tests/gestures.md b/apps/tests/gestures.md
new file mode 100644
index 000000000..205604b38
--- /dev/null
+++ b/apps/tests/gestures.md
@@ -0,0 +1,62 @@
+---
+nav-title: "gestures How-To"
+title: "How-To"
+description: "Examples for using gestures"
+---
+# Gestures
+Detecting user gestures requires the "ui/gestures" module.
+<snippet id='gestures-require'/>
+
+### Double Tap
+<snippet id='gestures-double-tap'/>
+
+### Double Tap
+<snippet id='gestures-double-tap-alt'/>
+
+### Long Press
+<snippet id='gestures-long-press'/>
+
+### Long Press
+<snippet id='gestures-long-press-alt'/>
+
+### Pan
+<snippet id='gestures-pan'/>
+
+### Pan
+<snippet id='gestures-pan-alt'/>
+
+### Pinch
+<snippet id='gestures-pan-pinch'/>
+
+### Pinch
+<snippet id='gestures-pan-pinch-alt'/>
+
+### Rotation
+<snippet id='gestures-rotation'/>
+
+### Rotation
+<snippet id='gestures-rotation-alt'/>
+
+### Swipe
+<snippet id='gestures-swipe'/>
+
+### Swipe
+<snippet id='gestures-swipe-alt'/>
+
+### Tap
+<snippet id='gestures-tap'/>
+
+### Tap
+<snippet id='gestures-tap-alt'/>
+
+### Stop observing
+<snippet id='gestures-stop-observe'/>
+
+### Multiple gestures
+<snippet id='gestures-multiple'/>
+
+### Multiple gestures as comma separated string
+<snippet id='gestures-string'/>
+
+### Events combined with gestures as comma separated string
+<snippet id='gestures-events-string'/>
diff --git a/apps/tests/ui/html-view/htm-view.md b/apps/tests/ui/html-view/htm-view.md
new file mode 100644
index 000000000..937a7b177
--- /dev/null
+++ b/apps/tests/ui/html-view/htm-view.md
@@ -0,0 +1,20 @@
+---
+nav-title: "HtmlView How-To"
+title: "How-To"
+description: "Examples for using HtmlView"
+---
+# HtmlView
+Using a HtmlView requires the html-view module.
+<snippet id='htmlview-require'/>
+
+### Declaring a HtmlView.
+``` XML
+ <Page>
+      {%raw%}<HtmlView html="{{ htmlString }}" />{%endraw%}
+ </Page>
+```
+### Creating a HtmlView
+<snippet id='htmlview-create'/>
+
+### Using HtmlView
+<snippet id='htmlview-using'/>
diff --git a/apps/tests/ui/html-view/html-view-tests.ts b/apps/tests/ui/html-view/html-view-tests.ts
index a0fd6dfe7..bb0b47c0a 100644
--- a/apps/tests/ui/html-view/html-view-tests.ts
+++ b/apps/tests/ui/html-view/html-view-tests.ts
@@ -2,31 +2,14 @@
 import helper = require("../helper");
 import types = require("utils/types");
 
-// <snippet module="ui/html-view" title="HtmlView">
-// # HtmlView
-// Using a HtmlView requires the html-view module.
-// ``` JavaScript
+// >> htmlview-require
 import htmlViewModule = require("ui/html-view");
-// ```
-// </snippet>
-
-// <snippet module="ui/html-view" title="HtmlView">
-// ### Declaring a HtmlView.
-//``` XML
-//  <Page>
-//       {%raw%}<HtmlView html="{{ htmlString }}" />{%endraw%}
-//  </Page>
-//```
-
-// </snippet>
+// << htmlview-require
 
 var _createHtmlViewFunc = function (): htmlViewModule.HtmlView {
-    // <snippet module="ui/html-view" title="HtmlView">
-    // ### Creating a HtmlView
-    // ``` JavaScript
+    // >> htmlview-create
     var htmlView = new htmlViewModule.HtmlView();
-    // ```
-    // </snippet>
+    // << htmlview-create
     return htmlView;
 }
 
@@ -35,12 +18,9 @@ export var testLoadHTMLString = function () {
     let htmlView = _createHtmlViewFunc();
     page.content = htmlView;
 
-    // <snippet module="ui/html-view" title="HtmlView">
-    // ### Using HtmlView
-    // ``` JavaScript
+    // >> htmlview-using
     htmlView.html = '<span><font color="#ff0000">Test</font></span>';
-    // ```
-    // </snippet>
+    // << htmlview-using
 
     if (htmlView.ios) {
         TKUnit.assert(!types.isNullOrUndefined(htmlView.ios.attributedText), "HTML string not loaded properly. Actual: " + htmlView.ios.attributedText);
diff --git a/apps/tests/ui/image-cache/image-cache-tests.ts b/apps/tests/ui/image-cache/image-cache-tests.ts
index faa239d70..914f0059b 100644
--- a/apps/tests/ui/image-cache/image-cache-tests.ts
+++ b/apps/tests/ui/image-cache/image-cache-tests.ts
@@ -1,17 +1,11 @@
-// <snippet module="ui/image-cache" title="image-cache">
-// # ImageCache
-// Using the ImageCache requires the "ui/image-cache" module.
-// ``` JavaScript
+// >> image-cache-require
 import imageCacheModule = require("ui/image-cache");
 import imageSource = require("image-source");
 import fs = require("file-system");
-// ```
-// </snippet>
+// << image-cache-require
 
 export function test_DummyTestForSnippetOnly() {
-    // <snippet module="ui/image-cache" title="image-cache">
-    // ### Requesting Images
-    // ``` JavaScript
+    // >> image-cache-request-images
     var cache = new imageCacheModule.Cache();
     cache.placeholder = imageSource.fromFile(fs.path.join(__dirname, "res/no-image.png"));
     cache.maxRequests = 5;
@@ -42,6 +36,5 @@ export function test_DummyTestForSnippetOnly() {
 
     //// Disable download while scrolling
     cache.disableDownload();
-    // ```
-    // </snippet>
+    // << image-cache-request-images
 }
\ No newline at end of file
diff --git a/apps/tests/ui/image-cache/image-cache.md b/apps/tests/ui/image-cache/image-cache.md
new file mode 100644
index 000000000..fc8d99f10
--- /dev/null
+++ b/apps/tests/ui/image-cache/image-cache.md
@@ -0,0 +1,11 @@
+---
+nav-title: "image-cache How-To"
+title: "How-To"
+description: "Examples for using image-cache"
+---
+# ImageCache
+Using the ImageCache requires the "ui/image-cache" module.
+<snippet id='image-cache-require'/>
+
+### Requesting Images
+<snippet id='image-cache-request-images'/>
diff --git a/apps/tests/ui/image/image-tests.ts b/apps/tests/ui/image/image-tests.ts
index 69e12e512..0817f652a 100644
--- a/apps/tests/ui/image/image-tests.ts
+++ b/apps/tests/ui/image/image-tests.ts
@@ -1,28 +1,7 @@
 import TKUnit = require("../../TKUnit");
-// <snippet module="ui/image" title="Image">
-// # Image
-// Using an image requires the Image module to be loaded.
-// ``` JavaScript
+// >> img-require
 import ImageModule = require("ui/image");
-// ```
-
-// Binding the image source property to a view-model property.
-//``` XML
-// <Page>
-//   <StackLayout>
-//      <!--Bind the image source property to view-model property -->
-//      {%raw%}<Image src="{{ thumbnailImageUrl }}" />{%endraw%}
-//      <!--Load form image from application -->
-//      <Image src="~/logo.png" stretch ="none" / > 
-//      <!--Load form image resource -->
-//      <Image src="res://logo.png" stretch ="none" / > 
-//      <!--Load form image URL-->
-//      <Image src="http://www.google.com/images/errors/logo_sm_2.png" stretch ="none" /> 
-//   </StackLayout>
-// </Page>
-//```
-
-// </snippet>
+// << img-require
 
 import types = require("utils/types");
 import ImageSourceModule = require("image-source");
@@ -43,13 +22,10 @@ export var test_Image_Members = function () {
 
 /* TODO: We need a way to programmatically add an image to resources and then load it from, otherwise we do not know if there is such resource in the target native app.
 export var test_settingImageSource = function () {
-    // <snippet module="ui/image" title="Image">
-    // ### How to create an image and set its source.
-    // ``` JavaScript
+    // >> img-create
     var image = new ImageModule.Image();
     image.imageSource = ImageSourceModule.fromResource("logo");
-    // ```
-    // </snippet>
+    // << img-create
     
     var testFunc = function (views: Array<ViewModule.View>) {
         var testImage = <ImageModule.Image> views[0];
@@ -67,13 +43,10 @@ export var test_settingImageSource = function () {
 */
 
 export var test_SettingImageSrc = function (done) {
-    // <snippet module="ui/image" title="Image">
-    // ### How to create an image and set its src.
-    // ``` JavaScript
+    // >> img-create-src
     var image = new ImageModule.Image();
     image.src = "https://www.google.com/images/errors/logo_sm_2.png";
-    // ```
-    // </snippet>
+    // << img-create-src
 
     image.src = null;
 
@@ -108,13 +81,10 @@ export var test_SettingImageSrc = function (done) {
 }
 
 export var test_SettingImageSrcToFileWithinApp = function (done) {
-    // <snippet module="ui/image" title="Image">
-    // ### How to create an image and set its src to file within the application.
-    // ``` JavaScript
+    // >> img-create-local
     var image = new ImageModule.Image();
     image.src = "~/logo.png";
-    // ```
-    // </snippet>
+    // << img-create-local
 
     var testFunc = function (views: Array<ViewModule.View>) {
         var testImage = <ImageModule.Image> views[0];
@@ -132,13 +102,10 @@ export var test_SettingImageSrcToFileWithinApp = function (done) {
 }
 
 export var test_SettingImageSrcToDataURI = function (done) {
-    // <snippet module="ui/image" title="Image">
-    // ### How to create an image and set its src to Data URI.
-    // ``` JavaScript
+    // >> img-create-datauri
     var image = new ImageModule.Image();
     image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAAXNSR0IArs4c6QAAABxpRE9UAAAAAgAAAAAAAAACAAAAKAAAAAIAAAACAAAARiS4uJEAAAASSURBVBgZYvjPwABHSMz/DAAAAAD//0GWpK0AAAAOSURBVGNgYPiPhBgQAACEvQv1D5y/pAAAAABJRU5ErkJggg==";
-    // ```
-    // </snippet>
+    // << img-create-datauri
 
     var testFunc = function (views: Array<ViewModule.View>) {
         var testImage = <ImageModule.Image>views[0];
@@ -157,17 +124,14 @@ export var test_SettingImageSrcToDataURI = function (done) {
 }
 
 export var test_SettingStretch_AspectFit = function () {
-    // <snippet module="ui/image" title="Image">
-    // ### How to set image stretching.
-    // ``` JavaScript
+    // >> img-set-stretch
     var image = new ImageModule.Image();
     image.imageSource = ImageSourceModule.fromFile(imagePath);
     //// There are 4 modes of stretching none, fill, aspectFill, aspectFit
     //// The default value is aspectFit.
     //// Image stretch can be set by using ImageModule.stretch enum.
     image.stretch = enumsModule.Stretch.aspectFit;
-    // ```
-    // </snippet>
+    // << img-set-stretch
 
     var testFunc = function (views: Array<ViewModule.View>) {
         var testImage = <ImageModule.Image> views[0];
diff --git a/apps/tests/ui/image/image.md b/apps/tests/ui/image/image.md
new file mode 100644
index 000000000..86d26500b
--- /dev/null
+++ b/apps/tests/ui/image/image.md
@@ -0,0 +1,38 @@
+---
+nav-title: "Image How-To"
+title: "How-To"
+description: "Examples for using Image"
+---
+# Image
+Using an image requires the Image module to be loaded.
+<snippet id='img-require'/>
+
+Binding the image source property to a view-model property.
+``` XML
+<Page>
+  <StackLayout>
+     <!--Bind the image source property to view-model property -->
+     {%raw%}<Image src="{{ thumbnailImageUrl }}" />{%endraw%}
+     <!--Load form image from application -->
+     <Image src="~/logo.png" stretch ="none" / > 
+     <!--Load form image resource -->
+     <Image src="res://logo.png" stretch ="none" / > 
+     <!--Load form image URL-->
+     <Image src="http://www.google.com/images/errors/logo_sm_2.png" stretch ="none" /> 
+  </StackLayout>
+</Page>
+```
+### How to create an image and set its source.
+<snippet id='img-create'/>
+
+### How to create an image and set its src.
+<snippet id='img-create-src'/>
+
+### How to create an image and set its src to file within the application.
+<snippet id='img-create-local'/>
+
+### How to create an image and set its src to Data URI.
+<snippet id='img-create-datauri'/>
+
+### How to set image stretching.
+<snippet id='img-set-stretch'/>
diff --git a/apps/tests/ui/label/label-tests.ts b/apps/tests/ui/label/label-tests.ts
index fad074b18..4b17b708d 100644
--- a/apps/tests/ui/label/label-tests.ts
+++ b/apps/tests/ui/label/label-tests.ts
@@ -2,21 +2,10 @@
 import testModule = require("../../ui-test");
 import styling = require("ui/styling");
 
-// <snippet module="ui/label" title="Label">
-// # Label
-// Using a label requires the Label module.
-// ``` JavaScript
+//>> label-require
 import LabelModule = require("ui/label");
-// ```
+// << label-require
 
-// ### Binding the Label text property to a view-model property.
-//``` XML
-// <Page>
-//   {%raw%}<Label text="{{ title }}" />{%endraw%}
-// </Page>
-//```
-
-// </snippet>
 import types = require("utils/types");
 import colorModule = require("color");
 import utils = require("utils/utils");
@@ -43,24 +32,18 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
     }
 
     public snippet_Set_Text_TNS() {
-        // <snippet module="ui/label" title="Label">
-        // ### How to set label text content
-        // ``` JavaScript
+        // >> label-settext
         var label = new LabelModule.Label();
         var expectedValue = "Expected Value";
         label.text = expectedValue;
-        // ```
-        // </snippet>
+        // << label-settext
     }
 
     public snippet_Set_TextWrap_TNS() {
-        // <snippet module="ui/label" title="Label">
-        // ### How to turn on text wrapping for a label
-        // ``` JavaScript
+        // >> label-textwrap
         var label = new LabelModule.Label();
         label.textWrap = true;
-        // ```
-        // </snippet>
+        // << label-textwrap
     }
 
     public test_Set_Text_TNS() {
@@ -249,15 +232,12 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
             "color: ", color, "; ",
             "font-size: ", fontSize, ";}"].join("");
 
-        // <snippet module="ui/label" title="Label">
-        // ### How to style a label via css class
-        // ``` JavaScript
+        // >> label-cssclass
         label.text = "The quick brown fox jumps over the lazy dog.";
         label.className = "title";
         //// after that all we have to do is to set a similar css entry within parent page css property
         //// label.parentPage.css = ".title {background-color: #C6C6C6; color: #10C2B0; font-size: 14;}";
-        // ```
-        // </snippet>
+        // << label-cssclass
 
         var actualTextSize;
         var expSize;
@@ -316,15 +296,12 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
         this.testPage.css = testCss;
         this.waitUntilTestElementIsLoaded();
 
-        // <snippet module="ui/label" title="Label">
-        // ### How to style a label via css type
-        // ``` JavaScript
+        // >> label-cssclass-type
         label.text = "The quick brown fox jumps over the lazy dog.";
         //// in order to style label with a "type style scope" just put a similar css entry
         //// testLabel.parentPage.css = "label {background-color: #C6C6C6; color: #10C2B0; font-size: 14;}";
         //// all labels within the parent page will be styled according to css values
-        // ```
-        // </snippet>
+        // << label-cssclass-type
         var expectedBackgroundColor = new colorModule.Color(backgroundColor);
         var actualBackgroundColor = label.style.backgroundColor;
         TKUnit.assertEqual(expectedBackgroundColor.hex, actualBackgroundColor.hex);
@@ -349,15 +326,12 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
         this.testPage.css = testCss;
         this.waitUntilTestElementIsLoaded();
 
-        // <snippet module="ui/label" title="Label">
-        // ### How to style a label via css control identifier
-        // ``` JavaScript
+        // >> label-css-identifier
         label.text = "The quick brown fox jumps over the lazy dog.";
         label.id = "testLabel";
         //// after that all we have to do is to set a similar css entry within parent page css property
         //// label.parentPage.css = "#testLabel {background-color: #C6C6C6; color: #10C2B0; font-size: 14;}";
-        // ```
-        // </snippet>
+        // << label-css-identifier
 
         var expectedBackgroundColor = new colorModule.Color(backgroundColor);
         var actualBackgroundColor = label.style.backgroundColor;
@@ -372,9 +346,7 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
     }
 
     public test_BindingToText() {
-        // <snippet module="ui/label" title="Label">
-        // ### How to bind text property of a label to an observable model
-        // ``` JavaScript
+        // >> label-observable
         var label = new LabelModule.Label();
         var expValue = "Expected Value";
         var sourceModel = new observableModule.Observable();
@@ -385,8 +357,7 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
         label.bind(bindingOptions, sourceModel);
         sourceModel.set("sourceProperty", expValue);
         //// console.log(label.text); --> prints: "Expected Value"
-        // ```
-        // </snippet>
+        // << label-observable
 
         TKUnit.assertEqual(label.text, expValue);
     }
diff --git a/apps/tests/ui/label/label.md b/apps/tests/ui/label/label.md
new file mode 100644
index 000000000..a4f53b73a
--- /dev/null
+++ b/apps/tests/ui/label/label.md
@@ -0,0 +1,32 @@
+---
+nav-title: "Label How-To"
+title: "How-To"
+description: "Examples for using Label"
+---
+# Label
+Using a label requires the Label module.
+<snippet id='label-require'/>
+
+### Binding the Label text property to a view-model property.
+``` XML
+<Page>
+  {%raw%}<Label text="{{ title }}" />{%endraw%}
+</Page>
+```
+### How to set label text content
+<snippet id='label-settext'/>
+
+### How to turn on text wrapping for a label
+<snippet id='label-textwrap'/>
+
+### How to style a label via css class
+<snippet id='label-cssclass'/>
+
+### How to style a label via css type
+<snippet id='label-cssclass-type'/>
+
+### How to style a label via css control identifier
+<snippet id='label-css-identifier'/>
+
+### How to bind text property of a label to an observable model
+<snippet id='label-observable'/>