diff --git a/core/api.txt b/core/api.txt
index f956418247..c4f01837be 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -465,10 +465,13 @@ ion-card,prop,shape,"rectangular" | "round" | "soft" | undefined,'round',false,t
 ion-card,prop,target,string | undefined,undefined,false,false
 ion-card,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-card,prop,type,"button" | "reset" | "submit",'button',false,false
+ion-card,css-prop,--background,ionic
 ion-card,css-prop,--background,ios
 ion-card,css-prop,--background,md
+ion-card,css-prop,--border-radius,ionic
 ion-card,css-prop,--border-radius,ios
 ion-card,css-prop,--border-radius,md
+ion-card,css-prop,--color,ionic
 ion-card,css-prop,--color,ios
 ion-card,css-prop,--color,md
 ion-card,part,native
diff --git a/core/src/components/card-content/card-content.common.scss b/core/src/components/card-content/card-content.common.scss
new file mode 100644
index 0000000000..499a6b5a87
--- /dev/null
+++ b/core/src/components/card-content/card-content.common.scss
@@ -0,0 +1,6 @@
+// Card Content
+// --------------------------------------------------
+
+ion-card-content {
+  position: relative;
+}
diff --git a/core/src/components/card-content/card-content.ionic.scss b/core/src/components/card-content/card-content.ionic.scss
new file mode 100644
index 0000000000..1fca72c613
--- /dev/null
+++ b/core/src/components/card-content/card-content.ionic.scss
@@ -0,0 +1,27 @@
+@use "./card-content.common.scss";
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+
+// Ionic Card Content
+// --------------------------------------------------
+
+.card-content-ionic {
+  @include globals.padding(globals.$ionic-space-400);
+
+  display: flex;
+
+  flex-direction: column;
+
+  font-size: globals.$ionic-font-size-350;
+
+  line-height: globals.$ionic-line-height-600;
+
+  gap: globals.$ionic-space-200;
+
+  img {
+    @include globals.margin(globals.$ionic-space-200, 0, globals.$ionic-space-200, 0);
+  }
+}
+
+ion-card-header + .card-content-ionic {
+  padding-top: 0;
+}
diff --git a/core/src/components/card-content/card-content.ios.scss b/core/src/components/card-content/card-content.ios.scss
index 6efcbc03d2..0b772b9d45 100644
--- a/core/src/components/card-content/card-content.ios.scss
+++ b/core/src/components/card-content/card-content.ios.scss
@@ -1,4 +1,4 @@
-@import "./card-content";
+@import "./card-content.native";
 @import "./card-content.ios.vars";
 
 // iOS Card Header
diff --git a/core/src/components/card-content/card-content.md.scss b/core/src/components/card-content/card-content.md.scss
index 67376230f5..ed780fb8e4 100644
--- a/core/src/components/card-content/card-content.md.scss
+++ b/core/src/components/card-content/card-content.md.scss
@@ -1,4 +1,4 @@
-@import "./card-content";
+@import "./card-content.native";
 @import "./card-content.md.vars";
 
 // Material Design Card Content
diff --git a/core/src/components/card-content/card-content.scss b/core/src/components/card-content/card-content.native.scss
similarity index 81%
rename from core/src/components/card-content/card-content.scss
rename to core/src/components/card-content/card-content.native.scss
index 2c8ce38856..4bb2efe89d 100644
--- a/core/src/components/card-content/card-content.scss
+++ b/core/src/components/card-content/card-content.native.scss
@@ -1,3 +1,4 @@
+@use "./card-content.common.scss";
 @import "../../themes/native/native.globals";
 
 // Card Content
@@ -5,5 +6,4 @@
 
 ion-card-content {
   display: block;
-  position: relative;
 }
diff --git a/core/src/components/card-content/card-content.tsx b/core/src/components/card-content/card-content.tsx
index d0e1f3872c..e39bead08a 100644
--- a/core/src/components/card-content/card-content.tsx
+++ b/core/src/components/card-content/card-content.tsx
@@ -12,7 +12,7 @@ import { getIonTheme } from '../../global/ionic-global';
   styleUrls: {
     ios: 'card-content.ios.scss',
     md: 'card-content.md.scss',
-    ionic: 'card-content.md.scss',
+    ionic: 'card-content.ionic.scss',
   },
 })
 export class CardContent implements ComponentInterface {
diff --git a/core/src/components/card-header/card-header.scss b/core/src/components/card-header/card-header.common.scss
similarity index 68%
rename from core/src/components/card-header/card-header.scss
rename to core/src/components/card-header/card-header.common.scss
index 0c29c80e1d..ded31879b1 100644
--- a/core/src/components/card-header/card-header.scss
+++ b/core/src/components/card-header/card-header.common.scss
@@ -1,4 +1,4 @@
-@import "../../themes/native/native.globals";
+@use "../../themes/functions.color" as color;
 
 // Card Header
 // --------------------------------------------------
@@ -17,6 +17,6 @@
 }
 
 :host(.ion-color) {
-  background: current-color(base);
-  color: current-color(contrast);
+  background: color.current-color(base);
+  color: color.current-color(contrast);
 }
diff --git a/core/src/components/card-header/card-header.ionic.scss b/core/src/components/card-header/card-header.ionic.scss
new file mode 100644
index 0000000000..447451a7d5
--- /dev/null
+++ b/core/src/components/card-header/card-header.ionic.scss
@@ -0,0 +1,10 @@
+@use "./card-header.common";
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+
+// Ionic Card Header
+// --------------------------------------------------
+
+:host {
+  @include globals.padding(globals.$ionic-space-400);
+  gap: globals.$ionic-space-050;
+}
diff --git a/core/src/components/card-header/card-header.ios.scss b/core/src/components/card-header/card-header.ios.scss
index fb188b2bf1..31c47f7a55 100644
--- a/core/src/components/card-header/card-header.ios.scss
+++ b/core/src/components/card-header/card-header.ios.scss
@@ -1,4 +1,5 @@
-@import "./card-header";
+@import "./card-header.common";
+@import "../../themes/native/native.globals";
 @import "./card-header.ios.vars";
 
 // iOS Card Header
diff --git a/core/src/components/card-header/card-header.md.scss b/core/src/components/card-header/card-header.md.scss
index f17d9a2581..897be74a80 100644
--- a/core/src/components/card-header/card-header.md.scss
+++ b/core/src/components/card-header/card-header.md.scss
@@ -1,4 +1,5 @@
-@import "./card-header";
+@import "./card-header.common";
+@import "../../themes/native/native.globals";
 @import "./card-header.md.vars";
 
 // Material Design Card Header
diff --git a/core/src/components/card-header/card-header.tsx b/core/src/components/card-header/card-header.tsx
index d79cf98a1f..65f7d7ab7c 100644
--- a/core/src/components/card-header/card-header.tsx
+++ b/core/src/components/card-header/card-header.tsx
@@ -14,7 +14,7 @@ import type { Color } from '../../interface';
   styleUrls: {
     ios: 'card-header.ios.scss',
     md: 'card-header.md.scss',
-    ionic: 'card-header.md.scss',
+    ionic: 'card-header.ionic.scss',
   },
   shadow: true,
 })
diff --git a/core/src/components/card-subtitle/card-subtitle.scss b/core/src/components/card-subtitle/card-subtitle.common.scss
similarity index 100%
rename from core/src/components/card-subtitle/card-subtitle.scss
rename to core/src/components/card-subtitle/card-subtitle.common.scss
diff --git a/core/src/components/card-subtitle/card-subtitle.ionic.scss b/core/src/components/card-subtitle/card-subtitle.ionic.scss
new file mode 100644
index 0000000000..e44ae61373
--- /dev/null
+++ b/core/src/components/card-subtitle/card-subtitle.ionic.scss
@@ -0,0 +1,11 @@
+@use "./card-subtitle.common";
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+
+// Ionic Card Subtitle
+// --------------------------------------------------
+
+:host {
+  --color: #{globals.$ionic-color-neutral-800};
+
+  @include globals.typography(globals.$ionic-body-lg-regular);
+}
diff --git a/core/src/components/card-subtitle/card-subtitle.ios.scss b/core/src/components/card-subtitle/card-subtitle.ios.scss
index d8e91973fb..511ca914b2 100644
--- a/core/src/components/card-subtitle/card-subtitle.ios.scss
+++ b/core/src/components/card-subtitle/card-subtitle.ios.scss
@@ -1,4 +1,4 @@
-@import "./card-subtitle";
+@import "./card-subtitle.common";
 @import "./card-subtitle.ios.vars";
 
 // iOS Card Subtitle
diff --git a/core/src/components/card-subtitle/card-subtitle.md.scss b/core/src/components/card-subtitle/card-subtitle.md.scss
index f6f4a5222e..6e43b6e7cc 100644
--- a/core/src/components/card-subtitle/card-subtitle.md.scss
+++ b/core/src/components/card-subtitle/card-subtitle.md.scss
@@ -1,4 +1,4 @@
-@import "./card-subtitle";
+@import "./card-subtitle.common";
 @import "./card-subtitle.md.vars";
 
 // Material Design Card Subtitle
diff --git a/core/src/components/card-subtitle/card-subtitle.tsx b/core/src/components/card-subtitle/card-subtitle.tsx
index 6dc88c537d..f4ddd47f09 100644
--- a/core/src/components/card-subtitle/card-subtitle.tsx
+++ b/core/src/components/card-subtitle/card-subtitle.tsx
@@ -14,7 +14,7 @@ import type { Color } from '../../interface';
   styleUrls: {
     ios: 'card-subtitle.ios.scss',
     md: 'card-subtitle.md.scss',
-    ionic: 'card-subtitle.md.scss',
+    ionic: 'card-subtitle.ionic.scss',
   },
   shadow: true,
 })
diff --git a/core/src/components/card-title/card-title.scss b/core/src/components/card-title/card-title.common.scss
similarity index 100%
rename from core/src/components/card-title/card-title.scss
rename to core/src/components/card-title/card-title.common.scss
diff --git a/core/src/components/card-title/card-title.ionic.scss b/core/src/components/card-title/card-title.ionic.scss
new file mode 100644
index 0000000000..de850ae190
--- /dev/null
+++ b/core/src/components/card-title/card-title.ionic.scss
@@ -0,0 +1,11 @@
+@use "./card-title.common";
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+
+// Ionic Card Title
+// --------------------------------------------------
+
+:host {
+  --color: #{globals.$ionic-color-neutral-1200};
+
+  @include globals.typography(globals.$ionic-heading-h5-medium);
+}
diff --git a/core/src/components/card-title/card-title.ios.scss b/core/src/components/card-title/card-title.ios.scss
index 0679ba2836..2fccbb2541 100644
--- a/core/src/components/card-title/card-title.ios.scss
+++ b/core/src/components/card-title/card-title.ios.scss
@@ -1,4 +1,5 @@
-@import "./card-title";
+@import "./card-title.common";
+@import "../../themes/native/native.globals";
 @import "./card-title.ios.vars";
 
 // iOS Card Title
diff --git a/core/src/components/card-title/card-title.md.scss b/core/src/components/card-title/card-title.md.scss
index e3fb1eed83..62da833d34 100644
--- a/core/src/components/card-title/card-title.md.scss
+++ b/core/src/components/card-title/card-title.md.scss
@@ -1,4 +1,5 @@
-@import "./card-title";
+@import "./card-title.common";
+@import "../../themes/native/native.globals";
 @import "./card-title.md.vars";
 
 // Material Design Card Title
diff --git a/core/src/components/card/card.scss b/core/src/components/card/card.common.scss
similarity index 55%
rename from core/src/components/card/card.scss
rename to core/src/components/card/card.common.scss
index 04b7fdc825..fdefae30d0 100755
--- a/core/src/components/card/card.scss
+++ b/core/src/components/card/card.common.scss
@@ -1,4 +1,4 @@
-@import "../../themes/native/native.globals";
+@import "../../themes/mixins";
 
 // Card
 // --------------------------------------------------
@@ -21,8 +21,6 @@
   background: var(--background);
   color: var(--color);
 
-  font-family: $font-family-base;
-
   contain: content;
 
   overflow: hidden;
@@ -36,43 +34,6 @@
   color: current-color(contrast);
 }
 
-// Disabled Card
-// --------------------------------------------------
-
-:host(.card-disabled) {
-  cursor: default;
-  opacity: 0.3;
-  pointer-events: none;
-}
-
-// Native
-// --------------------------------------------------
-
-.card-native {
-  @include text-inherit();
-  @include padding(0);
-  @include margin(0);
-
-  display: block;
-
-  width: 100%;
-  min-height: var(--min-height);
-
-  transition: var(--transition);
-
-  border-width: var(--border-width);
-  border-style: var(--border-style);
-  border-color: var(--border-color);
-
-  outline: none;
-
-  background: inherit;
-}
-
-.card-native::-moz-focus-inner {
-  border: 0;
-}
-
 button,
 a {
   cursor: pointer;
diff --git a/core/src/components/card/card.ionic.scss b/core/src/components/card/card.ionic.scss
index 63d063ff8f..9ea9c5f26d 100755
--- a/core/src/components/card/card.ionic.scss
+++ b/core/src/components/card/card.ionic.scss
@@ -1,28 +1,24 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
+@import "./card.common";
 
 // Ionic Card
 // --------------------------------------------------
 
 :host {
   --background: #{globals.$ionic-color-base-white};
-  --border-radius: #{globals.$ionic-border-radius-100};
-
-  @include globals.padding(globals.$ionic-space-400);
-  @include globals.border-radius(var(--border-radius));
+  --border-radius: #{globals.$ionic-border-radius-400};
+  --color: #{globals.$ionic-color-neutral-1200};
+}
 
+::slotted(img) {
   display: block;
-
-  border: #{globals.$ionic-border-size-025} solid #{globals.$ionic-color-neutral-500};
-
-  background: var(--background);
-  color: var(--color);
 }
 
 // Card Shapes
 // ---------------------------------------------
 
-:host(.card-round) {
-  --border-radius: #{globals.$ionic-border-radius-400};
+:host(.card-soft) {
+  --border-radius: #{globals.$ionic-border-radius-200};
 }
 
 :host(.card-rectangular) {
diff --git a/core/src/components/card/card.ios.scss b/core/src/components/card/card.ios.scss
index 666a0c32be..e246e8ffbd 100755
--- a/core/src/components/card/card.ios.scss
+++ b/core/src/components/card/card.ios.scss
@@ -1,4 +1,4 @@
-@import "./card";
+@import "./card.native";
 @import "./card.ios.vars";
 
 // iOS Card
diff --git a/core/src/components/card/card.md.scss b/core/src/components/card/card.md.scss
index 6fb8847128..c37d5bf58a 100755
--- a/core/src/components/card/card.md.scss
+++ b/core/src/components/card/card.md.scss
@@ -1,4 +1,4 @@
-@import "./card";
+@import "./card.native";
 @import "./card.md.vars";
 
 // Material Design Card
diff --git a/core/src/components/card/card.native.scss b/core/src/components/card/card.native.scss
new file mode 100644
index 0000000000..836811d224
--- /dev/null
+++ b/core/src/components/card/card.native.scss
@@ -0,0 +1,46 @@
+@import "../../themes/native/native.globals";
+@import "./card.common";
+
+// Card
+// --------------------------------------------------
+
+:host {
+  font-family: $font-family-base;
+}
+
+// Disabled Card
+// --------------------------------------------------
+
+:host(.card-disabled) {
+  cursor: default;
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+// Native
+// --------------------------------------------------
+
+.card-native {
+  @include text-inherit();
+  @include padding(0);
+  @include margin(0);
+
+  display: block;
+
+  width: 100%;
+  min-height: var(--min-height);
+
+  transition: var(--transition);
+
+  border-width: var(--border-width);
+  border-style: var(--border-style);
+  border-color: var(--border-color);
+
+  outline: none;
+
+  background: inherit;
+}
+
+.card-native::-moz-focus-inner {
+  border: 0;
+}
diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Chrome-linux.png
index b951addb84..1d7db1db0b 100644
Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 5a30fe5d1f..01ad1e7090 100644
Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Safari-linux.png
index cf10dffbe0..3ada397f69 100644
Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png
index d6e8a164d7..9aa74bb76a 100644
Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 308c3ff4ec..b5bdf7e434 100644
Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png
index 9f17730e79..4c3bae5874 100644
Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 8e0fcb7d4e..e001ea2754 100644
Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 177cdae979..d71a3e63b4 100644
Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Safari-linux.png
index cf10dffbe0..3ada397f69 100644
Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 161af2b59b..6ef19d6746 100644
Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 49f04ac1d2..ba71f56829 100644
Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Safari-linux.png
index b517e82218..faeb6dfc2b 100644
Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/card/test/theme-ionic/index.html b/core/src/components/card/test/theme-ionic/index.html
index 1535fb2c6f..b9ba7f6b0b 100644
--- a/core/src/components/card/test/theme-ionic/index.html
+++ b/core/src/components/card/test/theme-ionic/index.html
@@ -1,6 +1,6 @@
 <!-- TODO: FW-6077 This file can be removed once the additional test cases are added -->
 <!DOCTYPE html>
-<html lang="en" dir="ltr">
+<html lang="en" dir="ltr" theme="ionic">
   <head>
     <meta charset="UTF-8" />
     <title>Card - Theme Ionic</title>
@@ -8,13 +8,16 @@
       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="../../../../../css/ionic/bundle.ionic.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>
 
     <style>
+      ion-content {
+        --background: #dde2ef;
+      }
       .ion-margin-top {
         margin-top: 32px;
       }
@@ -29,13 +32,13 @@
         </ion-toolbar>
       </ion-header>
 
-      <ion-content class="ion-padding ion-text-center" id="content" no-bounce>
+      <ion-content class="ionic-padding-space-400" id="content" no-bounce>
         <h4>Preview options</h4>
 
         <p>
           <ion-select id="select-shape" justify="space-between" interface="alert" label="Shape" placeholder="">
-            <ion-select-option value="">default</ion-select-option>
-            <ion-select-option value="round">Round</ion-select-option>
+            <ion-select-option value="round">default (round)</ion-select-option>
+            <ion-select-option value="soft">soft</ion-select-option>
             <ion-select-option value="rectangular">Rectangular</ion-select-option>
           </ion-select>
         </p>
@@ -52,6 +55,34 @@
               in the woods. Wash your spirit clean.
             </ion-card-content>
           </ion-card>
+
+          <ion-card class="ion-margin-top">
+            <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />
+            <ion-card-header>
+              <ion-card-title>Card Title</ion-card-title>
+              <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+            </ion-card-header>
+
+            <ion-card-content>
+              Here's a small text description for the card content. Nothing more, nothing less.
+            </ion-card-content>
+          </ion-card>
+
+          <ion-card class="ion-margin-top">
+            <ion-card-header>
+              <ion-card-title>Header</ion-card-title>
+              <ion-card-subtitle>Subtitle</ion-card-subtitle>
+            </ion-card-header>
+
+            <ion-card-content>
+              Lorem ipsum dolor sit amet consectetur. Lorem sem neque mauris ullamcorper enim. Massa tempus sem ligula
+              turpis consequat nam et semper imperdiet. Leo praesent ut feugiat cursus est. Lectus morbi aliquam lacus
+              tellus tempor morbi in pharetra.
+              <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />
+              <ion-button fill="outline">Secondary</ion-button>
+              <ion-button>Primary</ion-button>
+            </ion-card-content>
+          </ion-card>
         </div>
       </ion-content>
     </ion-app>