From 15e067a72fdd3247373788870932feecb2d42dc4 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Wed, 24 Jan 2018 18:20:24 -0500
Subject: [PATCH] docs(note): update documentation for note

---
 packages/core/src/components/note/readme.md | 38 +++++++++++++--------
 1 file changed, 23 insertions(+), 15 deletions(-)

diff --git a/packages/core/src/components/note/readme.md b/packages/core/src/components/note/readme.md
index ff0c35fb64..b67772168c 100644
--- a/packages/core/src/components/note/readme.md
+++ b/packages/core/src/components/note/readme.md
@@ -1,22 +1,30 @@
 # ion-note
 
-A note is detailed item in an ion-item. It creates greyed out element that can be on
-the left or right side of an item.
+Notes are text elements generally used as subtitles that provide more information. Notes are styled to appear grey by default.
 
 ```html
-<ion-content>
-  <ion-list>
-    <ion-item>
-      <ion-note slot="start">
-        Left Note
-      </ion-note>
-      My Item
-      <ion-note slot="end">
-        Right Note
-      </ion-note>
-    </ion-item>
-  </ion-list>
-</ion-content>
+<!-- Default Note -->
+<ion-note>Default Note</ion-note>
+
+<!-- Note Colors -->
+<ion-note color="primary">Primary Note</ion-note>
+<ion-note color="secondary">Secondary Note</ion-note>
+<ion-note color="danger">Danger Note</ion-note>
+<ion-note color="light">Light Note</ion-note>
+<ion-note color="dark">Dark Note</ion-note>
+
+<!-- Notes in a List -->
+<ion-list>
+  <ion-item>
+    <ion-label>Note (End)</ion-label>
+    <ion-note slot="end">On</ion-note>
+  </ion-item>
+
+  <ion-item>
+    <ion-note slot="start">Off</ion-note>
+    <ion-label>Note (Start)</ion-label>
+  </ion-item>
+</ion-list>
 ```