refactor(card): update the sample

Author: desig9stein

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,26 @@ <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': null">
                     @for(icon of cards[1].icons; track icon) {
                     <button
                         igxIconButton="flat"
@@ -95,10 +93,8 @@ <h5 igxCardHeaderSubtitle>{{cards[1].subtitle}}</h5>
                 </igx-card-media>
                 }
             </igx-card>
-        </article>
 
-        <article class="card">
-            <igx-card>
+        <igx-card>
                 @if(!properties.hideHeader) {
                     <igx-card-header>
                         @if(!hideTitle) {
@@ -118,7 +114,7 @@ <h5 igxCardHeaderSubtitle>{{cards[1].subtitle}}</h5>
                 <igx-divider type="dashed" [middle]="true"></igx-divider>
 
                 @if(!properties.hideActions) {
-                <igx-card-actions layout="justify">
+                <igx-card-actions [layout]="properties.justifyActions? 'justify': null">
                     @for(icon of cards[1].icons; track icon) {
                     <button
                         igxIconButton="flat"
@@ -131,11 +127,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;
@@ -175,16 +169,14 @@ <h5 igxCardHeaderSubtitle>{{ cards[2].subtitle }}</h5>
                 </igx-card-media>
                 }
             </igx-card>
-        </article>
         <!--Melo Di Card Ends-->
     </article>
 
     <article class="wc-cards">
         <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) {
@@ -234,11 +226,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) {
@@ -273,10 +263,8 @@ <h2 class="sample-title">WC Card</h2>
                 </igc-card-media>
                 }
             </igc-card>
-        </article>
 
-        <article class="card">
-            <igc-card>
+        <igc-card>
                 <div style="
                 display: flex;
                 ">
@@ -319,11 +307,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;
@@ -364,7 +350,6 @@ <h2 class="sample-title">WC Card</h2>
                     </igc-card-media>
                 }
             </igc-card>
-        </article>
         <!--Melo Di Card Ends-->
     </article>