diff --git a/samples/grids/list/add-list-items/index.html b/samples/grids/list/add-list-items/index.html
index 93e8fcc57a..5fa7939945 100644
--- a/samples/grids/list/add-list-items/index.html
+++ b/samples/grids/list/add-list-items/index.html
@@ -17,13 +17,13 @@
         <igc-list id="list">
           <igc-list-header>Header</igc-list-header>
           <igc-list-item>
-            <h2 slot="title">Item 1</h2>
+            <span slot="title">Item 1</span>
           </igc-list-item>
           <igc-list-item>
-            <h2 slot="title">Item 2</h2>
+            <span slot="title">Item 2</span>
           </igc-list-item>
           <igc-list-item>
-            <h2 slot="title">Item 3</h2>
+            <span slot="title">Item 3</span>
           </igc-list-item>
         </igc-list>
       </div>
diff --git a/samples/grids/list/list-item-content/index.html b/samples/grids/list/list-item-content/index.html
index 2334798e82..17a06007f7 100644
--- a/samples/grids/list/list-item-content/index.html
+++ b/samples/grids/list/list-item-content/index.html
@@ -19,15 +19,15 @@
               <h1>Contacts</h1>
           </igc-list-header>
           <igc-list-item>
-              <h2 slot="title">Terrance Orta</h2>
+              <span slot="title">Terrance Orta</span>
               <span slot="subtitle">770-504-2217</span>
           </igc-list-item>
           <igc-list-item>
-            <h2 slot="title">Richard Mahoney</h2>
+            <span slot="title">Richard Mahoney</span>
             <span slot="subtitle">423-676-2869</span>
           </igc-list-item>
           <igc-list-item>
-            <h2 slot="title">Donna Price</h2>
+            <span slot="title">Donna Price</span>
             <span slot="subtitle">859-496-2817</span>
           </igc-list-item>
         </igc-list>
diff --git a/samples/grids/list/overview/index.html b/samples/grids/list/overview/index.html
index 79b94268a7..2694691027 100644
--- a/samples/grids/list/overview/index.html
+++ b/samples/grids/list/overview/index.html
@@ -23,7 +23,7 @@ <h1>Contacts</h1>
           </igc-list-header>
           <igc-list-item>
             <igc-avatar slot="start" src="https://dl.infragistics.com/x/img/avatars/8.jpg" shape="circle">AA</igc-avatar>
-            <h2 slot="title">Terrance Orta</h2>
+            <span slot="title">Terrance Orta</span>
             <span slot="subtitle">770-504-2217</span>
             <igc-button slot="end" variant="outlined">
               Text
@@ -34,7 +34,7 @@ <h2 slot="title">Terrance Orta</h2>
           </igc-list-item>
           <igc-list-item>
             <igc-avatar slot="start" src="https://dl.infragistics.com/x/img/avatars/17.jpg" shape="circle">AA</igc-avatar>
-            <h2 slot="title">Richard Mahoney</h2>
+            <span slot="title">Richard Mahoney</span>
             <span slot="subtitle">423-676-2869</span>
             <igc-button slot="end" variant="outlined">
               Text
@@ -45,7 +45,7 @@ <h2 slot="title">Richard Mahoney</h2>
           </igc-list-item>
           <igc-list-item>
             <igc-avatar slot="start" src="https://dl.infragistics.com/x/img/avatars/9.jpg" shape="circle">AA</igc-avatar>
-            <h2 slot="title">Donna Price</h2>
+            <span slot="title">Donna Price</span>
             <span slot="subtitle">859-496-2817</span>
             <igc-button slot="end" variant="outlined">
               Text
diff --git a/samples/grids/list/styling/index.html b/samples/grids/list/styling/index.html
index 00122b1309..261ed0a357 100644
--- a/samples/grids/list/styling/index.html
+++ b/samples/grids/list/styling/index.html
@@ -17,7 +17,7 @@ <h1>Contacts</h1>
           </igc-list-header>
           <igc-list-item>
             <igc-avatar slot="start" src="https://dl.infragistics.com/x/img/avatars/8.jpg" shape="circle">AA</igc-avatar>
-            <h2 slot="title">Terrance Orta</h2>
+            <span slot="title">Terrance Orta</span>
             <span slot="subtitle">770-504-2217</span>
             <igc-button slot="end" variant="contained">
               Text
@@ -28,7 +28,7 @@ <h2 slot="title">Terrance Orta</h2>
           </igc-list-item>
           <igc-list-item>
             <igc-avatar slot="start" src="https://dl.infragistics.com/x/img/avatars/17.jpg" shape="circle">AA</igc-avatar>
-            <h2 slot="title">Richard Mahoney</h2>
+            <span slot="title">Richard Mahoney</span>
             <span slot="subtitle">423-676-2869</span>
             <igc-button slot="end" variant="contained">
               Text
@@ -39,7 +39,7 @@ <h2 slot="title">Richard Mahoney</h2>
           </igc-list-item>
           <igc-list-item>
             <igc-avatar slot="start" src="https://dl.infragistics.com/x/img/avatars/9.jpg" shape="circle">AA</igc-avatar>
-            <h2 slot="title">Donna Price</h2>
+            <span slot="title">Donna Price</span>
             <span slot="subtitle">859-496-2817</span>
             <igc-button slot="end" variant="contained">
               Text
diff --git a/samples/grids/list/styling/src/index.css b/samples/grids/list/styling/src/index.css
deleted file mode 100644
index 1f53b8aa05..0000000000
--- a/samples/grids/list/styling/src/index.css
+++ /dev/null
@@ -1,2 +0,0 @@
-/* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
\ No newline at end of file
diff --git a/samples/inputs/button/contained/src/index.css b/samples/inputs/button/contained/src/index.css
index 1f53b8aa05..019bfa2d76 100644
--- a/samples/inputs/button/contained/src/index.css
+++ b/samples/inputs/button/contained/src/index.css
@@ -1,2 +1,7 @@
 /* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
\ No newline at end of file
+/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
+
+igc-button {
+  width: 40%;
+  margin: auto;
+}
\ No newline at end of file
diff --git a/samples/inputs/button/contained/src/index.ts b/samples/inputs/button/contained/src/index.ts
index 6a3d51409f..d6d12afd4b 100644
--- a/samples/inputs/button/contained/src/index.ts
+++ b/samples/inputs/button/contained/src/index.ts
@@ -1,5 +1,6 @@
 import { defineComponents, IgcButtonComponent } from 'igniteui-webcomponents';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import './index.css';
 
 defineComponents(IgcButtonComponent);
 export class ContainedButton {
diff --git a/samples/inputs/button/download/src/index.css b/samples/inputs/button/download/src/index.css
index 1f53b8aa05..019bfa2d76 100644
--- a/samples/inputs/button/download/src/index.css
+++ b/samples/inputs/button/download/src/index.css
@@ -1,2 +1,7 @@
 /* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
\ No newline at end of file
+/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
+
+igc-button {
+  width: 40%;
+  margin: auto;
+}
\ No newline at end of file
diff --git a/samples/inputs/button/download/src/index.ts b/samples/inputs/button/download/src/index.ts
index 821934404f..101eeeeebd 100644
--- a/samples/inputs/button/download/src/index.ts
+++ b/samples/inputs/button/download/src/index.ts
@@ -1,5 +1,6 @@
 import { defineComponents, IgcButtonComponent } from 'igniteui-webcomponents';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import './index.css';
 
 defineComponents(IgcButtonComponent);
 export class DownloadButton {
diff --git a/samples/inputs/button/fab/src/index.css b/samples/inputs/button/fab/src/index.css
index 1f53b8aa05..019bfa2d76 100644
--- a/samples/inputs/button/fab/src/index.css
+++ b/samples/inputs/button/fab/src/index.css
@@ -1,2 +1,7 @@
 /* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
\ No newline at end of file
+/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
+
+igc-button {
+  width: 40%;
+  margin: auto;
+}
\ No newline at end of file
diff --git a/samples/inputs/button/fab/src/index.ts b/samples/inputs/button/fab/src/index.ts
index cf23119565..6f0f285cbd 100644
--- a/samples/inputs/button/fab/src/index.ts
+++ b/samples/inputs/button/fab/src/index.ts
@@ -1,5 +1,6 @@
 import { defineComponents, IgcButtonComponent } from 'igniteui-webcomponents';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import './index.css';
 
 defineComponents(IgcButtonComponent);
 export class FloatingActionButton {
diff --git a/samples/inputs/button/flat/src/index.css b/samples/inputs/button/flat/src/index.css
index 1f53b8aa05..9263b38c47 100644
--- a/samples/inputs/button/flat/src/index.css
+++ b/samples/inputs/button/flat/src/index.css
@@ -1,2 +1,12 @@
 /* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
\ No newline at end of file
+/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
+
+.container {
+  background: var(--ig-surface-600);
+}
+
+igc-button {
+  width: 40%;
+  margin: auto;
+  background: var(--ig-surface-50);
+}
\ No newline at end of file
diff --git a/samples/inputs/button/flat/src/index.ts b/samples/inputs/button/flat/src/index.ts
index 02cf95142b..b4228cfaf7 100644
--- a/samples/inputs/button/flat/src/index.ts
+++ b/samples/inputs/button/flat/src/index.ts
@@ -1,5 +1,6 @@
 import { defineComponents, IgcButtonComponent } from 'igniteui-webcomponents';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import './index.css';
 
 defineComponents(IgcButtonComponent);
 export class FlatButton {
diff --git a/samples/inputs/button/outlined/src/index.css b/samples/inputs/button/outlined/src/index.css
index 1f53b8aa05..019bfa2d76 100644
--- a/samples/inputs/button/outlined/src/index.css
+++ b/samples/inputs/button/outlined/src/index.css
@@ -1,2 +1,7 @@
 /* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
\ No newline at end of file
+/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
+
+igc-button {
+  width: 40%;
+  margin: auto;
+}
\ No newline at end of file
diff --git a/samples/inputs/button/outlined/src/index.ts b/samples/inputs/button/outlined/src/index.ts
index 0469708cbd..3cc18cc279 100644
--- a/samples/inputs/button/outlined/src/index.ts
+++ b/samples/inputs/button/outlined/src/index.ts
@@ -1,5 +1,6 @@
 import { defineComponents, IgcButtonComponent } from 'igniteui-webcomponents';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import './index.css';
 
 defineComponents(IgcButtonComponent);
 export class OutlinedButton {
diff --git a/samples/inputs/button/overview/src/ButtonOverviewStyle.css b/samples/inputs/button/overview/src/ButtonOverviewStyle.css
index 3897a4b65a..4fd9d4ed39 100644
--- a/samples/inputs/button/overview/src/ButtonOverviewStyle.css
+++ b/samples/inputs/button/overview/src/ButtonOverviewStyle.css
@@ -1,5 +1,6 @@
 .button-container {
     display: flex;
     justify-content: space-evenly;
-    margin-top: 20px;
+    align-items: center;
+    height: 100%;
 }
\ No newline at end of file
diff --git a/samples/inputs/button/overview/src/index.css b/samples/inputs/button/overview/src/index.css
deleted file mode 100644
index 1f53b8aa05..0000000000
--- a/samples/inputs/button/overview/src/index.css
+++ /dev/null
@@ -1,2 +0,0 @@
-/* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
\ No newline at end of file
diff --git a/samples/inputs/button/size/src/ButtonSizingStyle.css b/samples/inputs/button/size/src/ButtonSizingStyle.css
index d43651d735..ebc49a26ee 100644
--- a/samples/inputs/button/size/src/ButtonSizingStyle.css
+++ b/samples/inputs/button/size/src/ButtonSizingStyle.css
@@ -1,11 +1,15 @@
+.container {
+    justify-content: center;
+}
+
 .button-container {
     display: flex;
     justify-content: space-evenly;
+    align-items: center;
     margin-top: 20px;
 }
 
 #radio-group {
     display: flex;
-    margin: 0 auto;
-    width: 15%;
+    justify-content: center;
 }
\ No newline at end of file
diff --git a/samples/inputs/button/size/src/index.ts b/samples/inputs/button/size/src/index.ts
index 5d171b2944..024ee0d96c 100644
--- a/samples/inputs/button/size/src/index.ts
+++ b/samples/inputs/button/size/src/index.ts
@@ -1,6 +1,7 @@
 import { defineComponents, IgcButtonComponent, IgcRadioComponent, IgcRadioGroupComponent } from 'igniteui-webcomponents';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import './ButtonSizingStyle.css';
+import './index.css';
 
 defineComponents(IgcButtonComponent, IgcRadioComponent, IgcRadioGroupComponent);
 export class ButtonSizing {
diff --git a/samples/inputs/button/styling/src/ButtonStyle.css b/samples/inputs/button/styling/src/ButtonStyle.css
index 586cff6be1..6f61c67ccc 100644
--- a/samples/inputs/button/styling/src/ButtonStyle.css
+++ b/samples/inputs/button/styling/src/ButtonStyle.css
@@ -1,5 +1,5 @@
 igc-button::part(base) {
-  background-color: var(--ig-primary-500);
-  color: var(--ig-primary-500-contrast);
+  background-color: var(--ig-warn-700);
+  color: var(--ig-warn-700-contrast);
   padding: 18px;
 }
\ No newline at end of file
diff --git a/samples/inputs/button/styling/src/index.css b/samples/inputs/button/styling/src/index.css
index 1f53b8aa05..019bfa2d76 100644
--- a/samples/inputs/button/styling/src/index.css
+++ b/samples/inputs/button/styling/src/index.css
@@ -1,2 +1,7 @@
 /* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
\ No newline at end of file
+/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
+
+igc-button {
+  width: 40%;
+  margin: auto;
+}
\ No newline at end of file
diff --git a/samples/inputs/button/styling/src/index.ts b/samples/inputs/button/styling/src/index.ts
index ff8102e92d..78abef017a 100644
--- a/samples/inputs/button/styling/src/index.ts
+++ b/samples/inputs/button/styling/src/index.ts
@@ -1,6 +1,7 @@
 import { defineComponents, IgcButtonComponent } from 'igniteui-webcomponents';
 import 'igniteui-webcomponents/themes/light/material.css';
 import './ButtonStyle.css';
+import './index.css';
 
 defineComponents(IgcButtonComponent);
 export class ButtonStyling {
diff --git a/samples/inputs/chip/multiple/index.html b/samples/inputs/chip/multiple/index.html
index 3f948f349d..22ec240087 100644
--- a/samples/inputs/chip/multiple/index.html
+++ b/samples/inputs/chip/multiple/index.html
@@ -16,21 +16,21 @@
   <div id="root">
     <div class="container sample center" style="flex-direction: row; gap: 8px">
       <igc-chip selectable removable>
-        <span slot="select"><igc-icon name="custom-select"></igc-icon></span>
+        <igc-icon slot="select" name="custom-select"></igc-icon>
         Custom Icons
-        <span slot="remove"><igc-icon name="custom-remove"></igc-icon></span>
+        <igc-icon slot="remove" name="custom-remove"></igc-icon>
       </igc-chip>
       <igc-chip removable>
-        <span slot="start"><igc-icon name="brush"></igc-icon></span>
+        <igc-icon slot="start" name="brush"></igc-icon>
         Start Slot
       </igc-chip>
       <igc-chip selectable>
         End Slot
-        <span slot="end"><igc-icon name="brick-wall"></igc-icon></span>
+        <igc-icon slot="end" name="brick-wall"></igc-icon>
       </igc-chip>
       <igc-chip disabled>
         Disabled Chip
-        <span slot="end"><igc-icon name="dog-icon"></igc-icon></span>
+        <igc-icon slot="end" name="dog-icon"></igc-icon>
       </igc-chip>
     </div>
   </div>
diff --git a/samples/inputs/circular-progress-indicator/dynamic/index.html b/samples/inputs/circular-progress-indicator/dynamic/index.html
index 290195bfcf..188a43db03 100644
--- a/samples/inputs/circular-progress-indicator/dynamic/index.html
+++ b/samples/inputs/circular-progress-indicator/dynamic/index.html
@@ -12,18 +12,20 @@
   </head>
 
   <body>
-    <div id="sample-content">
-      <igc-circular-progress id="circularProgress" max="100">
-        <igc-circular-gradient slot="gradient" offset="0%" color="#ff9a40">
-        </igc-circular-gradient>
-        <igc-circular-gradient slot="gradient" offset="50%" color="#1eccd4">
-        </igc-circular-gradient>
-        <igc-circular-gradient slot="gradient" offset="100%" color="#ff0079">
-        </igc-circular-gradient>
-      </igc-circular-progress>
-      <div class="button-container">
-        <igc-icon-button id="removeIcon" name="remove" collection="material"></igc-icon-button>
-        <igc-icon-button id="addIcon" name="add" collection="material"></igc-icon-button>
+    <div id="root">
+      <div id="sample-content">
+        <igc-circular-progress id="circularProgress" max="100">
+          <igc-circular-gradient slot="gradient" offset="0%" color="#ff9a40">
+          </igc-circular-gradient>
+          <igc-circular-gradient slot="gradient" offset="50%" color="#1eccd4">
+          </igc-circular-gradient>
+          <igc-circular-gradient slot="gradient" offset="100%" color="#ff0079">
+          </igc-circular-gradient>
+        </igc-circular-progress>
+        <div class="button-container">
+          <igc-icon-button id="removeIcon" name="remove" collection="material"></igc-icon-button>
+          <igc-icon-button id="addIcon" name="add" collection="material"></igc-icon-button>
+        </div>
       </div>
     </div>
     <!-- This script is needed only for parcel and it will be excluded for webpack -->
diff --git a/samples/inputs/circular-progress-indicator/dynamic/src/DynamicCircularProgressStyle.css b/samples/inputs/circular-progress-indicator/dynamic/src/DynamicCircularProgressStyle.css
index 30a0604769..0bbe6d30b4 100644
--- a/samples/inputs/circular-progress-indicator/dynamic/src/DynamicCircularProgressStyle.css
+++ b/samples/inputs/circular-progress-indicator/dynamic/src/DynamicCircularProgressStyle.css
@@ -2,7 +2,7 @@
     width: 300px;
     display: flex;
     align-items: center;
-    margin-top: 30px;
+    margin-top: 20px;
 }
 
 #circularProgress {
diff --git a/samples/inputs/circular-progress-indicator/dynamic/src/index.css b/samples/inputs/circular-progress-indicator/dynamic/src/index.css
deleted file mode 100644
index 1f53b8aa05..0000000000
--- a/samples/inputs/circular-progress-indicator/dynamic/src/index.css
+++ /dev/null
@@ -1,2 +0,0 @@
-/* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
\ No newline at end of file
diff --git a/samples/inputs/circular-progress-indicator/indeterminate/src/IndeterminateCircularProgressStyle.css b/samples/inputs/circular-progress-indicator/indeterminate/src/IndeterminateCircularProgressStyle.css
index f936ee642f..e8f5ec278c 100644
--- a/samples/inputs/circular-progress-indicator/indeterminate/src/IndeterminateCircularProgressStyle.css
+++ b/samples/inputs/circular-progress-indicator/indeterminate/src/IndeterminateCircularProgressStyle.css
@@ -1,4 +1,8 @@
 #circular-progress {
-    margin: 20px;
-	--diameter: 50px;
+  margin: 20px;
+  --diameter: 50px;
+}
+
+main {
+  margin-top: 20px;
 }
\ No newline at end of file
diff --git a/samples/inputs/circular-progress-indicator/indeterminate/src/index.css b/samples/inputs/circular-progress-indicator/indeterminate/src/index.css
deleted file mode 100644
index 1f53b8aa05..0000000000
--- a/samples/inputs/circular-progress-indicator/indeterminate/src/index.css
+++ /dev/null
@@ -1,2 +0,0 @@
-/* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
\ No newline at end of file
diff --git a/samples/inputs/circular-progress-indicator/simple/src/CircularProgressStyle.css b/samples/inputs/circular-progress-indicator/simple/src/CircularProgressStyle.css
index f8d32cdd35..a39dc534e0 100644
--- a/samples/inputs/circular-progress-indicator/simple/src/CircularProgressStyle.css
+++ b/samples/inputs/circular-progress-indicator/simple/src/CircularProgressStyle.css
@@ -1,4 +1,8 @@
 #circular-progress{
-    margin: 20px;
-    --diameter: 50px;
+  margin: 20px;
+  --diameter: 50px;
+}
+
+main {
+  margin-top: 20px;
 }
\ No newline at end of file
diff --git a/samples/inputs/circular-progress-indicator/simple/src/index.css b/samples/inputs/circular-progress-indicator/simple/src/index.css
deleted file mode 100644
index 1f53b8aa05..0000000000
--- a/samples/inputs/circular-progress-indicator/simple/src/index.css
+++ /dev/null
@@ -1,2 +0,0 @@
-/* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
\ No newline at end of file
diff --git a/samples/inputs/circular-progress-indicator/styling/src/index.css b/samples/inputs/circular-progress-indicator/styling/src/index.css
index 1f53b8aa05..de9f0b3331 100644
--- a/samples/inputs/circular-progress-indicator/styling/src/index.css
+++ b/samples/inputs/circular-progress-indicator/styling/src/index.css
@@ -1,2 +1,6 @@
 /* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
\ No newline at end of file
+/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
+
+main {
+  margin-top: 20px;
+}
\ No newline at end of file
diff --git a/samples/inputs/circular-progress-indicator/styling/src/index.ts b/samples/inputs/circular-progress-indicator/styling/src/index.ts
index d9deac2492..18543e747e 100644
--- a/samples/inputs/circular-progress-indicator/styling/src/index.ts
+++ b/samples/inputs/circular-progress-indicator/styling/src/index.ts
@@ -1,6 +1,7 @@
 import { defineComponents, IgcCircularProgressComponent } from 'igniteui-webcomponents';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import './CircularProgressStyling.css'
+import './index.css';
 
 defineComponents(IgcCircularProgressComponent);
 
diff --git a/samples/inputs/file-input/form/index.html b/samples/inputs/file-input/form/index.html
index 58e2d7e6a1..359d7f6c8b 100644
--- a/samples/inputs/file-input/form/index.html
+++ b/samples/inputs/file-input/form/index.html
@@ -17,8 +17,8 @@
       <form id='form1' enctype="multipart/form-data">
         <fieldset>
           <igc-file-input id="fInput" name="fInput" label="Required field" multiple required>
-            <p slot="helper-text">You can upload any type of file.</p>
-            <p slot="value-missing">You must upload a file</p>
+            <span slot="helper-text">You can upload any type of file.</span>
+            <span slot="value-missing">You must upload a file</span>
           </igc-file-input>
           <igc-button variant="outlined" type="submit">Submit</igc-button>
           <igc-button variant="outlined" type="reset">Reset</igc-button>
diff --git a/samples/inputs/input/size/src/InputSizingStyle.css b/samples/inputs/input/size/src/InputSizingStyle.css
index d43651d735..3aaa382edf 100644
--- a/samples/inputs/input/size/src/InputSizingStyle.css
+++ b/samples/inputs/input/size/src/InputSizingStyle.css
@@ -7,5 +7,4 @@
 #radio-group {
     display: flex;
     margin: 0 auto;
-    width: 15%;
 }
\ No newline at end of file
diff --git a/samples/inputs/rating/custom/src/index.ts b/samples/inputs/rating/custom/src/index.ts
index f9917b40a0..a93f2a2dc4 100644
--- a/samples/inputs/rating/custom/src/index.ts
+++ b/samples/inputs/rating/custom/src/index.ts
@@ -10,7 +10,7 @@ export class CustomRatingSymbol {
         );
         registerIconFromText(
             'empty-heart',
-            '<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" id="svg2" viewBox="0 0 241.59736 220.05746" inkscape:export-xdpi="90" version="1.0" width="100%" height="100%"> <g id="layer1" inkscape:label="Layer 1" inkscape:groupmode="layer" transform="translate(-175.32265,-1696.4765)"> <path style="opacity:0.98000004;fill:none;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" d="m 243.45243,1708.9786 c -26.9341,0.2312 -51.58009,21.4767 -55.08178,48.2939 -3.11346,23.844 7.32949,47.3995 23.96855,64.2142 27.5148,27.8054 61.22631,49.7939 83.44686,82.5473 4.39089,-4.6889 9.27818,-12.0655 14.22742,-17.529 25.22951,-27.8509 58.1653,-48.0133 80.86454,-78.1545 17.17546,-22.8065 19.10279,-58.1138 -0.53802,-80.4051 -18.24975,-20.7125 -51.76012,-25.1712 -74.36972,-9.2543 -8.22594,5.791 -15.27469,13.3707 -19.93251,22.3123 -10.05314,-19.3195 -30.53412,-32.2142 -52.58534,-32.0248 z" id="path3925-8" inkscape:connector-curvature="0" sodipodi:nodetypes="ssscsssscs" /> </g> </svg>'
+            '<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:svg="http://www.w3.org/2000/svg" id="svg1" viewBox="0 0 475.82 442.01" version="1.0"> <g id="layer1" transform="translate(-134.07 -225.8)"> <path id="path7" d="m263.42 235.15c-66.24 0-120 53.76-120 120 0 134.75 135.93 170.08 228.56 303.3 87.57-132.4 228.56-172.85 228.56-303.3 0-66.24-53.76-120-120-120-48.05 0-89.4 28.37-108.56 69.18-19.16-40.81-60.52-69.18-108.56-69.18z" stroke="#000" stroke-width="18.7" fill="white"/> </g> </svg>'
         )
     }
 }
diff --git a/samples/inputs/rating/single-selection/index.html b/samples/inputs/rating/single-selection/index.html
index 72b47efa1c..7288491d05 100644
--- a/samples/inputs/rating/single-selection/index.html
+++ b/samples/inputs/rating/single-selection/index.html
@@ -17,24 +17,24 @@
     <div class="sample center">
       <igc-rating label="Rate Experience" single>
         <igc-rating-symbol>
-          <div>😣</div>
-          <div slot="empty">😣</div>
+          <span>😣</span>
+          <span slot="empty">😣</span>
         </igc-rating-symbol>
         <igc-rating-symbol>
-          <div>😔</div>
-          <div slot="empty">😔</div>
+          <span>😔</span>
+          <span slot="empty">😔</span>
         </igc-rating-symbol>
         <igc-rating-symbol>
-          <div>😐</div>
-          <div slot="empty">😐</div>
+          <span>😐</span>
+          <span slot="empty">😐</span>
         </igc-rating-symbol>
         <igc-rating-symbol>
-          <div>🙂</div>
-          <div slot="empty">🙂</div>
+          <span>🙂</span>
+          <span slot="empty">🙂</span>
         </igc-rating-symbol>
         <igc-rating-symbol>
-          <div>😆</div>
-          <div slot="empty">😆</div>
+          <span>😆</span>
+          <span slot="empty">😆</span>
         </igc-rating-symbol>
       </igc-rating>
     </div>
diff --git a/samples/inputs/select/styling/index.html b/samples/inputs/select/styling/index.html
index da971025d0..d906fd1ab9 100644
--- a/samples/inputs/select/styling/index.html
+++ b/samples/inputs/select/styling/index.html
@@ -23,17 +23,14 @@
             <igc-select-item>
               <igc-icon slot="prefix" name="place" collection="material"></igc-icon>
               Germany
-              <span slot="suffix">DE</span>
             </igc-select-item>
             <igc-select-item>
               <igc-icon slot="prefix" name="place" collection="material"></igc-icon>
               France
-              <span slot="suffix">FR</span>
             </igc-select-item>
             <igc-select-item selected>
               <igc-icon slot="prefix" name="place" collection="material"></igc-icon>
               Spain
-              <span slot="suffix">ES</span>
             </igc-select-item>
           </igc-select-group>
           
@@ -42,17 +39,14 @@
             <igc-select-item>
               <igc-icon slot="prefix" name="place" collection="material"></igc-icon>
               USA
-              <span slot="suffix">US</span>
             </igc-select-item>
             <igc-select-item>
               <igc-icon slot="prefix" name="place" collection="material"></igc-icon>
               Canada
-              <span slot="suffix">CA</span>
             </igc-select-item>
             <igc-select-item>
               <igc-icon slot="prefix" name="place" collection="material"></igc-icon>
               Mexico
-              <span slot="suffix">MX</span>
             </igc-select-item>
           </igc-select-group>
         </igc-select>
diff --git a/samples/inputs/textarea/resize/index.html b/samples/inputs/textarea/resize/index.html
index eae693ed81..84e8a650fb 100644
--- a/samples/inputs/textarea/resize/index.html
+++ b/samples/inputs/textarea/resize/index.html
@@ -15,13 +15,13 @@
         <div id="root">
             <div class="container sample">
                 <igc-textarea label="Resize: none" resize="none">
-                    <p slot="helper-text">This textarea does not resize and uses a scroll bar to show overflow text.</p>
+                    <span slot="helper-text">This textarea does not resize and uses a scroll bar to show overflow text.</span>
                 </igc-textarea>
                 <igc-textarea label="Resize: vertical (default)">
-                    <p slot="helper-text">This textarea lets the user resize vertically.</p>
+                    <span slot="helper-text">This textarea lets the user resize vertically.</span>
                 </igc-textarea>
                 <igc-textarea label="Resize: auto" resize="auto">
-                    <p slot="helper-text">This textarea shows all the user input at once. Overflow text wraps onto a new line and expands the text area.</p>
+                    <span slot="helper-text">This textarea shows all the user input at once. Overflow text wraps onto a new line and expands the text area.</span>
                 </igc-textarea>
             </div>
         </div>
diff --git a/samples/inputs/textarea/slots/index.html b/samples/inputs/textarea/slots/index.html
index 8ca94e380f..12dcf6de77 100644
--- a/samples/inputs/textarea/slots/index.html
+++ b/samples/inputs/textarea/slots/index.html
@@ -16,7 +16,7 @@
             <div class="container sample center">
                 <igc-textarea label="Your feedback">
                     <igc-icon name="feedback" slot="prefix" aria-hidden="true"></igc-icon>
-                    <p slot="helper-text">Give us a short description of what you liked/disliked</p>
+                    <span slot="helper-text">Give us a short description of what you liked/disliked</span>
                 </igc-textarea>
             </div>
         </div>
diff --git a/samples/inputs/textarea/styling/index.html b/samples/inputs/textarea/styling/index.html
index 3fcfda3fe7..83ad157996 100644
--- a/samples/inputs/textarea/styling/index.html
+++ b/samples/inputs/textarea/styling/index.html
@@ -16,7 +16,7 @@
             <div class="container sample center">
                 <igc-textarea label="Steps to reproduce">
                     <igc-icon name="feedback" slot="prefix" aria-hidden="true"></igc-icon>
-                    <p slot="helper-text">Provide a detailed description of the steps that led to the issue you experienced</p>
+                    <span slot="helper-text">Provide a detailed description of the steps that led to the issue you experienced</span>
                 </igc-textarea>
             </div>
         </div>
diff --git a/samples/layouts/accordion/customization/index.html b/samples/layouts/accordion/customization/index.html
index 38459d2582..170640a537 100644
--- a/samples/layouts/accordion/customization/index.html
+++ b/samples/layouts/accordion/customization/index.html
@@ -13,7 +13,7 @@
       <div class="sample-wrapper">
         <igc-accordion id="accordion">
           <igc-expansion-panel>
-            <h1 slot="title" id="categories">Categories</h1>
+            <span slot="title" id="categories">Categories</span>
             <div class="categories-container">
               <igc-checkbox>Bike</igc-checkbox>
               <igc-checkbox>Motorcycle</igc-checkbox>
@@ -23,11 +23,11 @@ <h1 slot="title" id="categories">Categories</h1>
             </div>
           </igc-expansion-panel>
            <igc-expansion-panel>
-            <h1 slot="title">Cost: $<span id="lowerCost">200</span> to $<span id="upperCost">800</span></h1>
+            <span slot="title">Cost: $<span id="lowerCost">200</span> to $<span id="upperCost">800</span></span>
             <igc-range-slider min="0" max="1000" lower="200" upper="800"></igc-range-slider>
           </igc-expansion-panel>
           <igc-expansion-panel>
-            <h1 slot="title" id="rating">Rating</h1>
+            <span slot="title" id="rating">Rating</span>
             <igc-radio-group>
               <igc-radio name="rating">
                 <igc-rating class="size-small" label="1 star or more" max="5" value="1.5" readonly></igc-rating>
@@ -44,7 +44,7 @@ <h1 slot="title" id="rating">Rating</h1>
             </igc-radio-group>
           </igc-expansion-panel>
           <igc-expansion-panel>
-            <h1 slot="title" id="timeTitle">Time</h1>
+            <span slot="title" id="timeTitle">Time</span>
             <igc-date-time-input class="size-small" input-format="hh:mm tt" label="Arrive before">
               <igc-icon name="clock" collection="material" slot="prefix"></igc-icon>
               <igc-icon name="clear" collection="material" slot="suffix"></igc-icon>
diff --git a/samples/layouts/accordion/customization/src/index.ts b/samples/layouts/accordion/customization/src/index.ts
index ea8ab1471c..7c9831c19d 100644
--- a/samples/layouts/accordion/customization/src/index.ts
+++ b/samples/layouts/accordion/customization/src/index.ts
@@ -49,7 +49,7 @@ export class AccordionOverview {
             }
         });
 
-        const categoriesTitle = document.querySelector("h1#categories") as HTMLElement;
+        const categoriesTitle = document.querySelector("span#categories") as HTMLElement;
         categoriesTitle.textContent = checkedItems || "Categories";
     }
 
@@ -63,7 +63,7 @@ export class AccordionOverview {
 
     private checkRating = (ev: CustomEvent) => {
         const rating = (ev.target as IgcRadioComponent).querySelector("igc-rating")!.label;
-        const ratingTitle = document.querySelector("h1#rating") as HTMLElement;
+        const ratingTitle = document.querySelector("span#rating") as HTMLElement;
         ratingTitle.textContent = "Rating: " + rating;
     };
 
@@ -72,13 +72,13 @@ export class AccordionOverview {
         if (!dateTimeInput.value) {
             return;
         }
-        const timeTitle = document.querySelector("h1#timeTitle") as HTMLElement;
+        const timeTitle = document.querySelector("span#timeTitle") as HTMLElement;
         timeTitle.textContent = "Time: " + dateTimeInput.label + " " + dateTimeInput.value.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
     };
 
     private clearTime = () => {
         document.querySelector("igc-date-time-input")!.clear();
-        const timeTitle = document.querySelector("h1#timeTitle") as HTMLElement;
+        const timeTitle = document.querySelector("span#timeTitle") as HTMLElement;
         timeTitle.textContent = "Time";
     };
 
diff --git a/samples/layouts/accordion/nested-scenario/index.html b/samples/layouts/accordion/nested-scenario/index.html
index dd469652fa..e2310b1e29 100644
--- a/samples/layouts/accordion/nested-scenario/index.html
+++ b/samples/layouts/accordion/nested-scenario/index.html
@@ -13,47 +13,21 @@
       <igc-switch id="switch">Single Expand</igc-switch>
       <div class="sample-wrapper">
         <igc-accordion id="accordion">
-          <igc-expansion-panel>
-            <h1 slot="title">What has changed about subscription and pricing model?</h1>
-            <span>We have moved to a subscription-based pricing model for all our developer tools. This makes it easier
-              for you to manage your license subscriptions and allows us to provide a better level of service for you. We
-              updated our pricing and packages to provide you with flexible options and the best value. This includes Ignite UI
-              (formerly Ignite UI for JavaScript) which includes all of our JavaScript framework components for web development,
-              including: Angular, ASP.NET (Core and MVC), Blazor, JQuery, React and Web Components), as well as Infragistics Professional,
-              Infragistics Ultimate, our Ultimate UI products. We also offer multi-year subscriptions options with a built-in discount,
-              so you can see the value up front. With these updates we are confident that we are providing the best platforms and the best
-              price.</span>
-          </igc-expansion-panel>
-          <igc-expansion-panel>
-            <h1 slot="title">Who will the updated changes impact?</h1>
-            <span>The license updates will impact all new and current customers using Ignite UI, Infragistics Professional and
-              Infragistics Ultimate. Specifically, we have also made updates to our product and packaging for Ignite UI for JavaScript,
-              Ignite UI for Angular, Ignite UI for React and Ignite UI for Web components. For more information, please refer to this
-              blog: Announcement: Changes to Ignite UI Product & Packaging The pricing has been updated for all products and packages.
-              So, all new or additional licenses will be sold based on our new pricing and packages. All existing license agreements will
-              be honored and renewed based upon the current agreement.</span>
-          </igc-expansion-panel>
-          <igc-expansion-panel>
-            <h1 slot="title">What is the difference between your old model and your current subscription model for Ignite UI?</h1>
-            <span>For Ignite UI customers, we are moving away from NPM for licensed packages. The current NPM packages will be replaced with
-              packages that include a “Trial Version” watermark. Licensed packages for Ignite UI will be available from our cloud hosted ProGet
-              server. For more information, please refer to this article: Moving from Trial to Licensed Ignite UI NPM Packages</span>
-          </igc-expansion-panel>
-          <igc-expansion-panel>
-            <h1 slot="title">Common questions about renewal.</h1>
+          <igc-expansion-panel open>
+            <span slot="title">Common questions about renewal.</span>
             <igc-accordion>
               <igc-expansion-panel>
-                <h1 slot="title">What happens if I don't renew my subscription?</h1>
+                <span slot="title">What happens if I don't renew my subscription?</span>
                 <span>Any unlicensed or trial versions of Ignite UI for Angular, React and Web Components will now include this watermark.</span>
               </igc-expansion-panel>
               <igc-expansion-panel>
-                <h1 slot="title">If I don't renew my subscription will I still have access to previous versions of Infragistics products?</h1>
+                <span slot="title">If I don't renew my subscription will I still have access to previous versions of Infragistics products?</span>
                 <span>Any version of Infragistics software which you have downloaded can continue to be used perpetually. Access to download any new or
                 previous versions through our customer portal and package feeds will require maintaining an active subscription by continuing
                 to renew it.</span>
               </igc-expansion-panel>
               <igc-expansion-panel>
-                <h1 slot="title">Will I be automatically charged for my renewal/ Can I be automatically charged for renewal?</h1>
+                <span slot="title">Will I be automatically charged for my renewal/ Can I be automatically charged for renewal?</span>
                 <span>Any new subscriptions purchased online, via our eCommerce system, will renew automatically. Subscription renewal can be canceled,
                    at any time, before the next automatic renewal date. Subscriptions purchased directly from Infragistics or Infragistics' partners are 
                    subject to the renewal terms that were agreed upon as part of that purchase.</span>
@@ -61,26 +35,24 @@ <h1 slot="title">Will I be automatically charged for my renewal/ Can I be automa
             </igc-accordion>
           </igc-expansion-panel>
           <igc-expansion-panel>
-            <h1 slot="title">I split my work across two computers. Can I install on both using my single-user license?</h1>
-            <span>The Infragistics Ultimate license is tied to the user, and not the computer. That means you're welcome to install and use Ignite UI, 
-              Infragistics Professional, and Infragistics Ultimate on any computer you use. However, if we notice a large number of activations using the 
-              same license, we may contact you to verify this behavior.</span>
+            <span slot="title">What has changed about subscription and pricing model?</span>
+            <span>We have moved to a subscription-based pricing model for all our developer tools. This makes it easier
+              for you to manage your license subscriptions and allows us to provide a better level of service for you. We
+              updated our pricing and packages to provide you with flexible options and the best value. This includes Ignite UI
+              (formerly Ignite UI for JavaScript) which includes all of our JavaScript framework components for web development,
+              including: Angular, ASP.NET (Core and MVC), Blazor, JQuery, React and Web Components), as well as Infragistics Professional,
+              Infragistics Ultimate, our Ultimate UI products. We also offer multi-year subscriptions options with a built-in discount,
+              so you can see the value up front. With these updates we are confident that we are providing the best platforms and the best
+              price.</span>
           </igc-expansion-panel>
           <igc-expansion-panel>
-            <h1 slot="title">I used up my trial for an earlier version of Infragistics Ultimate. Can I start a new trial when a major version is released?</h1>
-            <span>Yes! If you have tried a previous version in the past, and used up your 30-day trial, you can try the next major version for another 30 days!
-              You can do this in the following two ways:
-              <ul>
-                <li>If you have days remaining in your 30-day trial period for the current version (e.g., the
-                    Version 15.1 Volume Release), use the Check for Update option inside the Platform Installer or
-                    your account. You will be able to start a fresh trial for the next major version (e.g., 20.1
-                    Volume Release)</li>
-                <li>If you have used up the 30-day trial for the previous major version (e.g., the 19.2 Volume
-                    Release), simply download and install Infragistics Ultimate from our <a
-                    href="https://www.infragistics.com/products/ultimate">website</a> (This will also allow you
-                    to start a new trial.)</li>
-              </ul>
-            </span>
+            <span slot="title">Who will the updated changes impact?</span>
+            <span>The license updates will impact all new and current customers using Ignite UI, Infragistics Professional and
+              Infragistics Ultimate. Specifically, we have also made updates to our product and packaging for Ignite UI for JavaScript,
+              Ignite UI for Angular, Ignite UI for React and Ignite UI for Web components. For more information, please refer to this
+              blog: Announcement: Changes to Ignite UI Product & Packaging The pricing has been updated for all products and packages.
+              So, all new or additional licenses will be sold based on our new pricing and packages. All existing license agreements will
+              be honored and renewed based upon the current agreement.</span>
           </igc-expansion-panel>
         </igc-accordion>
       </div>
diff --git a/samples/layouts/accordion/overview/index.html b/samples/layouts/accordion/overview/index.html
index 071230163d..ecadd4543b 100644
--- a/samples/layouts/accordion/overview/index.html
+++ b/samples/layouts/accordion/overview/index.html
@@ -14,7 +14,7 @@
       <div class="sample-wrapper">
         <igc-accordion id="accordion">
           <igc-expansion-panel>
-            <h1 slot="title">What has changed about subscription and pricing model?</h1>
+            <span slot="title">What has changed about subscription and pricing model?</span>
             <span>We have moved to a subscription-based pricing model for all our developer tools. This makes it easier
               for you to manage your license subscriptions and allows us to provide a better level of service for you. We
               updated our pricing and packages to provide you with flexible options and the best value. This includes Ignite UI
@@ -25,7 +25,7 @@ <h1 slot="title">What has changed about subscription and pricing model?</h1>
               price.</span>
           </igc-expansion-panel>
           <igc-expansion-panel>
-            <h1 slot="title">Who will the updated changes impact?</h1>
+            <span slot="title">Who will the updated changes impact?</span>
             <span>The license updates will impact all new and current customers using Ignite UI, Infragistics Professional and
               Infragistics Ultimate. Specifically, we have also made updates to our product and packaging for Ignite UI for JavaScript,
               Ignite UI for Angular, Ignite UI for React and Ignite UI for Web components. For more information, please refer to this
@@ -34,17 +34,17 @@ <h1 slot="title">Who will the updated changes impact?</h1>
               be honored and renewed based upon the current agreement.</span>
           </igc-expansion-panel>
           <igc-expansion-panel>
-            <h1 slot="title">What is the difference between your old model and your current subscription model for Ignite UI?</h1>
+            <span slot="title">What is the difference between your old model and your current subscription model for Ignite UI?</span>
             <span>For Ignite UI customers, we are moving away from NPM for licensed packages. The current NPM packages will be replaced with
               packages that include a “Trial Version” watermark. Licensed packages for Ignite UI will be available from our cloud hosted ProGet
               server. For more information, please refer to this article: Moving from Trial to Licensed Ignite UI NPM Packages</span>
           </igc-expansion-panel>
           <igc-expansion-panel>
-            <h1 slot="title">What happens if I don't renew my subscription?</h1>
+            <span slot="title">What happens if I don't renew my subscription?</span>
             <span>Any unlicensed or trial versions of Ignite UI for Angular, React and Web Components will now include this watermark.</span>
           </igc-expansion-panel>
           <igc-expansion-panel>
-            <h1 slot="title">If I don't renew my subscription will I still have access to previous versions of Infragistics products?</h1>
+            <span slot="title">If I don't renew my subscription will I still have access to previous versions of Infragistics products?</span>
             <span>Any version of Infragistics software which you have downloaded can continue to be used perpetually. Access to download any new or
             previous versions through our customer portal and package feeds will require maintaining an active subscription by continuing
             to renew it.</span>
diff --git a/samples/layouts/card/horizontal/index.html b/samples/layouts/card/horizontal/index.html
index ac7267b026..ed488d4a5e 100644
--- a/samples/layouts/card/horizontal/index.html
+++ b/samples/layouts/card/horizontal/index.html
@@ -22,8 +22,8 @@
           <div>
               <igc-card-header>
                   <img src="https://dl.infragistics.com/x/img/music/rozes.jpg" slot="thumbnail">
-                  <h5 slot="title">Rozes</h5>
-                  <h5 slot="subtitle">Under the Grave (2016)</h5>
+                  <span slot="title">Rozes</span>
+                  <span slot="subtitle">Under the Grave (2016)</span>
               </igc-card-header>
               <igc-card-content>
                   <p>As I have always said: I write what’s real and what’s true,
diff --git a/samples/layouts/card/integration/index.html b/samples/layouts/card/integration/index.html
index 2d19976cb5..7f979f84f0 100644
--- a/samples/layouts/card/integration/index.html
+++ b/samples/layouts/card/integration/index.html
@@ -97,12 +97,12 @@ <h3 class="h3">Latest in articles</h3>
                  <img src="https://images.unsplash.com/photo-1513415564515-763d91423bdd?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=975&q=80" class="image_1" />
                 </igc-card-media>
                 <igc-card-header>
-                  <h3 slot="title" class="card-content">
+                  <span slot="title" class="card-content">
                     Hong Kong - between the business and faith
-                  </h3>
-                  <h5 slot="subtitle" class="card-content">
+                  </span>
+                  <span slot="subtitle" class="card-content">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
-                  </h5>
+                  </span>
                 </igc-card-header>
                 <igc-card-actions class="actions-content">
                   <igc-icon-button variant="flat">
@@ -125,12 +125,12 @@ <h5 slot="subtitle" class="card-content">
                  <img src="https://images.unsplash.com/photo-1508672019048-805c876b67e2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1993&q=80" class="image_1" />
                 </igc-card-media>
                 <igc-card-header>
-                  <h3 slot="title" class="card-content">
+                  <span slot="title" class="card-content">
                     Traveling alone? Why not!
-                  </h3>
-                  <h5 slot="subtitle" class="card-content">
+                  </span>
+                  <span slot="subtitle" class="card-content">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
-                  </h5>
+                  </span>
                 </igc-card-header>
                 <igc-card-actions class="actions-content">
                   <igc-icon-button variant="flat">
@@ -153,12 +153,12 @@ <h5 slot="subtitle" class="card-content">
                  <img src="https://images.unsplash.com/photo-1465189684280-6a8fa9b19a7a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" class="image_1" />
                 </igc-card-media>
                 <igc-card-header>
-                  <h3 slot="title" class="card-content">
+                  <span slot="title" class="card-content">
                     10 hidden gems in Crete
-                  </h3>
-                  <h5 slot="subtitle" class="card-content">
+                  </span>
+                  <span slot="subtitle" class="card-content">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
-                  </h5>
+                  </span>
                 </igc-card-header>
                 <igc-card-actions class="actions-content">
                   <igc-icon-button variant="flat">
@@ -181,12 +181,12 @@ <h5 slot="subtitle" class="card-content">
                  <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NjR8fHRyYXZlbHxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" class="image_1" />
                 </igc-card-media>
                 <igc-card-header>
-                  <h3 slot="title" class="card-content">
+                  <span slot="title" class="card-content">
                     Close to the heart of Africa
-                  </h3>
-                  <h5 slot="subtitle" class="card-content">
+                  </span>
+                  <span slot="subtitle" class="card-content">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
-                  </h5>
+                  </span>
                 </igc-card-header>
                 <igc-card-actions class="actions-content">
                   <igc-icon-button variant="flat">
@@ -209,12 +209,12 @@ <h5 slot="subtitle" class="card-content">
                  <img src="https://images.unsplash.com/photo-1533105079780-92b9be482077?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=934&q=80" class="image_1" />
                 </igc-card-media>
                 <igc-card-header>
-                  <h3 slot="title" class="card-content">
+                  <span slot="title" class="card-content">
                     The perfect summer is in Oia, Greece
-                  </h3>
-                  <h5 slot="subtitle" class="card-content">
+                  </span>
+                  <span slot="subtitle" class="card-content">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
-                  </h5>
+                  </span>
                 </igc-card-header>
                 <igc-card-actions class="actions-content">
                   <igc-icon-button variant="flat">
diff --git a/samples/layouts/card/overview/index.html b/samples/layouts/card/overview/index.html
index 8060b3a6d0..94aea9fe05 100644
--- a/samples/layouts/card/overview/index.html
+++ b/samples/layouts/card/overview/index.html
@@ -20,8 +20,8 @@
         </igc-card-media>
 
         <igc-card-header>
-            <h3 slot="title">New York City</h3>
-            <h5 slot="subtitle">City in New York</h5>
+            <span slot="title">New York City</span>
+            <span slot="subtitle">City in New York</span>
         </igc-card-header>
 
         <igc-card-content>
diff --git a/samples/layouts/card/semi-horizontal/index.html b/samples/layouts/card/semi-horizontal/index.html
index 3eb603b5e4..2ba99b5f86 100644
--- a/samples/layouts/card/semi-horizontal/index.html
+++ b/samples/layouts/card/semi-horizontal/index.html
@@ -19,8 +19,8 @@
           <div>
               <igc-card-header>
                   <igc-avatar src="https://dl.infragistics.com/x/img/music/singer_with_mic.jpg" slot="thumbnail">MD</igc-avatar>
-                  <h5 slot="title">HERE</h5>
-                  <h5 slot="subtitle">by Mellow D</h5>
+                  <span slot="title">HERE</span>
+                  <span slot="subtitle">by Mellow D</span>
               </igc-card-header>
               <igc-card-content>
                   <p>Far far away, behind the word mountains,
diff --git a/samples/layouts/card/styling/index.html b/samples/layouts/card/styling/index.html
index c02d7e306b..d534a969ef 100644
--- a/samples/layouts/card/styling/index.html
+++ b/samples/layouts/card/styling/index.html
@@ -20,8 +20,8 @@
       </igc-card-media>
 
       <igc-card-header>
-          <h3 slot="title">Jane Doe</h3>
-          <h5 slot="subtitle">Professional Photographer</h5>
+          <span slot="title">Jane Doe</span>
+          <span slot="subtitle">Professional Photographer</span>
       </igc-card-header>
 
       <igc-card-content>
diff --git a/samples/layouts/carousel/animations/index.html b/samples/layouts/carousel/animations/index.html
index 5e596bc647..f9d1e3880b 100644
--- a/samples/layouts/carousel/animations/index.html
+++ b/samples/layouts/carousel/animations/index.html
@@ -32,7 +32,7 @@
             <div class="slide-wrapper">
               <igc-card>
                 <igc-card-header>
-                  <h3 slot="title">Ignite UI for Angular</h3>
+                  <span slot="title">Ignite UI for Angular</span>
                 </igc-card-header>
                 <igc-card-content>
                   <p>30+ Material-based Angular components to code speedy web apps faster.</p>
@@ -52,7 +52,7 @@ <h3 slot="title">Ignite UI for Angular</h3>
             <div class="slide-wrapper">
               <igc-card>
                 <igc-card-header>
-                  <h3 slot="title">Ignite UI for Javascript</h3>
+                  <span slot="title">Ignite UI for Javascript</span>
                 </igc-card-header>
                 <igc-card-content>
                   <p>A complete JavaScript UI library empowering you to build data-rich responsive web apps.</p>
@@ -72,7 +72,7 @@ <h3 slot="title">Ignite UI for Javascript</h3>
             <div class="slide-wrapper">
               <igc-card>
                 <igc-card-header>
-                  <h3 slot="title">Ultimate UI for ASP.NET</h3>
+                  <span slot="title">Ultimate UI for ASP.NET</span>
                 </igc-card-header>
                 <igc-card-content>
                   <p>Build full-featured business apps with the most versatile set of ASP.NET AJAX UI controls.</p>
diff --git a/samples/layouts/expansion-panel/component-customization/index.html b/samples/layouts/expansion-panel/component-customization/index.html
index 7b26c437e9..1c7bc5f54c 100644
--- a/samples/layouts/expansion-panel/component-customization/index.html
+++ b/samples/layouts/expansion-panel/component-customization/index.html
@@ -13,14 +13,14 @@
     <div id="root">
       <div class="container sample">
         <igc-expansion-panel id="exp-panel" indicator-position="end">
-          <h1 slot="title">Golden Retriever</h1>
-          <h3 slot="subtitle">Medium-large gun dog</h3>
-          <div slot="indicator">Show more</div>
+          <span slot="title">Golden Retriever</span>
+          <span slot="subtitle">Medium-large gun dog</span>
+          <span slot="indicator">Show more</span>
           <img height="100" src="https://i.ibb.co/6ZdY7cn/Untitled-design-3.png" alt="">
-          <span>The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
+          <p>The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
           and upland game birds, during hunting and shooting parties.[3] The name "retriever" refers to the breed's ability
           to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and
-          are easy to train to basic or advanced obedience standards.</span>
+          are easy to train to basic or advanced obedience standards.</p>
           <igc-button href="https://en.wikipedia.org/wiki/Golden_Retriever" variant="outlined" target="_blank">Read more</igc-button>
         </igc-expansion-panel>
       </div>
diff --git a/samples/layouts/expansion-panel/component-customization/src/index.css b/samples/layouts/expansion-panel/component-customization/src/index.css
deleted file mode 100644
index 1f53b8aa05..0000000000
--- a/samples/layouts/expansion-panel/component-customization/src/index.css
+++ /dev/null
@@ -1,2 +0,0 @@
-/* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
\ No newline at end of file
diff --git a/samples/layouts/expansion-panel/properties-and-events/index.html b/samples/layouts/expansion-panel/properties-and-events/index.html
index 5237482904..540bfc11cc 100644
--- a/samples/layouts/expansion-panel/properties-and-events/index.html
+++ b/samples/layouts/expansion-panel/properties-and-events/index.html
@@ -13,13 +13,13 @@
     <div id="root">
       <div class="container sample" style="align-items: center;">
         <igc-expansion-panel id="exp-panel">
-          <h1 slot="title">Golden Retriever</h1>
-          <h3 slot="subtitle">Medium-large gun dog</h3>
-          <span>The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
+          <span slot="title">Golden Retriever</span>
+          <span slot="subtitle">Medium-large gun dog</span>
+          <p>The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
           and upland game birds, during hunting and shooting parties.[3] The name "retriever" refers to the breed's ability
           to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and
           are easy to train to basic or advanced obedience standards.
-          </span>
+          </p>
         </igc-expansion-panel>
         <span id="fired-event"></span>
       </div>
diff --git a/samples/layouts/expansion-panel/properties-and-events/src/ExpansionPanelPropertiesAndEvents.css b/samples/layouts/expansion-panel/properties-and-events/src/ExpansionPanelPropertiesAndEvents.css
index 5593e1b0cf..013ab0594c 100644
--- a/samples/layouts/expansion-panel/properties-and-events/src/ExpansionPanelPropertiesAndEvents.css
+++ b/samples/layouts/expansion-panel/properties-and-events/src/ExpansionPanelPropertiesAndEvents.css
@@ -1,12 +1,13 @@
 igc-expansion-panel{
-    width: 100%;
-    height: 300px;
+  max-width: 500px;
+  border: 1px solid rgba(171, 171, 171, 0.3);
+  margin-inline-end: auto;
 }
 
 span#fired-event {
-    background-color: rgba(0,0,0,0.5);
-    border-radius: 26px;
-    padding: 1rem 1.5rem;
-    color:white;
-    display: none;
+  background-color: rgba(0,0,0,0.5);
+  border-radius: 26px;
+  padding: 1rem 1.5rem;
+  color:white;
+  display: none;
 }
diff --git a/samples/layouts/expansion-panel/properties-and-events/src/index.css b/samples/layouts/expansion-panel/properties-and-events/src/index.css
deleted file mode 100644
index 1f53b8aa05..0000000000
--- a/samples/layouts/expansion-panel/properties-and-events/src/index.css
+++ /dev/null
@@ -1,2 +0,0 @@
-/* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
\ No newline at end of file
diff --git a/samples/layouts/expansion-panel/styling/index.html b/samples/layouts/expansion-panel/styling/index.html
index cd51365f90..c0c6aa63dd 100644
--- a/samples/layouts/expansion-panel/styling/index.html
+++ b/samples/layouts/expansion-panel/styling/index.html
@@ -13,13 +13,13 @@
     <div id="root">
       <div class="container sample">
         <igc-expansion-panel indicator-position="end">
-          <h1 slot="title">Golden Retriever</h1>
-          <h3 slot="subtitle">Medium-large gun dog</h3>
+          <span slot="title">Golden Retriever</span>
+          <span slot="subtitle">Medium-large gun dog</span>
           <img height="100" src="https://i.ibb.co/6ZdY7cn/Untitled-design-3.png" alt="">
-          <span>The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
+          <p>The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
           and upland game birds, during hunting and shooting parties.[3] The name "retriever" refers to the breed's ability
           to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and
-          are easy to train to basic or advanced obedience standards.</span>
+          are easy to train to basic or advanced obedience standards.</p>
           <igc-button href="https://en.wikipedia.org/wiki/Golden_Retriever" variant="contained" target="_blank">Read more</igc-button>
         </igc-expansion-panel>
       </div>
diff --git a/samples/layouts/expansion-panel/styling/src/index.css b/samples/layouts/expansion-panel/styling/src/index.css
deleted file mode 100644
index 1f53b8aa05..0000000000
--- a/samples/layouts/expansion-panel/styling/src/index.css
+++ /dev/null
@@ -1,2 +0,0 @@
-/* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
\ No newline at end of file
diff --git a/samples/layouts/expansion-panel/usage/index.html b/samples/layouts/expansion-panel/usage/index.html
index c56aaca202..7eab24d92a 100644
--- a/samples/layouts/expansion-panel/usage/index.html
+++ b/samples/layouts/expansion-panel/usage/index.html
@@ -12,12 +12,12 @@
     <div id="root">
       <div class="container sample" style="align-items: center;">
         <igc-expansion-panel>
-          <h1 slot="title">Golden Retriever</h1>
-          <h3 slot="subtitle">Medium-large gun dog</h3>
-          <span>The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
+          <span slot="title">Golden Retriever</span>
+          <span slot="subtitle">Medium-large gun dog</span>
+          <p>The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
           and upland game birds, during hunting and shooting parties.[3] The name "retriever" refers to the breed's ability
           to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and
-          are easy to train to basic or advanced obedience standards.</span>
+          are easy to train to basic or advanced obedience standards.</p>
         </igc-expansion-panel>
       </div>
     </div>
diff --git a/samples/layouts/expansion-panel/usage/src/index.css b/samples/layouts/expansion-panel/usage/src/index.css
deleted file mode 100644
index 1f53b8aa05..0000000000
--- a/samples/layouts/expansion-panel/usage/src/index.css
+++ /dev/null
@@ -1,2 +0,0 @@
-/* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
\ No newline at end of file
diff --git a/samples/layouts/expansion-panel/usage/src/index.ts b/samples/layouts/expansion-panel/usage/src/index.ts
index 8ed4961c3d..b1cb769150 100644
--- a/samples/layouts/expansion-panel/usage/src/index.ts
+++ b/samples/layouts/expansion-panel/usage/src/index.ts
@@ -4,8 +4,8 @@ import './ExpansionPanelUsage.css';
 
 defineComponents(IgcExpansionPanelComponent, IgcIconComponent);
 export class ExpansionPanelUsage {
-	constructor() {
-	}
+  constructor() {
+  }
 }
 
 new ExpansionPanelUsage();
diff --git a/samples/layouts/tabs/alignment/index.html b/samples/layouts/tabs/alignment/index.html
index bc81f96304..b320f4ecee 100644
--- a/samples/layouts/tabs/alignment/index.html
+++ b/samples/layouts/tabs/alignment/index.html
@@ -23,19 +23,19 @@
 
         <igc-tabs id="tabs">
           <igc-tab>
-            <div slot="label">Basics</div>
+            <span slot="label">Basics</span>
             <p>Basics tab panel</p>
           </igc-tab>
           <igc-tab>
-            <div slot="label">Details</div>
+            <span slot="label">Details</span>
             <p>Details tab panel</p>
           </igc-tab>
           <igc-tab>
-            <div slot="label">Custom</div>
+            <span slot="label">Custom</span>
             <p>Custom tab panel</p>
           </igc-tab>
           <igc-tab disabled>
-            <div slot="label">Disabled</div>
+            <span slot="label">Disabled</span>
             <p>Disabled tab panel won't be displayed</p>
           </igc-tab>
         </igc-tabs>
diff --git a/samples/layouts/tabs/alignment/src/index.css b/samples/layouts/tabs/alignment/src/index.css
index 1f53b8aa05..4531e4a70a 100644
--- a/samples/layouts/tabs/alignment/src/index.css
+++ b/samples/layouts/tabs/alignment/src/index.css
@@ -1,2 +1,6 @@
 /* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
\ No newline at end of file
+/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
+
+igc-radio-group {
+  padding-block-end: 12px;
+}
\ No newline at end of file
diff --git a/samples/layouts/tabs/alignment/src/index.ts b/samples/layouts/tabs/alignment/src/index.ts
index 670ff987ee..b118c5f7b6 100644
--- a/samples/layouts/tabs/alignment/src/index.ts
+++ b/samples/layouts/tabs/alignment/src/index.ts
@@ -1,5 +1,6 @@
 import { defineComponents, IgcTabsComponent, IgcRadioGroupComponent, IgcRadioComponent } from 'igniteui-webcomponents';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import './index.css';
 
 defineComponents(IgcTabsComponent, IgcRadioComponent, IgcRadioGroupComponent);
 
diff --git a/samples/layouts/tile-manager/actions/index.html b/samples/layouts/tile-manager/actions/index.html
index ea5b5a2fa6..eb7cd843ed 100644
--- a/samples/layouts/tile-manager/actions/index.html
+++ b/samples/layouts/tile-manager/actions/index.html
@@ -17,15 +17,15 @@
     <div class="container sample center">
       <igc-tile-manager id="tile-manager1" column-count="2" gap="20px">
         <igc-tile >
-          <h3 slot="title">Default Actions</h3>
+          <span slot="title">Default Actions</span>
           <p>This tile has default actions and title.</p>
         </igc-tile>
         <igc-tile disable-fullscreen>
-          <h3 slot="title">No Fullscreen Action</h3>
+          <span slot="title">No Fullscreen Action</span>
           <p>Fullscreen is disabled via property.</p>
         </igc-tile>
         <igc-tile disable-fullscreen disable-maximize>
-          <h3 slot="title">Custom Actions</h3>
+          <span slot="title">Custom Actions</span>
           <igc-icon-button id="customOne" slot="actions" variant="flat" collection="material" exportparts="icon" name="north_east"
             aria-label="north_east"></igc-icon-button>
           <p>Replace the default actions with custom ones, and include extra actions when the tile is maximized.</p>
@@ -36,7 +36,7 @@ <h3 slot="title">Custom Actions</h3>
           <p>Display only custom actions in the header.</p>
         </igc-tile>
         <igc-tile disable-fullscreen disable-maximize>
-          <h3 slot="title">Only title</h3>
+          <span slot="title">Only title</span>
           <p>Display only title in the header.</p>
         </igc-tile>
         <igc-tile disable-fullscreen disable-maximize>
diff --git a/samples/layouts/tile-manager/overview/index.html b/samples/layouts/tile-manager/overview/index.html
index ec7410399b..bd419ae86d 100644
--- a/samples/layouts/tile-manager/overview/index.html
+++ b/samples/layouts/tile-manager/overview/index.html
@@ -19,7 +19,7 @@
 
         <igc-tile row-span="3">
 
-          <h3 slot="title">Order info</h3>
+          <span slot="title">Order info</span>
           <igc-list class="list">
             <igc-list-item>
               <igc-avatar slot="start" shape="circle" class="avatar">
@@ -79,7 +79,7 @@ <h3 slot="title">Order info</h3>
         </igc-tile>
         <igc-tile col-span="2" row-span="2">
 
-          <h3 slot="title">Order Line Items</h3>
+          <span slot="title">Order Line Items</span>
           <div class="group">
             <igc-card class="card">
               <div class="group_1">
@@ -89,7 +89,7 @@ <h3 slot="title">Order Line Items</h3>
                       <igc-icon name="product" collection="material" class="material-icons"></igc-icon>
                     </igc-avatar>
                   </div>
-                  <h3 slot="title">Carnavon Tigers</h3>
+                  <span slot="title">Carnavon Tigers</span>
                 </igc-card-header>
                 <igc-card-content class="column">
                   <div class="body-content">
@@ -109,7 +109,7 @@ <h3 slot="title">Carnavon Tigers</h3>
                       <igc-icon name="product" collection="material" class="material-icons"></igc-icon>
                     </igc-avatar>
                   </div>
-                  <h3 slot="title">Guarana Fantastica</h3>
+                  <span slot="title">Guarana Fantastica</span>
                 </igc-card-header>
                 <igc-card-content class="column">
                   <div class="body-content">
@@ -129,7 +129,7 @@ <h3 slot="title">Guarana Fantastica</h3>
                       <igc-icon name="product" collection="material" class="material-icons"></igc-icon>
                     </igc-avatar>
                   </div>
-                  <h3 slot="title">Vegie-spread</h3>
+                  <span slot="title">Vegie-spread</span>
                 </igc-card-header>
                 <igc-card-content class="column">
                   <div class="body-content">
@@ -149,7 +149,7 @@ <h3 slot="title">Vegie-spread</h3>
                       <igc-icon name="product" collection="material" class="material-icons"></igc-icon>
                     </igc-avatar>
                   </div>
-                  <h3 slot="title">Rhonbrau Klosterbier</h3>
+                  <span slot="title">Rhonbrau Klosterbier</span>
                 </igc-card-header>
                 <igc-card-content class="column">
                   <div class="body-content">
@@ -164,13 +164,13 @@ <h3 slot="title">Rhonbrau Klosterbier</h3>
           </div>
         </igc-tile>
         <igc-tile >
-          <h3 slot="title">Order Value</h3>
+          <span slot="title">Order Value</span>
           <div class="string">
             <h1>$8.66K</h1>
           </div>
         </igc-tile>
         <igc-tile >
-          <h3 slot="title">Item quantity</h3>
+          <span slot="title">Item quantity</span>
           <div class="string">
             <h1>4</h1>
           </div>
diff --git a/samples/scheduling/date-picker/dialog-mode/index.html b/samples/scheduling/date-picker/dialog-mode/index.html
index d50f79ba10..a57da79df8 100644
--- a/samples/scheduling/date-picker/dialog-mode/index.html
+++ b/samples/scheduling/date-picker/dialog-mode/index.html
@@ -15,7 +15,7 @@
     <div id="root">
       <div class="container sample center">
         <igc-date-picker id="date-picker" mode="dialog">
-          <p slot="helper-text">Date</p>
+          <span slot="helper-text">Date</span>
         </igc-date-picker>
       </div>
     </div>
diff --git a/samples/scheduling/date-picker/form/index.html b/samples/scheduling/date-picker/form/index.html
index c73e432d8d..9cb6411f74 100644
--- a/samples/scheduling/date-picker/form/index.html
+++ b/samples/scheduling/date-picker/form/index.html
@@ -17,7 +17,7 @@
     <div class="container sample center">
       <form id="form">
         <igc-date-picker id="datePicker" required>
-          <p slot="helper-text">Date</p>
+          <span slot="helper-text">Date</span>
         </igc-date-picker>
         <div>
           <igc-button id="submitButton" onclick="form.requestSubmit()">Submit</igc-button>
diff --git a/samples/scheduling/date-picker/overview/index.html b/samples/scheduling/date-picker/overview/index.html
index 92517b79a4..190595a92a 100644
--- a/samples/scheduling/date-picker/overview/index.html
+++ b/samples/scheduling/date-picker/overview/index.html
@@ -15,7 +15,7 @@
     <div id="root">
       <div class="container sample center">
         <igc-date-picker id="date-picker">
-          <p slot="helper-text">Date</p>
+          <span slot="helper-text">Date</span>
         </igc-date-picker>
       </div>
     </div>
diff --git a/samples/scheduling/date-picker/styling/index.html b/samples/scheduling/date-picker/styling/index.html
index a370ef8ca5..22a6bc3570 100644
--- a/samples/scheduling/date-picker/styling/index.html
+++ b/samples/scheduling/date-picker/styling/index.html
@@ -15,7 +15,7 @@
     <div id="root">
       <div class="container sample center">
         <igc-date-picker mode="dialog">
-          <p slot="helper-text">Date</p>
+          <span slot="helper-text">Date</span>
         </igc-date-picker>
       </div>
     </div>