Atomic Elements: h1 - h6

Author: sjefvanleeuwen

src/Blazor.AdminLte.Site.Shared/Pages/Layout/GridSystem.razor

@@ -73,7 +73,7 @@
             </Row>
         </Body>
     </Card>
-        <h3>Responsive classes</h3>
+        <H3>Responsive classes</H3>
         <p>
             Bootstrap’s grid includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.
         </p>

src/Blazor.AdminLte.Site.Shared/Pages/Widgets/Widgets.razor

@@ -6,7 +6,7 @@
         </Header>
     </ContentHeader>
     <ContentMain>
-        <h5>Info Box</h5>
+        <H5>Info Box</H5>
         <Row>
             <Column Classes="col.md._3">
                 <InfoBox IconBackgroundColor="Color.Danger" Icon="far fa-envelope">
@@ -33,7 +33,7 @@
                 </InfoBox>
             </Column>
         </Row>
-        <h5>Info Box With bg-*</h5>
+        <H5>Info Box With bg-*</H5>
         <Row>
             <Column Classes="col.md._3">
                 <InfoBox BackgroundColor="Color.Info" Icon="far fa-bookmark" Percentage=70>
@@ -64,7 +64,7 @@
                 </InfoBox>
             </Column>
         </Row>
-        <h5>Info Box With bg-gradient-*</h5>
+        <H5>Info Box With bg-gradient-*</H5>
         <Row>
             <Column Classes="col.md._3">
                 <InfoBox Gradient="Gradient.Gradient" BackgroundColor="Color.Info" Icon="far fa-bookmark" Percentage=70>
@@ -95,7 +95,7 @@
                 </InfoBox>
             </Column>
         </Row>
-        <h5>Small Box</h5>
+        <H5>Small Box</H5>
         <Row>
             <Column Classes="col.md._3">
                 <SmallBox Icon="fas fa-shopping-cart" BackgroundColor="Color.Info">
@@ -144,8 +144,8 @@
 
         </Row>
 
-        <h4>Cards</h4>
-        <h5>Abilities</h5>
+        <H4>Cards</H4>
+        <H5>Abilities</H5>
         <Row>
             <Column Classes="col.md._3">
                 <Card HeaderBackgroundColor="Color.Primary" ToolOptions="new CardToolOptions { Expandable = true }">
@@ -233,7 +233,7 @@
         </Row>
 
 
-        <h5>Color Variations</h5>
+        <H5>Color Variations</H5>
         <Row>
             <Column Classes="col.md._3">
                 <Card HeaderBackgroundColor="Color.Primary" ToolOptions="new CardToolOptions { Collapsable = true }">
@@ -385,7 +385,7 @@
             </Column>
         </Row>
 
-        <h5>Custom Tools</h5>
+        <H5>Custom Tools</H5>
         <Row>
             <Column Classes="col.md._3">
                 <!-- This component is just for example purposes -->
@@ -406,9 +406,9 @@
         </Row>
 
 
-        <h4>Direct Chat</h4>
+        <H4>Direct Chat</H4>
 
-        <h3>Social Widgets</h3>
+        <H3>Social Widgets</H3>
         <Row>
             <Column Classes="col.md._4">
 

src/Blazor.AdminLte/Atoms/H1.razor

@@ -0,0 +1,6 @@
+@namespace Blazor.AdminLte
+<h1>@ChildContent</h1>
+@code {
+    [Parameter]
+    public RenderFragment ChildContent { get; set; }
+}

src/Blazor.AdminLte/Atoms/H2.razor

@@ -0,0 +1,6 @@
+@namespace Blazor.AdminLte
+<h2>@ChildContent</h2>
+@code {
+    [Parameter]
+    public RenderFragment ChildContent { get; set; }
+}

src/Blazor.AdminLte/Atoms/H3.razor

@@ -0,0 +1,6 @@
+@namespace Blazor.AdminLte
+<h3>@ChildContent</h3>
+@code {
+    [Parameter]
+    public RenderFragment ChildContent { get; set; }
+}

src/Blazor.AdminLte/Atoms/H4.razor

@@ -0,0 +1,6 @@
+@namespace Blazor.AdminLte
+<h4>@ChildContent</h4>
+@code {
+    [Parameter]
+    public RenderFragment ChildContent { get; set; }
+}

src/Blazor.AdminLte/Atoms/H5.razor

@@ -0,0 +1,6 @@
+@namespace Blazor.AdminLte
+<h5>@ChildContent</h5>
+@code {
+    [Parameter]
+    public RenderFragment ChildContent { get; set; }
+}

src/Blazor.AdminLte/Atoms/H6.razor

@@ -0,0 +1,6 @@
+@namespace Blazor.AdminLte
+<h6>@ChildContent</h6>
+@code {
+    [Parameter]
+    public RenderFragment ChildContent { get; set; }
+}