diff --git a/core/src/components/card/test/basic/card.e2e.ts b/core/src/components/card/test/basic/card.e2e.ts
new file mode 100644
index 0000000000..50689b9d46
--- /dev/null
+++ b/core/src/components/card/test/basic/card.e2e.ts
@@ -0,0 +1,160 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('card: basic', () => {
+  test.describe('card: rendering', () => {
+    test('should not have visual regressions with basic card', async ({ page }) => {
+      await page.setContent(`
+        <ion-card>
+          <ion-card-header>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+            <ion-card-title>Card Title</ion-card-title>
+          </ion-card-header>
+
+          <ion-card-content>
+            Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week
+            in the woods. Wash your spirit clean.
+          </ion-card-content>
+        </ion-card>
+      `);
+
+      const card = page.locator('ion-card');
+      expect(await card.screenshot()).toMatchSnapshot(`card-diff-${page.getSnapshotSettings()}.png`);
+    });
+  });
+
+  test.describe('card: feature rendering', () => {
+    test.beforeEach(({ skip }) => {
+      skip.rtl();
+    });
+
+    test('should not have visual regressions with button cards', async ({ page }) => {
+      await page.setContent(`
+        <ion-card button="true">
+          <ion-card-header>
+            <ion-card-title>Card Title</ion-card-title>
+          </ion-card-header>
+
+          <ion-card-content>
+            Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week
+            in the woods. Wash your spirit clean.
+          </ion-card-content>
+        </ion-card>
+      `);
+
+      const card = page.locator('ion-card');
+      expect(await card.screenshot()).toMatchSnapshot(`card-button-${page.getSnapshotSettings()}.png`);
+    });
+
+    test('should not have visual regressions with translucent cards', async ({ page, skip }) => {
+      skip.mode('md', 'Translucent effect is only available in iOS mode.');
+      skip.browser('firefox', 'Firefox has some issues rendering translucent effects on Linux.');
+
+      await page.setContent(`
+        <ion-card>
+          <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0">
+            <img style="transform: rotate(145deg) scale(1.5)" src="/src/components/card/test/img.jpg" />
+          </div>
+          <ion-card-header translucent="true">
+            <ion-card-subtitle> Subtitle </ion-card-subtitle>
+            <ion-card-title> Title </ion-card-title>
+          </ion-card-header>
+
+          <ion-card-content style="min-height: 20px"></ion-card-content>
+        </ion-card>
+      `);
+
+      const card = page.locator('ion-card');
+      expect(await card.screenshot()).toMatchSnapshot(`card-translucent-${page.getSnapshotSettings()}.png`);
+    });
+
+    test('should not have visual regressions with disabled card', async ({ page }) => {
+      await page.setContent(`
+        <ion-card disabled="true">
+          <ion-card-header>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+            <ion-card-title>Card Title</ion-card-title>
+          </ion-card-header>
+
+          <ion-card-content>
+            Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week
+            in the woods. Wash your spirit clean.
+          </ion-card-content>
+        </ion-card>
+      `);
+
+      const card = page.locator('ion-card');
+      expect(await card.screenshot()).toMatchSnapshot(`card-disabled-${page.getSnapshotSettings()}.png`);
+    });
+    test('should not have visual regressions with color', async ({ page }) => {
+      await page.setContent(`
+        <ion-card color="danger">
+          <ion-card-header>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+            <ion-card-title>Card Title</ion-card-title>
+          </ion-card-header>
+
+          <ion-card-content>
+            Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week
+            in the woods. Wash your spirit clean.
+          </ion-card-content>
+        </ion-card>
+      `);
+
+      const card = page.locator('ion-card');
+      expect(await card.screenshot()).toMatchSnapshot(`card-color-${page.getSnapshotSettings()}.png`);
+    });
+    test('headings should have correct size in card', async ({ page }) => {
+      await page.setContent(`
+        <ion-card>
+          <ion-card-content>
+            <h1>Heading 1</h1>
+            <h2>Heading 2</h2>
+            <h3>Heading 3</h3>
+            <h4>Heading 4</h4>
+            <h5>Heading 5</h5>
+            <h6>Heading 6</h6>
+            <p>Paragraph</p>
+          </ion-card-content>
+        </ion-card>
+      `);
+
+      const card = page.locator('ion-card');
+      expect(await card.screenshot()).toMatchSnapshot(`card-headings-${page.getSnapshotSettings()}.png`);
+    });
+    test('should render even without header or content elements', async ({ page }) => {
+      await page.setContent(`
+        <ion-card>
+          <ion-list lines="none">
+            <ion-item href="#" class="ion-activated">
+              <ion-icon name="wifi" slot="start"></ion-icon>
+              <ion-label>Link Item activated</ion-label>
+              <ion-note>More</ion-note>
+            </ion-item>
+
+            <ion-item href="#">
+              <ion-icon name="wine" slot="start"></ion-icon>
+              <ion-label>Link Item</ion-label>
+              <ion-note>More</ion-note>
+            </ion-item>
+
+            <ion-item button="true" class="ion-activated">
+              <ion-icon name="warning" slot="start"></ion-icon>
+              <ion-label>Button Item activated</ion-label>
+              <ion-note>More</ion-note>
+            </ion-item>
+
+            <ion-item button="true">
+              <ion-icon name="walk" slot="start"></ion-icon>
+              <ion-label>Button Item</ion-label>
+              <ion-note>More</ion-note>
+            </ion-item>
+          </ion-list>
+        </ion-card>
+      `);
+
+      const card = page.locator('ion-card');
+      expect(await card.screenshot()).toMatchSnapshot(`card-no-content-or-header-${page.getSnapshotSettings()}.png`);
+    });
+  });
+});
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-button-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-button-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..e18fb2b10a
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-button-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-button-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-button-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..e10ae727bb
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-button-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-button-ios-ltr-Mobile-Safari-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-button-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..ff3db78cb5
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-button-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-button-md-ltr-Mobile-Chrome-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-button-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..37798de0e0
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-button-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-button-md-ltr-Mobile-Firefox-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-button-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..63b3a93162
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-button-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-button-md-ltr-Mobile-Safari-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-button-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..345b53f7f5
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-button-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-color-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..ef2af5e7ac
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-color-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-color-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..4df0012c3a
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-color-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-color-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..f5d21d79d7
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-color-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-color-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..f052882bc2
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-color-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-color-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..5f4e42fa81
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-color-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-color-md-ltr-Mobile-Safari-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-color-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..8bd94b605a
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-color-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-diff-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..835e9f99cb
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-diff-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..4b87e2dcb8
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-diff-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..2275f479aa
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-diff-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..90204a3981
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-diff-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..28ed831122
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-diff-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..2d79f4dea5
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-diff-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..8d85e7b2c2
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-diff-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..68b6afc0a4
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-diff-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..f76c02ad09
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-diff-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..0d541a5eea
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-diff-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..eceb61dc16
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-diff-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..28dbf9956f
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-disabled-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-disabled-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..c67da5ff8b
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-disabled-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-disabled-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-disabled-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..9517e478d5
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-disabled-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-disabled-ios-ltr-Mobile-Safari-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-disabled-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..868d104775
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-disabled-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-disabled-md-ltr-Mobile-Chrome-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-disabled-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..b92e4bff2d
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-disabled-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-disabled-md-ltr-Mobile-Firefox-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-disabled-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..20dd81fcaa
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-disabled-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-disabled-md-ltr-Mobile-Safari-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-disabled-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..4dd3d1482b
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-disabled-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-headings-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-headings-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..1bb3636766
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-headings-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-headings-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-headings-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..8eac9f4231
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-headings-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-headings-ios-ltr-Mobile-Safari-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-headings-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..2a78c40ed4
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-headings-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-headings-md-ltr-Mobile-Chrome-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-headings-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..c0dd5684ed
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-headings-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-headings-md-ltr-Mobile-Firefox-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-headings-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..f83902c414
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-headings-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-headings-md-ltr-Mobile-Safari-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-headings-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..5c0a66ff15
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-headings-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..be5425b93c
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..f32948f406
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-ios-ltr-Mobile-Safari-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..a0cae7ca5d
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-md-ltr-Mobile-Chrome-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..825a57dcfb
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-md-ltr-Mobile-Firefox-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..f5c3f93084
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-md-ltr-Mobile-Safari-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..d9fde85d61
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-translucent-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-translucent-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..b09df7b952
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-translucent-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-translucent-ios-ltr-Mobile-Safari-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-translucent-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..fde6070fcf
Binary files /dev/null and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-translucent-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/card/test/basic/e2e.ts b/core/src/components/card/test/basic/e2e.ts
deleted file mode 100644
index e363f5e71e..0000000000
--- a/core/src/components/card/test/basic/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('card: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/card/test/basic?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/card/test/basic/index.html b/core/src/components/card/test/basic/index.html
deleted file mode 100644
index 8ce96ebfbe..0000000000
--- a/core/src/components/card/test/basic/index.html
+++ /dev/null
@@ -1,119 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Card - Basic</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-  </head>
-
-  <body>
-    <ion-app>
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Card - Basic</ion-title>
-        </ion-toolbar>
-      </ion-header>
-
-      <ion-content id="content">
-        <ion-card>
-          <ion-card-header>
-            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
-            <ion-card-title>Card Title</ion-card-title>
-          </ion-card-header>
-
-          <ion-card-content>
-            Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week
-            in the woods. Wash your spirit clean.
-          </ion-card-content>
-        </ion-card>
-
-        <ion-card>
-          <ion-item lines="none">
-            <ion-icon name="pin" slot="start"></ion-icon>
-            <ion-label>ion-item in a card, icon left, button right</ion-label>
-            <ion-button fill="outline" slot="end">View</ion-button>
-          </ion-item>
-
-          <ion-card-content>
-            This is content, without any paragraph or header tags, within an ion-card-content element.
-          </ion-card-content>
-        </ion-card>
-
-        <ion-card class="custom2">
-          <ion-card-header>
-            <ion-card-subtitle> Subtitle </ion-card-subtitle>
-            <ion-card-title> Title </ion-card-title>
-          </ion-card-header>
-
-          <ion-card-content>
-            The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
-          </ion-card-content>
-        </ion-card>
-
-        <ion-card color="secondary">
-          <ion-card-header>
-            <ion-card-subtitle>Subtitle</ion-card-subtitle>
-            <ion-card-title>Title</ion-card-title>
-          </ion-card-header>
-
-          <ion-card-content>
-            This is content, without any paragraph or header tags, within an ion-card-content element.
-          </ion-card-content>
-        </ion-card>
-
-        <ion-card>
-          <ion-card-content>
-            <h1>Heading 1</h1>
-            <h2>Heading 2</h2>
-            <h3>Heading 3</h3>
-            <h4>Heading 4</h4>
-            <h5>Heading 5</h5>
-            <h6>Heading 6</h6>
-            <p>Paragraph</p>
-          </ion-card-content>
-        </ion-card>
-
-        <ion-card>
-          <ion-list lines="none">
-            <ion-item href="#" class="ion-activated">
-              <ion-icon name="wifi" slot="start"></ion-icon>
-              <ion-label>Link Item activated</ion-label>
-              <ion-note>More</ion-note>
-            </ion-item>
-
-            <ion-item href="#">
-              <ion-icon name="wine" slot="start"></ion-icon>
-              <ion-label>Link Item</ion-label>
-              <ion-note>More</ion-note>
-            </ion-item>
-
-            <ion-item button class="ion-activated">
-              <ion-icon name="warning" slot="start"></ion-icon>
-              <ion-label>Button Item activated</ion-label>
-              <ion-note>More</ion-note>
-            </ion-item>
-
-            <ion-item button>
-              <ion-icon name="walk" slot="start"></ion-icon>
-              <ion-label>Button Item</ion-label>
-              <ion-note>More</ion-note>
-            </ion-item>
-          </ion-list>
-        </ion-card>
-      </ion-content>
-    </ion-app>
-    <style>
-      .content {
-        background: #e5e5e5;
-      }
-    </style>
-  </body>
-</html>
diff --git a/core/src/components/card/test/button/index.html b/core/src/components/card/test/button/index.html
deleted file mode 100644
index ed187ef1e4..0000000000
--- a/core/src/components/card/test/button/index.html
+++ /dev/null
@@ -1,88 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Card - Basic</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-  </head>
-
-  <body>
-    <ion-app>
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Card - Button</ion-title>
-        </ion-toolbar>
-      </ion-header>
-
-      <ion-content id="content">
-        <ion-card button>
-          <ion-card-header>
-            <ion-card-subtitle> Subtitle </ion-card-subtitle>
-            <ion-card-title> Button Card </ion-card-title>
-          </ion-card-header>
-
-          <ion-card-content> This is content, inside of a card with a button attribute. </ion-card-content>
-        </ion-card>
-
-        <ion-card href="#">
-          <ion-card-header>
-            <ion-card-title> Anchor Card </ion-card-title>
-          </ion-card-header>
-
-          <ion-card-content> This is content, inside of a card with a href attribute. </ion-card-content>
-        </ion-card>
-
-        <ion-card button color="tertiary">
-          <ion-card-header>
-            <ion-card-subtitle> Subtitle </ion-card-subtitle>
-            <ion-card-title> Button Card </ion-card-title>
-          </ion-card-header>
-
-          <ion-card-content> This is content, inside of a card with a button attribute. </ion-card-content>
-        </ion-card>
-
-        <ion-card href="#" color="warning">
-          <ion-card-header>
-            <ion-card-title> Anchor Card </ion-card-title>
-          </ion-card-header>
-
-          <ion-card-content> This is content, inside of a card with a href attribute. </ion-card-content>
-        </ion-card>
-
-        <ion-card button>
-          <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0">
-            <img
-              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHwAAAB8AQAAAACDZekTAAABMElEQVR4AWLABZjQBdjRBfgb0ATkD6AJ2D9AE6j/gCbw/weAyzk2IwAKwBgIixvNKPaA+P7yXplUZ1/7OO79DkYdjHrIqKeMeskoISXkWkLuBWSMkhGQMYCMAWQMISVkDCBjDCKjZAAZA8gYQMYAUkLGaBAZg8goGYPIGATGIDAGgTEIjEFgDCKjZAwiYxAYg8AYBMYgMAaBMYiMkjGIjEHGSMgYQErIGEDGAAKjZAwyhpAxgIwB5F9nvVsBCAUgDC3Zf2MGuCe1+r6QyBuMwSysg5WyF3bLeXBinCmnzr1wc9wtt08+SBAZI4XklCSTddpAX2gUnaOV9JZm033oAD8gDAyCUnAM0sFCaAlPIS5MhtpwHfLjBuyBXzAQjsJieE4T6kptqm81ss7W6ss/gwMyz60frEbR8QAAAABJRU5ErkJggg=="
-            />
-          </div>
-
-          <ion-card-header>
-            <ion-card-subtitle> Subtitle </ion-card-subtitle>
-            <ion-card-title> Title </ion-card-title>
-          </ion-card-header>
-
-          <ion-card-content> This button should have a background. </ion-card-content>
-        </ion-card>
-
-        <ion-card button>
-          <img
-            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHwAAAB8AQAAAACDZekTAAABMElEQVR4AWLABZjQBdjRBfgb0ATkD6AJ2D9AE6j/gCbw/weAyzk2IwAKwBgIixvNKPaA+P7yXplUZ1/7OO79DkYdjHrIqKeMeskoISXkWkLuBWSMkhGQMYCMAWQMISVkDCBjDCKjZAAZA8gYQMYAUkLGaBAZg8goGYPIGATGIDAGgTEIjEFgDCKjZAwiYxAYg8AYBMYgMAaBMYiMkjGIjEHGSMgYQErIGEDGAAKjZAwyhpAxgIwB5F9nvVsBCAUgDC3Zf2MGuCe1+r6QyBuMwSysg5WyF3bLeXBinCmnzr1wc9wtt08+SBAZI4XklCSTddpAX2gUnaOV9JZm033oAD8gDAyCUnAM0sFCaAlPIS5MhtpwHfLjBuyBXzAQjsJieE4T6kptqm81ss7W6ss/gwMyz60frEbR8QAAAABJRU5ErkJggg=="
-          />
-        </ion-card>
-      </ion-content>
-    </ion-app>
-    <style>
-      .content {
-        background: #e5e5e5;
-      }
-    </style>
-  </body>
-</html>
diff --git a/core/src/components/card/test/standalone/e2e.ts b/core/src/components/card/test/standalone/e2e.ts
deleted file mode 100644
index ff4e1e7634..0000000000
--- a/core/src/components/card/test/standalone/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('card: standalone', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/card/test/standalone?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/card/test/standalone/index.html b/core/src/components/card/test/standalone/index.html
deleted file mode 100644
index fe9e317b2d..0000000000
--- a/core/src/components/card/test/standalone/index.html
+++ /dev/null
@@ -1,103 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Card - Standalone</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/core.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-  </head>
-
-  <body>
-    <ion-card>
-      <ion-card-content>
-        This is just your basic card with some text to boot. Like it? Keep scrolling...
-      </ion-card-content>
-    </ion-card>
-
-    <ion-card>
-      <ion-card-header>
-        <ion-card-subtitle> Subtitle </ion-card-subtitle>
-        <ion-card-title> Title </ion-card-title>
-      </ion-card-header>
-
-      <ion-card-content> The British use the term "header". </ion-card-content>
-    </ion-card>
-
-    <!-- Colors-->
-    <ion-card class="custom">
-      <ion-card-header>
-        <ion-card-subtitle> Subtitle </ion-card-subtitle>
-        <ion-card-title> Title </ion-card-title>
-      </ion-card-header>
-
-      <ion-card-content> The British use the term "header". </ion-card-content>
-    </ion-card>
-
-    <ion-card class="custom2">
-      <ion-card-header>
-        <ion-card-subtitle> Subtitle </ion-card-subtitle>
-        <ion-card-title> Title </ion-card-title>
-      </ion-card-header>
-
-      <ion-card-content> The British use the term "header". </ion-card-content>
-    </ion-card>
-
-    <ion-card color="secondary">
-      <ion-card-header>
-        <ion-card-subtitle> Subtitle </ion-card-subtitle>
-        <ion-card-title> Title </ion-card-title>
-      </ion-card-header>
-
-      <ion-card-content> The British use the term "header". </ion-card-content>
-    </ion-card>
-
-    <ion-card color="danger">
-      <ion-card-header>
-        <ion-card-subtitle> Subtitle </ion-card-subtitle>
-        <ion-card-title> Title </ion-card-title>
-      </ion-card-header>
-
-      <ion-card-content> The British use the term "header". </ion-card-content>
-    </ion-card>
-
-    <ion-card color="light">
-      <ion-card-header>
-        <ion-card-subtitle> Subtitle </ion-card-subtitle>
-        <ion-card-title> Title </ion-card-title>
-      </ion-card-header>
-
-      <ion-card-content> The British use the term "header". </ion-card-content>
-    </ion-card>
-
-    <style>
-      .custom {
-        --background: #f6f6f6;
-        --color: orange;
-      }
-
-      .custom ion-card-subtitle,
-      .custom ion-card-title {
-        --color: orange;
-      }
-
-      .custom2 {
-        --background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAARQAQMAAAA2ut43AAAABlBMVEXMzMz////TjRV2AAAEPUlEQVR42u3RMREAMBDDsPAn/eXhavOq87Ztu7u7+6eBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBf2hvgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgatgn4GBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGr7S0wMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDBwFewzMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwcLW9BQYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBq6CfQYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgautrfAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAVbDPwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwNX2FhgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGLgK9hkYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBi42t4CAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDV8E+AwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDA1fbW2BgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYOAq2GdgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGDgansLDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMXAX7DAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDFxtb4GBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGrYJ+BgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBq+0tMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwcBXsMzAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMHC1vQUGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgaugn0GBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGjvYD5WuYrpZqdmcAAAAASUVORK5CYII=)
-          center 50%;
-        --color: white;
-        text-shadow: 2px 2px 6px black;
-      }
-
-      .custom2 ion-card-subtitle,
-      .custom2 ion-card-title {
-        --color: white;
-      }
-    </style>
-  </body>
-</html>
diff --git a/core/src/components/card/test/translucent/index.html b/core/src/components/card/test/translucent/index.html
deleted file mode 100644
index f9d96c028d..0000000000
--- a/core/src/components/card/test/translucent/index.html
+++ /dev/null
@@ -1,219 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Card - Basic</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-  </head>
-
-  <body>
-    <ion-app>
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Card - Basic</ion-title>
-        </ion-toolbar>
-      </ion-header>
-
-      <ion-content fullscreen="true">
-        <ion-card>
-          <ion-card-content>
-            This is just your basic card with some text to boot. Like it? Keep scrolling...
-          </ion-card-content>
-        </ion-card>
-
-        <ion-card>
-          <ion-card-header>
-            <ion-card-subtitle> Subtitle </ion-card-subtitle>
-            <ion-card-title> Title </ion-card-title>
-          </ion-card-header>
-
-          <ion-card-content>
-            The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
-          </ion-card-content>
-        </ion-card>
-
-        <ion-card>
-          <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0">
-            <img style="transform: rotate(145deg) scale(1.5)" src="/src/components/card/test/img.jpg" />
-          </div>
-          <ion-card-header translucent>
-            <ion-card-subtitle> Subtitle </ion-card-subtitle>
-            <ion-card-title> Title </ion-card-title>
-          </ion-card-header>
-
-          <ion-card-content style="min-height: 200px"> </ion-card-content>
-        </ion-card>
-
-        <ion-card style="color: white">
-          <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0">
-            <img style="transform: scale(2)" src="/src/components/card/test/img.jpg" />
-          </div>
-          <ion-card-header translucent>
-            <ion-card-subtitle> Subtitle </ion-card-subtitle>
-            <ion-card-title> Title </ion-card-title>
-          </ion-card-header>
-
-          <ion-card-content style="padding-top: 100px">
-            The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
-          </ion-card-content>
-        </ion-card>
-
-        <ion-card>
-          <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0">
-            <img src="/src/components/card/test/img.jpg" />
-          </div>
-
-          <ion-card-header>
-            <ion-card-subtitle> Subtitle </ion-card-subtitle>
-            <ion-card-title> Title </ion-card-title>
-          </ion-card-header>
-
-          <ion-card-content>
-            The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
-          </ion-card-content>
-        </ion-card>
-
-        <ion-card>
-          <ion-card-content>
-            <ion-card-title> Card Title Goes Here </ion-card-title>
-            <p>
-              Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain. I am within a
-              paragraph element.
-            </p>
-          </ion-card-content>
-
-          <ion-grid>
-            <ion-row>
-              <ion-col class="ion-no-padding">
-                <ion-button fill="clear" size="small">
-                  <ion-icon slot="start" name="star"></ion-icon>
-                  Star
-                </ion-button>
-              </ion-col>
-              <ion-col class="ion-no-padding ion-text-right">
-                <ion-button fill="clear" size="small" class="ion-activated">
-                  <ion-icon slot="start" name="share"></ion-icon>
-                  Activated
-                </ion-button>
-              </ion-col>
-            </ion-row>
-          </ion-grid>
-        </ion-card>
-
-        <ion-card class="cards-list-demo">
-          <ion-card-header> Explore Nearby </ion-card-header>
-
-          <ion-list>
-            <ion-item>
-              <ion-icon name="cart" slot="start"></ion-icon>
-              Shopping
-            </ion-item>
-
-            <ion-item>
-              <ion-icon name="medical" slot="start"></ion-icon>
-              Hospital
-            </ion-item>
-
-            <ion-item>
-              <ion-icon name="cafe" slot="start"></ion-icon>
-              Cafe
-            </ion-item>
-
-            <ion-item>
-              <ion-icon name="paw" slot="start"></ion-icon>
-              Dog Park
-            </ion-item>
-
-            <ion-item>
-              <ion-icon name="beer" slot="start"></ion-icon>
-              Pub
-            </ion-item>
-
-            <ion-item>
-              <ion-icon name="planet" slot="start"></ion-icon>
-              Space
-            </ion-item>
-          </ion-list>
-        </ion-card>
-
-        <ion-card>
-          <ion-item>
-            <ion-avatar slot="start">
-              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
-            </ion-avatar>
-            <h2>Card With An Inset Picture</h2>
-            <p>Isn't it beautiful</p>
-          </ion-item>
-
-          <div>
-            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
-          </div>
-
-          <ion-card-content>
-            <p>Hello. I am a paragraph.</p>
-          </ion-card-content>
-
-          <ion-grid>
-            <ion-row>
-              <ion-col class="ion-no-padding">
-                <ion-button fill="clear" size="small">
-                  <ion-icon slot="start" name="star"></ion-icon>
-                  Favorite
-                </ion-button>
-              </ion-col>
-              <ion-col class="ion-no-padding ion-text-center">
-                <ion-button fill="clear" size="small">
-                  <ion-icon slot="start" name="musical-notes"></ion-icon>
-                  Listen
-                </ion-button>
-              </ion-col>
-              <ion-col class="ion-no-padding ion-padding-end ion-text-right ion-align-self-center">
-                <ion-note> 11h ago </ion-note>
-              </ion-col>
-            </ion-row>
-          </ion-grid>
-        </ion-card>
-
-        <ion-card class="ion-no-margin">
-          <div>
-            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
-          </div>
-
-          <ion-card-content> ion-card[no-margin] This card was breaking the border radius. </ion-card-content>
-
-          <ion-grid>
-            <ion-row>
-              <ion-col class="ion-no-padding">
-                <ion-button fill="clear" size="small" color="dark">
-                  <ion-icon slot="start" name="star"></ion-icon>
-                  Favorite
-                </ion-button>
-              </ion-col>
-
-              <ion-col class="ion-no-padding ion-text-center">
-                <ion-button fill="clear" size="small" color="dark">
-                  <ion-icon slot="start" name="musical-notes"></ion-icon>
-                  Listen
-                </ion-button>
-              </ion-col>
-              <ion-col class="ion-no-padding ion-text-right">
-                <ion-button fill="clear" size="small" color="dark">
-                  <ion-icon slot="start" name="share"></ion-icon>
-                  Share
-                </ion-button>
-              </ion-col>
-            </ion-row>
-          </ion-grid>
-        </ion-card>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>