diff --git a/samples/inputs/button/contained/App.razor b/samples/inputs/button/contained/App.razor
index f56db9fd8..c1dedf43c 100644
--- a/samples/inputs/button/contained/App.razor
+++ b/samples/inputs/button/contained/App.razor
@@ -3,6 +3,12 @@
 
 
 <div class="container vertical">
+    <style>
+        igc-button {
+            width: 40%;
+            margin: auto;
+        }
+    </style>
     <IgbButton Variant="ButtonVariant.Contained">Contained</IgbButton>
 </div>
 
diff --git a/samples/inputs/button/download/App.razor b/samples/inputs/button/download/App.razor
index bbe2c4f65..45ea2fb74 100644
--- a/samples/inputs/button/download/App.razor
+++ b/samples/inputs/button/download/App.razor
@@ -3,6 +3,12 @@
 
 
 <div class="container vertical">
+    <style>
+        igc-button {
+            width: 40%;
+            margin: auto;
+        }
+    </style>
     <IgbButton Variant="ButtonVariant.Contained" Download="Url" Href="https://www.infragistics.com/" Target="ButtonBaseTarget._blank">
         Download
     </IgbButton>
diff --git a/samples/inputs/button/fab/App.razor b/samples/inputs/button/fab/App.razor
index a24959b6e..1172ed904 100644
--- a/samples/inputs/button/fab/App.razor
+++ b/samples/inputs/button/fab/App.razor
@@ -3,6 +3,12 @@
 
 
 <div class="container vertical">
+    <style>
+        igc-button {
+            width: 40%;
+            margin: auto;
+        }
+    </style>
     <IgbButton Variant="ButtonVariant.Fab">
         <span slot="prefix">+</span>
         Add
diff --git a/samples/inputs/button/flat/App.razor b/samples/inputs/button/flat/App.razor
index 98bf61cfb..919325713 100644
--- a/samples/inputs/button/flat/App.razor
+++ b/samples/inputs/button/flat/App.razor
@@ -3,6 +3,17 @@
 
 
 <div class="container vertical">
+    <style>
+        .container {
+            background: var(--ig-surface-600);
+        }
+
+        igc-button {
+            width: 40%;
+            margin: auto;
+            background: var(--ig-surface-50);
+        }
+    </style>
     <IgbButton Variant="ButtonVariant.Flat">Flat</IgbButton>
 </div>
 
diff --git a/samples/inputs/button/outlined/App.razor b/samples/inputs/button/outlined/App.razor
index 4e04ab40d..51ed8b79c 100644
--- a/samples/inputs/button/outlined/App.razor
+++ b/samples/inputs/button/outlined/App.razor
@@ -3,7 +3,13 @@
 
 
 <div class="container vertical">
-    <IgbButton style="margin:5px" Variant="ButtonVariant.Outlined">Outlined</IgbButton>
+    <style>
+        igc-button {
+            width: 40%;
+            margin: auto;
+        }
+    </style>
+    <IgbButton Variant="ButtonVariant.Outlined">Outlined</IgbButton>
 </div>
 
 @code {
diff --git a/samples/inputs/button/overview/App.razor b/samples/inputs/button/overview/App.razor
index cef27cf44..2aea338ae 100644
--- a/samples/inputs/button/overview/App.razor
+++ b/samples/inputs/button/overview/App.razor
@@ -6,7 +6,8 @@
         .buttonContainer {
             display: flex;
             justify-content: space-evenly;
-            margin-top: 20px;
+            align-items: center;
+            height: 100%;
         }
     </style>
 
diff --git a/samples/inputs/button/size/App.razor b/samples/inputs/button/size/App.razor
index 80dec87ec..bbbaf61e7 100644
--- a/samples/inputs/button/size/App.razor
+++ b/samples/inputs/button/size/App.razor
@@ -2,16 +2,20 @@
 
 
 <style>
+    .container {
+        justify-content: center;
+    }
+
     .buttonContainer {
         display: flex;
         justify-content: space-evenly;
+        align-items: center;
         margin-top: 20px;
     }
 
     #radioGroup {
         display: flex;
-        margin: 0 auto;
-        width: 15%;
+        justify-content: center;
     }
 </style>
 
diff --git a/samples/inputs/button/styling/App.razor b/samples/inputs/button/styling/App.razor
index e8f72dc8a..813585058 100644
--- a/samples/inputs/button/styling/App.razor
+++ b/samples/inputs/button/styling/App.razor
@@ -9,10 +9,13 @@
             color: #011627;
             padding: 18px;
         }
+
+        igc-button {
+            width: 40%;
+            margin: auto;
+        }
     </style>
-    <div>
-        <IgbButton Variant="ButtonVariant.Contained">Contained</IgbButton>
-    </div>
+    <IgbButton Variant="ButtonVariant.Contained">Contained</IgbButton>
 
 </div>
 
diff --git a/samples/inputs/chip/multiple/App.razor b/samples/inputs/chip/multiple/App.razor
index ea41a4db3..23fa19a43 100644
--- a/samples/inputs/chip/multiple/App.razor
+++ b/samples/inputs/chip/multiple/App.razor
@@ -3,31 +3,23 @@
 
 <div class="container sample center size-medium" style="flex-direction: row; gap: 8px">
     <IgbChip Selectable="true" Removable="true" RemoveScript="handleChipRemove">
-        <span slot="select">
-            <IgbIcon @ref="@SelectIconRef" IconName="custom-select" Collection="material" ></IgbIcon>
-        </span>
+        <IgbIcon slot="select" @ref="@SelectIconRef" IconName="custom-select" Collection="material" ></IgbIcon>
         Custom Icons
     </IgbChip>
 
     <IgbChip Selectable="false" Removable="false">
-         <span slot="start">
-            <IgbIcon @ref="@BrushIconRef" IconName="brush" Collection="material" ></IgbIcon>
-        </span>
+        <IgbIcon slot="start" @ref="@BrushIconRef" IconName="brush" Collection="material" ></IgbIcon>
         Start Slot
     </IgbChip>
 
     <IgbChip Selectable="false" Removable="false">
          End Slot
-        <span slot="end">
-            <IgbIcon @ref="@BrickWallIconRef" IconName="brick-wall" Collection="material"></IgbIcon>
-        </span>
+        <IgbIcon slot="end" @ref="@BrickWallIconRef" IconName="brick-wall" Collection="material"></IgbIcon>
     </IgbChip>
 
     <IgbChip Disabled="true">
          Disabled Slot
-        <span slot="end">
-            <IgbIcon @ref="@DogIconRef" IconName="dog-icon" Collection="material" ></IgbIcon>
-        </span>
+        <IgbIcon slot="end" @ref="@DogIconRef" IconName="dog-icon" Collection="material" ></IgbIcon>
     </IgbChip>
 </div>
 
diff --git a/samples/inputs/circular-progress-indicator/dynamic/App.razor b/samples/inputs/circular-progress-indicator/dynamic/App.razor
index c55afefab..fdb231703 100644
--- a/samples/inputs/circular-progress-indicator/dynamic/App.razor
+++ b/samples/inputs/circular-progress-indicator/dynamic/App.razor
@@ -6,12 +6,10 @@
         width: 300px;
         display: flex;
         align-items: center;
-        margin-top: 30px;
     }
 
     #circularProgress {
         margin-right: 50px;
-        margin-left: 20px;
         --diameter: 100px;
         --stroke-thickness: 5px;
     }
diff --git a/samples/inputs/circular-progress-indicator/simple/App.razor b/samples/inputs/circular-progress-indicator/simple/App.razor
index ebb09a2ab..a9d68b6b5 100644
--- a/samples/inputs/circular-progress-indicator/simple/App.razor
+++ b/samples/inputs/circular-progress-indicator/simple/App.razor
@@ -5,7 +5,6 @@
 
     <style>
         #circularProgress {
-            margin: 20px;
             --diameter: 50px;
         }
     </style>
diff --git a/samples/inputs/circular-progress-indicator/styling/App.razor b/samples/inputs/circular-progress-indicator/styling/App.razor
index 60bd1cb71..5aa100eb0 100644
--- a/samples/inputs/circular-progress-indicator/styling/App.razor
+++ b/samples/inputs/circular-progress-indicator/styling/App.razor
@@ -5,7 +5,6 @@
 
     <style>
         igc-circular-progress {
-            margin: 20px;
             --diameter: 50px;
         }
 
diff --git a/samples/inputs/input/size/App.razor b/samples/inputs/input/size/App.razor
index 358005ded..43e426f05 100644
--- a/samples/inputs/input/size/App.razor
+++ b/samples/inputs/input/size/App.razor
@@ -7,7 +7,6 @@
         #radioGroup {
             display: flex;
             margin: 0 auto;
-            width: 15%;
         }
     </style>
 
diff --git a/samples/inputs/rating/custom/App.razor b/samples/inputs/rating/custom/App.razor
index f34407713..3c5490b35 100644
--- a/samples/inputs/rating/custom/App.razor
+++ b/samples/inputs/rating/custom/App.razor
@@ -34,7 +34,7 @@
         {
             await this.RegisterIconRef.EnsureReady();
             string fullHeart = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 475.82 442.01' version='1.0'><path d='M129.35 9.35c-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='#e60000'/></svg>";
-            string emptyHeart = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 241.597 220.057' version='1.0'><path style='opacity:.98000004;fill:none;stroke:#000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0' d='M243.452 1708.979c-26.934.23-51.58 21.476-55.081 48.293-3.114 23.844 7.33 47.4 23.968 64.215 27.515 27.805 61.227 49.794 83.447 82.547 4.39-4.689 9.278-12.066 14.227-17.529 25.23-27.85 58.166-48.013 80.865-78.155 17.175-22.806 19.103-58.113-.538-80.405-18.25-20.712-51.76-25.17-74.37-9.254-8.226 5.791-15.274 13.37-19.932 22.312-10.053-19.32-30.534-32.214-52.586-32.024z' transform='translate(-175.323 -1696.476)'/></svg>";
+            string emptyHeart = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 475.82 442.01' version='1.0'><path d='M129.35 9.35c-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='#fff'/></svg>";
             await this.RegisterIconRef.RegisterIconFromTextAsync("heart-full", fullHeart, "material");
             await this.RegisterIconRef.RegisterIconFromTextAsync("heart-empty", emptyHeart, "material");
         }
diff --git a/samples/inputs/rating/single-selection/App.razor b/samples/inputs/rating/single-selection/App.razor
index f48a9e613..d1944a89b 100644
--- a/samples/inputs/rating/single-selection/App.razor
+++ b/samples/inputs/rating/single-selection/App.razor
@@ -3,24 +3,24 @@
 <div class="container sample center">
     <IgbRating class="size-large" Label="Rate Experience" Single>
         <IgbRatingSymbol>
-          <div>😣</div>
-          <div slot="empty">😣</div>
+          <span>😣</span>
+          <span slot="empty">😣</span>
         </IgbRatingSymbol>
         <IgbRatingSymbol>
-          <div>😔</div>
-          <div slot="empty">😔</div>
+          <span>😔</span>
+          <span slot="empty">😔</span>
         </IgbRatingSymbol>
         <IgbRatingSymbol>
-          <div>😐</div>
-          <div slot="empty">😐</div>
+          <span>😐</span>
+          <span slot="empty">😐</span>
         </IgbRatingSymbol>
         <IgbRatingSymbol>
-          <div>🙂</div>
-          <div slot="empty">🙂</div>
+          <span>🙂</span>
+          <span slot="empty">🙂</span>
         </IgbRatingSymbol>
         <IgbRatingSymbol>
-          <div>😆</div>
-          <div slot="empty">😆</div>
+          <span>😆</span>
+          <span slot="empty">😆</span>
         </IgbRatingSymbol>
     </IgbRating>
 </div>
diff --git a/samples/inputs/select/styling/App.razor b/samples/inputs/select/styling/App.razor
index b905f0021..087c3b4d0 100644
--- a/samples/inputs/select/styling/App.razor
+++ b/samples/inputs/select/styling/App.razor
@@ -11,19 +11,16 @@
             <IgbSelectItem>
               <IgbIcon @ref="IconRef" slot="prefix" name="place" collection="material"></IgbIcon>
               Germany
-              <span slot="suffix">DE</span>
             </IgbSelectItem>
 
             <IgbSelectItem>
               <IgbIcon slot="prefix" name="place" collection="material"></IgbIcon>
               France
-              <span slot="suffix">FR</span>
             </IgbSelectItem>
 
             <IgbSelectItem selected>
               <IgbIcon slot="prefix" name="place" collection="material"></IgbIcon>
               Spain
-              <span slot="suffix">ES</span>
             </IgbSelectItem>
         </IgbSelectGroup>
 
@@ -33,19 +30,16 @@
             <IgbSelectItem>
               <IgbIcon slot="prefix" name="place" collection="material"></IgbIcon>
               USA
-              <span slot="suffix">US</span>
             </IgbSelectItem>
 
             <IgbSelectItem>
               <IgbIcon slot="prefix" name="place" collection="material"></IgbIcon>
               Canada
-              <span slot="suffix">CA</span>
             </IgbSelectItem>
 
             <IgbSelectItem>
               <IgbIcon slot="prefix" name="place" collection="material"></IgbIcon>
               Mexico
-              <span slot="suffix">MX</span>
             </IgbSelectItem>
         </IgbSelectGroup>
 
diff --git a/samples/inputs/textarea/resize/App.razor b/samples/inputs/textarea/resize/App.razor
index 69fa8160a..edac2d757 100644
--- a/samples/inputs/textarea/resize/App.razor
+++ b/samples/inputs/textarea/resize/App.razor
@@ -1,10 +1,6 @@
 @using IgniteUI.Blazor.Controls
 
 <style>
-    p {
-        margin: 0;
-    }
-
     .container {
         display: flex;
         flex-direction: column;
@@ -14,13 +10,13 @@
 
 <div class="container center">
     <IgbTextarea Label="Resize: none" Resize="TextareaResize.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>
     </IgbTextarea>
     <IgbTextarea Label="Resize: vertical (default)" Resize="TextareaResize.Vertical">
-        <p slot="helper-text">This textarea lets the user resize vertically.</p>
+        <span slot="helper-text">This textarea lets the user resize vertically.</span>
     </IgbTextarea>
     <IgbTextarea Label="Resize: auto" Resize="TextareaResize.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>
     </IgbTextarea>
 </div>
 
diff --git a/samples/inputs/textarea/slots/App.razor b/samples/inputs/textarea/slots/App.razor
index 948e28d17..3d175e5c5 100644
--- a/samples/inputs/textarea/slots/App.razor
+++ b/samples/inputs/textarea/slots/App.razor
@@ -4,7 +4,7 @@
 <div class="container center">
     <IgbTextarea Label="Your feedback">
        <IgbIcon @ref="RegisterIconRef" IconName="feedback" Collection="material" slot="prefix"></IgbIcon>
-        <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>
     </IgbTextarea>
 </div>
 
diff --git a/samples/inputs/textarea/styling/App.razor b/samples/inputs/textarea/styling/App.razor
index 414d05c99..9ab574914 100644
--- a/samples/inputs/textarea/styling/App.razor
+++ b/samples/inputs/textarea/styling/App.razor
@@ -22,7 +22,7 @@
 <div class="container center">
     <IgbTextarea Label="Steps to reproduce">
        <IgbIcon @ref="RegisterIconRef" IconName="feedback" Collection="material" slot="prefix"></IgbIcon>
-        <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>
     </IgbTextarea>
 </div>
 
diff --git a/samples/layouts/accordion/nested-scenario/App.razor b/samples/layouts/accordion/nested-scenario/App.razor
index 3c22a8f12..e637d0319 100644
--- a/samples/layouts/accordion/nested-scenario/App.razor
+++ b/samples/layouts/accordion/nested-scenario/App.razor
@@ -4,39 +4,7 @@
 <div class="container vertical scrollable">
     <IgbSwitch Change="OnSwitchChange">Single Expand</IgbSwitch>
     <IgbAccordion SingleExpand="@SingleExpand">
-        <IgbExpansionPanel>
-            <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>
-        </IgbExpansionPanel>
-        <IgbExpansionPanel>
-            <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>
-        </IgbExpansionPanel>
-        <IgbExpansionPanel>
-            <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>
-        </IgbExpansionPanel>
-        <IgbExpansionPanel>
+        <IgbExpansionPanel Open>
             <span slot="title">Common questions about renewal.</span>
             <IgbAccordion SingleExpand="@SingleExpand">
                 <IgbExpansionPanel>
@@ -62,31 +30,27 @@
             </IgbAccordion>
         </IgbExpansionPanel>
         <IgbExpansionPanel>
-            <span slot="title">I split my work across two computers. Can I install on both using my single-user license?</span>
+            <span slot="title">What has changed about subscription and pricing model?</span>
             <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.
+                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>
         </IgbExpansionPanel>
         <IgbExpansionPanel>
-            <span 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?</span>
+            <span slot="title">Who will the updated changes impact?</span>
             <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>
+                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>
         </IgbExpansionPanel>
     </IgbAccordion>
diff --git a/samples/layouts/card/horizontal/App.razor b/samples/layouts/card/horizontal/App.razor
index 1e18d01a8..042b6a4fb 100644
--- a/samples/layouts/card/horizontal/App.razor
+++ b/samples/layouts/card/horizontal/App.razor
@@ -8,8 +8,8 @@
                 <div>
                     <IgbCardHeader>
                         <img slot="thumbnail" src="https://dl.infragistics.com/x/img/music/rozes.jpg" width="64" height="64"/>
-                        <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>
                     </IgbCardHeader>
                     <IgbCardContent>
                         <p>
diff --git a/samples/layouts/card/overview/App.razor b/samples/layouts/card/overview/App.razor
index 968bed809..2eb2dbfc3 100644
--- a/samples/layouts/card/overview/App.razor
+++ b/samples/layouts/card/overview/App.razor
@@ -20,8 +20,8 @@
                 <img src="https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?ixlib=rb-1.2.1&auto=format&fit=crop&w=640&q=50">
             </IgbCardMedia>
             <IgbCardHeader>
-                <h3 style="font-size: 1.25rem;" slot="title">New York City</h3>
-                <h5 style="font-size: 1.00rem;" slot="subtitle">City in New York</h5>
+                <span style="font-size: 1.25rem;" slot="title">New York City</span>
+                <span style="font-size: 1.00rem;" slot="subtitle">City in New York</span>
             </IgbCardHeader>
 
             <IgbCardContent>
diff --git a/samples/layouts/card/semi-horizontal/App.razor b/samples/layouts/card/semi-horizontal/App.razor
index 60b4e7df4..4ed9f9bcb 100644
--- a/samples/layouts/card/semi-horizontal/App.razor
+++ b/samples/layouts/card/semi-horizontal/App.razor
@@ -8,8 +8,8 @@
                 <div>
                     <IgbCardHeader>
                         <IgbAvatar Src="https://dl.infragistics.com/x/img/music/singer_with_mic.jpg" slot="thumbnail"/>
-                        <h5 slot="title">HERE</h5>
-                        <h5 slot="subtitle">by Mellow D</h5>
+                        <span slot="title">HERE</span>
+                        <span slot="subtitle">by Mellow D</span>
                     </IgbCardHeader>
                     <IgbCardContent>
                       <p>Far far away, behind the word mountains,
diff --git a/samples/layouts/card/styling/App.razor b/samples/layouts/card/styling/App.razor
index d1ab94c6c..7859d167c 100644
--- a/samples/layouts/card/styling/App.razor
+++ b/samples/layouts/card/styling/App.razor
@@ -38,8 +38,8 @@
             </IgbCardMedia>
 
             <IgbCardHeader>
-                <h3 style="font-size: 1.25rem;" slot="title">Jane Doe</h3>
-                <h5 style="font-size: 1.00rem;" slot="subtitle">Professional Photographer</h5>
+                <span style="font-size: 1.25rem;" slot="title">Jane Doe</span>
+                <span style="font-size: 1.00rem;" slot="subtitle">Professional Photographer</span>
             </IgbCardHeader>
 
             <IgbCardContent>
diff --git a/samples/layouts/carousel/animations/App.razor b/samples/layouts/carousel/animations/App.razor
index 568a326f2..ccd6c00e1 100644
--- a/samples/layouts/carousel/animations/App.razor
+++ b/samples/layouts/carousel/animations/App.razor
@@ -68,7 +68,7 @@ igc-card-header {
             <div class="slide-wrapper">
                 <IgbCard>
                     <IgbCardHeader>
-                        <h3 slot="title">Ignite UI for Angular</h3>
+                        <span slot="title">Ignite UI for Angular</span>
                     </IgbCardHeader>
                     <IgbCardContent>
                         <p>30+ Material-based Angular components to code speedy web apps faster.</p>
@@ -88,7 +88,7 @@ igc-card-header {
             <div class="slide-wrapper">
                 <IgbCard>
                     <IgbCardHeader>
-                        <h3 slot="title">Ignite UI for Javascript</h3>
+                        <span slot="title">Ignite UI for Javascript</span>
                     </IgbCardHeader>
                     <IgbCardContent>
                         <p>A complete JavaScript UI library empowering you to build data-rich responsive web apps.</p>
@@ -108,7 +108,7 @@ igc-card-header {
             <div class="slide-wrapper">
                 <IgbCard>
                     <IgbCardHeader>
-                        <h3 slot="title">Ultimate UI for ASP.NET</h3>
+                        <span slot="title">Ultimate UI for ASP.NET</span>
                     </IgbCardHeader>
                     <IgbCardContent>
                         <p>Build full-featured business apps with the most versatile set of ASP.NET AJAX UI controls.</p>
diff --git a/samples/layouts/tabs/alignment/App.razor b/samples/layouts/tabs/alignment/App.razor
index 6192d7cf8..c5c845811 100644
--- a/samples/layouts/tabs/alignment/App.razor
+++ b/samples/layouts/tabs/alignment/App.razor
@@ -2,6 +2,11 @@
 
 
 <div class="container vertical">
+    <style>
+        igc-radio-group {
+            padding-block-end: 12px;
+        }
+    </style>
 
     <IgbRadioGroup Alignment=@ContentOrientation.Horizontal>
         <IgbRadio name="alignment" Value="Start" label-position="after" Checked=true Change="OnRadioOptionClick">Start</IgbRadio>
diff --git a/samples/layouts/tile-manager/actions/App.razor b/samples/layouts/tile-manager/actions/App.razor
index 7a8a3e7a3..40c7279a2 100644
--- a/samples/layouts/tile-manager/actions/App.razor
+++ b/samples/layouts/tile-manager/actions/App.razor
@@ -4,15 +4,15 @@
     <IgbIcon @ref="@RegisterIconRef" />
     <IgbTileManager ColumnCount="2" Gap="20px">
         <IgbTile>
-            <h3 slot="title">Default Actions</h3>
+            <span slot="title">Default Actions</span>
             <p>This tile has default actions and title.</p>
         </IgbTile>
         <IgbTile DisableFullscreen="true">
-            <h3 slot="title">No Fullscreen Action</h3>
+            <span slot="title">No Fullscreen Action</span>
             <p>Fullscreen is disabled via property.</p>
         </IgbTile>
         <IgbTile DisableFullscreen="true" DisableMaximize="true">
-            <h3 slot="title">Custom Actions</h3>
+            <span slot="title">Custom Actions</span>
             <IgbIconButton id="customOne" slot="actions" Variant="IconButtonVariant.Flat" Collection="material" onclick="customOneClick(event)"
             IconName="north_east" aria-label="north_east"></IgbIconButton>
             <p>Replace the default actions with custom ones, and include extra actions when the tile is maximized.</p>
@@ -22,7 +22,7 @@
             <p>Display only custom actions in the header.</p>
         </IgbTile>
         <IgbTile DisableFullscreen="true" DisableMaximize="true">
-            <h3 slot="title">Only title</h3>
+            <span slot="title">Only title</span>
             <p>Display only title in the header.</p>
         </IgbTile>
         <IgbTile DisableFullscreen="true" DisableMaximize="true">
diff --git a/samples/layouts/tile-manager/overview/App.razor b/samples/layouts/tile-manager/overview/App.razor
index 3b22861b7..c08b03103 100644
--- a/samples/layouts/tile-manager/overview/App.razor
+++ b/samples/layouts/tile-manager/overview/App.razor
@@ -3,7 +3,7 @@
 <div class="container sample center">
     <IgbTileManager ColumnCount="3" Gap="20px" ResizeMode="TileManagerResizeMode.Always" DragMode="TileManagerDragMode.TileHeader">
         <IgbTile RowSpan="3">
-            <h3 slot="title">Order info</h3>
+            <span slot="title">Order info</span>
             <IgbList Class="list">
                 <IgbListItem>
                     <IgbAvatar slot="start" Shape="AvatarShape.Circle" Class="avatar">
@@ -62,7 +62,7 @@
             </IgbList>
         </IgbTile>
         <IgbTile ColSpan="2" RowSpan="2">
-            <h3 slot="title">Order Line Items</h3>
+            <span slot="title">Order Line Items</span>
             <div class="group">
                 <IgbCard Class="card">
                     <div class="group_1">
@@ -72,7 +72,7 @@
                                     <IgbIcon @ref="IconRef" IconName="product" Collection="material" Class="material-icons"></IgbIcon>
                                 </IgbAvatar>
                             </div>
-                            <h3 slot="title">Carnavon Tigers</h3>
+                            <span slot="title">Carnavon Tigers</span>
                         </IgbCardHeader>
                         <IgbCardContent Class="column">
                             <div class="body-content">
@@ -92,7 +92,7 @@
                                     <IgbIcon @ref="IconRef" IconName="product" Collection="material" Class="material-icons"></IgbIcon>
                                 </IgbAvatar>
                             </div>
-                            <h3 slot="title">Guarana Fantastica</h3>
+                            <span slot="title">Guarana Fantastica</span>
                         </IgbCardHeader>
                         <IgbCardContent Class="column">
                             <div class="body-content">
@@ -112,7 +112,7 @@
                                     <IgbIcon @ref="IconRef" IconName="product" Collection="material" Class="material-icons"></IgbIcon>
                                 </IgbAvatar>
                             </div>
-                            <h3 slot="title">Vegie-spread</h3>
+                            <span slot="title">Vegie-spread</span>
                         </IgbCardHeader>
                         <IgbCardContent Class="column">
                             <div class="body-content">
@@ -132,7 +132,7 @@
                                     <IgbIcon @ref="IconRef" IconName="product" Collection="material" Class="material-icons"></IgbIcon>
                                 </IgbAvatar>
                             </div>
-                            <h3 slot="title">Rhonbrau Klosterbier</h3>
+                            <span slot="title">Rhonbrau Klosterbier</span>
                         </IgbCardHeader>
                         <IgbCardContent Class="column">
                             <div class="body-content">
@@ -147,13 +147,13 @@
             </div>
         </IgbTile>
         <IgbTile>
-            <h3 slot="title">Order Value</h3>
+            <span slot="title">Order Value</span>
             <div class="string">
                 <h1>$8.66K</h1>
             </div>
         </IgbTile>
         <IgbTile>
-            <h3 slot="title">Item quantity</h3>
+            <span slot="title">Item quantity</span>
             <div class="string">
                 <h1>4</h1>
             </div>