diff --git a/live-editing/configs/CardConfigGenerator.ts b/live-editing/configs/CardConfigGenerator.ts
index 2a565b2536..26ec0aa609 100644
--- a/live-editing/configs/CardConfigGenerator.ts
+++ b/live-editing/configs/CardConfigGenerator.ts
@@ -1,11 +1,9 @@
 import { IgxAvatarModule } from 'igniteui-angular/avatar';
-import { IgxButtonModule, IgxDividerModule, IgxLayoutModule, IgxRippleModule } from 'igniteui-angular/directives';
+import { IgxButtonModule, IgxDividerModule, IgxRippleModule } from 'igniteui-angular/directives';
 import { IgxCardModule } from 'igniteui-angular/card';
 import { IgxChipsModule } from 'igniteui-angular/chips';
-import { IgxExpansionPanelModule } from 'igniteui-angular/expansion-panel';
 import { IgxIconModule } from 'igniteui-angular/icon';
-import { IgxListModule } from 'igniteui-angular/list';
-import { IgxSliderModule } from 'igniteui-angular/slider';
+import { IgxSwitchModule } from 'igniteui-angular/switch';
 import { AppModuleConfig, Config, IConfigGenerator } from 'igniteui-live-editing'
 import { BaseAppConfig } from './BaseConfig';
 export class CardConfigGenerator implements IConfigGenerator {
@@ -14,63 +12,53 @@ export class CardConfigGenerator implements IConfigGenerator {
     public generateConfigs(): Config[] {
         const configs = new Array<Config>();
 
-        // card sample
+        // card overview
         configs.push(new Config({
-            component: 'CardComponent',
+            component: 'CardOverviewComponent',
             appConfig: BaseAppConfig,
-            additionalFiles: [
-                "/src/app/layouts/card/card.blueprint.ts"
-            ],
             shortenComponentPathBy: "/layouts/card/"
         }));
 
-        // card sample 1
+        // card actions
         configs.push(new Config({
-            component: 'CardSample1Component',
+            component: 'CardActionsComponent',
             appConfig: BaseAppConfig,
             additionalFiles: [
-                "/src/app/layouts/card/card.blueprint.ts"
+                "/src/app/layouts/card/card-actions/icons.ts"
             ],
             shortenComponentPathBy: "/layouts/card/"
         }));
 
-        // card sample 2
+        // card media
         configs.push(new Config({
-            component: 'CardSample2Component',
+            component: 'CardMediaComponent',
             appConfig: BaseAppConfig,
             additionalFiles: [
-                "/src/app/layouts/card/card.blueprint.ts"
+                "/src/app/layouts/card/card-media/icons.ts"
             ],
             shortenComponentPathBy: "/layouts/card/"
         }));
 
-        // card sample 3
+        // card media position
         configs.push(new Config({
-            component: 'CardSample3Component',
+            component: 'CardPositionComponent',
             appConfig: BaseAppConfig,
-            additionalFiles: [
-                "/src/app/layouts/card/card.blueprint.ts"
-            ],
             shortenComponentPathBy: "/layouts/card/"
         }));
 
-        // card sample 4
+        // card styling
         configs.push(new Config({
-            component: 'CardSample4Component',
+            component: 'CardStylingComponent',
             appConfig: BaseAppConfig,
-            additionalFiles: [
-                "/src/app/layouts/card/card.blueprint.ts"
-            ],
             shortenComponentPathBy: "/layouts/card/"
         }));
 
-        // card styling sample
+        // card tailwind styling
         configs.push(new Config({
-            component: 'CardStylingSampleComponent',
+            component: 'CardTailwindStylingComponent',
             appConfig: BaseAppConfig,
             additionalFiles: [
-                "/src/app/layouts/card/card.blueprint.ts",
-                "/src/app/layouts/card/card-styling-sample/layout.scss"
+                "/src/app/layouts/card/card-tailwind-styling/icons.ts"
             ],
             shortenComponentPathBy: "/layouts/card/"
         }));
diff --git a/live-editing/configs/OverlayConfigGenerator.ts b/live-editing/configs/OverlayConfigGenerator.ts
index e45740b995..5e6ecfda12 100644
--- a/live-editing/configs/OverlayConfigGenerator.ts
+++ b/live-editing/configs/OverlayConfigGenerator.ts
@@ -25,11 +25,11 @@ export class OverlayConfigGenerator implements IConfigGenerator {
 
         configs.push(new Config({
             component: 'OverlaySampleMain2Component',
-            additionalFiles: ["/src/app/layouts/card/card-sample-1/card-sample-1.component.ts",
-            "/src/app/layouts/card/card-sample-1/card-sample-1.component.scss",
-            "/src/app/layouts/card/card-sample-1/card-sample-1.component.html",
-            "/src/app/layouts/card/card.blueprint.ts"],
-            appConfig: BaseAppConfig
+            additionalFiles: ["/src/app/interactions/overlay/overlay-dynamic-card/overlay-dynamic-card.component.ts",
+            "/src/app/interactions/overlay/overlay-dynamic-card/overlay-dynamic-card.component.scss",
+            "/src/app/interactions/overlay/overlay-dynamic-card/overlay-dynamic-card.component.html"],
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/interactions/overlay/"
         }));
 
         configs.push(new Config({
diff --git a/src/app/interactions/overlay/overlay-main-2/overlay-main-sample-2.component.ts b/src/app/interactions/overlay/overlay-main-2/overlay-main-sample-2.component.ts
index 92b7b5949c..d5f8caa812 100644
--- a/src/app/interactions/overlay/overlay-main-2/overlay-main-sample-2.component.ts
+++ b/src/app/interactions/overlay/overlay-main-2/overlay-main-sample-2.component.ts
@@ -1,7 +1,7 @@
 import { Component, ElementRef, OnDestroy, ViewChild, ViewContainerRef, inject } from '@angular/core';
 import { ConnectedPositioningStrategy, IgxOverlayService } from 'igniteui-angular/core';
 import { IgxButtonDirective } from 'igniteui-angular/directives';
-import { CardSample1Component } from '../../../layouts/card/card-sample-1/card-sample-1.component';
+import { MyDynamicCardComponent } from '../overlay-dynamic-card/overlay-dynamic-card.component';
 // tslint:disable:object-literal-sort-keys
 @Component({
     selector: 'app-overlay-sample',
@@ -23,7 +23,7 @@ export class OverlaySampleMain2Component implements OnDestroy {
         if (this._cardHidden) {
             if (!this._overlayId) {
                 const positionStrategy = new ConnectedPositioningStrategy();
-                this._overlayId = this.overlayService.attach(CardSample1Component, this.viewContainerRef, {
+                this._overlayId = this.overlayService.attach(MyDynamicCardComponent, this.viewContainerRef, {
                     target: this.buttonElement.nativeElement,
                     positionStrategy,
                     modal: false,
diff --git a/src/app/interactions/overlay/overlay-main-3/overlay-main-sample-3.component.html b/src/app/interactions/overlay/overlay-main-3/overlay-main-sample-3.component.html
index 139c885b31..2b8cc554df 100644
--- a/src/app/interactions/overlay/overlay-main-3/overlay-main-sample-3.component.html
+++ b/src/app/interactions/overlay/overlay-main-3/overlay-main-sample-3.component.html
@@ -2,5 +2,5 @@
     <button #buttonElement igxButton (click)="showOverlay()">
         Show Card
     </button>
-    <app-igx-card-simple #card class="card"></app-igx-card-simple>
+    <app-overlay-dynamic-card-component #card class="card"></app-overlay-dynamic-card-component>
 </div>
\ No newline at end of file
diff --git a/src/app/interactions/overlay/overlay-main-3/overlay-main-sample-3.component.ts b/src/app/interactions/overlay/overlay-main-3/overlay-main-sample-3.component.ts
index dff46042de..0f9a0764f6 100644
--- a/src/app/interactions/overlay/overlay-main-3/overlay-main-sample-3.component.ts
+++ b/src/app/interactions/overlay/overlay-main-3/overlay-main-sample-3.component.ts
@@ -1,13 +1,13 @@
 import { Component, ElementRef, OnDestroy, ViewChild, inject } from '@angular/core';
 import { ConnectedPositioningStrategy, IgxOverlayService } from 'igniteui-angular/core';
 import { IgxButtonDirective } from 'igniteui-angular/directives';
-import { CardSample1Component } from '../../../layouts/card/card-sample-1/card-sample-1.component';
+import { MyDynamicCardComponent } from '../overlay-dynamic-card/overlay-dynamic-card.component';
 // tslint:disable:object-literal-sort-keys
 @Component({
     selector: 'app-overlay-sample',
     templateUrl: `overlay-main-sample-3.component.html`,
     styleUrls: ['overlay-main-sample-3.component.scss'],
-    imports: [IgxButtonDirective, CardSample1Component]
+    imports: [IgxButtonDirective, MyDynamicCardComponent]
 })
 export class OverlaySampleMain3Component implements OnDestroy {
     private overlayService = inject<IgxOverlayService>(IgxOverlayService);
diff --git a/src/app/layouts/card/card-actions/card-actions.component.html b/src/app/layouts/card/card-actions/card-actions.component.html
new file mode 100644
index 0000000000..ef78bed499
--- /dev/null
+++ b/src/app/layouts/card/card-actions/card-actions.component.html
@@ -0,0 +1,74 @@
+<div class="card-item">
+    <span class="card-item__label">Horizontal actions (default)</span>
+
+    <igx-card class="post-card">
+        <igx-card-header>
+            <igx-avatar
+                igxCardThumbnail
+                shape="circle"
+                src="https://dl.infragistics.com/x/img/avatars/avatar-profile-06.png"
+                alt="A profile photo of Lena Fischer.">
+            </igx-avatar>
+            <span igxCardHeaderTitle>Lena Fischer</span>
+            <span igxCardHeaderSubtitle>&#64;lena &middot; 2h ago</span>
+        </igx-card-header>
+        <igx-card-content>
+            <p>
+                Just shipped our new design system &#128640; Six months of tokens,
+                components, and documentation &mdash; and it&rsquo;s finally live.
+                So proud of the team.
+            </p>
+        </igx-card-content>
+        <igx-card-actions [vertical]="false">
+            <button igxIconButton="flat" igxEnd aria-label="Like">
+                <igx-icon>favorite_border</igx-icon>
+            </button>
+            <button igxIconButton="flat" igxEnd aria-label="Save">
+                <igx-icon>bookmark</igx-icon>
+            </button>
+            <button igxIconButton="flat" igxEnd aria-label="Share on LinkedIn">
+                <igx-icon name="linkedin" family="material"></igx-icon>
+            </button>
+        </igx-card-actions>
+    </igx-card>
+</div>
+
+<div class="card-item">
+    <span class="card-item__label">Vertical actions</span>
+
+    <igx-card class="post-card post-card--vertical" [horizontal]="true">
+        <div class="post-card__body">
+            <igx-card-header>
+                <igx-avatar
+                    igxCardThumbnail
+                    shape="circle"
+                    src="https://dl.infragistics.com/x/img/avatars/avatar-profile-06.png"
+                    alt="A profile photo of Lena Fischer.">
+                </igx-avatar>
+                <span igxCardHeaderTitle>Lena Fischer</span>
+                <span igxCardHeaderSubtitle>&#64;lena &middot; 2h ago</span>
+            </igx-card-header>
+            <igx-card-content>
+                <p>
+                    Just shipped our new design system &#128640; Six months of tokens,
+                    components, and documentation &mdash; and it&rsquo;s finally live.
+                    So proud of the team.
+                </p>
+            </igx-card-content>
+        </div>
+
+        <igx-card-actions [vertical]="true">
+            <div class="post-card__actions">
+                <button igxIconButton="flat" aria-label="Like">
+                    <igx-icon>favorite_border</igx-icon>
+                </button>
+                <button igxIconButton="flat" aria-label="Save">
+                    <igx-icon>bookmark</igx-icon>
+                </button>
+                <button igxIconButton="flat" aria-label="Share on LinkedIn">
+                    <igx-icon name="linkedin" family="material"></igx-icon>
+                </button>
+            </div>
+        </igx-card-actions>
+    </igx-card>
+</div>
diff --git a/src/app/layouts/card/card-actions/card-actions.component.scss b/src/app/layouts/card/card-actions/card-actions.component.scss
new file mode 100644
index 0000000000..ce9716faa5
--- /dev/null
+++ b/src/app/layouts/card/card-actions/card-actions.component.scss
@@ -0,0 +1,107 @@
+@use "igniteui-theming/sass/typography" as *;
+
+:host {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: flex-start;
+    justify-content: center;
+    box-sizing: border-box;
+    height: 100vh;
+    gap: rem(48px);
+    padding: rem(40px) rem(24px);
+}
+
+.card-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: rem(20px);
+}
+
+.card-item__label {
+    @include type-style("body-2") {
+        margin: 0;
+    }
+
+    color: var(--ig-gray-600);
+    font-family: "Aktiv Grotesk", sans-serif;
+    font-size: rem(13px);
+    font-weight: 400;
+    line-height: rem(20px);
+    letter-spacing: rem(0.3px);
+}
+
+.post-card {
+    --ig-card-border-radius: #{rem(8px)};
+
+    width: rem(310px);
+
+    igx-card-header {
+        padding: rem(16px) rem(16px) 0;
+    }
+
+    [igxCardHeaderTitle] {
+        color: var(--ig-gray-900);
+        font-size: rem(20px);
+        font-weight: 600;
+        line-height: rem(24px);
+        letter-spacing: rem(0.15px);
+    }
+
+    [igxCardHeaderSubtitle] {
+        color: var(--ig-gray-600);
+        font-size: rem(14px);
+        font-weight: 600;
+        line-height: rem(24px);
+        letter-spacing: rem(0.1px);
+    }
+
+    igx-card-content {
+        padding: rem(24px) rem(16px) 0;
+        overflow: visible;
+
+        p {
+            margin: 0;
+            color: var(--ig-gray-700);
+            font-size: rem(14px);
+            font-weight: 400;
+            line-height: rem(20px);
+            letter-spacing: rem(0.25px);
+        }
+    }
+
+    igx-card-actions {
+        padding: rem(12px) rem(16px) rem(8px);
+    }
+
+    [igxIconButton] {
+        --ig-size: var(--ig-size-small);
+        --ig-flat-icon-button-foreground: var(--ig-gray-900);
+    }
+}
+
+.post-card--vertical {
+    width: rem(390px);
+
+    igx-card-content {
+        padding-block-end: rem(16px);
+    }
+
+    igx-card-actions {
+        justify-content: flex-start;
+        padding: rem(16px) rem(16px) rem(16px) 0;
+    }
+}
+
+.post-card__body {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-width: 0;
+}
+
+.post-card__actions {
+    display: flex;
+    flex-direction: column;
+    gap: rem(8px);
+}
diff --git a/src/app/layouts/card/card-actions/card-actions.component.ts b/src/app/layouts/card/card-actions/card-actions.component.ts
new file mode 100644
index 0000000000..27ecfebfd5
--- /dev/null
+++ b/src/app/layouts/card/card-actions/card-actions.component.ts
@@ -0,0 +1,41 @@
+import { Component, inject } from '@angular/core';
+import { IgxAvatarComponent } from 'igniteui-angular/avatar';
+import {
+    IgxCardActionsComponent,
+    IgxCardComponent,
+    IgxCardContentDirective,
+    IgxCardHeaderComponent,
+    IgxCardHeaderSubtitleDirective,
+    IgxCardHeaderTitleDirective,
+    IgxCardThumbnailDirective
+} from 'igniteui-angular/card';
+import { IgxIconButtonDirective } from 'igniteui-angular/directives';
+import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon';
+import { IgxSuffixDirective } from 'igniteui-angular/input-group';
+import { linkedinIcon } from './icons';
+
+@Component({
+    selector: 'app-card-actions',
+    styleUrls: ['./card-actions.component.scss'],
+    templateUrl: './card-actions.component.html',
+    imports: [
+        IgxAvatarComponent,
+        IgxCardActionsComponent,
+        IgxCardComponent,
+        IgxCardContentDirective,
+        IgxCardHeaderComponent,
+        IgxCardHeaderSubtitleDirective,
+        IgxCardHeaderTitleDirective,
+        IgxCardThumbnailDirective,
+        IgxIconButtonDirective,
+        IgxIconComponent,
+        IgxSuffixDirective
+    ]
+})
+export class CardActionsComponent {
+    private iconService = inject(IgxIconService);
+
+    constructor() {
+        this.iconService.addSvgIconFromText('linkedin', linkedinIcon, 'material');
+    }
+}
diff --git a/src/app/layouts/card/card-actions/icons.ts b/src/app/layouts/card/card-actions/icons.ts
new file mode 100644
index 0000000000..63e5078e40
--- /dev/null
+++ b/src/app/layouts/card/card-actions/icons.ts
@@ -0,0 +1 @@
+export const linkedinIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z"></path></svg>';
diff --git a/src/app/layouts/card/card-media/card-media.component.html b/src/app/layouts/card/card-media/card-media.component.html
new file mode 100644
index 0000000000..69a1d0a6ca
--- /dev/null
+++ b/src/app/layouts/card/card-media/card-media.component.html
@@ -0,0 +1,58 @@
+<igx-card class="media-card">
+    <igx-card-media height="6.5rem">
+        <img
+            src="https://dl.infragistics.com/x/img/card/card-2.png"
+            alt="A meeting room with a long table and chairs" />
+    </igx-card-media>
+    <igx-card-header>
+        <span igxCardHeaderTitle>Book your meeting room</span>
+        <span igxCardHeaderSubtitle>Max 15 seats / 10 m2</span>
+    </igx-card-header>
+    <igx-card-actions>
+        <div igxStart class="media-card__icons">
+            <igx-icon>videocam</igx-icon>
+            <igx-icon>bluetooth</igx-icon>
+            <igx-icon>volume_off</igx-icon>
+        </div>
+        <button igxButton="flat" igxEnd class="media-card__action">Book now</button>
+    </igx-card-actions>
+</igx-card>
+
+<igx-card class="media-card">
+    <igx-card-media height="6.5rem">
+        <img
+            src="https://dl.infragistics.com/x/img/card/card-map-1.png"
+            alt="A street map with the event space marked" />
+    </igx-card-media>
+    <igx-card-header>
+        <span igxCardHeaderTitle>Main Event Space</span>
+        <span igxCardHeaderSubtitle>Floor 4, Suite 402</span>
+    </igx-card-header>
+    <igx-card-actions>
+        <div igxStart class="media-card__icons">
+            <igx-icon>directions_bus</igx-icon>
+            <igx-icon>directions_car</igx-icon>
+            <igx-icon>flight</igx-icon>
+        </div>
+        <button igxButton="flat" igxEnd class="media-card__action">Get directions</button>
+    </igx-card-actions>
+</igx-card>
+
+<igx-card class="media-card">
+    <igx-card-media height="6.5rem">
+        <img
+            src="https://dl.infragistics.com/x/img/card/card-map-2.png"
+            alt="A map of Europe showing the sales region" />
+    </igx-card-media>
+    <igx-card-header>
+        <span igxCardHeaderTitle>View your coverage area</span>
+        <span igxCardHeaderSubtitle>Sales region</span>
+    </igx-card-header>
+    <igx-card-actions>
+        <div igxStart class="media-card__icons">
+            <igx-icon>place</igx-icon>
+            <igx-icon name="pin-right" family="material"></igx-icon>
+        </div>
+        <button igxButton="flat" igxEnd class="media-card__action">See details</button>
+    </igx-card-actions>
+</igx-card>
diff --git a/src/app/layouts/card/card-media/card-media.component.scss b/src/app/layouts/card/card-media/card-media.component.scss
new file mode 100644
index 0000000000..bd636620c3
--- /dev/null
+++ b/src/app/layouts/card/card-media/card-media.component.scss
@@ -0,0 +1,74 @@
+@use "igniteui-theming/sass/typography" as *;
+
+:host {
+    display: flex;
+    flex-flow: row wrap;
+    align-content: center;
+    align-items: flex-start;
+    justify-content: center;
+    box-sizing: border-box;
+    height: 100vh;
+    gap: rem(20px);
+    padding: rem(32px) rem(8px);
+}
+
+.media-card {
+    --ig-card-border-radius: #{rem(4px)};
+
+    flex: 1 1 rem(240px);
+    max-width: rem(256px);
+
+    igx-card-media img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    igx-card-header {
+        padding: rem(16px) rem(16px) 0;
+    }
+
+    [igxCardHeaderTitle] {
+        margin-block-end: 0;
+        color: var(--ig-gray-900);
+        font-size: rem(18px);
+        font-weight: 600;
+        line-height: rem(24px);
+        letter-spacing: rem(0.15px);
+    }
+
+    [igxCardHeaderSubtitle] {
+        color: var(--ig-gray-900);
+        font-size: rem(14px);
+        font-weight: 600;
+        line-height: rem(24px);
+        letter-spacing: rem(0.1px);
+    }
+
+    igx-card-actions {
+        flex-wrap: nowrap;
+        padding: rem(24px) rem(16px) rem(12px);
+    }
+}
+
+.media-card__icons {
+    display: inline-flex;
+    align-items: center;
+    gap: rem(4px);
+    color: var(--ig-gray-900);
+
+    igx-icon {
+        --ig-icon-size: #{rem(16px)};
+    }
+}
+
+.media-card__action {
+    --ig-size: var(--ig-size-small);
+
+    padding: 0;
+    background: transparent;
+    font-size: rem(13px);
+    font-weight: 600;
+    letter-spacing: rem(0.25px);
+    text-transform: uppercase;
+}
diff --git a/src/app/layouts/card/card-media/card-media.component.ts b/src/app/layouts/card/card-media/card-media.component.ts
new file mode 100644
index 0000000000..bec4a9b5ed
--- /dev/null
+++ b/src/app/layouts/card/card-media/card-media.component.ts
@@ -0,0 +1,38 @@
+import { Component, inject } from '@angular/core';
+import {
+    IgxCardActionsComponent,
+    IgxCardComponent,
+    IgxCardHeaderComponent,
+    IgxCardHeaderSubtitleDirective,
+    IgxCardHeaderTitleDirective,
+    IgxCardMediaDirective
+} from 'igniteui-angular/card';
+import { IgxButtonDirective } from 'igniteui-angular/directives';
+import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon';
+import { IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group';
+import { pinRightIcon } from './icons';
+
+@Component({
+    selector: 'app-card-media',
+    styleUrls: ['./card-media.component.scss'],
+    templateUrl: './card-media.component.html',
+    imports: [
+        IgxButtonDirective,
+        IgxCardActionsComponent,
+        IgxCardComponent,
+        IgxCardHeaderComponent,
+        IgxCardHeaderSubtitleDirective,
+        IgxCardHeaderTitleDirective,
+        IgxCardMediaDirective,
+        IgxIconComponent,
+        IgxPrefixDirective,
+        IgxSuffixDirective
+    ]
+})
+export class CardMediaComponent {
+    private iconService = inject(IgxIconService);
+
+    constructor() {
+        this.iconService.addSvgIconFromText('pin-right', pinRightIcon, 'material');
+    }
+}
diff --git a/src/app/layouts/card/card-media/icons.ts b/src/app/layouts/card/card-media/icons.ts
new file mode 100644
index 0000000000..dfc40a68c6
--- /dev/null
+++ b/src/app/layouts/card/card-media/icons.ts
@@ -0,0 +1 @@
+export const pinRightIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g transform="rotate(-45 12 12)"><path d="M16 9V4h1c.55 0 1-.45 1-1s-.45-1-1-1H7c-.55 0-1 .45-1 1s.45 1 1 1h1v5c0 1.66-1.34 3-3 3v2h5.97v7l1 1 1-1v-7H19v-2c-1.66 0-3-1.34-3-3z"></path></g></svg>';
diff --git a/src/app/layouts/card/card-overview/card-overview.component.html b/src/app/layouts/card/card-overview/card-overview.component.html
new file mode 100644
index 0000000000..e75b1be93f
--- /dev/null
+++ b/src/app/layouts/card/card-overview/card-overview.component.html
@@ -0,0 +1,60 @@
+<div class="card-options">
+    <igx-switch labelPosition="before" [checked]="media" (change)="media = $event.checked">
+        <span>Media</span>
+    </igx-switch>
+    <igx-switch labelPosition="before" [checked]="header" (change)="header = $event.checked">
+        <span>Header</span>
+    </igx-switch>
+    <igx-switch labelPosition="before" [checked]="content" (change)="content = $event.checked">
+        <span>Content</span>
+    </igx-switch>
+    <igx-switch labelPosition="before" [checked]="actions" (change)="actions = $event.checked">
+        <span>Actions</span>
+    </igx-switch>
+</div>
+
+<div class="card-container">
+    <igx-card>
+        @if (media) {
+            <igx-card-media>
+                <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=640&amp;q=50"
+                    alt="Mountain range above the clouds at sunset" />
+            </igx-card-media>
+        }
+        @if (header) {
+            <igx-card-header>
+                <igx-avatar
+                    igxCardThumbnail
+                    shape="circle"
+                    src="https://dl.infragistics.com/x/img/avatars/avatar-profile-04.png"
+                    alt="profile picture">
+                </igx-avatar>
+                <span igxCardHeaderTitle>Title</span>
+                <span igxCardHeaderSubtitle>Subtitle</span>
+            </igx-card-header>
+        }
+        @if (content) {
+            <igx-card-content>
+                <p>
+                    A paragraph is a self-contained unit of a discourse in writing
+                    dealing with a particular point or idea.
+                </p>
+            </igx-card-content>
+        }
+        @if (actions) {
+            <igx-card-actions>
+                <button igxButton="flat" igxStart>Button</button>
+                <button igxButton="flat" igxStart>Button</button>
+                <button igxIconButton="flat" igxEnd>
+                    <igx-icon>add</igx-icon>
+                </button>
+                <button igxIconButton="flat" igxEnd>
+                    <igx-icon>add</igx-icon>
+                </button>
+                <button igxIconButton="flat" igxEnd>
+                    <igx-icon>add</igx-icon>
+                </button>
+            </igx-card-actions>
+        }
+    </igx-card>
+</div>
diff --git a/src/app/layouts/card/card-overview/card-overview.component.scss b/src/app/layouts/card/card-overview/card-overview.component.scss
new file mode 100644
index 0000000000..52da7c8223
--- /dev/null
+++ b/src/app/layouts/card/card-overview/card-overview.component.scss
@@ -0,0 +1,41 @@
+@use "igniteui-theming/sass/typography" as *;
+
+:host {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-sizing: border-box;
+    height: 100vh;
+    gap: rem(72px);
+    padding: rem(56px) rem(24px);
+}
+
+.card-options {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: rem(32px);
+}
+
+.card-container {
+    --ig-size: var(--ig-size-small);
+
+    width: 100%;
+    max-width: rem(360px);
+    min-width: rem(220px);
+
+    igx-card-media img {
+        width: 100%;
+        aspect-ratio: 15 / 8;
+        object-fit: cover;
+    }
+
+    igx-card-content p {
+        @include type-style("body-2") {
+            margin: 0;
+        }
+
+        font-size: rem(14px);
+        line-height: 1.5;
+    }
+}
diff --git a/src/app/layouts/card/card-overview/card-overview.component.ts b/src/app/layouts/card/card-overview/card-overview.component.ts
new file mode 100644
index 0000000000..1d187ae175
--- /dev/null
+++ b/src/app/layouts/card/card-overview/card-overview.component.ts
@@ -0,0 +1,45 @@
+import { Component } from '@angular/core';
+import { IgxAvatarComponent } from 'igniteui-angular/avatar';
+import {
+    IgxCardActionsComponent,
+    IgxCardComponent,
+    IgxCardContentDirective,
+    IgxCardHeaderComponent,
+    IgxCardHeaderSubtitleDirective,
+    IgxCardHeaderTitleDirective,
+    IgxCardMediaDirective,
+    IgxCardThumbnailDirective
+} from 'igniteui-angular/card';
+import { IgxButtonDirective, IgxIconButtonDirective } from 'igniteui-angular/directives';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+import { IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group';
+import { IgxSwitchComponent } from 'igniteui-angular/switch';
+
+@Component({
+    selector: 'app-card-overview',
+    styleUrls: ['./card-overview.component.scss'],
+    templateUrl: './card-overview.component.html',
+    imports: [
+        IgxAvatarComponent,
+        IgxButtonDirective,
+        IgxCardActionsComponent,
+        IgxCardComponent,
+        IgxCardContentDirective,
+        IgxCardHeaderComponent,
+        IgxCardHeaderSubtitleDirective,
+        IgxCardHeaderTitleDirective,
+        IgxCardMediaDirective,
+        IgxCardThumbnailDirective,
+        IgxIconButtonDirective,
+        IgxIconComponent,
+        IgxPrefixDirective,
+        IgxSuffixDirective,
+        IgxSwitchComponent
+    ]
+})
+export class CardOverviewComponent {
+    public media = true;
+    public header = true;
+    public content = true;
+    public actions = true;
+}
diff --git a/src/app/layouts/card/card-position/card-position.component.html b/src/app/layouts/card/card-position/card-position.component.html
new file mode 100644
index 0000000000..d455ad3a4b
--- /dev/null
+++ b/src/app/layouts/card/card-position/card-position.component.html
@@ -0,0 +1,43 @@
+<div class="card-item">
+    <span class="card-item__label">Media before header</span>
+
+    <igx-card class="position-card">
+        <igx-card-media height="6.5rem">
+            <img [src]="roomImage" alt="A meeting room with a long table and chairs" />
+        </igx-card-media>
+        <igx-card-header>
+            <span igxCardHeaderTitle>Book your meeting room</span>
+            <span igxCardHeaderSubtitle>Max 15 seats / 10 m2</span>
+        </igx-card-header>
+        <igx-card-actions>
+            <div igxStart class="position-card__icons">
+                <igx-icon>videocam</igx-icon>
+                <igx-icon>bluetooth</igx-icon>
+                <igx-icon>volume_off</igx-icon>
+            </div>
+            <button igxButton="flat" igxEnd class="position-card__action">Book now</button>
+        </igx-card-actions>
+    </igx-card>
+</div>
+
+<div class="card-item">
+    <span class="card-item__label">Media after header</span>
+
+    <igx-card class="position-card">
+        <igx-card-header>
+            <span igxCardHeaderTitle>Book your meeting room</span>
+            <span igxCardHeaderSubtitle>Max 15 seats / 10 m2</span>
+        </igx-card-header>
+        <igx-card-media height="6.5rem">
+            <img [src]="roomImage" alt="A meeting room with a long table and chairs" />
+        </igx-card-media>
+        <igx-card-actions>
+            <div igxStart class="position-card__icons">
+                <igx-icon>videocam</igx-icon>
+                <igx-icon>bluetooth</igx-icon>
+                <igx-icon>volume_off</igx-icon>
+            </div>
+            <button igxButton="flat" igxEnd class="position-card__action">Book now</button>
+        </igx-card-actions>
+    </igx-card>
+</div>
diff --git a/src/app/layouts/card/card-position/card-position.component.scss b/src/app/layouts/card/card-position/card-position.component.scss
new file mode 100644
index 0000000000..37b592575c
--- /dev/null
+++ b/src/app/layouts/card/card-position/card-position.component.scss
@@ -0,0 +1,101 @@
+@use "igniteui-theming/sass/typography" as *;
+
+:host {
+    display: flex;
+    flex-flow: row wrap;
+    align-content: center;
+    align-items: flex-start;
+    justify-content: center;
+    box-sizing: border-box;
+    height: 100vh;
+    gap: rem(56px);
+    padding: rem(32px) rem(16px);
+}
+
+.card-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: rem(20px);
+}
+
+.card-item__label {
+    @include type-style("body-2") {
+        margin: 0;
+    }
+
+    color: var(--ig-gray-600);
+    font-family: "Aktiv Grotesk", sans-serif;
+    font-size: rem(13px);
+    font-weight: 400;
+    line-height: rem(20px);
+    letter-spacing: rem(0.3px);
+}
+
+.position-card {
+    --ig-card-border-radius: #{rem(4px)};
+
+    width: rem(256px);
+
+    igx-card-media img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    igx-card-header {
+        padding: rem(16px) rem(16px) 0;
+    }
+
+    [igxCardHeaderTitle] {
+        margin-block-end: 0;
+        color: var(--ig-gray-900);
+        font-size: rem(18px);
+        font-weight: 600;
+        line-height: rem(24px);
+        letter-spacing: rem(0.15px);
+    }
+
+    [igxCardHeaderSubtitle] {
+        color: var(--ig-gray-900);
+        font-size: rem(14px);
+        font-weight: 600;
+        line-height: rem(24px);
+        letter-spacing: rem(0.1px);
+    }
+
+    igx-card-actions {
+        flex-wrap: nowrap;
+        padding: rem(24px) rem(24px) rem(8px);
+    }
+
+    igx-card-header + igx-card-media {
+        margin-block-start: rem(8px);
+    }
+
+    igx-card-media + igx-card-actions {
+        padding-block-start: rem(16px);
+    }
+}
+
+.position-card__icons {
+    display: inline-flex;
+    align-items: center;
+    gap: rem(6px);
+    color: var(--ig-gray-900);
+
+    igx-icon {
+        --ig-icon-size: #{rem(16px)};
+    }
+}
+
+.position-card__action {
+    --ig-size: var(--ig-size-small);
+
+    padding: 0;
+    background: transparent;
+    font-size: rem(13px);
+    font-weight: 600;
+    letter-spacing: rem(0.25px);
+    text-transform: uppercase;
+}
diff --git a/src/app/layouts/card/card-position/card-position.component.ts b/src/app/layouts/card/card-position/card-position.component.ts
new file mode 100644
index 0000000000..ad7dc5d909
--- /dev/null
+++ b/src/app/layouts/card/card-position/card-position.component.ts
@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+import {
+    IgxCardActionsComponent,
+    IgxCardComponent,
+    IgxCardHeaderComponent,
+    IgxCardHeaderSubtitleDirective,
+    IgxCardHeaderTitleDirective,
+    IgxCardMediaDirective
+} from 'igniteui-angular/card';
+import { IgxButtonDirective } from 'igniteui-angular/directives';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+import { IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group';
+
+@Component({
+    selector: 'app-card-position',
+    styleUrls: ['./card-position.component.scss'],
+    templateUrl: './card-position.component.html',
+    imports: [
+        IgxButtonDirective,
+        IgxCardActionsComponent,
+        IgxCardComponent,
+        IgxCardHeaderComponent,
+        IgxCardHeaderSubtitleDirective,
+        IgxCardHeaderTitleDirective,
+        IgxCardMediaDirective,
+        IgxIconComponent,
+        IgxPrefixDirective,
+        IgxSuffixDirective
+    ]
+})
+export class CardPositionComponent {
+    public roomImage = 'https://dl.infragistics.com/x/img/card/card-2.png';
+}
diff --git a/src/app/layouts/card/card-sample-1/card-sample-1.component.html b/src/app/layouts/card/card-sample-1/card-sample-1.component.html
deleted file mode 100644
index 2e9caf412f..0000000000
--- a/src/app/layouts/card/card-sample-1/card-sample-1.component.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<div class="sample-column card-wrapper">
-  <igx-card>
-    <igx-card-header>
-      <h5 igxCardHeaderTitle>{{card.title}}</h5>
-      <h5 igxCardHeaderSubtitle>{{card.subtitle}}</h5>
-      <igx-card-media width="64px" height="64px">
-        <img [src]="card.imageUrl">
-      </igx-card-media>
-    </igx-card-header>
-
-    <igx-divider></igx-divider>
-
-    <igx-card-actions layout="justify">
-      @for (icon of card.icons; track icon) {
-        <button igxIconButton="flat" igxRipple [igxRippleCentered]="true" igxEnd>
-          <igx-icon>{{icon}}</igx-icon>
-        </button>
-      }
-    </igx-card-actions>
-  </igx-card>
-</div>
diff --git a/src/app/layouts/card/card-sample-1/card-sample-1.component.scss b/src/app/layouts/card/card-sample-1/card-sample-1.component.scss
deleted file mode 100644
index 515ae890a3..0000000000
--- a/src/app/layouts/card/card-sample-1/card-sample-1.component.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.card-wrapper {
-    max-width: 400px;
-    min-width: 250px;
-}
-
-:host {
-    display: block;
-}
\ No newline at end of file
diff --git a/src/app/layouts/card/card-sample-1/card-sample-1.component.ts b/src/app/layouts/card/card-sample-1/card-sample-1.component.ts
deleted file mode 100644
index 70b5e439f3..0000000000
--- a/src/app/layouts/card/card-sample-1/card-sample-1.component.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Component } from '@angular/core';
-import { Card } from '../card.blueprint';
-import { IgxCardActionsComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card';
-import { IgxDividerComponent, IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
-import { IgxSuffixDirective } from 'igniteui-angular/input-group';
-import { IgxIconComponent } from 'igniteui-angular/icon';
-
-
-@Component({
-    selector: 'app-igx-card-simple',
-    styleUrls: ['./card-sample-1.component.scss'],
-    templateUrl: './card-sample-1.component.html',
-    imports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardMediaDirective, IgxDividerComponent, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent]
-})
-export class CardSample1Component {
-    public card = new Card({
-        icons: ['skip_previous', 'play_arrow', 'skip_next'],
-        imageUrl: 'assets/images/card/media/ROZES-Under-the-Grave.jpg',
-        subtitle: 'Under the Grave (2016)',
-        title: 'Rozes'
-    });
-}
diff --git a/src/app/layouts/card/card-sample-2/card-sample-2.component.html b/src/app/layouts/card/card-sample-2/card-sample-2.component.html
deleted file mode 100644
index 90f34c8e50..0000000000
--- a/src/app/layouts/card/card-sample-2/card-sample-2.component.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<div class="sample-column card-wrapper">
-  <igx-card  [horizontal]="horizontal">
-    <div igxLayout igxLayoutDir="column" igxFlex [igxFlexGrow]="1">
-      <igx-card-header>
-        <h5 igxCardHeaderTitle>{{card.title}}</h5>
-        <h5 igxCardHeaderSubtitle>{{card.subtitle}}</h5>
-        <igx-card-media width="64px" height="64px">
-          <img [src]="card.imageUrl">
-        </igx-card-media>
-      </igx-card-header>
-
-      <igx-card-content>
-        <p>{{card.content}}</p>
-      </igx-card-content>
-    </div>
-
-    <igx-divider [vertical]="horizontal"></igx-divider>
-
-    <igx-card-actions layout="justify">
-      @for (icon of card.icons; track icon) {
-        <button igxIconButton="flat" igxRipple [igxRippleCentered]="true" igxEnd>
-          <igx-icon>{{icon}}</igx-icon>
-        </button>
-      }
-    </igx-card-actions>
-  </igx-card>
-</div>
diff --git a/src/app/layouts/card/card-sample-2/card-sample-2.component.scss b/src/app/layouts/card/card-sample-2/card-sample-2.component.scss
deleted file mode 100644
index bf69d1a0d0..0000000000
--- a/src/app/layouts/card/card-sample-2/card-sample-2.component.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.card-wrapper {
-    max-width: 400px;
-    min-width: 250px;
-}
diff --git a/src/app/layouts/card/card-sample-2/card-sample-2.component.spec.ts b/src/app/layouts/card/card-sample-2/card-sample-2.component.spec.ts
deleted file mode 100644
index 9c1cff66d4..0000000000
--- a/src/app/layouts/card/card-sample-2/card-sample-2.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
-import { CardSample2Component } from './card-sample-2.component';
-
-describe('CardSample2Component', () => {
-  let component: CardSample2Component;
-  let fixture: ComponentFixture<CardSample2Component>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-    imports: [CardSample2Component]
-})
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(CardSample2Component);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/layouts/card/card-sample-2/card-sample-2.component.ts b/src/app/layouts/card/card-sample-2/card-sample-2.component.ts
deleted file mode 100644
index e676655d2b..0000000000
--- a/src/app/layouts/card/card-sample-2/card-sample-2.component.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Component } from '@angular/core';
-import { Card } from '../card.blueprint';
-import { IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card';
-import { IgxDividerComponent, IgxFlexDirective, IgxIconButtonDirective, IgxLayoutDirective, IgxRippleDirective } from 'igniteui-angular/directives';
-import { IgxSuffixDirective } from 'igniteui-angular/input-group';
-import { IgxIconComponent } from 'igniteui-angular/icon';
-
-
-@Component({
-    selector: 'app-card-sample-2',
-    styleUrls: ['./card-sample-2.component.scss'],
-    templateUrl: './card-sample-2.component.html',
-    imports: [IgxCardComponent, IgxLayoutDirective, IgxFlexDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardMediaDirective, IgxCardContentDirective, IgxDividerComponent, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent]
-})
-export class CardSample2Component {
-    public card = new Card({
-        content: `As I have always said: I write what's real and what's true,
-        even if it means throwing myself under the bus.`,
-        icons: ['skip_previous', 'play_arrow', 'skip_next'],
-        imageUrl: 'assets/images/card/media/ROZES-Under-the-Grave.jpg',
-        subtitle: 'Under the Grave (2016)',
-        title: 'Rozes'
-    });
-
-    public horizontal = true;
-}
diff --git a/src/app/layouts/card/card-sample-3/card-sample-3.component.html b/src/app/layouts/card/card-sample-3/card-sample-3.component.html
deleted file mode 100644
index 813bc6421a..0000000000
--- a/src/app/layouts/card/card-sample-3/card-sample-3.component.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<div class="sample-column card-wrapper">
-  <igx-card [horizontal]="horizontal" elevated>
-    <div igxLayout igxLayoutDir="column" igxFlex [igxFlexGrow]="1">
-      <igx-card-header>
-        <igx-avatar [src]="card.avatarUrl"></igx-avatar>
-        <h5 igxCardHeaderTitle>{{card.title}}</h5>
-        <h5 igxCardHeaderSubtitle>{{card.subtitle}}</h5>
-      </igx-card-header>
-
-      <igx-card-content>
-        <p>{{card.content}}</p>
-      </igx-card-content>
-
-      <igx-card-actions [vertical]="false">
-        @for (button of card.buttons; track button) {
-          <button igxButton="flat" igxRipple igxStart>
-            {{button}}
-          </button>
-        }
-      </igx-card-actions>
-    </div>
-
-    <igx-card-media width="96px">
-      <img [src]="card.imageUrl">
-    </igx-card-media>
-  </igx-card>
-</div>
diff --git a/src/app/layouts/card/card-sample-3/card-sample-3.component.scss b/src/app/layouts/card/card-sample-3/card-sample-3.component.scss
deleted file mode 100644
index bf69d1a0d0..0000000000
--- a/src/app/layouts/card/card-sample-3/card-sample-3.component.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.card-wrapper {
-    max-width: 400px;
-    min-width: 250px;
-}
diff --git a/src/app/layouts/card/card-sample-3/card-sample-3.component.spec.ts b/src/app/layouts/card/card-sample-3/card-sample-3.component.spec.ts
deleted file mode 100644
index 3b9762130c..0000000000
--- a/src/app/layouts/card/card-sample-3/card-sample-3.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
-import { CardSample3Component } from './card-sample-3.component';
-
-describe('CardSample3Component', () => {
-  let component: CardSample3Component;
-  let fixture: ComponentFixture<CardSample3Component>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-    imports: [CardSample3Component]
-})
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(CardSample3Component);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/layouts/card/card-sample-3/card-sample-3.component.ts b/src/app/layouts/card/card-sample-3/card-sample-3.component.ts
deleted file mode 100644
index 24963119b2..0000000000
--- a/src/app/layouts/card/card-sample-3/card-sample-3.component.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Component } from '@angular/core';
-import { Card } from '../card.blueprint';
-import { IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card';
-import { IgxButtonDirective, IgxFlexDirective, IgxLayoutDirective, IgxRippleDirective } from 'igniteui-angular/directives';
-import { IgxAvatarComponent } from 'igniteui-angular/avatar';
-import { IgxPrefixDirective } from 'igniteui-angular/input-group';
-
-
-@Component({
-    selector: 'app-card-sample-3',
-    styleUrls: ['./card-sample-3.component.scss'],
-    templateUrl: './card-sample-3.component.html',
-    imports: [IgxCardComponent, IgxLayoutDirective, IgxFlexDirective, IgxCardHeaderComponent, IgxAvatarComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxButtonDirective, IgxRippleDirective, IgxPrefixDirective, IgxCardMediaDirective]
-})
-export class CardSample3Component {
-    public horizontal = true;
-
-    public card = new Card({
-        avatarUrl: 'assets/images/card/avatars/mellow_d.jpg',
-        buttons: ['play album'],
-        content: `Far far away, behind the word mountains,
-        far from the countries Vokalia and Consonantia,
-        there live the blind texts.`,
-        imageUrl: 'assets/images/card/media/here_media.jpg',
-        subtitle: 'by Mellow D',
-        title: 'HERE'
-    });
-}
diff --git a/src/app/layouts/card/card-sample-4/card-sample-4.component.html b/src/app/layouts/card/card-sample-4/card-sample-4.component.html
deleted file mode 100644
index 2e01c1e1bb..0000000000
--- a/src/app/layouts/card/card-sample-4/card-sample-4.component.html
+++ /dev/null
@@ -1,131 +0,0 @@
-<section class="sample-content">
-  <article class="sample-column card-wrapper">
-    <igx-card  class="weather-card">
-      <igx-card-header>
-        <h3 igxCardHeaderTitle>{{ cards[1].title }}</h3>
-        <h5 igxCardHeaderSubtitle>{{ cards[1].subtitle }}</h5>
-      </igx-card-header>
-
-      <igx-card-content>
-        <div class="weather">
-          <div class="weather-now">
-            <span class="big-number">
-              {{ cards[1].content}}
-              <span class="temp-unit">{{ cards[1].unit}}</span>
-            </span>
-
-          </div>
-          <img  [src]="cards[1].imageUrl">
-        </div>
-
-        <div class="w_details">
-          <div class="w_details__item">
-            <igx-icon class="w_details__icon" family="weather-icons" [name]="details[0].icon"></igx-icon>
-            <span class="w_details__value">{{details[0].value}}</span>
-            <span class="w_details__label">{{details[0].label}}</span>
-          </div>
-          <div class="w_details__item">
-            <igx-icon class="w_details__icon" family="weather-icons" [name]="details[1].icon"></igx-icon>
-            <span class="w_details__value">{{details[1].value}}</span>
-            <span class="w_details__label">{{details[1].label}}</span>
-          </div>
-        </div>
-
-        <div class="time-wrapper">
-          <igx-slider [continuous]="true" [minValue]="0" [maxValue]="100" [step]="10"></igx-slider>
-          <div class="weather-time">
-            <span>08:00</span>
-            <span>12:00</span>
-            <span>16:00</span>
-            <span>20:00</span>
-            <span>00:00</span>
-          </div>
-        </div>
-      </igx-card-content>
-
-      <igx-expansion-panel>
-        <igx-expansion-panel-body>
-          <igx-list>
-            @for (day of days; track day) {
-              <igx-list-item>
-                <div class="item-container">
-                  <span class="day">{{ day.day }}</span>
-                  <span [class]="day.isSunny ? 'isSunny w_icon' : 'w_icon'" class="w_icon">
-                    <igx-icon>{{day.icon}}</igx-icon>
-                  </span>
-                  <span class="degree">
-                    <span>{{ day.tempHeight}} / {{day.tempLow}}</span>
-                  </span>
-                </div>
-              </igx-list-item>
-            }
-          </igx-list>
-        </igx-expansion-panel-body>
-      </igx-expansion-panel>
-
-      <igx-divider></igx-divider>
-
-      <igx-card-actions>
-        <button (click)="toggleDetails()" igxButton igxRipple igxStart>{{cards[1].buttons}}</button>
-      </igx-card-actions>
-    </igx-card>
-  </article>
-
-  <article class="sample-column card-wrapper">
-    <igx-card elevated>
-      <igx-card-media height="248px">
-        <img [src]="cards[0].imageUrl">
-      </igx-card-media>
-
-      <igx-card-header>
-        <h3 igxCardHeaderTitle>{{ cards[0].title }}</h3>
-        <h5 igxCardHeaderSubtitle>{{ cards[0].subtitle }}</h5>
-      </igx-card-header>
-
-      <igx-card-content>
-        <p>{{ cards[0].content}}</p>
-
-        <igx-divider class="content-divider"></igx-divider>
-
-        <span class="chip-label ig-typography__subtitle-1"> Tonight's availability</span>
-
-        <div class="chip-holder">
-          @for (chip of cards[0].chips; track chip) {
-            <igx-chip>
-              {{ chip }}
-            </igx-chip>
-          }
-        </div>
-      </igx-card-content>
-
-      <igx-card-actions>
-        @for (button of cards[0].buttons; track button) {
-          <button igxButton igxRipple igxStart>{{ button }}</button>
-        }
-      </igx-card-actions>
-    </igx-card>
-  </article>
-
-  <article class="sample-column card-wrapper">
-    <igx-card elevated>
-      <igx-card-header>
-        <igx-avatar src="assets/images/card/avatars/photographer.jpg" shape="circle"></igx-avatar>
-        <h4 igxCardHeaderTitle>Frank Carter</h4>
-        <h5 igxCardHeaderSubtitle>Photographer</h5>
-      </igx-card-header>
-
-      <igx-card-media>
-        <img src="assets/images/card/media/photographer_portfolio.jpg">
-      </igx-card-media>
-
-      <igx-card-content>
-        <p>Photographer Frank Carter won this year national photo contest with his image "Skies" which gathered the most votes in the competition.</p>
-      </igx-card-content>
-
-      <igx-card-actions>
-        <button igxButton igxStart>Like</button>
-        <button igxButton igxStart>Share</button>
-      </igx-card-actions>
-    </igx-card>
-  </article>
-</section>
diff --git a/src/app/layouts/card/card-sample-4/card-sample-4.component.scss b/src/app/layouts/card/card-sample-4/card-sample-4.component.scss
deleted file mode 100644
index 88f16c2a85..0000000000
--- a/src/app/layouts/card/card-sample-4/card-sample-4.component.scss
+++ /dev/null
@@ -1,163 +0,0 @@
-.card-wrapper {
-    max-width: 400px;
-    min-width: 250px;
-}
-
-.chip-holder {
-    display: flex;
-    margin-bottom: 10px
-}
-
-.chip-label {
-    display: block;
-    margin-bottom: 10px;
-}
-
-.chip-holder .igx-chip {
-    flex: 1 0 0%;
-    margin-left: 10px;
-}
-
-.chip-holder .igx-chip:first-of-type {
-    margin-left: 0;
-}
-
-.content-divider {
-    margin-top: 20px !important;
-    margin-bottom: 20px !important;
-}
-
-.weather-time {
-    display: flex;
-}
-
-.weather-time span {
-    flex: 1 0 0%;
-    text-align: center;
-    position: relative;
-}
-
-.time-wrapper {
-    padding: 15px 0 5px;
-}
-
-.time-wrapper span::before,
-.time-wrapper span::after {
-    content: '';
-    position: absolute;
-    width: 1px;
-    background: #444;
-}
-
-.time-wrapper span::before {
-    height: 5px;
-    bottom: calc(100% + 18px);
-    left: 0;
-}
-
-.time-wrapper span::after {
-    height: 10px;
-    bottom: calc(100% + 13px);
-    left: calc(50% - .5px);
-}
-
-.time-wrapper span:first-of-type::before {
-    display: none;
-}
-
-.weather img {
-    height: 100%;
-    width: auto;
-    margin-right: 5px;
-}
-
-.weather,
-.weather-now,
-.big-number {
-    height: 80px;
-    min-height: 80px;
-    display: flex;
-    align-content: center;
-    justify-content: space-between;
-}
-
-.big-number {
-    line-height: 70px;
-    position: relative;
-    font-size: 90px;
-}
-
-.weather-now {
-    margin-right: 20px;
-    padding-right: 30px;
-}
-
-.temp-unit {
-    font-size: 20px;
-    position: absolute;
-    top: 0;
-    line-height: normal;
-    right: -25px;
-}
-
-.item-container {
-    display: flex;
-    align-items: center;
-}
-
-.day {
-    flex: 1 0 0%;
-}
-
-.degree {
-    margin-left: 30px;
-}
-
-.sample-wrapper--cards .igx-list {
-    width: 100%;
-    height: 0;
-    transition: all 250ms ease-in-out;
-}
-
-.sample-wrapper--cards .igx-list.show {
-    width: 100%;
-    height: 290px;
-}
-
-.w_details__label {
-    margin-left: 5px;
-}
-
-.w_icon {
-    color: #666;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.w_details {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.weather {
-    margin-bottom: 15px;
-}
-
-.w_details__item {
-    display: flex;
-    align-items: center;
-}
-
-.w_details__icon {
-    margin-right: 10px;
-}
-
-.isSunny {
-    color: #fad024;
-}
-
-.item-container {
-    width: 100%;
-}
diff --git a/src/app/layouts/card/card-sample-4/card-sample-4.component.ts b/src/app/layouts/card/card-sample-4/card-sample-4.component.ts
deleted file mode 100644
index c2651ac134..0000000000
--- a/src/app/layouts/card/card-sample-4/card-sample-4.component.ts
+++ /dev/null
@@ -1,120 +0,0 @@
-import { Component, OnInit, ViewChild, inject } from '@angular/core';
-import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent } from 'igniteui-angular/expansion-panel';
-import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon';
-import { IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card';
-import { IgxSliderComponent } from 'igniteui-angular/slider';
-import { IgxListComponent, IgxListItemComponent } from 'igniteui-angular/list';
-import { IgxButtonDirective, IgxDividerComponent, IgxRippleDirective } from 'igniteui-angular/directives';
-import { IgxPrefixDirective } from 'igniteui-angular/input-group';
-import { IgxAvatarComponent } from 'igniteui-angular/avatar';
-import { IgxChipComponent } from 'igniteui-angular/chips';
-
-import {
-    Card,
-    IWeatherDetails,
-    IWeatherList,
-    weatherDetailsFactory,
-    weatherListFactory
-} from '../card.blueprint';
-
-
-@Component({
-    selector: 'app-card-sample-4',
-    styleUrls: ['./card-sample-4.component.scss'],
-    templateUrl: './card-sample-4.component.html',
-    imports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxChipComponent, IgxIconComponent, IgxSliderComponent, IgxExpansionPanelComponent, IgxExpansionPanelBodyComponent, IgxListComponent, IgxListItemComponent, IgxDividerComponent, IgxCardActionsComponent, IgxButtonDirective, IgxRippleDirective, IgxPrefixDirective, IgxCardMediaDirective, IgxAvatarComponent]
-})
-export class CardSample4Component implements OnInit {
-    private iconService = inject(IgxIconService);
-
-    @ViewChild(IgxExpansionPanelComponent, { static: true })
-    public panel: IgxExpansionPanelComponent;
-
-    public cards: Card[];
-    public details: IWeatherDetails[];
-    public days: IWeatherList[];
-
-    constructor() {
-        this.iconService.addSvgIcon('rain', 'assets/images/card/icons/rain.svg', 'weather-icons');
-        this.iconService.addSvgIcon('breeze', 'assets/images/card/icons/breeze.svg', 'weather-icons');
-    }
-
-    public toggleDetails() {
-        this.panel.toggle();
-    }
-
-    public ngOnInit() {
-        this.cards = [
-            new Card({
-                buttons: ['RESERVE'],
-                chips: ['5:30', '7:30', '8:00', '9:00'],
-                content: `Small plates, salads & sandwiches setting with 12 indoor seats plus patio seating.`,
-                imageUrl: 'assets/images/card/media/cafe.jpg',
-                subtitle: '$ - Italian, Cafe',
-                title: 'Café Badilico'
-            }),
-            new Card({
-                buttons: ['Details'],
-                content: '37',
-                imageUrl: 'assets/images/card/media/weather.png',
-                subtitle: 'Mon 12:30 PM, Mostly sunny',
-                title: 'Sofia - Bulgaria',
-                unit: '°C'
-            })
-        ];
-
-        this.details = [
-            weatherDetailsFactory({
-                icon: 'rain',
-                label: 'Participation',
-                value: '12%'
-            }),
-            weatherDetailsFactory({
-                icon: 'breeze',
-                label: 'Wind',
-                value: '23 km/h'
-            })
-        ];
-
-        this.days = [
-            weatherListFactory({
-                day: 'Tuesday',
-                icon: 'wb_cloudy',
-                tempHeight: '18°',
-                tempLow: '11°'
-            }),
-            weatherListFactory({
-                day: 'Wednesday',
-                icon: 'wb_cloudy',
-                tempHeight: '16°',
-                tempLow: '10°'
-            }),
-            weatherListFactory({
-                day: 'Thursday',
-                icon: 'wb_sunny',
-                isSunny: 'true',
-                tempHeight: '22°',
-                tempLow: '12°'
-            }),
-            weatherListFactory({
-                day: 'Friday',
-                icon: 'wb_cloudy',
-                tempHeight: '28°',
-                tempLow: '17°'
-            }),
-            weatherListFactory({
-                day: 'Saturday',
-                icon: 'wb_cloudy',
-                tempHeight: '21°',
-                tempLow: '16°'
-            }),
-            weatherListFactory({
-                day: 'Sunday',
-                icon: 'wb_sunny',
-                isSunny: 'true',
-                tempHeight: '29°',
-                tempLow: '20°'
-            })
-        ];
-    }
-}
diff --git a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.html b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.html
deleted file mode 100644
index 98dee27aa5..0000000000
--- a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<div class="sample-column card-wrapper">
-  <igx-card elevated>
-    <igx-card-media height="180px">
-      <img src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png">
-    </igx-card-media>
-    <div class="border">
-      <igx-card-header>
-        <igx-avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=8"></igx-avatar>
-        <div>
-          <h6 igxCardHeaderTitle>{{ card.title }}</h6>
-          <p igxCardHeaderSubtitle>{{ card.subtitle }}</p>
-        </div>
-      </igx-card-header>
-      <igx-card-content>
-        <igx-chip>#artic</igx-chip>
-        <igx-chip>#fox</igx-chip>
-        <igx-chip>#card</igx-chip>
-        <igx-divider></igx-divider>
-      </igx-card-content>
-      <igx-card-actions>
-        @for (icon of card.icons; track icon; let i = $index) {
-          <button igxIconButton="flat">
-            <igx-icon name={{icon}}></igx-icon>
-          </button>
-          @if (i < 2) { <igx-divider [vertical]="true">
-            </igx-divider>
-          }
-        }
-      </igx-card-actions>
-    </div>
-  </igx-card>
-</div>
\ No newline at end of file
diff --git a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss
deleted file mode 100644
index 63707d63b6..0000000000
--- a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss
+++ /dev/null
@@ -1,76 +0,0 @@
-@use "layout.scss";
-@use "igniteui-angular/theming" as *;
-
-// CSS variables approach
-
-igx-card {
-    --border-radius: #{rem(8px)};
-    --outline-color: #f0f0f0;
-    --resting-shadow: none;
-    --hover-shadow: none;
-    --header-text-color: rgba(0, 0, 0, 0.88);
-}
-
-igx-avatar {
-    --background: transparent;
-    --size: #{rem(30px)};
-}
-
-igx-chip {
-    --border-radius: #{rem(4px)};
-    --background: #fafafa;
-    --border-color: #d9d9d9;
-    --hover-background: #d9d9d9;
-    --focus-background: #d9d9d9;
-}
-
-.igx-icon-button--flat {
-    --foreground: #00000073;
-    --hover-foreground: #1677ff;
-    --hover-background: none;
-}
-
-igx-divider {
-    --color: #f0f0f0
-}
-
-// Sass theme approach
-
-// $custom-card-theme: card-theme(
-//     $border-radius: rem(8px),
-//     $outline-color: #f0f0f0,
-//     $resting-shadow: none,
-//     $hover-shadow: none,
-//     $header-text-color: #000000e0,
-// );
-
-// $custom-avatar-theme: avatar-theme(
-//     $background: transparent,
-//     $size: rem(30px)
-// );
-
-// $custom-chip-theme: chip-theme(
-//     $border-radius: rem(4px),
-//     $background: #fafafa,
-//     $border-color: #d9d9d9,
-//     $hover-background: #d9d9d9,
-//     $focus-background: #d9d9d9,
-// );
-
-// $custom-icon-button-theme: flat-icon-button-theme(
-//     $foreground: #00000073,
-//     $hover-foreground: #1677ff,
-//     $hover-background: none,
-// );
-
-// $custom-divider-theme: divider-theme(
-//     $color: #f0f0f0
-// );
-
-// :host {
-//     @include tokens($custom-card-theme);
-//     @include tokens($custom-avatar-theme);
-//     @include tokens($custom-chip-theme);
-//     @include tokens($custom-divider-theme);
-//     @include tokens($custom-icon-button-theme);
-// }
diff --git a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.ts b/src/app/layouts/card/card-styling-sample/card-styling-sample.component.ts
deleted file mode 100644
index 36edbf29cf..0000000000
--- a/src/app/layouts/card/card-styling-sample/card-styling-sample.component.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Component, inject, OnInit } from '@angular/core';
-import { Card } from '../card.blueprint';
-import { IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card';
-import { IgxDividerModule, IgxIconButtonDirective } from 'igniteui-angular/directives';
-import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon';
-import { IgxAvatarComponent } from 'igniteui-angular/avatar';
-import { IgxChipComponent } from 'igniteui-angular/chips';
-
-@Component({
-  selector: 'app-card-styling-sample',
-  templateUrl: './card-styling-sample.component.html',
-  styleUrls: ['./card-styling-sample.component.scss'],
-  imports: [IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent,
-		IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective,
-		IgxCardContentDirective, IgxCardActionsComponent, IgxIconButtonDirective,
-		IgxIconComponent, IgxAvatarComponent, IgxDividerModule, IgxChipComponent]
-})
-export class CardStylingSampleComponent implements OnInit {
-  private iconService = inject(IgxIconService)
-  public ngOnInit() {
-    this.iconService.addSvgIconFromText('settings-custom', '<svg viewBox="64 64 896 896" focusable="false" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg>')
-    this.iconService.addSvgIconFromText('edit-custom', '<svg viewBox="64 64 896 896" focusable="false" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg>');
-    this.iconService.addSvgIconFromText('dots', '<svg viewBox="64 64 896 896" focusable="false" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg>');
-  };
-  public card = new Card({
-    icons: ['settings-custom', 'edit-custom', 'dots'],
-    subtitle: 'This is the description',
-    title: 'Card title'
-  });
-}
diff --git a/src/app/layouts/card/card-styling-sample/layout.scss b/src/app/layouts/card/card-styling-sample/layout.scss
deleted file mode 100644
index 62ecb89d1e..0000000000
--- a/src/app/layouts/card/card-styling-sample/layout.scss
+++ /dev/null
@@ -1,79 +0,0 @@
-@use "igniteui-angular/theming" as *;
-
-:host {
-    ::ng-deep {
-      .igx-chip__item {
-            padding: 0 rem(5px);
-            height: rem(22px);
-        }
-    }
-}
-
-.igx-card {
-    --ig-font-family: 'alibaba-sans', sans-serif;
-
-    width: rem(300px);
-    border: none;
-}
-
-.border {
-    border: rem(1px) solid var(--outline-color);
-    border-bottom-right-radius: rem(8px);
-    border-bottom-left-radius: rem(8px);
-    border-top: none;
-}
-
-.igx-card-header{
-    --ig-h6-font-size: 1rem;
-    --ig-body-1-font-size: #{rem(14px)};
-
-    width: unset;
-    padding: unset;
-    align-items: baseline;
-    margin: rem(24px) rem(24px) 0 rem(24px);
-    height: rem(65px);
-}
-
-.igx-card-header__subtitle {
-    --ig-subtitle-2-font-weight: 400;
-    --ig-subtitle-2-line-height: #{rem(22px)};
-    --ig-subtitle-2-letter-spacing: #{rem(0.5px)};
-    --subtitle-text-color: rgba(0, 0, 0, 0.45);
-
-    margin: rem(8px) 0 rem(12px);
-}
-
-.igx-card-content {
-    padding: 0;
-
-    igx-chip {
-        --ig-body-2-font-size: #{rem(12px)};
-        
-        padding: rem(5px);
-    
-        &:nth-of-type(1) {
-            margin-left: rem(5px);
-        }
-    }
-
-    igx-divider {
-        margin-top: rem(5px);
-    }
-}
-
-igx-icon {
-    --ig-icon-size: #{rem(14px)};
-}
-
-igx-avatar {
-    border-radius: rem(20px);
-}
-
-igx-card-actions {
-    justify-content: space-evenly;
-    padding: rem(6px) 0;
-
-    igx-divider { 
-        height: rem(24px);
-    }
-}
diff --git a/src/app/layouts/card/card-styling/card-styling.component.html b/src/app/layouts/card/card-styling/card-styling.component.html
new file mode 100644
index 0000000000..690188ed54
--- /dev/null
+++ b/src/app/layouts/card/card-styling/card-styling.component.html
@@ -0,0 +1,37 @@
+<igx-card class="balance-card">
+    <igx-chip class="trend-chip">
+        <igx-icon igxPrefix>trending_up</igx-icon>
+        <span>+12.4%</span>
+    </igx-chip>
+    <igx-card-header>
+        <span igxCardHeaderTitle>Total balance</span>
+    </igx-card-header>
+    <igx-card-content>
+        <span class="balance-amount">$24,860</span>
+    </igx-card-content>
+    <igx-card-actions>
+        <div igxEnd class="balance-actions">
+            <button igxIconButton="flat" aria-label="Copy account link">
+                <igx-icon>link</igx-icon>
+            </button>
+            <button igxIconButton="flat" aria-label="More options">
+                <igx-icon>more_vert</igx-icon>
+            </button>
+        </div>
+    </igx-card-actions>
+</igx-card>
+
+<igx-card class="support-card">
+    <igx-chip class="support-tag">Support</igx-chip>
+    <igx-card-media class="support-media" height="124px">
+        <img
+            src="https://dl.infragistics.com/x/img/card/card-3.png"
+            alt="Support agent reviewing system dashboards on a laptop" />
+    </igx-card-media>
+    <igx-card-header>
+        <span igxCardHeaderTitle>Review the issue and check system logs</span>
+    </igx-card-header>
+    <igx-card-actions>
+        <span class="support-link">Find out more</span>
+    </igx-card-actions>
+</igx-card>
diff --git a/src/app/layouts/card/card-styling/card-styling.component.scss b/src/app/layouts/card/card-styling/card-styling.component.scss
new file mode 100644
index 0000000000..6829674a7e
--- /dev/null
+++ b/src/app/layouts/card/card-styling/card-styling.component.scss
@@ -0,0 +1,173 @@
+@use "igniteui-theming/sass/typography" as *;
+@import url("https://use.typekit.net/bng2zgw.css");
+
+// The design brings its own palette and typeface, so the colors below are
+// literal instead of theme tokens - the sample keeps its look in every theme.
+// aktiv-grotesk is the typekit family name loaded above.
+app-card-styling {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    height: 100vh;
+    gap: rem(60px);
+    padding: rem(40px) rem(24px);
+
+    .balance-card {
+        --ig-card-border-radius: #{rem(16px)};
+        --ig-card-outline-color: #99c9ff;
+
+        position: relative;
+        width: rem(312px);
+        padding: rem(8px);
+        background: #e6f2ff;
+
+        igx-card-header {
+            padding: rem(16px) rem(16px) 0;
+        }
+
+        [igxCardHeaderTitle] {
+            color: #004699;
+            font-family: "aktiv-grotesk", "Aktiv Grotesk", Arial, sans-serif;
+            font-size: rem(14px);
+            font-weight: 500;
+            line-height: rem(24px);
+            letter-spacing: rem(0.1px);
+        }
+
+        igx-card-content {
+            padding: 0 rem(16px);
+            overflow: visible;
+        }
+
+        igx-card-actions {
+            padding: rem(16px);
+        }
+    }
+
+    .trend-chip {
+        position: absolute;
+        inset-block-start: rem(24px);
+        inset-inline-end: rem(24px);
+        z-index: 1;
+
+        .igx-chip__item {
+            box-sizing: border-box;
+            height: rem(24px);
+            padding: rem(2px) rem(6px);
+            border: none;
+            border-radius: rem(16px);
+            background: #cce4ff;
+            color: #004699;
+            font-family: "Titillium Web", Verdana, Tahoma, sans-serif;
+            font-size: rem(14px);
+            font-weight: 400;
+            line-height: rem(20px);
+            letter-spacing: rem(0.25px);
+        }
+
+        .igx-chip__start {
+            color: #004699;
+        }
+
+        igx-icon {
+            --ig-icon-size: #{rem(20px)};
+        }
+    }
+
+    .balance-amount {
+        display: block;
+        color: #0176ff;
+        font-family: "aktiv-grotesk", "Aktiv Grotesk", Arial, sans-serif;
+        font-size: rem(32px);
+        font-weight: 600;
+        line-height: rem(40px);
+        letter-spacing: 0;
+    }
+
+    .balance-actions {
+        display: inline-flex;
+        gap: rem(8px);
+
+        [igxIconButton] {
+            --ig-flat-icon-button-foreground: #004699;
+
+            width: rem(36px);
+            height: rem(36px);
+            border-radius: 50%;
+            background: #ffffff;
+        }
+    }
+
+    .support-card {
+        --ig-card-border-radius: #{rem(16px)};
+        --ig-card-outline-color: #e5ebf3;
+
+        position: relative;
+        width: rem(246px);
+        padding: rem(8px);
+        background: #ffffff;
+
+        igx-card-header {
+            padding: rem(16px) rem(16px) 0;
+        }
+
+        [igxCardHeaderTitle] {
+            margin-block-end: 0;
+            color: #004699;
+            font-family: "aktiv-grotesk", "Aktiv Grotesk", Arial, sans-serif;
+            font-size: rem(16px);
+            font-weight: 700;
+            line-height: rem(20px);
+            letter-spacing: 0;
+        }
+
+        igx-card-actions {
+            padding: rem(16px) rem(16px) rem(8px);
+        }
+    }
+
+    .support-media {
+        box-sizing: border-box;
+        padding: rem(16px);
+        border-radius: rem(16px);
+
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+    }
+
+    .support-tag {
+        position: absolute;
+        inset-block-start: rem(12px);
+        inset-inline-start: rem(16px);
+        z-index: 1;
+
+        .igx-chip__item {
+            box-sizing: border-box;
+            height: rem(24px);
+            padding: rem(2px) rem(10px);
+            border: none;
+            border-radius: rem(16px);
+            background: #e6f2ff;
+            color: #004699;
+            font-family: "Titillium Web", Verdana, Tahoma, sans-serif;
+            font-size: rem(14px);
+            font-weight: 400;
+            line-height: rem(20px);
+            letter-spacing: rem(0.25px);
+        }
+    }
+
+    .support-link {
+        color: #7d91ab;
+        font-family: "aktiv-grotesk", "Aktiv Grotesk", Arial, sans-serif;
+        font-size: rem(12px);
+        font-weight: 600;
+        line-height: rem(16px);
+        letter-spacing: rem(0.15px);
+    }
+}
diff --git a/src/app/layouts/card/card-styling/card-styling.component.ts b/src/app/layouts/card/card-styling/card-styling.component.ts
new file mode 100644
index 0000000000..f999654a8c
--- /dev/null
+++ b/src/app/layouts/card/card-styling/card-styling.component.ts
@@ -0,0 +1,34 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import {
+    IgxCardActionsComponent,
+    IgxCardComponent,
+    IgxCardContentDirective,
+    IgxCardHeaderComponent,
+    IgxCardHeaderTitleDirective,
+    IgxCardMediaDirective
+} from 'igniteui-angular/card';
+import { IgxChipComponent } from 'igniteui-angular/chips';
+import { IgxIconButtonDirective } from 'igniteui-angular/directives';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+import { IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group';
+
+@Component({
+    selector: 'app-card-styling',
+    encapsulation: ViewEncapsulation.None,
+    styleUrls: ['./card-styling.component.scss'],
+    templateUrl: './card-styling.component.html',
+    imports: [
+        IgxCardActionsComponent,
+        IgxCardComponent,
+        IgxCardContentDirective,
+        IgxCardHeaderComponent,
+        IgxCardHeaderTitleDirective,
+        IgxCardMediaDirective,
+        IgxChipComponent,
+        IgxIconButtonDirective,
+        IgxIconComponent,
+        IgxPrefixDirective,
+        IgxSuffixDirective
+    ]
+})
+export class CardStylingComponent { }
diff --git a/src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.html b/src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.html
deleted file mode 100644
index 171c4de3d7..0000000000
--- a/src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<div class="sample-column card-wrapper">
-  <igx-card class="!light-card ![--background:#193625] ![--subtitle-text-color:#ECAA53]" elevated>
-    <igx-card-media height="180px">
-      <img [src]="card.imageUrl">
-    </igx-card-media>
-
-    <igx-card-header>
-      <h3 igxCardHeaderTitle>{{ card.title }}</h3>
-      <h5 igxCardHeaderSubtitle>{{ card.subtitle }}</h5>
-    </igx-card-header>
-
-    <igx-card-content>
-      <p>{{ card.content }}</p>
-    </igx-card-content>
-
-    <igx-card-actions>
-      @for (icon of card.icons; track icon) {
-        <button igxIconButton="flat"
-          igxRipple
-          [igxRippleCentered]="true"
-          igxEnd>
-          <igx-icon [style.color]="'#ECAA53'">{{icon}}</igx-icon>
-        </button>
-      }
-    </igx-card-actions>
-
-  </igx-card>
-</div>
diff --git a/src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.scss b/src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.scss
deleted file mode 100644
index a60d456faa..0000000000
--- a/src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.scss
+++ /dev/null
@@ -1 +0,0 @@
-@use "layout.scss";
diff --git a/src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.ts b/src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.ts
deleted file mode 100644
index 59c146a849..0000000000
--- a/src/app/layouts/card/card-tailwind-styling-sample/card-tailwind-styling-sample.component.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Component } from '@angular/core';
-import { Card } from '../card.blueprint';
-import { IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card';
-import { IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
-import { IgxSuffixDirective } from 'igniteui-angular/input-group';
-import { IgxIconComponent } from 'igniteui-angular/icon';
-
-
-@Component({
-    selector: 'app-card-tailwind-styling-sample',
-    templateUrl: './card-tailwind-styling-sample.component.html',
-    styleUrls: ['./card-tailwind-styling-sample.component.scss'],
-    imports: [IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent]
-})
-export class CardTailwindStylingSampleComponent {
-    public card = new Card({
-        content: `Hi! I'm Jane, photographer and filmmaker.
-        Photography is a way of feeling, of touching,
-        of loving. What you have caught on film is captured forever...
-        it remembers little things, long after you have
-        forgotten everything.`,
-        icons: ['person', 'favorite', 'share'],
-        imageUrl: 'https://images.unsplash.com/'
-        + 'photo-1541516160071-4bb0c5af65ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80',
-        subtitle: 'Professional Photographer',
-        title: 'Jane Doe'
-    });
-}
diff --git a/src/app/layouts/card/card-tailwind-styling-sample/layout.scss b/src/app/layouts/card/card-tailwind-styling-sample/layout.scss
deleted file mode 100644
index d8f5f95f82..0000000000
--- a/src/app/layouts/card/card-tailwind-styling-sample/layout.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.card-wrapper {
-  max-width: 320px;
-  min-width: 220px;
-}
\ No newline at end of file
diff --git a/src/app/layouts/card/card-tailwind-styling/card-tailwind-styling.component.html b/src/app/layouts/card/card-tailwind-styling/card-tailwind-styling.component.html
new file mode 100644
index 0000000000..d4fff12c11
--- /dev/null
+++ b/src/app/layouts/card/card-tailwind-styling/card-tailwind-styling.component.html
@@ -0,0 +1,105 @@
+<igx-card class="[--ig-card-border-radius:30px] [--ig-card-outline-color:transparent]">
+    <igx-card-media class="h-[189px]">
+        <img
+        class="object-cover"
+        src="https://dl.infragistics.com/x/img/avatars/image-bg4.png"
+        alt="Cafe interior" />
+    </igx-card-media>
+    <igx-card-header>
+        <igx-avatar
+            igxCardThumbnail
+            shape="circle"
+            size="medium"
+            src="https://dl.infragistics.com/x/img/avatars/avatar-profile-09.png"
+            alt="A profile photo of Kate Thompson.">
+        </igx-avatar>
+        <span igxCardHeaderTitle>Kate Thompson</span>
+        <p class="card-sample-custom-subtitle">3D Artist. Turning polygons into worlds and immersive digital realities</p>
+
+    </igx-card-header>
+    <igx-card-content>
+        <div class="grid grid-cols-[1fr_auto_1fr_auto_1fr]">
+            @for (stat of profileStats; track stat.label; let isLast = $last) {
+                <div class="flex min-w-0 flex-col items-center gap-1 px-3">
+                    <span class="stats-title">{{ stat.value }}</span>
+                    <span class="stats-subtitle">{{ stat.label }}</span>
+                </div>
+                @if (!isLast) {
+                    <igx-divider class="h-12" vertical></igx-divider>
+                }
+            }
+        </div>
+    </igx-card-content>
+    <igx-card-actions>
+        <button
+            igxButton="contained"
+            class="[--ig-contained-button-active-background:var(--ig-gray-400)] [--ig-contained-button-background:var(--ig-gray-200)] [--ig-contained-button-border-radius:16px] [--ig-contained-button-focus-background:var(--ig-gray-300)] [--ig-contained-button-hover-background:var(--ig-gray-300)] [--ig-size:var(--ig-size-small)]">
+            <span class="inline-flex items-center gap-1">
+                FOLLOW
+                <igx-icon name="plus" collection="material"></igx-icon>
+            </span>
+        </button>
+        <div igxEnd class="inline-flex gap-1">
+            <button igxIconButton="flat" igxRipple aria-label="Open Instagram profile">
+                <igx-icon name="instagram" collection="material"></igx-icon>
+            </button>
+            <button igxIconButton="flat" igxRipple aria-label="Open BeReal profile">
+                <igx-icon name="bereal" collection="material"></igx-icon>
+            </button>
+            <button igxIconButton="flat" igxRipple aria-label="Open Threads profile">
+                <igx-icon name="threads" collection="material"></igx-icon>
+            </button>
+        </div>
+    </igx-card-actions>
+</igx-card>
+
+<igx-card class="[--ig-card-border-radius:30px] [--ig-card-outline-color:transparent]">
+    <igx-card-header>
+        <span igxCardThumbnail
+            class="inline-flex rounded-full p-[5px] bg-[linear-gradient(40deg,#D2F586,#A0C9FF)]">
+            <igx-avatar
+                size="medium"
+                shape="circle"
+                src="https://dl.infragistics.com/x/img/avatars/avatar-profile-09.png"
+                alt="A profile photo of Kate Thompson.">
+            </igx-avatar>
+        </span>
+        <span igxCardHeaderTitle>Kate Thompson</span>
+        <p class="card-sample-custom-subtitle">3D Artist. Turning polygons into worlds and immersive digital realities</p>
+    </igx-card-header>
+    <igx-card-content>
+        <div class="grid grid-cols-[1fr_auto_1fr_auto_1fr]">
+            @for (stat of profileStats; track stat.label; let isLast = $last) {
+                <div class="flex min-w-0 flex-col items-center gap-1 px-3">
+                    <span class="stats-title">{{ stat.value }}</span>
+                    <span class="stats-subtitle">{{ stat.label }}</span>
+                </div>
+                @if (!isLast) {
+                    <igx-divider vertical></igx-divider>
+                }
+            }
+        </div>
+    </igx-card-content>
+    <igx-card-actions >
+        <button
+            igxButton="contained"
+            class="[--ig-contained-button-active-background:var(--ig-gray-400)] [--ig-contained-button-background:var(--ig-gray-200)] [--ig-contained-button-border-radius:16px] [--ig-contained-button-focus-background:var(--ig-gray-300)] [--ig-contained-button-hover-background:var(--ig-gray-300)] [--ig-size:var(--ig-size-small)]">
+            <span class="inline-flex items-center gap-1">
+                <span>FOLLOW</span>
+                <igx-icon name="plus" collection="material"></igx-icon>
+            </span>
+        </button>
+        <div igxEnd class="inline-flex items-center gap-1">
+            <button igxIconButton="flat" igxRipple aria-label="Open Instagram profile">
+                <igx-icon name="instagram" collection="material"></igx-icon>
+            </button>
+            <button igxIconButton="flat" igxRipple aria-label="Open BeReal profile">
+                <igx-icon name="bereal" collection="material"></igx-icon>
+            </button>
+            <button igxIconButton="flat" igxRipple aria-label="Open Threads profile">
+                <igx-icon name="threads" collection="material"></igx-icon>
+            </button>
+        </div>
+    </igx-card-actions>
+</igx-card>
+
diff --git a/src/app/layouts/card/card-tailwind-styling/card-tailwind-styling.component.scss b/src/app/layouts/card/card-tailwind-styling/card-tailwind-styling.component.scss
new file mode 100644
index 0000000000..ea7083981e
--- /dev/null
+++ b/src/app/layouts/card/card-tailwind-styling/card-tailwind-styling.component.scss
@@ -0,0 +1,36 @@
+@use "igniteui-theming/sass/typography" as *;
+
+:host {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, rem(344px));
+    gap: rem(40px);
+    place-content: center;
+    height: 100vh;
+}
+
+igx-card:nth-of-type(2) {
+    align-self: center;
+}
+
+.card-sample-custom-subtitle {
+    display: block;
+    color: var(--ig-gray-700);
+
+    @include type-style("body-2") {
+        margin-block-start: rem(8px);
+    };
+}
+
+.stats-title {
+    color: var(--ig-gray-900);
+
+    @include type-style("subtitle-1") {
+        font-weight: 600;
+    };
+}
+
+.stats-subtitle {
+    color: var(--ig-gray-500);
+
+    @include type-style("body-2");
+}
diff --git a/src/app/layouts/card/card-tailwind-styling/card-tailwind-styling.component.ts b/src/app/layouts/card/card-tailwind-styling/card-tailwind-styling.component.ts
new file mode 100644
index 0000000000..79d556629c
--- /dev/null
+++ b/src/app/layouts/card/card-tailwind-styling/card-tailwind-styling.component.ts
@@ -0,0 +1,51 @@
+import { Component, inject } from '@angular/core';
+import { IgxAvatarComponent } from 'igniteui-angular/avatar';
+import { IgxButtonDirective, IgxDividerComponent, IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
+import {
+    IgxCardActionsComponent,
+    IgxCardComponent,
+    IgxCardContentDirective,
+    IgxCardHeaderComponent,
+    IgxCardHeaderTitleDirective,
+    IgxCardMediaDirective,
+    IgxCardThumbnailDirective
+} from 'igniteui-angular/card';
+import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon';
+import { berealIcon, instagramIcon, plusIcon, threadsIcon } from './icons';
+
+@Component({
+    selector: 'app-card-tailwind-styling',
+    styleUrls: ['./card-tailwind-styling.component.scss'],
+    templateUrl: './card-tailwind-styling.component.html',
+    imports: [
+        IgxAvatarComponent,
+        IgxButtonDirective,
+        IgxCardActionsComponent,
+        IgxCardComponent,
+        IgxCardContentDirective,
+        IgxCardHeaderComponent,
+        IgxCardHeaderTitleDirective,
+        IgxCardMediaDirective,
+        IgxCardThumbnailDirective,
+        IgxDividerComponent,
+        IgxIconButtonDirective,
+        IgxIconComponent,
+        IgxRippleDirective
+    ]
+})
+export class CardTailwindStylingComponent {
+    private iconService = inject(IgxIconService);
+
+    public profileStats = [
+        { value: '23.9K', label: 'Likes' },
+        { value: '163', label: 'Posts' },
+        { value: '23.9K', label: 'Views' }
+    ];
+
+    constructor() {
+        this.iconService.addSvgIconFromText('instagram', instagramIcon, 'material');
+        this.iconService.addSvgIconFromText('bereal', berealIcon, 'material');
+        this.iconService.addSvgIconFromText('threads', threadsIcon, 'material');
+        this.iconService.addSvgIconFromText('plus', plusIcon, 'material');
+    }
+}
diff --git a/src/app/layouts/card/card-tailwind-styling/icons.ts b/src/app/layouts/card/card-tailwind-styling/icons.ts
new file mode 100644
index 0000000000..70599bae5f
--- /dev/null
+++ b/src/app/layouts/card/card-tailwind-styling/icons.ts
@@ -0,0 +1,11 @@
+export const instagramIcon =
+    '<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_instagram)"><path d="M5.27258 0.0629438C4.31498 0.108124 3.66103 0.260944 3.08935 0.485584C2.49769 0.716164 1.99621 1.02558 1.49725 1.52634C0.998295 2.0271 0.691035 2.52894 0.462075 3.1215C0.240495 3.69444 0.0903746 4.34892 0.0480746 5.30706C0.0057746 6.2652 -0.00358541 6.57318 0.00109459 9.01722C0.00577459 11.4613 0.0165746 11.7676 0.0630146 12.7277C0.108735 13.6852 0.261015 14.3389 0.485655 14.9108C0.716595 15.5024 1.02565 16.0037 1.52659 16.5029C2.02753 17.002 2.52901 17.3086 3.12301 17.5379C3.69541 17.7591 4.35008 17.9099 5.30804 17.9519C6.266 17.9938 6.57434 18.0035 9.01766 17.9989C11.461 17.9942 11.7686 17.9834 12.7285 17.9378C13.6885 17.8923 14.3388 17.7389 14.9109 17.5154C15.5025 17.2839 16.0042 16.9754 16.503 16.4743C17.0017 15.9731 17.3088 15.4709 17.5376 14.878C17.7594 14.3056 17.91 13.651 17.9516 12.6937C17.9935 11.7331 18.0034 11.4263 17.9988 8.98266C17.9941 6.53898 17.9831 6.23262 17.9376 5.27286C17.892 4.3131 17.7396 3.66132 17.5151 3.0891C17.2838 2.49744 16.9751 1.9965 16.4743 1.497C15.9736 0.997504 15.471 0.690604 14.8783 0.462364C14.3055 0.240784 13.6512 0.0897638 12.6933 0.0483638C11.7353 0.00696385 11.427 -0.00365615 8.98274 0.00102385C6.53852 0.00570385 6.23252 0.0161439 5.27258 0.0629438ZM5.3777 16.3328C4.5002 16.2946 4.02373 16.1488 3.70621 16.0268C3.28573 15.8648 2.98621 15.6689 2.66977 15.3556C2.35333 15.0422 2.15893 14.7416 1.99477 14.322C1.87147 14.0045 1.72297 13.5286 1.68193 12.6511C1.63729 11.7026 1.62793 11.4179 1.62271 9.01506C1.61749 6.61224 1.62667 6.32784 1.66825 5.37906C1.70569 4.50228 1.85239 4.02528 1.97425 3.70794C2.13625 3.28692 2.33137 2.98794 2.64547 2.67168C2.95957 2.35542 3.25927 2.16066 3.67921 1.9965C3.99637 1.87266 4.4723 1.72542 5.34944 1.68366C6.29858 1.63866 6.58298 1.62966 8.98544 1.62444C11.3879 1.61922 11.673 1.62822 12.6225 1.66998C13.4993 1.70814 13.9765 1.8534 14.2935 1.97598C14.7141 2.13798 15.0135 2.33256 15.3297 2.6472C15.646 2.96184 15.8409 3.26046 16.0051 3.6813C16.1291 3.99756 16.2763 4.4733 16.3177 5.35098C16.3629 6.30012 16.3732 6.5847 16.3775 8.98698C16.3818 11.3893 16.3734 11.6746 16.3318 12.623C16.2934 13.5005 16.148 13.9771 16.0258 14.295C15.8638 14.7153 15.6685 15.015 15.3542 15.3311C15.0399 15.6472 14.7406 15.8419 14.3205 16.0061C14.0037 16.1297 13.5272 16.2773 12.6508 16.3191C11.7016 16.3637 11.4172 16.3731 9.01388 16.3783C6.61052 16.3835 6.32701 16.3738 5.37787 16.3328M12.7147 4.1898C12.715 4.40342 12.7787 4.61214 12.8977 4.78955C13.0167 4.96697 13.1856 5.10511 13.3831 5.18651C13.5806 5.26792 13.7978 5.28892 14.0073 5.24687C14.2167 5.20482 14.409 5.1016 14.5597 4.95028C14.7105 4.79895 14.813 4.60631 14.8543 4.39671C14.8956 4.18712 14.8738 3.96999 14.7917 3.77279C14.7095 3.57559 14.5708 3.40717 14.3929 3.28884C14.2151 3.17051 14.0061 3.10758 13.7925 3.108C13.5061 3.10858 13.2317 3.22286 13.0296 3.42573C12.8275 3.62859 12.7142 3.90343 12.7147 4.1898ZM4.37887 9.00894C4.38391 11.5613 6.4568 13.6258 9.00866 13.6209C11.5605 13.616 13.6264 11.5433 13.6215 8.99094C13.6167 6.43854 11.5432 4.37358 8.99102 4.37862C6.4388 4.38366 4.37401 6.4569 4.37887 9.00894ZM5.99996 9.0057C5.99878 8.41235 6.17358 7.83197 6.50226 7.33796C6.83093 6.84396 7.29871 6.4585 7.84645 6.23035C8.39419 6.0022 8.99728 5.9416 9.57947 6.0562C10.1616 6.17081 10.6968 6.45548 11.1172 6.87421C11.5376 7.29294 11.8243 7.82694 11.9413 8.40866C12.0582 8.99038 12 9.59371 11.774 10.1424C11.548 10.691 11.1644 11.1603 10.6717 11.4909C10.179 11.8215 9.59931 11.9986 9.00595 11.9998C8.61197 12.0007 8.22168 11.9239 7.85737 11.7738C7.49307 11.6238 7.16189 11.4035 6.88275 11.1254C6.6036 10.8474 6.38197 10.5171 6.2305 10.1534C6.07903 9.78967 6.00069 9.39969 5.99996 9.0057Z" fill="black"/></g><defs><clipPath id="clip0_instagram"><rect width="18" height="18" fill="white"/></clipPath></defs></svg>';
+
+export const berealIcon =
+    '<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_bereal)"><path d="M11.7436 8.30078C11.4476 8.30078 11.2191 8.38594 11.0568 8.55329C10.8934 8.72024 10.7917 8.94745 10.75 9.23493H12.7337C12.7121 8.92888 12.61 8.69732 12.4261 8.53906C12.2435 8.3804 12.0155 8.30078 11.7436 8.30078Z" fill="black"/><path d="M7.41904 8.18753C7.5854 8.08617 7.66839 7.90598 7.66839 7.64716C7.66839 7.36126 7.55853 7.17139 7.33823 7.08011C7.14895 7.01668 6.90653 6.98389 6.61273 6.98389H5.46875V8.33987H6.76941C7.03653 8.33987 7.25268 8.28909 7.41904 8.18753Z" fill="black"/><path d="M7.40284 9.46179C7.25723 9.39442 7.05175 9.36004 6.78818 9.35767H5.46875V10.9958H6.76763C7.03456 10.9958 7.24103 10.9608 7.3902 10.8879C7.6591 10.754 7.79385 10.4989 7.79385 10.1203C7.79385 9.80103 7.66325 9.58034 7.40284 9.46179Z" fill="black"/><path d="M8.98867 0.098877C4.07826 0.098877 0.0976562 4.07948 0.0976562 8.98989C0.0976562 13.9003 4.07826 17.8809 8.98867 17.8809C13.8991 17.8809 17.8797 13.9003 17.8797 8.98989C17.8797 4.07948 13.8991 0.098877 8.98867 0.098877ZM10.4952 6.17144H12.9707V6.7863H10.4952V6.17144ZM8.81382 11.1887C8.69744 11.38 8.55281 11.5414 8.37895 11.6716C8.18334 11.822 7.95158 11.9251 7.68525 11.9802C7.41812 12.0354 7.12887 12.0632 6.81729 12.0632H4.04922V5.91656H7.01783C7.76606 5.92881 8.29656 6.14556 8.60991 6.57134C8.79781 6.83254 8.89107 7.1457 8.89107 7.51003C8.89107 7.88583 8.79682 8.18654 8.60695 8.41494C8.50144 8.54297 8.34536 8.65954 8.13889 8.76465C8.45165 8.87905 8.68895 9.05944 8.8476 9.3076C9.00724 9.55497 9.08707 9.85528 9.08707 10.208C9.08687 10.5727 8.99697 10.8999 8.81382 11.1887ZM13.9269 9.99438H10.7212C10.7388 10.437 10.8917 10.7464 11.1814 10.9234C11.3561 11.0344 11.5679 11.0888 11.816 11.0888C12.0776 11.0888 12.2908 11.0226 12.4548 10.8866C12.5443 10.8145 12.6231 10.713 12.6913 10.5845H13.8663C13.8355 10.8459 13.694 11.1109 13.4397 11.3804C13.0457 11.8085 12.4933 12.0231 11.7838 12.0231C11.1976 12.0231 10.6811 11.8421 10.2328 11.4814C9.7859 11.1194 9.56145 10.5322 9.56145 9.71757C9.56145 8.95374 9.76298 8.3691 10.1672 7.96209C10.5731 7.55429 11.0968 7.35138 11.7423 7.35138C12.125 7.35138 12.47 7.41974 12.7776 7.55725C13.0845 7.69497 13.338 7.91151 13.5377 8.20926C13.7185 8.47145 13.8347 8.77473 13.8888 9.1199C13.9188 9.32123 13.9325 9.61305 13.9269 9.99438Z" fill="black"/></g><defs><clipPath id="clip0_bereal"><rect width="18" height="18" fill="white"/></clipPath></defs></svg>';
+
+export const threadsIcon =
+    '<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.98612 6.768C5.68237 6.5655 4.67438 5.86575 4.67438 5.86575C5.52488 4.64963 6.6465 4.176 8.19788 4.176C9.29475 4.176 10.2262 4.54387 10.8911 5.2425C11.556 5.94112 11.9351 6.94012 12.0217 8.217C12.3907 8.37225 12.7301 8.55375 13.0399 8.7615C14.2875 9.59963 14.9738 10.854 14.9738 12.2906C14.9738 15.3461 12.4695 18 7.93575 18C4.04325 18 0 15.7354 0 8.99325C0 2.28825 3.91725 0 7.9245 0C9.77625 0 14.1187 0.273374 15.75 5.6655L14.22 6.06262C12.9555 2.22075 10.3084 1.60875 7.88175 1.60875C3.87112 1.60875 1.602 4.05113 1.602 9.2475C1.602 13.9084 4.13775 16.3834 7.93575 16.3834C11.0599 16.3834 13.3886 14.76 13.3886 12.3829C13.3886 10.7651 12.0296 9.99 11.9599 9.99C11.6944 11.3783 10.9834 13.7137 7.86037 13.7137C6.04012 13.7137 4.47075 12.456 4.47075 10.809C4.47075 8.45775 6.70275 7.60613 8.4645 7.60613C9.12375 7.60613 9.92025 7.65112 10.3354 7.73438C10.3354 7.01775 9.72787 5.79037 8.19788 5.79037C6.79162 5.79037 6.43613 6.246 5.985 6.76687L5.98612 6.768ZM8.6805 9.21375C6.3855 9.21375 6.0885 10.1925 6.0885 10.8068C6.0885 11.7945 7.26188 12.1208 7.8885 12.1208C9.036 12.1208 10.2139 11.8035 10.3995 9.39487C9.83623 9.26346 9.25879 9.20262 8.6805 9.21375Z" fill="black"/></svg>';
+
+export const plusIcon =
+    '<svg width="16" height="16" viewBox="0 -960 960 960" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z" fill="#000000"/></svg>';
diff --git a/src/app/layouts/card/card.blueprint.ts b/src/app/layouts/card/card.blueprint.ts
deleted file mode 100644
index 2fcb93246b..0000000000
--- a/src/app/layouts/card/card.blueprint.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-interface ICard {
-    title?: string;
-    subtitle?: string;
-    content?: string;
-    imageUrl?: string;
-    avatarUrl?: string;
-    buttons?: string[];
-    icons?: string[];
-    chips?: string[];
-    unit?: string;
-}
-
-export interface IWeatherList {
-    isSunny: boolean;
-    day: string;
-    icon: string;
-    tempHeight: string;
-    tempLow: string;
-}
-
-export interface IWeatherDetails {
-    value: string;
-    icon: string;
-    label: string;
-}
-
-export class Card {
-    public title: string;
-    public subtitle: string;
-    public content: string;
-    public imageUrl: string;
-    public avatarUrl: string;
-    public buttons: string[];
-    public icons: string[];
-    public chips: string[];
-    public unit: string;
-
-    constructor(obj?: ICard) {
-        this.title = obj.title || 'Card Title';
-        this.subtitle = obj.subtitle || 'Card Subtitle';
-        this.content = obj.content ||
-            'Some card content should be placed here. Description or other related information.';
-        this.imageUrl = obj.imageUrl || 'assets/images/card/media/placeholder.jpg';
-        this.avatarUrl = obj.avatarUrl || 'assets/images/card/avatars/rupert_stadler.jpg';
-        this.buttons = obj.buttons || ['ACTION1', 'ACTION2'];
-        this.icons = obj.icons || ['favorite', 'bookmark', 'share'];
-        this.chips = obj.chips || [];
-        this.unit = obj.unit || undefined;
-    }
-}
-
-export function weatherListFactory(params?: any): IWeatherList {
-    return {
-        day: params.day || 'day of the week',
-        icon: params.icon || 'wb_cloudy',
-        isSunny: params.isSunny || '',
-        tempHeight: params.tempHeight || '°C',
-        tempLow: params.tempLow || '°C'
-    };
-}
-
-export function weatherDetailsFactory(params?: any): IWeatherDetails {
-    return {
-        icon: params.icon || '',
-        label: params.label || '',
-        value: params.value || ''
-    };
-}
diff --git a/src/app/layouts/card/card.component.html b/src/app/layouts/card/card.component.html
deleted file mode 100644
index d8ea086abf..0000000000
--- a/src/app/layouts/card/card.component.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<div class="sample-column card-wrapper">
-  <igx-card elevated>
-    <igx-card-media height="180px">
-      <img [src]="card.imageUrl">
-    </igx-card-media>
-
-    <igx-card-header>
-      <h3 igxCardHeaderTitle>{{ card.title }}</h3>
-      <h5 igxCardHeaderSubtitle>{{ card.subtitle }}</h5>
-    </igx-card-header>
-
-    <igx-card-content>
-      <p>{{ card.content }}</p>
-    </igx-card-content>
-
-    <igx-card-actions>
-      @for (button of card.buttons; track button) {
-        <button igxButton igxRipple igxStart>{{ button }}</button>
-      }
-      @for (icon of card.icons; track icon) {
-        <button igxIconButton="flat"
-          igxRipple
-          [igxRippleCentered]="true"
-          igxEnd>
-          <igx-icon>{{icon}}</igx-icon>
-        </button>
-      }
-    </igx-card-actions>
-
-  </igx-card>
-</div>
diff --git a/src/app/layouts/card/card.component.scss b/src/app/layouts/card/card.component.scss
deleted file mode 100644
index 457aa673e0..0000000000
--- a/src/app/layouts/card/card.component.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.card-wrapper {
-    max-width: 320px;
-    min-width: 220px;
-}
diff --git a/src/app/layouts/card/card.component.spec.ts b/src/app/layouts/card/card.component.spec.ts
deleted file mode 100644
index 0afc779056..0000000000
--- a/src/app/layouts/card/card.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
-import { CardComponent } from './card.component';
-
-describe('CardComponent', () => {
-  let component: CardComponent;
-  let fixture: ComponentFixture<CardComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-    imports: [CardComponent]
-})
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(CardComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/layouts/card/card.component.ts b/src/app/layouts/card/card.component.ts
deleted file mode 100644
index d6eb777150..0000000000
--- a/src/app/layouts/card/card.component.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Component } from '@angular/core';
-import { Card } from './card.blueprint';
-import { IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card';
-import { IgxButtonDirective, IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
-import { IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group';
-import { IgxIconComponent } from 'igniteui-angular/icon';
-
-
-@Component({
-    selector: 'app-card',
-    styleUrls: ['./card.component.scss'],
-    templateUrl: './card.component.html',
-    imports: [IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxButtonDirective, IgxRippleDirective, IgxPrefixDirective, IgxIconButtonDirective, IgxSuffixDirective, IgxIconComponent]
-})
-export class CardComponent {
-    public card = new Card({
-        buttons: ['read more'],
-        content: `New York City comprises 5 boroughs sitting where the
-                  Hudson River meets the Atlantic Ocean. At its core is Manhattan,
-                  a densely populated borough that's among the world's major commercial,
-                  financial and cultural centers.`,
-        icons: ['favorite', 'share'],
-        imageUrl: 'assets/images/card/media/ny.jpg',
-        subtitle: 'City in New York',
-        title: 'New York City'
-    });
-}
diff --git a/src/app/layouts/layouts-routes-data.ts b/src/app/layouts/layouts-routes-data.ts
index cb49866c68..9151131cb2 100644
--- a/src/app/layouts/layouts-routes-data.ts
+++ b/src/app/layouts/layouts-routes-data.ts
@@ -79,13 +79,12 @@ export const layoutsRoutesData = {
     'tabs-tailwind-style': { displayName: 'Tabs Tailwind Styling', parentName: 'Tabs' },
     'tabs-alignment': { displayName: 'Tabs Alignment', parentName: 'Tabs' },
     'tabs-header-prefix-suffix': { displayName: 'Tabs Prefix/Suffix', parentName: 'Tabs' },
-    'card-sample-0': { displayName: 'Elevated Card', parentName: 'Card' },
-    'card-sample-1': { displayName: 'Outlined Card', parentName: 'Card' },
-    'card-sample-2': { displayName: 'Horizontal Card', parentName: 'Card' },
-    'card-sample-3': { displayName: 'Horizontal Card Alt', parentName: 'Card' },
-    'card-sample-4': { displayName: 'Other Examples', parentName: 'Card' },
-    'card-styling-sample': { displayName: 'Styled Card', parentName: 'Card' },
-    'card-tailwind-styling-sample': { displayName: 'Tailwind Styled Card', parentName: 'Card' },
+    'card-overview': { displayName: 'Overview', parentName: 'Card' },
+    'card-actions': { displayName: 'Card Actions', parentName: 'Card' },
+    'card-media': { displayName: 'Card Media', parentName: 'Card' },
+    'card-position': { displayName: 'Card Media Position', parentName: 'Card' },
+    'card-styling': { displayName: 'Card Styling', parentName: 'Card' },
+    'card-tailwind-styling': { displayName: 'Card Tailwind Styling', parentName: 'Card' },
     'divider-sample-1': { displayName: 'Default Divider', parentName: 'Divider' },
     'divider-sample-2': { displayName: 'Vertical Divider', parentName: 'Divider' },
     'divider-sample-3': { displayName: 'Dashed Divider', parentName: 'Divider' },
diff --git a/src/app/layouts/layouts.routes.ts b/src/app/layouts/layouts.routes.ts
index ff1087244c..28116ae86f 100644
--- a/src/app/layouts/layouts.routes.ts
+++ b/src/app/layouts/layouts.routes.ts
@@ -14,13 +14,12 @@ import { BreadcrumbsTailwindStylingComponent } from './breadcrumbs/breadcrumbs-t
 import { BreadcrumbsWrappingComponent } from './breadcrumbs/breadcrumbs-wrapping/breadcrumbs-wrapping.component';
 import { BreadcrumbsSizesComponent } from './breadcrumbs/breadcrumbs-sizes/breadcrumbs-sizes.component';
 import { BreadcrumbsStatesComponent } from './breadcrumbs/breadcrumbs-states/breadcrumbs-states.component';
-import { CardSample1Component } from './card/card-sample-1/card-sample-1.component';
-import { CardSample2Component } from './card/card-sample-2/card-sample-2.component';
-import { CardSample3Component } from './card/card-sample-3/card-sample-3.component';
-import { CardSample4Component } from './card/card-sample-4/card-sample-4.component';
-import { CardStylingSampleComponent } from './card/card-styling-sample/card-styling-sample.component';
-import { CardTailwindStylingSampleComponent } from './card/card-tailwind-styling-sample/card-tailwind-styling-sample.component';
-import { CardComponent } from './card/card.component';
+import { CardActionsComponent } from './card/card-actions/card-actions.component';
+import { CardMediaComponent } from './card/card-media/card-media.component';
+import { CardOverviewComponent } from './card/card-overview/card-overview.component';
+import { CardPositionComponent } from './card/card-position/card-position.component';
+import { CardStylingComponent } from './card/card-styling/card-styling.component';
+import { CardTailwindStylingComponent } from './card/card-tailwind-styling/card-tailwind-styling.component';
 import {
     CarouselAnimationsSampleComponent
 } from './carousel/carousel-animations-sample/carousel-animations-sample.component';
@@ -542,39 +541,34 @@ export const LayoutsRoutes: Routes = [
         path: 'tabs-header-prefix-suffix'
     },
     {
-        component: CardComponent,
-        data: layoutsRoutesData['card-sample-0'],
-        path: 'card-sample-0'
+        component: CardOverviewComponent,
+        data: layoutsRoutesData['card-overview'],
+        path: 'card-overview'
     },
     {
-        component: CardSample1Component,
-        data: layoutsRoutesData['card-sample-1'],
-        path: 'card-sample-1'
+        component: CardActionsComponent,
+        data: layoutsRoutesData['card-actions'],
+        path: 'card-actions'
     },
     {
-        component: CardSample2Component,
-        data: layoutsRoutesData['card-sample-2'],
-        path: 'card-sample-2'
+        component: CardMediaComponent,
+        data: layoutsRoutesData['card-media'],
+        path: 'card-media'
     },
     {
-        component: CardSample3Component,
-        data: layoutsRoutesData['card-sample-3'],
-        path: 'card-sample-3'
+        component: CardPositionComponent,
+        data: layoutsRoutesData['card-position'],
+        path: 'card-position'
     },
     {
-        component: CardSample4Component,
-        data: layoutsRoutesData['card-sample-4'],
-        path: 'card-sample-4'
+        component: CardStylingComponent,
+        data: layoutsRoutesData['card-styling'],
+        path: 'card-styling'
     },
     {
-        component: CardStylingSampleComponent,
-        data: layoutsRoutesData['card-styling-sample'],
-        path: 'card-styling-sample'
-    },
-    {
-        component: CardTailwindStylingSampleComponent,
-        data: layoutsRoutesData['card-tailwind-styling-sample'],
-        path: 'card-tailwind-styling-sample'
+        component: CardTailwindStylingComponent,
+        data: layoutsRoutesData['card-tailwind-styling'],
+        path: 'card-tailwind-styling'
     },
     {
         component: TileManagerComponent,