feat(ui-features): add a typography page

src/app/@theme/styles/cosmic/cosmic.theme.scss

@@ -24,3 +24,7 @@ $theme-name: 'cosmic';
 // @nga/maps module styles
 @import '~@nga/theme/overrides/maps/styles/themes/nga.theme.default';
 @include nga-maps($theme-name);
+
+// @nga/typography module styles
+@import '~@nga/theme/overrides/typography/styles/themes/nga.theme.default';
+@include nga-typography($theme-name);

src/app/@theme/styles/light/light.theme.scss

@@ -23,3 +23,7 @@ $theme-name: 'light';
 // @nga/maps module styles
 @import '~@nga/theme/overrides/maps/styles/themes/nga.theme.default';
 @include nga-maps($theme-name);
+
+// @nga/typography module styles
+@import '~@nga/theme/overrides/typography/styles/themes/nga.theme.default';
+@include nga-typography($theme-name);

src/app/pages/pages-menu.ts

@@ -26,6 +26,9 @@ export const menuItems: List<NgaMenuItem> = List([{
   }, {
     title: 'Modals',
     link: '/pages/ui-features/modals',
+  }, {
+    title: 'Typography',
+    link: '/pages/ui-features/typography',
   }]),
 }, {
   title: 'Components',

src/app/pages/ui-features/typography/typography.component.html

@@ -0,0 +1,231 @@
+<div class="row">
+  <div class="col-md-6">
+    <nga-card>
+      <nga-card-header>
+        Text size
+      </nga-card-header>
+      <nga-card-body>
+        <div>
+          <h1>H1. Heading 1</h1>
+
+          <p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat vestibulum
+            eleifend pellentesque.</p>
+        </div>
+        <div>
+          <h2>H2. Heading 2</h2>
+
+          <p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat vestibulum
+            eleifend pellentesque.</p>
+        </div>
+        <div>
+          <h3>H3. Heading 3</h3>
+
+          <p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat vestibulum
+            eleifend pellentesque.</p>
+        </div>
+        <div>
+          <h4>H4. Heading 4</h4>
+
+          <p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra,.</p>
+        </div>
+        <div>
+          <h5>H5. Heading 5</h5>
+
+          <p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra.</p>
+        </div>
+      </nga-card-body>
+      <nga-card-footer></nga-card-footer>
+    </nga-card>
+  </div>
+  <div class="col-md-6">
+    <nga-card>
+      <nga-card-header>
+        Some more text
+      </nga-card-header>
+      <nga-card-body>
+        <div class="font-italic">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula
+            sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed ornare nulla. Nullam quis risus
+            eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis.
+          </p>
+        </div>
+        <div class="font-weight-normal">
+          <p>Curabitur bibendum ornare dolor, quis ullamcorper ligula dfgz`zzsodales at. Nullam quis risus eget urna mollis
+            ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam
+            id dolor id.
+          </p>
+        </div>
+        <div class="text-uppercase font-weight-bold">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula
+            sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed ornare nulla. </p>
+        </div>
+        <div class="font-weight-bold">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullam-corper ligula
+            sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed ornare nulla.
+          </p>
+        </div>
+        <div class="small">
+          <p>Secondary text. Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar,</p>
+
+          <p>lacinia scelerisque pharetra, placerat vestibulum eleifend</p>
+
+          <p> pellentesque, mi nam.</p>
+        </div>
+      </nga-card-body>
+      <nga-card-footer></nga-card-footer>
+    </nga-card>
+  </div>
+</div>
+<div class="row">
+  <div class="col-md-6">
+    <nga-card>
+      <nga-card-header>
+        Lists
+      </nga-card-header>
+      <nga-card-body>
+        <div>
+          <h5>Unordered list:</h5>
+          <ul class="theme">
+            <li>Lorem ipsum dolor sit amet</li>
+            <li>Сlacinia scelerisque pharetra
+              <ul>
+                <li>Dui rhoncus quisque integer lorem
+                  <ul>
+                    <li>Libero iaculis vestibulum eu vitae</li>
+                  </ul>
+                </li>
+              </ul>
+            </li>
+            <li>Nisl lectus nibh habitasse suspendisse ut</li>
+            <li><span>Posuere cursus hac, vestibulum wisi nulla bibendum</span></li>
+          </ul>
+          <h5>Ordered Lists:</h5>
+          <ol class="theme">
+            <li><span>Eu non nec cursus quis mollis, amet quam nec</span></li>
+            <li><span>Et suspendisse, adipiscing fringilla ornare sit ligula sed</span>
+              <ol>
+                <li><span>Interdum et justo nulla</span>
+                  <ol>
+                    <li><span>Magna amet, suscipit suscipit non amet</span></li>
+                  </ol>
+                </li>
+              </ol>
+            </li>
+            <li><span>Metus duis eu non eu ridiculus turpis</span></li>
+            <li>
+              <span>Neque egestas id fringilla consectetuer justo curabitur, wisi magna neque commodo volutpat</span>
+            </li>
+          </ol>
+          <div>Important text fragment. Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra.
+          </div>
+        </div>
+      </nga-card-body>
+      <nga-card-footer></nga-card-footer>
+    </nga-card>
+  </div>
+  <div class="col-md-6">
+    <nga-card>
+      <nga-card-header>
+        Text color
+      </nga-card-header>
+      <nga-card-body>
+        <div class="text-danger">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula
+            sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed ornare nulla. Nullam quis risus
+            eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
+            mus.
+          </p>
+        </div>
+        <div class="text-warning">
+          <p>Curabitur bibendum ornare dolor, quis ullamcorper ligula dfgz`zzsodales at. Nullam quis risus eget urna mollis
+            ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam
+            id dolor id nibh ultricies vehicula ut id elit. In sed ornare nulla.
+          </p>
+        </div>
+        <div class="links">
+          <p>Lorem ipsum <a href>dolor</a> sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis
+            <a href>ullamcorper</a> ligula sodales at. Nulla tellus elit, varius non commodo eget, <a href>mattis</a> vel
+            eros. In sed ornare nulla.
+          </p>
+        </div>
+        <div class="links">
+          <p><a href>Active link — #209e91</a></p>
+
+          <p class="hovered"><a href>Hover link — #17857a</a></p>
+        </div>
+      </nga-card-body>
+      <nga-card-footer></nga-card-footer>
+    </nga-card>
+  </div>
+</div>
+<div class="row">
+  <div class="col-md-12">
+    <nga-card>
+      <nga-card-header></nga-card-header>
+      <nga-card-body>
+        <div class="banner">
+          <div class="large-banner-wrapper">
+            <img src="assets/img/typography/banner.png" alt="" />
+          </div>
+          <div class="banner-text-wrapper">
+            <div class="banner-text">
+              <h1>Simple Banner Text</h1>
+
+              <p>Lorem ipsum dolor sit amet</p>
+
+              <p>Odio amet viverra rutrum</p>
+            </div>
+          </div>
+        </div>
+        <div>
+          <h2>Columns</h2>
+
+          <div class="row">
+            <div class="col-sm-6">
+              <div class="img-wrapper"><img src="assets/img/typography/typo03.png" alt="" title="" />
+              </div>
+              <p>Vel elit, eros elementum, id lacinia, duis non ut ut tortor blandit. Mauris <a href>dapibus</a> magna rutrum.
+                Ornare neque suspendisse <a href>phasellus wisi</a>, quam cras pede rutrum suspendisse, <a href>felis amet eu</a>.
+                Congue magna elit quisque quia, nullam justo sagittis, ante erat libero placerat, proin condimentum consectetuer
+                lacus. Velit condimentum velit, sed penatibus arcu nulla.</p>
+            </div>
+            <div class="col-sm-6">
+              <div class="img-wrapper"><img src="assets/img/typography/typo01.png" alt="" title="" />
+              </div>
+              <p>Et suspendisse, adipiscing fringilla ornare sit ligula sed, vel nam. Interdum et justo nulla, fermentum lobortis
+                purus ut eu, duis nibh dolor massa tristique elementum, nibh iste potenti risus fusce aliquet fusce, ullamcorper
+                debitis primis arcu tellus vestibulum ac.</p>
+            </div>
+          </div>
+
+          <div class="separator"></div>
+
+          <div class="row">
+            <div class="col-sm-4">
+              <h4>Column heading example</h4>
+              <div class="img-wrapper"><img src="assets/img/typography/typo04.png" alt="" /></div>
+              <p>Eget augue, lacus erat ante egestas scelerisque aliquam, metus molestie leo in habitasse magna maecenas
+              </p>
+              <a href class="learn-more">Learn more</a>
+            </div>
+            <div class="col-sm-4">
+              <h4>Yet another column heading example</h4>
+              <div class="img-wrapper"><img src="assets/img/typography/typo05.png" alt="" /></div>
+              <p>Augue massa et parturient, suspendisse orci nec scelerisque sit, integer nam mauris pede consequat in velit
+              </p>
+              <a href class="learn-more">Learn more</a>
+            </div>
+            <div class="col-sm-4">
+              <h4>Third column heading example</h4>
+              <div class="img-wrapper"><img src="assets/img/typography/typo06.png" alt="" /></div>
+              <p>Eget turpis, tortor lobortis porttitor, vestibulum nullam vehicula aliquam</p>
+              <a href class="learn-more">Learn more</a>
+            </div>
+          </div>
+          <div class="separator"></div>
+        </div>
+      </nga-card-body>
+      <nga-card-footer></nga-card-footer>
+    </nga-card>
+  </div>
+</div>

src/app/pages/ui-features/typography/typography.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-typography',
+  templateUrl: './typography.component.html',
+})
+export class TypographyComponent {
+
+}

src/app/pages/ui-features/ui-features-routing.module.ts

@@ -6,6 +6,7 @@ import { ButtonsComponent } from './buttons/buttons.component';
 import { GridComponent } from './grid/grid.component';
 import { IconsComponent } from './icons/icons.component';
 import { ModalsComponent } from './modals/modals.component';
+import { TypographyComponent } from './typography/typography.component';
 
 const routes: Routes = [{
   path: '',
@@ -22,6 +23,9 @@ const routes: Routes = [{
   }, {
     path: 'modals',
     component: ModalsComponent,
+  }, {
+    path: 'typography',
+    component: TypographyComponent,
   }],
 }];
 

src/app/pages/ui-features/ui-features.module.ts

@@ -17,6 +17,7 @@ import { DropdownButtonsComponent } from './buttons/dropdown/dropdown.component'
 import { GroupButtonsComponent } from './buttons/group/group.component';
 import { LargeButtonsComponent } from './buttons/large/large.component';
 import { ModalComponent } from './modals/modal/modal.component';
+import { TypographyComponent } from './typography/typography.component';
 
 const COMPONENTS = [
   UiFeaturesComponent,
@@ -33,6 +34,7 @@ const COMPONENTS = [
   GroupButtonsComponent,
   LargeButtonsComponent,
   ModalComponent,
+  TypographyComponent,
 ];
 
 @NgModule({