Merge pull request #152 from Blazorade/feature/showroom

Added typography section to the showroom

Author: MikaBerglund

Blazorade.Bootstrap.Components.Showroom/Host/Shared/MainMenu.razor

@@ -10,14 +10,14 @@
                 new MenuItem { Text = "Grid", Url = "grid", Description = "Use the powerful grid system to build mobile-first layouts of all shapes and sizes." },
             }
         },
-        //new MenuItem
-        //{
-        //    Text = "Content",
-        //    Children = new List<MenuItem>
-        //    {
-
-        //    }
-        //},
+        new MenuItem
+        {
+            Text = "Content",
+            Children = new List<MenuItem>
+            {
+                new MenuItem { Text = "Typography", Url = "typography", Description = "Support for typography in Bootstrap."}
+            }
+        },
         new MenuItem
         {
             Text = "Components",
@@ -59,7 +59,7 @@
             IsDisabled = true,
             Children = new List<MenuItem>
             {
-                
+
             }
         }
     };

Blazorade.Bootstrap.Components.Showroom/Typography.razor

@@ -0,0 +1,63 @@
+
+<Heading Level="2">Typography</Heading>
+
+<Paragraph>
+    Blazorade Bootstrap supports much of the typography support in Bootstrap. This section showcases this support.
+</Paragraph>
+<DocsSection ComponentName="Typography" />
+
+
+<Heading Id="headings" IsAnchor="true" Level="3" MarginTop="5">Headings</Heading>
+<Paragraph>
+    All heading sizes are supported.
+</Paragraph>
+<DocsSection ComponentName="Heading" />
+
+<Heading Level="1">h1 Heading</Heading>
+<Heading Level="2">h2 Heading</Heading>
+<Heading Level="3">h3 Heading</Heading>
+<Heading Level="4">h4 Heading</Heading>
+<Heading Level="5">h5 Heading</Heading>
+<Heading Level="6">h6 Heading</Heading>
+
+
+
+<Heading Id="display" IsAnchor="true" Level="3" MarginTop="5">Display Headings</Heading>
+<Paragraph>
+    If you need a heading to stand out, you can use a display heading. This is a larger size heading. This is
+    used for instance in the <code><Anchor Url="jumbotrons">Jumbotron</Anchor></code> component.
+</Paragraph>
+
+<Heading Level="1" Display="1">H1 Display 1</Heading>
+<Heading Level="1" Display="2">H1 Display 2</Heading>
+<Heading Level="1" Display="3">H1 Display 3</Heading>
+<Heading Level="1" Display="4">H1 Display 4</Heading>
+
+
+
+<Heading Id="lead" IsAnchor="true" Level="3" MarginTop="5">Lead</Heading>
+<Paragraph>
+    Make a paragraph stand out by making it into a lead paragraph.
+</Paragraph>
+<DocsSection ComponentName="Paragraph" />
+
+<Paragraph IsLead="true">
+    This is a lead paragraph, with slightly bigger font.
+</Paragraph>
+<Paragraph>
+    This is just a standard paragraph.
+</Paragraph>
+
+
+
+<Heading Id="lead" IsAnchor="true" Level="3" MarginTop="5">Lead</Heading>
+<Paragraph>
+    For quoting blocks of content from another source, you can use the <code>Blockquote</code> component.
+</Paragraph>
+<DocsSection ComponentName="Blockquote" />
+
+<Blockquote>
+    <Paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+    </Paragraph>
+</Blockquote>

ClientTestHost/Pages/Typography.razor

@@ -0,0 +1,3 @@
+@page "/typography"
+
+<Blazorade.Bootstrap.Components.Showroom.Typography />

ServerTestHost/Pages/Typography.razor

@@ -0,0 +1,3 @@
+@page "/typography"
+
+<Blazorade.Bootstrap.Components.Showroom.Typography />