diff --git a/core/src/components/note/note.scss b/core/src/components/note/note.scss
index dacbaaffc8..ba65f71591 100644
--- a/core/src/components/note/note.scss
+++ b/core/src/components/note/note.scss
@@ -7,7 +7,6 @@
/**
* @prop --color: Color of the note
*/
-
color: var(--color);
font-family: $font-family-base;
diff --git a/core/src/components/note/test/basic/e2e.ts b/core/src/components/note/test/basic/e2e.ts
new file mode 100644
index 0000000000..cdb9b85c26
--- /dev/null
+++ b/core/src/components/note/test/basic/e2e.ts
@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+it('note: basic', async () => {
+ const page = await newE2EPage({
+ url: '/src/components/note/test/basic?ionic:_testing=true'
+ });
+
+ const compare = await page.compareScreenshot();
+ expect(compare).toMatchScreenshot();
+});
diff --git a/core/src/components/note/test/standalone/e2e.ts b/core/src/components/note/test/standalone/e2e.ts
new file mode 100644
index 0000000000..4aff5c1805
--- /dev/null
+++ b/core/src/components/note/test/standalone/e2e.ts
@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+it('note: standalone', async () => {
+ const page = await newE2EPage({
+ url: '/src/components/note/test/standalone?ionic:_testing=true'
+ });
+
+ const compare = await page.compareScreenshot();
+ expect(compare).toMatchScreenshot();
+});
diff --git a/core/src/components/note/test/standalone/index.html b/core/src/components/note/test/standalone/index.html
index 02cb0a96ba..52edd808ce 100644
--- a/core/src/components/note/test/standalone/index.html
+++ b/core/src/components/note/test/standalone/index.html
@@ -11,13 +11,14 @@
-
+ Default
Default Note
-
+ Custom
Custom Note
+ Custom Secondary Note
-
+ Colors
Primary Note
Secondary Note
Tertiary Note
@@ -28,7 +29,7 @@
Medium Note
Dark Note
-
+ Notes in a List
Note (End)