diff --git a/src/app/pages/ui/components/typography/typography.component.ts b/src/app/pages/ui/components/typography/typography.component.ts
index 19817d45..513b6c25 100644
--- a/src/app/pages/ui/components/typography/typography.component.ts
+++ b/src/app/pages/ui/components/typography/typography.component.ts
@@ -1,8 +1,13 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 
+
+import {AppPicturePipe} from '../../../../theme/pipes';
+import {BaCard} from '../../../../theme/components';
+
 @Component({
   selector: 'typography',
-  pipes: [],
+  pipes: [AppPicturePipe],
+  directives: [BaCard],
   providers: [],
   styles: [],
   template: require('./typography.html'),
@@ -11,9 +16,4 @@ export class Typography {
 
   constructor() {
   }
-
-  ngOnInit() {
-    console.log('typography');
-  }
-
 }
diff --git a/src/app/pages/ui/components/typography/typography.html b/src/app/pages/ui/components/typography/typography.html
index ce013625..ab7d12d1 100644
--- a/src/app/pages/ui/components/typography/typography.html
+++ b/src/app/pages/ui/components/typography/typography.html
@@ -1 +1,238 @@
-hello
+<div class="typography-document-samples row-fluid">
+  <div class="col-xlg-3 col-lg-6  col-md-6 col-sm-6 col-xs-12 typography-widget">
+
+    <ba-card title="Text Size" baCardClass="with-scroll heading-widget">
+
+      <div class="section-block">
+        <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 class="section-block">
+        <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 class="section-block">
+        <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 class="section-block">
+        <h4>H4. Heading 4</h4>
+
+        <p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra,.</p>
+      </div>
+      <div class="section-block">
+        <h5>H5. Heading 5</h5>
+
+        <p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra.</p>
+      </div>
+
+    </ba-card>
+  </div>
+
+  <div class="col-xlg-3 col-lg-6  col-md-6 col-sm-6 col-xs-12 typography-widget">
+
+      <ba-card title="Some more text" baCardClass="with-scroll more-text-widget">
+
+        <div class="section-block light-text">
+          <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="section-block regular-text">
+          <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="section-block upper-text bold-text">
+          <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="section-block bold-text">
+          <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="section-block small-text">
+        <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>
+
+      </ba-card>
+  </div>
+
+  <div class="col-xlg-3 col-lg-6  col-md-6 col-sm-6 col-xs-12 typography-widget">
+
+    <ba-card title="Lists" baCardClass="with-scroll lists-widget">
+
+      <div class="section-block">
+        <h5 class="list-header">Unordered list:</h5>
+        <ul class="blur">
+          <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 class="list-header">Ordered Lists:</h5>
+        <ol class="blur">
+          <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 class="accent">Important text fragment. Lorem ipsum dolor sit amet, id mollis iaculis mi nisl
+          pulvinar,
+          lacinia scelerisque pharetra.
+        </div>
+      </div>
+    </ba-card>
+  </div>
+
+  <div class="col-xlg-3 col-lg-6  col-md-6 col-sm-6 col-xs-12 typography-widget">
+
+    <ba-card title="Text Color" baCardClass="with-scroll color-widget">
+      <div class="section-block red-text ">
+        <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="section-block yellow-text ">
+        <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="section-block 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="section-block links">
+        <p><a href>Active link — #209e91</a></p>
+
+        <p class="hovered"><a href>Hover link — #17857a</a></p>
+      </div>
+    </ba-card>
+  </div>
+</div>
+
+
+<div class="row-fluid">
+  <div class="col-lg-12 col-sm-12 col-xs-12">
+
+    <ba-card baCardClass="banner-column-panel">
+      <div class="banner">
+        <div class="large-banner-wrapper">
+          <img src="{{ ( 'app/typography/banner.png' | appPicture ) }}" 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 class="section">
+        <h2>Columns</h2>
+
+        <div class="row">
+          <div class="col-sm-6">
+            <div class="img-wrapper"><img src="{{ ( 'app/typography/typo03.png' | appPicture ) }}" 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="{{ ( 'app/typography/typo01.png' | appPicture ) }}" 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="{{ ( 'app/typography/typo04.png' | appPicture ) }}" alt=""/></div>
+            <p>Eget augue, lacus erat ante egestas scelerisque aliquam, metus molestie leo in habitasse magna
+              maecenas</p>
+            <a href class="learn-more">Lean more</a>
+          </div>
+          <div class="col-sm-4">
+            <h4>Yet another column heading example</h4>
+            <div class="img-wrapper"><img src="{{ ( 'app/typography/typo05.png' | appPicture ) }}" 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">Lean more</a>
+          </div>
+          <div class="col-sm-4">
+            <h4>Third column heading example</h4>
+            <div class="img-wrapper"><img src="{{ ( 'app/typography/typo06.png' | appPicture ) }}" alt=""/></div>
+            <p>Eget turpis, tortor lobortis porttitor, vestibulum nullam vehicula aliquam</p>
+            <a href class="learn-more">Lean more</a>
+          </div>
+        </div>
+        <div class="separator"></div>
+      </div>
+    </ba-card>
+  </div>
+</div>
diff --git a/src/app/theme/sass/_typography.scss b/src/app/theme/sass/_typography.scss
index 2123593e..479052f0 100644
--- a/src/app/theme/sass/_typography.scss
+++ b/src/app/theme/sass/_typography.scss
@@ -19,6 +19,7 @@ body a {
 
 h1 {
   font-size: 32px;
+  margin-bottom: 0.5rem;
 }
 
 h2 {
@@ -213,7 +214,7 @@ h5 {
       line-height: 14px;
       position: relative;
       span {
-        color: $default-text;
+        color: $default;
         display: block;
       }
       ol {
@@ -420,7 +421,7 @@ a.learn-more {
   padding: 0 20px 50px 20px;
 }
 
-.card.banner-column-card {
+.card.banner-column-panel {
   padding: 0;
   margin-bottom: 90px;