diff --git a/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss
index 5325f0e38ae..3fec8e354ca 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss
@@ -114,8 +114,6 @@
     $not-material-theme: $variant != 'material';
 
     $card-heading-padding: rem(16px, 16px);
-    $card-content-padding: rem(16px);
-    $card-actions-padding: rem(8px);
 
     $card-tgroup-margin: 0 em(16px);
 
@@ -159,7 +157,7 @@
     %igx-card-header {
         display: flex;
         flex-flow: row wrap;
-        align-content: flex-start;
+        align-items: center;
         width: 100%;
         padding: $card-heading-padding;
         color: var-get($theme, 'header-text-color');
@@ -168,10 +166,6 @@
             display: block;
             padding: 0;
         }
-
-        @if $variant == 'fluent' {
-            padding: rem(16px) rem(8px);
-        }
     }
 
     %igx-card-header--vertical {
@@ -195,7 +189,6 @@
     }
 
     %igx-card-header-thumbnail {
-        align-self: flex-start;
         margin-inline-end: rem(16px);
 
         @if $variant == 'indigo' {
@@ -235,7 +228,7 @@
     %igx-card-content {
         display: block;
         width: 100%;
-        padding: $card-content-padding;
+        padding: rem(16px);
         color: var-get($theme, 'content-text-color');
         overflow: auto;
     }
@@ -259,6 +252,14 @@
     }
 
     %igx-card-actions {
+        $card-actions-padding: map.get((
+            'material': rem(8px) rem(16px),
+            'fluent': rem(8px) rem(16px),
+            'bootstrap': rem(16px),
+            'indigo': rem(16px),
+        ), $variant);
+
+
         display: flex;
         flex-flow: row wrap;
         justify-content: space-between;
@@ -283,29 +284,26 @@
 
     @if $variant == 'bootstrap' {
         %igx-card-content {
-            @if $variant == 'bootstrap' {
-                padding-block: rem(16px) rem(24px);
-                padding-inline: rem(24px);
-            }
-        }
-
-        %igx-card-actions {
-            padding: rem(16px);
+            padding-block-end: rem(24px);
         }
     }
 
     @if $variant == 'indigo' {
-        %igx-card-content,
-        %igx-card-actions {
-            padding: rem(16px);
+        %igx-card-content {
+            padding-block-end: rem(8px);
+        }
+
+        %igx-card-content:last-child {
+            padding-block-end: rem(16px);
         }
 
-        %igx-card-content + %igx-card-actions {
-            padding-block-start: rem(8px);
+        %igx-card-header {
+            padding-block-end: 0;
         }
 
-        %igx-card-header + %igx-card-content {
-            padding-block-start: 0;
+        %igx-card-header:last-child,
+        %igx-card-header:first-child {
+            padding-block-end: rem(16px);
         }
     }
 
diff --git a/src/app/card/card.sample.html b/src/app/card/card.sample.html
index 9cf9441a603..2ed8ed22b4b 100644
--- a/src/app/card/card.sample.html
+++ b/src/app/card/card.sample.html
@@ -3,8 +3,7 @@
         <h2 class="sample-title">Angular Card</h2>
 
         <!--New York City Card Begins-->
-        <article class="card">
-            <igx-card class="my-cool-card">
+        <igx-card class="my-cool-card">
                 @for(section of sectionOrder; track section) {
                 <ng-container>
                     @if(section === 'media' && !properties.hideMedia) {
@@ -33,27 +32,27 @@ <h2 igxCardHeaderSubtitle>{{ cards[0].subtitle }}</h2>
                     @if(section === 'actions' && !properties.hideActions) {
                     <igx-card-actions>
                         <button igxButton igxRipple>Read More</button>
+
                         @for(icon of cards[0].icons; track icon) {
-                        <span
-                            igxIconButton="flat"
-                            igxRipple
-                            [igxRippleCentered]="true"
-                        >
-                            <igx-icon>{{icon}}</igx-icon>
-                        </span>
+                            <span
+                                igxIconButton="flat"
+                                igxRipple
+                                [igxRippleCentered]="true"
+                            >
+                                <igx-icon>{{icon}}</igx-icon>
+                            </span>
                         }
                     </igx-card-actions>
                     }
                 </ng-container>
                 }
             </igx-card>
-        </article>
         <!--New York City Card End-->
 
-        <article class="card">
-            <igx-card [horizontal]="true">
+        <igx-card [horizontal]="true">
                 @if(!properties.hideActions) {
-                <igx-card-actions layout="justify">
+
+                <igx-card-actions [layout]="properties.justifyActions ? 'justify' : 'cantHandleNull'">
                     @for(icon of cards[1].icons; track icon) {
                     <button
                         igxIconButton="flat"
@@ -95,28 +94,28 @@ <h5 igxCardHeaderSubtitle>{{cards[1].subtitle}}</h5>
                 </igx-card-media>
                 }
             </igx-card>
-        </article>
 
-        <article class="card">
-            <igx-card>
-                <igx-card-header>
-                    @if(!properties.hideHeader && !hideTitle) {
-                    <h5 igxCardHeaderTitle>{{cards[1].title}}</h5>
-                    }
-                    @if(!properties.hideHeader && !hideSubtitle) {
-                    <h5 igxCardHeaderSubtitle>{{cards[1].subtitle}}</h5>
-                    }
-                    @if(!properties.hideMedia) {
-                    <igx-card-media width="62px" height="62px">
-                        <img [src]="cards[1].imageUrl" />
-                    </igx-card-media>
-                    }
-                </igx-card-header>
+        <igx-card>
+                @if(!properties.hideHeader) {
+                    <igx-card-header>
+                        @if(!hideTitle) {
+                        <h5 igxCardHeaderTitle>{{cards[1].title}}</h5>
+                        }
+                        @if(!hideSubtitle) {
+                        <h5 igxCardHeaderSubtitle>{{cards[1].subtitle}}</h5>
+                        }
+                        @if(!properties.hideMedia) {
+                        <igx-card-media width="62px" height="62px">
+                            <img [src]="cards[1].imageUrl" />
+                        </igx-card-media>
+                        }
+                    </igx-card-header>
+                }
 
                 <igx-divider type="dashed" [middle]="true"></igx-divider>
 
                 @if(!properties.hideActions) {
-                <igx-card-actions layout="justify">
+                <igx-card-actions [layout]="properties.justifyActions? 'justify': 'cantHandleNull'">
                     @for(icon of cards[1].icons; track icon) {
                     <button
                         igxIconButton="flat"
@@ -129,11 +128,9 @@ <h5 igxCardHeaderSubtitle>{{cards[1].subtitle}}</h5>
                 </igx-card-actions>
                 }
             </igx-card>
-        </article>
 
         <!--Melo Di Card Begins-->
-        <article class="card">
-            <igx-card [horizontal]="true">
+        <igx-card [horizontal]="true">
                 <div
                     style="
                         display: flex;
@@ -141,24 +138,38 @@ <h5 igxCardHeaderSubtitle>{{cards[1].subtitle}}</h5>
                         flex: 1 1 auto;
                     "
                 >
-                    <igx-card-header>
-                        <igx-avatar [src]="cards[2].avatarUrl"></igx-avatar>
-                        <h3 igxCardHeaderTitle>{{ cards[2].title }}</h3>
-                        <h5 igxCardHeaderSubtitle>{{ cards[2].subtitle }}</h5>
-                    </igx-card-header>
 
-                    <igx-card-actions [vertical]="false">
-                        @for(button of cards[2].buttons; track button){
-                        <button igxButton igxRipple>{{ button }}</button>
-                        }
-                    </igx-card-actions>
+                    @if(!properties.hideHeader) {
+                        <igx-card-header>
+                            @if(!hideThumbnail) {
+                                <igx-avatar [src]="cards[2].avatarUrl"></igx-avatar>
+                            }
+
+                            @if(!hideTitle) {
+                                <h3 igxCardHeaderTitle>{{ cards[2].title }}</h3>
+                            }
+
+                            @if(!hideSubtitle) {
+                                <h5 igxCardHeaderSubtitle>{{ cards[2].subtitle }}</h5>
+                            }
+                        </igx-card-header>
+                    }
+
+                    @if(!properties.hideActions) {
+                        <igx-card-actions [vertical]="false">
+                            @for(button of cards[2].buttons; track button){
+                                <button igxButton igxRipple>{{ button }}</button>
+                            }
+                        </igx-card-actions>
+                    }
                 </div>
 
-                <igx-card-media width="86px" height="132px">
+                @if(!properties.hideMedia) {
+                <igx-card-media width="86px">
                     <img [src]="cards[2].imageUrl" />
                 </igx-card-media>
+                }
             </igx-card>
-        </article>
         <!--Melo Di Card Ends-->
     </article>
 
@@ -166,8 +177,7 @@ <h5 igxCardHeaderSubtitle>{{ cards[2].subtitle }}</h5>
         <h2 class="sample-title">WC Card</h2>
 
         <!--New York City Card Begins-->
-        <article class="card">
-            <igc-card>
+        <igc-card>
                 @for(section of sectionOrder; track section) {
                 <ng-container>
                     @if(section === 'media' && !properties.hideMedia) {
@@ -217,11 +227,9 @@ <h2 class="sample-title">WC Card</h2>
                 </ng-container>
                 }
             </igc-card>
-        </article>
         <!--New York City Card End-->
 
-        <article class="card">
-            <igc-card style="flex-direction: row">
+        <igc-card style="flex-direction: row">
                 @if(!properties.hideActions) {
                 <igc-card-actions orientation="vertical">
                     @for(icon of cards[1].icons; track icon) {
@@ -256,30 +264,38 @@ <h2 class="sample-title">WC Card</h2>
                 </igc-card-media>
                 }
             </igc-card>
-        </article>
-
-        <article class="card">
-            <igc-card>
-                <igc-card-header style="flex-direction: row">
-                    @if(!properties.hideMedia) {
-                    <igc-card-media
-                        slot="thumbnail"
-                        style="width: 62px; height: 62px"
-                    >
-                        <img [src]="cards[1].imageUrl" />
-                    </igc-card-media>
-                    }
-                    @if(!properties.hideHeader) { @if(!hideTitle) {
-                    <span slot="title">{{cards[1].title}}</span>
-                    }
-                    @if(!hideSubtitle) {
-                    <span slot="subtitle">{{cards[1].subtitle}}</span>
+
+        <igc-card>
+                <div style="
+                display: flex;
+                ">
+                    @if(!properties.hideHeader) {
+                        <igc-card-header>
+                            @if(!properties.hideMedia) {
+                                <div slot="thumbnail">
+                                    <igc-card-media
+                                            slot="thumbnail"
+                                            style="width: 62px; height: 62px"
+                                    >
+                                        <img [src]="cards[1].imageUrl" />
+                                    </igc-card-media>
+                                </div>
+                            }
+
+                            @if(!properties.hideHeader) { @if(!hideTitle) {
+                                <span slot="title">{{cards[1].title}}</span>
+                            }
+                                @if(!hideSubtitle) {
+                                    <span slot="subtitle">{{cards[1].subtitle}}</span>
+                                }
+                            }
+                        </igc-card-header>
                     }
-                }
-                </igc-card-header>
+                </div>
+
 
                 @if(!properties.hideActions) {
-                <igc-card-actions>
+                    <igc-card-actions>
                     @for(icon of cards[1].icons; track icon) {
                     <button
                         igxIconButton="flat"
@@ -292,11 +308,9 @@ <h2 class="sample-title">WC Card</h2>
                 </igc-card-actions>
                 }
             </igc-card>
-        </article>
 
         <!--Melo Di Card Begins-->
-        <article class="card">
-            <igc-card style="flex-direction: row">
+        <igc-card style="flex-direction: row">
                 <div
                     style="
                         display: flex;
@@ -304,27 +318,39 @@ <h2 class="sample-title">WC Card</h2>
                         flex: 1 1 auto;
                     "
                 >
-                    <igc-card-header>
-                        <igc-avatar
-                            slot="thumbnail"
-                            [src]="cards[2].avatarUrl"
-                        ></igc-avatar>
-                        <span slot="title">{{ cards[2].title }}</span>
-                        <span slot="subtitle">{{ cards[2].subtitle }}</span>
-                    </igc-card-header>
+                    @if(!properties.hideHeader) {
+                        <igc-card-header>
+                            @if(!hideThumbnail) {
+                                <igc-avatar
+                                    slot="thumbnail"
+                                    [src]="cards[2].avatarUrl"
+                                ></igc-avatar>
+                            }
+                            @if(!hideTitle) {
+                            <span slot="title">{{ cards[2].title }}</span>
+                            }
 
-                    <igc-card-actions>
+                            @if(!hideSubtitle) {
+                            <span slot="subtitle">{{ cards[2].subtitle }}</span>
+                            }
+                        </igc-card-header>
+                    }
+
+                    @if(!properties.hideActions) {
+                        <igc-card-actions>
                         @for(button of cards[2].buttons; track button){
                         <igc-button variant="flat">{{ button }}</igc-button>
                         }
                     </igc-card-actions>
+                    }
                 </div>
 
-                <igc-card-media style="width: 86px; height: 132px">
-                    <img [src]="cards[2].imageUrl" />
-                </igc-card-media>
+                @if(!properties.hideMedia) {
+                    <igc-card-media style="width: 86px">
+                        <img [src]="cards[2].imageUrl" />
+                    </igc-card-media>
+                }
             </igc-card>
-        </article>
         <!--Melo Di Card Ends-->
     </article>
 
diff --git a/src/app/card/card.sample.scss b/src/app/card/card.sample.scss
index d16b00ad973..20d5693a185 100644
--- a/src/app/card/card.sample.scss
+++ b/src/app/card/card.sample.scss
@@ -1,29 +1,42 @@
 .cards-wrapper {
     display: grid;
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, minmax(340px, 1fr));
     justify-items: center;
     padding-block-start: 2rem;
+    gap: 1rem;
 }
 
-.angular-cards, .wc-cards {
-    justify-items: center;
+.angular-cards,
+.wc-cards {
     display: grid;
-    grid-auto-flow: row;
-    grid-template-rows: subgrid;
-    grid-row: span 5;
     gap: 1rem;
+    grid-row: 1;
 }
 
-.card {
-    min-width: 320px;
-    max-width: 320px;
 
-    h4 {
-        margin-bottom: 1rem;
-    }
+.angular-cards:dir(rtl) {
+    grid-column: 2;
+}
+
+.wc-cards:dir(rtl) {
+    grid-column: 1;
 }
 
+
 .custom-controls {
     display: grid;
     gap: 1rem;
 }
+
+#igniteui-demo-app .sample-title {
+    margin-bottom: 0;
+    justify-self: center;
+}
+
+#igniteui-demo-app .sample-wrapper {
+    height: auto;
+}
+
+#igniteui-demo-app .content {
+    padding-bottom: 1rem;
+}
diff --git a/src/app/card/card.sample.ts b/src/app/card/card.sample.ts
index b544e8d3f23..629acf4db5c 100644
--- a/src/app/card/card.sample.ts
+++ b/src/app/card/card.sample.ts
@@ -152,6 +152,13 @@ export class CardSampleComponent implements OnInit {
                 defaultValue: false
             }
         },
+        justifyActions: {
+            label: 'Justify actions(Angular Only)',
+            control: {
+                type: 'boolean',
+                defaultValue: true
+            }
+        },
     };
 
     public properties: Properties;