diff --git a/src/components/card/card.ios.scss b/src/components/card/card.ios.scss
index cecd166a484..25378efd4bb 100644
--- a/src/components/card/card.ios.scss
+++ b/src/components/card/card.ios.scss
@@ -122,8 +122,7 @@ $card-ios-header-color:                #333 !default;
   padding-top: 0;
 }
 
-.card-ios ion-note[item-left],
-.card-ios ion-note[item-right] {
+.card .note-ios {
   font-size: 1.3rem;
 }
 
diff --git a/src/components/card/card.md.scss b/src/components/card/card.md.scss
index 51c76712cff..4875196481d 100644
--- a/src/components/card/card.md.scss
+++ b/src/components/card/card.md.scss
@@ -126,8 +126,7 @@ $card-md-header-color:                #222 !default;
   padding-top: 0;
 }
 
-.card-md ion-note[item-left],
-.card-md ion-note[item-right] {
+.card .note-md {
   font-size: 1.3rem;
 }
 
diff --git a/src/components/card/card.wp.scss b/src/components/card/card.wp.scss
index fc0f1bcd92b..f24f49ec899 100644
--- a/src/components/card/card.wp.scss
+++ b/src/components/card/card.wp.scss
@@ -128,8 +128,7 @@ $card-wp-header-color:                #222 !default;
   padding-top: 0;
 }
 
-.card-wp ion-note[item-left],
-.card-wp ion-note[item-right] {
+.card .note-wp {
   font-size: 1.3rem;
 }
 
diff --git a/src/components/card/test/advanced/main.html b/src/components/card/test/advanced/main.html
index 0465de6a6f1..72bf20663b8 100644
--- a/src/components/card/test/advanced/main.html
+++ b/src/components/card/test/advanced/main.html
@@ -77,11 +77,10 @@ <h2>Card With An Inset Picture</h2>
             Listen
           </button>
         </ion-col>
-        <ion-col no-padding text-right>
-          <button ion-button icon-left clear small color="danger" class="activated">
-            <ion-icon name="share"></ion-icon>
-            Activated
-          </button>
+        <ion-col no-padding center padding-right text-right>
+          <ion-note>
+            11h ago
+          </ion-note>
         </ion-col>
       </ion-row>
     </ion-grid>
diff --git a/src/components/item/item.ios.scss b/src/components/item/item.ios.scss
index 5576a34a492..4645e95844c 100644
--- a/src/components/item/item.ios.scss
+++ b/src/components/item/item.ios.scss
@@ -21,9 +21,6 @@ $item-ios-avatar-size:                    3.6rem !default;
 /// @prop - Size of the thumbnail in the item
 $item-ios-thumbnail-size:                 5.6rem !default;
 
-/// @prop - Color of the note in the item
-$item-ios-note-color:                     darken($list-ios-border-color, 10%) !default;
-
 /// @prop - Shows the detail arrow icon on an item
 $item-ios-detail-push-show:               true !default;
 
@@ -181,10 +178,6 @@ $item-ios-sliding-content-background:     $list-ios-background-color !default;
   max-height: $item-ios-thumbnail-size;
 }
 
-.item-ios ion-note {
-  color: $item-ios-note-color;
-}
-
 
 // iOS Item Detail Push
 // --------------------------------------------------
diff --git a/src/components/item/item.md.scss b/src/components/item/item.md.scss
index 638db84755f..b12ae803d18 100644
--- a/src/components/item/item.md.scss
+++ b/src/components/item/item.md.scss
@@ -21,9 +21,6 @@ $item-md-avatar-size:                4rem !default;
 /// @prop - Size of the thumbnail in the item
 $item-md-thumbnail-size:             8rem !default;
 
-/// @prop - Color of the note in the item
-$item-md-note-color:                 darken($list-md-border-color, 10%) !default;
-
 /// @prop - Shows the detail arrow icon on an item
 $item-md-detail-push-show:           false !default;
 
@@ -203,10 +200,6 @@ $item-md-sliding-content-background: $list-md-background-color !default;
   max-height: $item-md-thumbnail-size;
 }
 
-.item-md ion-note {
-  color: $item-md-note-color;
-}
-
 
 // Material Design Item Group
 // --------------------------------------------------
diff --git a/src/components/item/item.wp.scss b/src/components/item/item.wp.scss
index 05b5319a51a..71e35b12a2c 100644
--- a/src/components/item/item.wp.scss
+++ b/src/components/item/item.wp.scss
@@ -27,9 +27,6 @@ $item-wp-avatar-size:                4rem !default;
 /// @prop - Size of the thumbnail in the item
 $item-wp-thumbnail-size:             8rem !default;
 
-/// @prop - Color of the note in the item
-$item-wp-note-color:                 $input-wp-border-color !default;
-
 /// @prop - Shows the detail arrow icon on an item
 $item-wp-detail-push-show:           false !default;
 
@@ -213,10 +210,6 @@ $item-wp-sliding-content-background: $list-wp-background-color !default;
   max-height: $item-wp-thumbnail-size;
 }
 
-.item-wp ion-note {
-  color: $item-wp-note-color;
-}
-
 
 // Windows Item Divider
 // --------------------------------------------------
diff --git a/src/components/list/test/headers/main.html b/src/components/list/test/headers/main.html
index c42d6caaa84..40d19f33de6 100644
--- a/src/components/list/test/headers/main.html
+++ b/src/components/list/test/headers/main.html
@@ -42,7 +42,7 @@
     <ion-item>
       <ion-icon name="home" item-left></ion-icon>
       Home
-      <ion-note item-right>
+      <ion-note item-right color="danger">
         Where the heart is
       </ion-note>
     </ion-item>
diff --git a/src/components/note/note.ios.scss b/src/components/note/note.ios.scss
new file mode 100644
index 00000000000..aca3b599fd5
--- /dev/null
+++ b/src/components/note/note.ios.scss
@@ -0,0 +1,24 @@
+@import "../../themes/ionic.globals.ios";
+
+// iOS Note
+// --------------------------------------------------
+
+/// @prop - Text color of the note
+$note-ios-color:      darken($list-ios-border-color, 10%) !default;
+
+
+.note-ios {
+  color: $note-ios-color;
+}
+
+
+// Generate iOS Note Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
+
+  .note-ios-#{$color-name} {
+    color: $color-base;
+  }
+
+}
diff --git a/src/components/note/note.md.scss b/src/components/note/note.md.scss
new file mode 100644
index 00000000000..1ae3f94bcde
--- /dev/null
+++ b/src/components/note/note.md.scss
@@ -0,0 +1,24 @@
+@import "../../themes/ionic.globals.md";
+
+// Material Design Note
+// --------------------------------------------------
+
+/// @prop - Text color of the note
+$note-md-color:      darken($list-md-border-color, 10%) !default;
+
+
+.note-md {
+  color: $note-md-color;
+}
+
+
+// Generate Material Design Note Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
+
+  .note-md-#{$color-name} {
+    color: $color-base;
+  }
+
+}
diff --git a/src/components/note/note.ts b/src/components/note/note.ts
index 795e2c40196..4e0bab64796 100644
--- a/src/components/note/note.ts
+++ b/src/components/note/note.ts
@@ -1,5 +1,7 @@
-import { Directive } from '@angular/core';
+import { Directive, ElementRef, Input, Renderer } from '@angular/core';
 
+import { Config } from '../../config/config';
+import { Ion } from '../ion';
 
 /**
   * @private
@@ -7,4 +9,26 @@ import { Directive } from '@angular/core';
 @Directive({
   selector: 'ion-note'
 })
-export class Note {}
+export class Note extends Ion {
+
+  /**
+   * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
+   */
+  @Input()
+  set color(val: string) {
+    this._setColor(val);
+  }
+
+  /**
+   * @input {string} The mode to apply to this component.
+   */
+  @Input()
+  set mode(val: string) {
+    this._setMode(val);
+  }
+
+  constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
+    super(config, elementRef, renderer, 'note');
+  }
+
+}
diff --git a/src/components/note/note.wp.scss b/src/components/note/note.wp.scss
new file mode 100644
index 00000000000..d6076240cd8
--- /dev/null
+++ b/src/components/note/note.wp.scss
@@ -0,0 +1,24 @@
+@import "../../themes/ionic.globals.wp";
+
+// Windows Note
+// --------------------------------------------------
+
+/// @prop - Text color of the note
+$note-wp-color:      $input-wp-border-color !default;
+
+
+.note-wp {
+  color: $note-wp-color;
+}
+
+
+// Generate Windows Note Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
+
+  .note-wp-#{$color-name} {
+    color: $color-base;
+  }
+
+}
diff --git a/src/themes/ionic.components.scss b/src/themes/ionic.components.scss
index 23a9ac81853..ba1ada043ee 100644
--- a/src/themes/ionic.components.scss
+++ b/src/themes/ionic.components.scss
@@ -131,6 +131,11 @@
 "../components/modal/modal.md",
 "../components/modal/modal.wp";
 
+@import
+"../components/note/note.ios",
+"../components/note/note.md",
+"../components/note/note.wp";
+
 @import
 "../components/picker/picker",
 "../components/picker/picker.ios",