From c86e92a9a9359006b488e83d0934be14c0975621 Mon Sep 17 00:00:00 2001
From: Dmitry Nehaychik <4dmitr@gmail.com>
Date: Thu, 13 Jul 2017 16:34:06 +0300
Subject: [PATCH] feat(typography): complete typography

---
 .../pages/dashboard/dashboard.component.html  |  4 +-
 .../typography/typography.component.html      | 98 +++++++++++++++++--
 2 files changed, 94 insertions(+), 8 deletions(-)

diff --git a/src/app/pages/dashboard/dashboard.component.html b/src/app/pages/dashboard/dashboard.component.html
index 8bbedce7..e7f5c6b4 100644
--- a/src/app/pages/dashboard/dashboard.component.html
+++ b/src/app/pages/dashboard/dashboard.component.html
@@ -46,7 +46,7 @@
 
 <div class="row">
   <div class="col-lg-3">
-    <nga-card size="small">
+    <nga-card size="xsmall">
       <nga-card-header>Solar Energy Consumption</nga-card-header>
       <nga-card-body></nga-card-body>
     </nga-card>
@@ -55,7 +55,7 @@
   </div>
 
   <div class="col-lg-3">
-    <nga-card size="small">
+    <nga-card size="xsmall">
       <nga-card-header>Traffic Consumption</nga-card-header>
       <nga-card-body></nga-card-body>
     </nga-card>
diff --git a/src/app/pages/ui-features/typography/typography.component.html b/src/app/pages/ui-features/typography/typography.component.html
index 2d36d23d..47b9dfcd 100644
--- a/src/app/pages/ui-features/typography/typography.component.html
+++ b/src/app/pages/ui-features/typography/typography.component.html
@@ -1,9 +1,8 @@
 <div class="row">
-
   <div class="col-md-9">
     <div class="row">
       <div class="col-md-7">
-        <nga-card size="large">
+        <nga-card size="medium">
           <nga-card-header>
             Used Fonts
           </nga-card-header>
@@ -46,7 +45,7 @@
         </nga-card>
       </div>
       <div class="col-md-5">
-        <nga-card size="large">
+        <nga-card size="medium">
           <nga-card-header>
             Headings
           </nga-card-header>
@@ -111,7 +110,7 @@
       </div>
 
       <div class="col-md-7">
-        <nga-card size="medium">
+        <nga-card size="small">
           <nga-card-header>
             Article Example
           </nga-card-header>
@@ -137,9 +136,8 @@
           <nga-card-footer></nga-card-footer>
         </nga-card>
       </div>
-
       <div class="col-md-5">
-        <nga-card size="medium">
+        <nga-card size="small">
           <nga-card-header>
             Blockquotes
           </nga-card-header>
@@ -230,3 +228,91 @@
     </nga-card>
   </div>
 </div>
+
+
+<div class="row">
+  <div class="col-md-9">
+    <div class="row">
+      <div class="col-md-7">
+        <nga-card size="large">
+          <nga-card-header>
+            Alerts
+          </nga-card-header>
+          <nga-card-body>
+            <div class="alert alert-primary" role="alert">
+              <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
+            </div>
+            <div class="alert alert-hint" role="alert">
+              <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
+            </div>
+            <div class="alert alert-success" role="alert">
+              <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
+            </div>
+            <div class="alert alert-info" role="alert">
+              <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
+            </div>
+            <div class="alert alert-warning" role="alert">
+              <strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
+            </div>
+            <div class="alert alert-danger" role="alert">
+              <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
+            </div>
+          </nga-card-body>
+          <nga-card-footer></nga-card-footer>
+        </nga-card>
+      </div>
+      <div class="col-md-5">
+        <nga-card size="large">
+          <nga-card-header>
+            Text Types
+          </nga-card-header>
+          <nga-card-body>
+            <h4>Highlighted text</h4>
+            <p class="mb-5">
+              Far far away, behind the word mountains, far from the countries
+              Vokalia and <mark>Consonantia, there live the blind texts.</mark>
+            </p>
+            <h4>Bold Text</h4>
+            <p class="mb-5">
+              Far far away, behind the word mountains, far from the countries
+              Vokalia and <strong>Consonantia, there live the blind texts.</strong>
+            </p>
+            <h4>Link Text</h4>
+            <p class="mb-5">
+              Far far away, behind the word mountains, far from the countries
+              Vokalia and <a href="http://google.com" target="_blank">Consonantia, there live the blind texts.</a>
+            </p>
+          </nga-card-body>
+          <nga-card-footer></nga-card-footer>
+        </nga-card>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-3">
+    <nga-card size="large">
+      <nga-card-header>
+        Lists
+      </nga-card-header>
+      <nga-card-body>
+        <h4>Ordered List</h4>
+        <ol class="mb-5">
+          <li>Far far away, behind the word mountains</li>
+          <li>Far from the countries Vokalia and Consonantia</li>
+          <li>There live the blind texts.</li>
+          <li>Right at the coast of the Semantics.</li>
+          <li>A small river named Duden flows</li>
+        </ol>
+
+        <h4>Unordered List</h4>
+        <ul class="mb-5">
+          <li>Far far away, behind the word mountains</li>
+          <li>Far from the countries Vokalia and Consonantia</li>
+          <li>There live the blind texts.</li>
+          <li>Right at the coast of the Semantics.</li>
+          <li>A small river named Duden flows</li>
+        </ul>
+      </nga-card-body>
+      <nga-card-footer></nga-card-footer>
+    </nga-card>
+  </div>
+</div>