From 9a1a62537e68648426b2ad6336391ddfe25edf6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matija=20Ko=C5=BEelj?= <matija.kozelj@tompit.net>
Date: Tue, 10 Jan 2023 13:52:01 +0100
Subject: [PATCH 1/6] Update nuget.config and tools to use custom scss compiler

---
 nuget.config                                  | 28 +++++--------------
 .../.config/dotnet-tools.json                 | 20 ++++++-------
 2 files changed, 17 insertions(+), 31 deletions(-)

diff --git a/nuget.config b/nuget.config
index 8467dcb..1da1b53 100644
--- a/nuget.config
+++ b/nuget.config
@@ -1,33 +1,19 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8"?>
 <configuration>
     <config>
-        <!--
-            Used to specify the default location to expand packages.
-            See: nuget.exe help install
-            See: nuget.exe help update
-
-            In this example, %PACKAGEHOME% is an environment variable.
-            This syntax works on Windows/Mac/Linux
-        -->
         <add key="repositoryPath" value="%PACKAGEHOME%/External" />
     </config>
 
     <packageRestore>
-        <!-- Allow NuGet to download missing packages -->
         <add key="enabled" value="True" />
-
-        <!-- Automatically check for missing packages during build in Visual Studio -->
         <add key="automatic" value="True" />
     </packageRestore>
-
-    <!--
-        Used to specify the default Sources for list, install and update.
-        See: nuget.exe help list
-        See: nuget.exe help install
-        See: nuget.exe help update
-    -->
     <packageSources>
-        <add key="Tom PIT Git - Connected" value="https://git.tompit.com/api/packages/Connected/nuget/index.json" />
+        <add key="Local repository" value="%LOCAL_NUGET%" />
+        <add key="TomPITGit" value="https://git.tompit.com/api/packages/Tom-PIT/nuget/index.json" />
+        <add key="ConnectedGit" value="https://git.tompit.com/api/packages/Connected/nuget/index.json" />
         <add key="NuGet official package source" value="https://api.nuget.org/v3/index.json" />
     </packageSources>
-</configuration>
\ No newline at end of file
+
+    <disabledPackageSources />
+</configuration>
diff --git a/src/Connected.Components/.config/dotnet-tools.json b/src/Connected.Components/.config/dotnet-tools.json
index 271e0bc..aaaa200 100644
--- a/src/Connected.Components/.config/dotnet-tools.json
+++ b/src/Connected.Components/.config/dotnet-tools.json
@@ -1,12 +1,12 @@
 {
-   "version": 1,
-   "isRoot": true,
-   "tools": {
-      "excubo.webcompiler": {
-         "version": "3.5.10",
-         "commands": [
-            "webcompiler"
-         ]
-      }
-   }
+  "version": 1,
+  "isRoot": true,
+  "tools": {
+    "connected.webcompiler": {
+      "version": "1.0.7-prerelease.g67169cf2c5",
+      "commands": [
+        "webcompiler"
+      ]
+    }
+  }
 }
\ No newline at end of file

From 5e4b7e202865d9e25f787bfeb52e67dd0c51df0d Mon Sep 17 00:00:00 2001
From: Jordan-Tompit <janko.jordan@tompit.com>
Date: Tue, 10 Jan 2023 13:59:20 +0100
Subject: [PATCH 2/6] Add class

---
 src/Connected.Components/Components/Alert/Alert.razor | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/Connected.Components/Components/Alert/Alert.razor b/src/Connected.Components/Components/Alert/Alert.razor
index d74cc7b..3da8dc8 100644
--- a/src/Connected.Components/Components/Alert/Alert.razor
+++ b/src/Connected.Components/Components/Alert/Alert.razor
@@ -2,11 +2,8 @@
 
 @inherits UIComponent
 
-<div role="alert"
-	  class="@CompiledClassList"
-	  @attributes="CustomAttributes"
-	  @onclick="Clicked">
-	<div name="alert-content">
+<div role="alert" class="@CompiledClassList" @attributes="CustomAttributes" @onclick="Clicked">
+	<div name="alert-content" class="alert-content">
 
 		@if (GlyphVisible)
 		{

From 5ab2444fbc9a919768affd68d3552b5a34446b43 Mon Sep 17 00:00:00 2001
From: Jordan-Tompit <janko.jordan@tompit.com>
Date: Tue, 10 Jan 2023 14:03:02 +0100
Subject: [PATCH 3/6] Update classes

---
 .../Styles/components/_alert.scss             | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/Connected.Components/Styles/components/_alert.scss b/src/Connected.Components/Styles/components/_alert.scss
index c10e24d..21a0a8d 100644
--- a/src/Connected.Components/Styles/components/_alert.scss
+++ b/src/Connected.Components/Styles/components/_alert.scss
@@ -1,7 +1,7 @@
 @import "../abstracts/variables";
 
 .alert {
-  display: flex;
+  display: flex;  
   padding: 6px 16px;
   border-radius: var(--default-borderradius);
   background-color: transparent;
@@ -12,12 +12,12 @@
   }
 
   &.dense {
-    padding: 0px 12px;
+    padding: 0px 12px; 
   }
-}
+} 
 
 .alert-text {
-  &-normal {
+  &-normal { 
     color: var(--palette-text-primary);
     background-color: var(--palette-dark-hover);
   }
@@ -95,10 +95,23 @@
 }
 
 .alert-position {
-  //flex: 1;
+  flex: 1;
+  display: flex;
+}
+
+.alert-content {
+  flex: 1;
   display: flex;
 }
 
+.alert.justify-end .alert-content {
+  justify-content: flex-end;
+}
+
+.alert.justify-center .alert-content {
+  justify-content: center;
+}
+
 .alert-close {
   display: flex;
   flex: 0;

From a0b6b82efd88f85f62325e79a0fa649b282ecc19 Mon Sep 17 00:00:00 2001
From: Jordan-Tompit <janko.jordan@tompit.com>
Date: Tue, 10 Jan 2023 14:04:29 +0100
Subject: [PATCH 4/6] Test colors

---
 src/Connected.Components/Styles/core/_colors.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Connected.Components/Styles/core/_colors.scss b/src/Connected.Components/Styles/core/_colors.scss
index 227833a..3076233 100644
--- a/src/Connected.Components/Styles/core/_colors.scss
+++ b/src/Connected.Components/Styles/core/_colors.scss
@@ -26,7 +26,7 @@ $pink: (
     'darken-2': #c2185b,
     'darken-3': #ad1457,
     'darken-4': #880e4f,
-    'accent-1': #ff80ab,
+    'accent-1': #00ff00,//#ff80ab,
     'accent-2': #ff4081,
     'accent-3': #f50057,
     'accent-4': #c51162

From cfddc25b1cfe9f923509df1f65095d20183c5fb5 Mon Sep 17 00:00:00 2001
From: Jordan-Tompit <janko.jordan@tompit.com>
Date: Tue, 10 Jan 2023 14:06:21 +0100
Subject: [PATCH 5/6] Test border radius

---
 .../Styles/utilities/borders/_border-radius.scss                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Connected.Components/Styles/utilities/borders/_border-radius.scss b/src/Connected.Components/Styles/utilities/borders/_border-radius.scss
index 7e2dfd8..cc8abff 100644
--- a/src/Connected.Components/Styles/utilities/borders/_border-radius.scss
+++ b/src/Connected.Components/Styles/utilities/borders/_border-radius.scss
@@ -1,4 +1,4 @@
-$border-radiuses: ( "0": 0, "sm": 2px, "lg": 8px, "xl": 24px);
+$border-radiuses: ( "0": 0, "sm": 4px, "lg": 8px, "xl": 24px);
 
 @each $size, $value in $border-radiuses {
     .rounded-#{$size} {

From e190dc9ddf51688557ee83da130304f5ee09dc07 Mon Sep 17 00:00:00 2001
From: Jordan-Tompit <janko.jordan@tompit.com>
Date: Tue, 10 Jan 2023 14:46:26 +0100
Subject: [PATCH 6/6] Create sample page for Alerts

---
 .../Pages/AlertShowcase.razor                 | 408 ++++++++++++++++--
 1 file changed, 374 insertions(+), 34 deletions(-)

diff --git a/src/Connected.Components.Showcase/Pages/AlertShowcase.razor b/src/Connected.Components.Showcase/Pages/AlertShowcase.razor
index 4f4f3e3..bd9e724 100644
--- a/src/Connected.Components.Showcase/Pages/AlertShowcase.razor
+++ b/src/Connected.Components.Showcase/Pages/AlertShowcase.razor
@@ -5,37 +5,377 @@
 <ThemeProvider></ThemeProvider>
 
 
-<Grid>
-    <Item md="4" xs="12">
-        <Alert Severity="Severity.Normal" ClassList="my-2 justify-end dense" CloseGlyphVisible="true">Default Square</Alert>
-        <Alert Severity="Severity.Info" ClassList="my-2">Info Square</Alert>
-        <Alert Severity="Severity.Success" ClassList="my-2">Success Square</Alert>
-        <Alert Severity="Severity.Warning" ClassList="my-2">Warning Square</Alert>
-        <Alert Severity="Severity.Error" ClassList="my-2">Error Square</Alert>
-    </Item>
-    <Item md="4" xs="12">
-        <Alert Severity="Severity.Normal" Variant="Variant.Outlined" GlyphVisible="true" CloseGlyphVisible="true"
-            ClassList="my-2 justify-end elevation-1">
-            Default Square
-        </Alert>
-        <Alert Severity="Severity.Info" Variant="Variant.Outlined" GlyphVisible="true"
-            ClassList="my-2 rounded-xl justify-center">
-            Info Square
-        </Alert>
-        <Alert Severity="Severity.Success" Variant="Variant.Outlined" ClassList="my-2">Success Square
-        </Alert>
-        <Alert Severity="Severity.Warning" Variant="Variant.Outlined" ClassList="my-2">Warning Square
-        </Alert>
-        <Alert Severity="Severity.Error" Variant="Variant.Outlined" ClassList="my-2">Error Square</Alert>
-    </Item>
-    <Item md="4" xs="12">
-        <Alert Severity="Severity.Normal" Variant="Variant.Filled" ClassList="mb-2 mt-3">Default Square
-        </Alert>
-        <Alert Severity="Severity.Info" Variant="Variant.Filled" ClassList="my-2">Info Square</Alert>
-        <Alert Severity="Severity.Success" Variant="Variant.Filled" ClassList="my-2">Success Square
-        </Alert>
-        <Alert Severity="Severity.Warning" Variant="Variant.Filled" ClassList="my-2">Warning Square
-        </Alert>
-        <Alert Severity="Severity.Error" Variant="Variant.Filled" ClassList="my-2">Error Square</Alert>
-    </Item>
-</Grid>
+<ThemeProvider Theme="MyCustomTheme" />
+@code {
+    Theme MyCustomTheme = new Theme()
+    {
+        Palette = new Palette()
+        {
+            Error = "#ffd8e4",
+            ErrorContrastText = "#31111d",
+            //ErrorDarken = Colors.Green.Accent4,
+        },
+        LayoutProperties = new LayoutProperties()
+        {
+            DefaultBorderRadius = "1rem",
+        }
+    };
+}
+
+<Container>
+    <Text Typo="Typo.h3" Align="Align.Left" GutterBottom="true">Alert</Text>
+    <Text Align="Align.Left" GutterBottom="true">An alert is used to notify the user about an important message without interrupting the ongoing task.</Text>
+</Container>
+
+<Container ClassList="mt-12">
+    <Grid>
+        <Item xs="12">
+            <Text Typo="Typo.h5" Align="Align.Left" GutterBottom="true">Simple alert</Text>
+            <Alert Severity="Severity.Normal" GlyphVisible="true" ClassList="my-2">The reactor type is RBMK-1000</Alert>
+            <Alert Severity="Severity.Info" GlyphVisible="true" ClassList="my-2">The reactor was fired up successfully</Alert>
+            <Alert Severity="Severity.Success" GlyphVisible="true" ClassList="my-2">The reactor is running at optimum temperature</Alert>
+            <Alert Severity="Severity.Warning" GlyphVisible="true" ClassList="my-2">The reactor temperature exceeds the optimal range</Alert>
+            <Alert Severity="Severity.Error" GlyphVisible="true" ClassList="my-2">Meltdown is imminent</Alert>
+        </Item>
+    </Grid>
+</Container>
+
+<Container>
+    <pre>
+ <code id="htmlViewer" style="color:rgb(51, 51, 51); font-weight:400;background-color:rgb(248, 248, 248);background:rgb(248, 248, 248);display:block;padding: .5em;"><span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Normal&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>The reactor type is RBMK-1000<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Info&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>The reactor was fired up successfully<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Success&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>The reactor is running at optimum temperature<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Warning&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>The reactor temperature exceeds the optimal range<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Error&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>Meltdown is imminent<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span></code></pre>
+</Container>
+
+<Container ClassList="mt-12">
+    <Grid>
+        <Item xs="12">
+            <Text Typo="Typo.h5" Align="Align.Left" GutterBottom="true">Outlined alert</Text>
+            <Alert Severity="Severity.Normal" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2">The reactor type is RBMK-1000</Alert>
+            <Alert Severity="Severity.Info" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2">The reactor was fired up successfully</Alert>
+            <Alert Severity="Severity.Success" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2">The reactor is running at optimum temperature</Alert>
+            <Alert Severity="Severity.Warning" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2">The reactor temperature exceeds the optimal range</Alert>
+            <Alert Severity="Severity.Error" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2">Meltdown is imminent</Alert>
+        </Item>
+    </Grid>
+</Container>
+
+<Container>
+    <pre>
+ <code id="htmlViewer" style="color:rgb(51, 51, 51); font-weight:400;background-color:rgb(248, 248, 248);background:rgb(248, 248, 248);display:block;padding: 1rem;"><span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Normal&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Outlined&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>The reactor type is RBMK-1000<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Info&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Outlined&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>The reactor was fired up successfully<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Success&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Outlined&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>The reactor is running at optimum temperature<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Warning&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Outlined&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>The reactor temperature exceeds the optimal range<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Error&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Outlined&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>Meltdown is imminent<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span></code></pre>
+</Container>
+
+
+<Container ClassList="mt-12">
+    <Grid>
+        <Item xs="12">
+            <Text Typo="Typo.h5" Align="Align.Left" GutterBottom="true">Outlined alert</Text>
+            <Alert Severity="Severity.Normal" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2">The reactor type is RBMK-1000</Alert>
+            <Alert Severity="Severity.Info" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2">The reactor was fired up successfully</Alert>
+            <Alert Severity="Severity.Success" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2">The reactor is running at optimum temperature</Alert>
+            <Alert Severity="Severity.Warning" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2">The reactor temperature exceeds the optimal range</Alert>
+            <Alert Severity="Severity.Error" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2">Meltdown is imminent</Alert>
+        </Item>
+    </Grid>
+</Container>
+
+<Container>
+    <pre>
+ <code id="htmlViewer" style="color:rgb(51, 51, 51); font-weight:400;background-color:rgb(248, 248, 248);background:rgb(248, 248, 248);display:block;padding: .5em;"><span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Normal&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Filled&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>The reactor type is RBMK-1000<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Info&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Filled&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>The reactor was fired up successfully<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Success&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Filled&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>The reactor is running at optimum temperature<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Warning&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Filled&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>The reactor temperature exceeds the optimal range<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Error&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Filled&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>Meltdown is imminent<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span></code></pre>
+</Container>
+
+
+
+<Container ClassList="mt-12">
+    <div>
+        <Text Typo="Typo.h5" Align="Align.Left" GutterBottom="true">Dense</Text>
+        <Text Align="Align.Left" GutterBottom="true">Taking up too much space? Insert dense class in ClassList. It removes the vertical padding and lowers the horizontal.
+        </Text>
+    </div>
+    <Grid>
+        <Item md="4" xs="12">
+            <Alert Severity="Severity.Normal" GlyphVisible="true" ClassList="my-2 dense">Dense Default</Alert>
+            <Alert Severity="Severity.Info" GlyphVisible="true" ClassList="my-2 dense">Dense Info</Alert>
+            <Alert Severity="Severity.Success" GlyphVisible="true" ClassList="my-2 dense">Dense Success</Alert>
+            <Alert Severity="Severity.Warning" GlyphVisible="true" ClassList="my-2 dense">Dense Warning</Alert>
+            <Alert Severity="Severity.Error" GlyphVisible="true" ClassList="my-2 dense">Dense Errorr</Alert>
+        </Item>
+        <Item md="4" xs="12">
+            <Alert Severity="Severity.Normal" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 dense">Dense Default</Alert>
+            <Alert Severity="Severity.Info" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 dense">Dense Info</Alert>
+            <Alert Severity="Severity.Success" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 dense">Dense Success</Alert>
+            <Alert Severity="Severity.Warning" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 dense">Dense Warning</Alert>
+            <Alert Severity="Severity.Error" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 dense">Dense Error</Alert>
+        </Item>
+        <Item md="4" xs="12">
+            <Alert Severity="Severity.Normal" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 dense">Dense Default</Alert>
+            <Alert Severity="Severity.Info" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 dense">Dense Info</Alert>
+            <Alert Severity="Severity.Success" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 dense">Dense Success</Alert>
+            <Alert Severity="Severity.Warning" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 dense">Dense Warning</Alert>
+            <Alert Severity="Severity.Error" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 dense">Dense Error</Alert>
+        </Item>
+    </Grid>
+</Container>
+
+<Container>
+    <pre>
+ <code id="htmlViewer" style="color:rgb(51, 51, 51); font-weight:400;background-color:rgb(248, 248, 248);background:rgb(248, 248, 248);display:block;padding: .5em;"><span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Grid</span>&gt;</span>
+    <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;4&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;12&quot;</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Normal&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 dense&quot;</span>&gt;</span>Dense Default<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Info&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 dense&quot;</span>&gt;</span>Dense Info<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Success&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 dense&quot;</span>&gt;</span>Dense Success<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Warning&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 dense&quot;</span>&gt;</span>Dense Warning<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Error&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 dense&quot;</span>&gt;</span>Dense Errorr<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+    <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>&gt;</span>
+    <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;4&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;12&quot;</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Normal&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Outlined&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 dense&quot;</span>&gt;</span>Dense Default<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Info&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Outlined&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 dense&quot;</span>&gt;</span>Dense Info<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Success&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Outlined&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 dense&quot;</span>&gt;</span>Dense Success<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Warning&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Outlined&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 dense&quot;</span>&gt;</span>Dense Warning<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Error&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Outlined&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 dense&quot;</span>&gt;</span>Dense Error<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+    <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>&gt;</span>
+    <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;4&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;12&quot;</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Normal&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Filled&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 dense&quot;</span>&gt;</span>Dense Default<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Info&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Filled&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 dense&quot;</span>&gt;</span>Dense Info<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Success&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Filled&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 dense&quot;</span>&gt;</span>Dense Success<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Warning&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Filled&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 dense&quot;</span>&gt;</span>Dense Warning<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Error&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Filled&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 dense&quot;</span>&gt;</span>Dense Error<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+    <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>&gt;</span>
+<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Grid</span>&gt;</span></code></pre>
+</Container>
+
+
+
+<Container ClassList="mt-12">
+    <div>
+        <Text Typo="Typo.h5" Align="Align.Left" GutterBottom="true">No Icons</Text>
+        <Text Align="Align.Left" GutterBottom="true">You can disable the alert icons with the bool GlyphVisible set to false.</Text>
+    </div>
+    <Grid>
+        <Item md="4" xs="12">
+            <Alert Severity="Severity.Normal" GlyphVisible="false" ClassList="my-2">No Icon Default</Alert>
+            <Alert Severity="Severity.Info" GlyphVisible="false" ClassList="my-2 ">No Icon Info</Alert>
+            <Alert Severity="Severity.Success" GlyphVisible="false" ClassList="my-2">No Icon Success</Alert>
+            <Alert Severity="Severity.Warning" GlyphVisible="false" ClassList="my-2">No Icon Warning</Alert>
+            <Alert Severity="Severity.Error" GlyphVisible="false" ClassList="my-2">No Icon Error</Alert>
+        </Item>
+        <Item md="4" xs="12">
+            <Alert Severity="Severity.Normal" Variant="Variant.Outlined" GlyphVisible="false" ClassList="my-2">No Icon Default</Alert>
+            <Alert Severity="Severity.Info" Variant="Variant.Outlined" GlyphVisible="false" ClassList="my-2">No Icon Info</Alert>
+            <Alert Severity="Severity.Success" Variant="Variant.Outlined" GlyphVisible="false" ClassList="my-2">No Icon Success</Alert>
+            <Alert Severity="Severity.Warning" Variant="Variant.Outlined" GlyphVisible="false" ClassList="my-2">No Icon Warning</Alert>
+            <Alert Severity="Severity.Error" Variant="Variant.Outlined" GlyphVisible="false" ClassList="my-2 ">No Icon Error</Alert>
+        </Item>
+        <Item md="4" xs="12">
+            <Alert Severity="Severity.Normal" Variant="Variant.Filled" GlyphVisible="false" ClassList="my-2 ">No Icon Default</Alert>
+            <Alert Severity="Severity.Info" Variant="Variant.Filled" GlyphVisible="false" ClassList="my-2 ">No Icon Info</Alert>
+            <Alert Severity="Severity.Success" Variant="Variant.Filled" GlyphVisible="false" ClassList="my-2 ">No Icon Success</Alert>
+            <Alert Severity="Severity.Warning" Variant="Variant.Filled" GlyphVisible="false" ClassList="my-2 ">No Icon Warning</Alert>
+            <Alert Severity="Severity.Error" Variant="Variant.Filled" GlyphVisible="false" ClassList="my-2 ">No Icon Error</Alert>
+        </Item>
+    </Grid>
+</Container>
+
+<Container>
+    <pre>
+ <code id="htmlViewer" style="color:rgb(51, 51, 51); font-weight:400;background-color:rgb(248, 248, 248);background:rgb(248, 248, 248);display:block;padding: .5em;"><span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Grid</span>&gt;</span>
+    <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;4&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;12&quot;</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Normal&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;false&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>No Icon Default<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Info&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;false&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 &quot;</span>&gt;</span>No Icon Info<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Success&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;false&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>No Icon Success<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Warning&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;false&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>No Icon Warning<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Error&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;false&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>No Icon Error<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+    <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>&gt;</span>
+    <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;4&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;12&quot;</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Normal&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Outlined&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;false&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>No Icon Default<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Info&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Outlined&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;false&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>No Icon Info<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Success&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Outlined&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;false&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>No Icon Success<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Warning&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Outlined&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;false&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>No Icon Warning<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Error&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Outlined&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;false&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 &quot;</span>&gt;</span>No Icon Error<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+    <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>&gt;</span>
+    <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;4&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;12&quot;</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Normal&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Filled&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;false&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 &quot;</span>&gt;</span>No Icon Default<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Info&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Filled&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;false&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 &quot;</span>&gt;</span>No Icon Info<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Success&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Filled&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;false&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 &quot;</span>&gt;</span>No Icon Success<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Warning&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Filled&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;false&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 &quot;</span>&gt;</span>No Icon Warning<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Error&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Filled&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;false&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 &quot;</span>&gt;</span>No Icon Error<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+    <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>&gt;</span>
+<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Grid</span>&gt;</span></code></pre>
+</Container>
+
+
+
+<Container ClassList="mt-12">
+    <div>
+        <Text Typo="Typo.h5" Align="Align.Left" GutterBottom="true">Rounded and Square</Text>
+        <Text Align="Align.Left" GutterBottom="true">By default, the alert is set to rounded corners by your theme's
+            default value. If you need a square Alert but don't want to change the theme, insert class rounded-0 in
+            ClassList or change the default radius width classes rounded-sm, rounded-lg, rounded-xl.</Text>
+    </div>
+    <Grid>
+        <Item md="4" xs="12">
+            <Alert Severity="Severity.Normal" GlyphVisible="true" ClassList="my-2 rounded-0">Rounded-0 Default</Alert>
+            <Alert Severity="Severity.Info" GlyphVisible="true" ClassList="my-2 rounded">Rounded Info</Alert>
+            <Alert Severity="Severity.Success" GlyphVisible="true" ClassList="my-2 rounded-sm">Rounded-sm Success</Alert>
+            <Alert Severity="Severity.Warning" GlyphVisible="true" ClassList="my-2 rounded-lg">Rounded-lg Warning</Alert>
+            <Alert Severity="Severity.Error" GlyphVisible="true" ClassList="my-2 rounded-xl">Rounded-xl Error</Alert>
+        </Item>
+        <Item md="4" xs="12">
+            <Alert Severity="Severity.Normal" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 rounded-0">Rounded-0 Default</Alert>
+            <Alert Severity="Severity.Info" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 rounded">Rounded Info</Alert>
+            <Alert Severity="Severity.Success" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 rounded-sm">Rounded-sm Success</Alert>
+            <Alert Severity="Severity.Warning" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 rounded-lg">Rounded-lg Warning</Alert>
+            <Alert Severity="Severity.Error" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 rounded-xl">Rounded-xl Error</Alert>
+        </Item>
+        <Item md="4" xs="12">
+            <Alert Severity="Severity.Normal" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 rounded-0">Rounded-0 Default</Alert>
+            <Alert Severity="Severity.Info" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 rounded">Rounded Info</Alert>
+            <Alert Severity="Severity.Success" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 rounded-sm">Rounded-sm Success</Alert>
+            <Alert Severity="Severity.Warning" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 rounded-lg">Rounded-lg Warning</Alert>
+            <Alert Severity="Severity.Error" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 rounded-xl">Rounded-xl Error</Alert>
+        </Item>
+    </Grid>
+</Container>
+
+<Container>
+    <pre>
+ <code id="htmlViewer" style="color:rgb(51, 51, 51); font-weight:400;background-color:rgb(248, 248, 248);background:rgb(248, 248, 248);display:block;padding: .5em;"><span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Grid</span>&gt;</span>
+    <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;4&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;12&quot;</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Normal&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 rounded-0&quot;</span>&gt;</span>Rounded-0 Default<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Info&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 rounded&quot;</span>&gt;</span>Rounded Info<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Success&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 rounded-sm&quot;</span>&gt;</span>Rounded-sm Success<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Warning&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 rounded-lg&quot;</span>&gt;</span>Rounded-lg Warning<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Error&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 rounded-xl&quot;</span>&gt;</span>Rounded-xl Error<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+    <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>&gt;</span>
+    <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;4&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;12&quot;</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Normal&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Outlined&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 rounded-0&quot;</span>&gt;</span>Rounded-0 Default<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Info&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Outlined&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 rounded&quot;</span>&gt;</span>Rounded Info<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Success&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Outlined&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 rounded-sm&quot;</span>&gt;</span>Rounded-sm Success<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Warning&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Outlined&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 rounded-lg&quot;</span>&gt;</span>Rounded-lg Warning<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Error&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Outlined&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 rounded-xl&quot;</span>&gt;</span>Rounded-xl Error<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+    <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>&gt;</span>
+    <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;4&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;12&quot;</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Normal&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Filled&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 rounded-0&quot;</span>&gt;</span>Rounded-0 Default<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Info&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Filled&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 rounded&quot;</span>&gt;</span>Rounded Info<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Success&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Filled&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 rounded-sm&quot;</span>&gt;</span>Rounded-sm Success<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Warning&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Filled&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 rounded-lg&quot;</span>&gt;</span>Rounded-lg Warning<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Error&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Filled&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 rounded-xl&quot;</span>&gt;</span>Rounded-xl Error<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+    <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>&gt;</span>
+<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Grid</span>&gt;</span></code></pre>
+</Container>
+
+
+
+
+<Container ClassList="mt-12">
+    <div>
+        <Text Typo="Typo.h5" Align="Align.Left" GutterBottom="true">Elevation</Text>
+        <Text Align="Align.Left" GutterBottom="true">The component also accepts the Elevation class set a scale from elevation-1 to elevation-24 in ClassList.</Text>
+    </div>
+    <Grid>
+        <Item md="4" xs="12">
+            <Alert Severity="Severity.Normal" GlyphVisible="true" ClassList="my-2 elevation-8">elevation-8</Alert>
+        </Item>
+        <Item md="4" xs="12">
+            <Alert Severity="Severity.Info" GlyphVisible="true" ClassList="my-2 elevation-16">elevation-16</Alert>
+        </Item>
+        <Item md="4" xs="12">
+            <Alert Severity="Severity.Success" GlyphVisible="true" ClassList="my-2 elevation-24">elevation-24</Alert>
+        </Item>
+    </Grid>
+</Container>
+
+<Container>
+    <pre>
+ <code id="htmlViewer" style="color:rgb(51, 51, 51); font-weight:400;background-color:rgb(248, 248, 248);background:rgb(248, 248, 248);display:block;padding: .5em;"><span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Grid</span>&gt;</span>
+    <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;4&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;12&quot;</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Normal&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 elevation-8&quot;</span>&gt;</span>elevation-8 Default<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+    <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>&gt;</span>
+    <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;4&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;12&quot;</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Normal&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 elevation-16&quot;</span>&gt;</span>elevation-16 Default<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+    <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>&gt;</span>
+    <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;4&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;12&quot;</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Normal&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 elevation-24&quot;</span>&gt;</span>elevation-24 Default<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+    <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>&gt;</span>
+<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Grid</span>&gt;</span></code></pre>
+</Container>
+
+
+<Container ClassList="mt-12">
+    <div>
+        <Text Typo="Typo.h5" Align="Align.Left" GutterBottom="true">Content Alignment</Text>
+        <Text Align="Align.Left" GutterBottom="true">Insert Utility class for the Alignment property in ClassList to define the content alignment - justify-center or justify-end</Text>
+    </div>
+    <Grid>
+        <Item md="4" xs="12">
+            <Alert Severity="Severity.Normal" GlyphVisible="true" ClassList="my-2">Default Alignment</Alert>
+        </Item>
+        <Item md="4" xs="12">
+            <Alert Severity="Severity.Info" GlyphVisible="true" ClassList="my-2 justify-center">Center Alignment</Alert>
+        </Item>
+        <Item md="4" xs="12">
+            <Alert Severity="Severity.Success" GlyphVisible="true" ClassList="my-2 justify-end">Right Alignment</Alert>
+        </Item>
+    </Grid>
+</Container>
+
+<Container>
+    <pre>
+ <code id="htmlViewer" style="color:rgb(51, 51, 51); font-weight:400;background-color:rgb(248, 248, 248);background:rgb(248, 248, 248);display:block;padding: .5em;"><span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Grid</span>&gt;</span>
+    <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;4&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;12&quot;</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Normal&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>Default Alignment<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+    <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>&gt;</span>
+    <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;4&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;12&quot;</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Normal&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 justify-center&quot;</span>&gt;</span>Center Alignment<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+    <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>&gt;</span>
+    <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;4&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;12&quot;</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Normal&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 justify-end&quot;</span>&gt;</span>Right Alignment<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+    <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>&gt;</span>
+<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Grid</span>&gt;</span></code></pre>
+</Container>
+
+
+
+<Container ClassList="mt-12">
+    <div>
+        <Text Typo="Typo.h5" Align="Align.Left" GutterBottom="true">Close Icon and Event</Text>
+        <Text Align="Align.Left" GutterBottom="true">Set the CloseGlyphVisible property to True to display a Close icon.
+            CloseIconClicked provides the EventCallback when clicking on the Close icon of the alert</Text>
+    </div>
+    <Grid>
+        <Item md="4" xs="12">
+            <Alert Severity="Severity.Normal" GlyphVisible="true" CloseGlyphVisible="true" ClassList="my-2">Time to leave. Please close me!</Alert>
+        </Item>
+        <Item md="4" xs="12">
+            <Alert Severity="Severity.Info" GlyphVisible="true" CloseGlyphVisible="true" ClassList="my-2 justify-center">Time to leave. Please close me!</Alert>
+        </Item>
+        <Item md="4" xs="12">
+            <Alert Severity="Severity.Success" GlyphVisible="true" CloseGlyphVisible="true" ClassList="my-2 justify-end">RTime to leave. Please close me!</Alert>
+        </Item>
+    </Grid>
+</Container>
+
+<Container>
+    <pre>
+ <code id="htmlViewer" style="color:rgb(51, 51, 51); font-weight:400;background-color:rgb(248, 248, 248);background:rgb(248, 248, 248);display:block;padding: .5em;"><span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Grid</span>&gt;</span>
+    <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;4&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;12&quot;</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Normal&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">CloseGlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>Time to leave. Please close me!<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+    <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>&gt;</span>
+    <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;4&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;12&quot;</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Info&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">CloseGlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 justify-center&quot;</span>&gt;</span>Time to leave. Please close me!<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+    <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>&gt;</span>
+    <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;4&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;12&quot;</span>&gt;</span>
+        <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Success&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">CloseGlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 justify-end&quot;</span>&gt;</span>RTime to leave. Please close me!<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
+    <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>&gt;</span>
+<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Grid</span>&gt;</span></code></pre>
+</Container>