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>
 ```