From 751497556a7c44159a016342c8eef0195c0d82b4 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Wed, 3 Jan 2018 10:32:15 +0300
Subject: [PATCH 1/8] (Contacts App) Fixed: Selected filter is not preserved on
 route changes

---
 .../contacts/sidenavs/main/main.component.ts  | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/app/main/content/apps/contacts/sidenavs/main/main.component.ts b/src/app/main/content/apps/contacts/sidenavs/main/main.component.ts
index 262dfa7d..0f6f8957 100644
--- a/src/app/main/content/apps/contacts/sidenavs/main/main.component.ts
+++ b/src/app/main/content/apps/contacts/sidenavs/main/main.component.ts
@@ -1,26 +1,25 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { ContactsService } from '../../contacts.service';
+import { Subscription } from 'rxjs/Subscription';
 
 @Component({
     selector   : 'fuse-contacts-main-sidenav',
     templateUrl: './main.component.html',
     styleUrls  : ['./main.component.scss']
 })
-export class FuseContactsMainSidenavComponent implements OnInit
+export class FuseContactsMainSidenavComponent implements OnDestroy
 {
     user: any;
     filterBy: string;
+    onUserDataChangedSubscription: Subscription;
 
     constructor(private contactsService: ContactsService)
     {
-        this.filterBy = 'all';
-        this.contactsService.onUserDataChanged.subscribe(user => {
-            this.user = user;
-        });
-    }
-
-    ngOnInit()
-    {
+        this.filterBy = this.contactsService.filterBy || 'all';
+        this.onUserDataChangedSubscription =
+            this.contactsService.onUserDataChanged.subscribe(user => {
+                this.user = user;
+            });
     }
 
     changeFilter(filter)
@@ -28,4 +27,9 @@ export class FuseContactsMainSidenavComponent implements OnInit
         this.filterBy = filter;
         this.contactsService.onFilterChanged.next(this.filterBy);
     }
+
+    ngOnDestroy()
+    {
+        this.onUserDataChangedSubscription.unsubscribe();
+    }
 }

From 0c5066e7d013ad521401bf1c48513cdbb596e89b Mon Sep 17 00:00:00 2001
From: mustafahlvc <mustafahlvc@gmail.com>
Date: Mon, 8 Jan 2018 12:37:52 +0300
Subject: [PATCH 2/8] Lazy loading applied to group of demo modules.

---
 package-lock.json                             | 96 +++++++++++++++++++
 package.json                                  | 16 ++--
 src/app/app.module.ts                         | 56 +++--------
 src/app/main/content/apps/apps.module.ts      | 63 ++++++++++++
 .../apps/dashboards/project/project.module.ts |  4 +-
 .../components-third-party.module.ts          |  4 +-
 .../google-maps/google-maps.module.ts         |  2 +-
 .../angular-material.module.ts                |  2 +-
 .../content/components/components.module.ts   | 24 ++---
 .../forgot-password-2.module.ts               |  2 +-
 .../forgot-password/forgot-password.module.ts |  2 +-
 .../pages/authentication/lock/lock.module.ts  |  2 +-
 .../authentication/login-2/login-2.module.ts  |  2 +-
 .../authentication/login/login.module.ts      |  2 +-
 .../mail-confirm/mail-confirm.module.ts       |  2 +-
 .../register-2/register-2.module.ts           |  2 +-
 .../register/register.module.ts               |  2 +-
 .../reset-password-2.module.ts                |  2 +-
 .../reset-password/reset-password.module.ts   |  2 +-
 .../pages/coming-soon/coming-soon.module.ts   |  2 +-
 .../pages/errors/404/error-404.module.ts      |  2 +-
 .../pages/errors/500/error-500.module.ts      |  2 +-
 src/app/main/content/pages/faq/faq.module.ts  |  2 +-
 .../pages/invoices/compact/compact.module.ts  |  2 +-
 .../pages/invoices/modern/modern.module.ts    |  2 +-
 .../knowledge-base/knowledge-base.module.ts   |  2 +-
 .../pages/maintenance/maintenence.module.ts   |  2 +-
 src/app/main/content/pages/pages.module.ts    |  3 +-
 .../content/pages/pricing/pricing.module.ts   |  6 +-
 .../content/pages/profile/profile.module.ts   |  2 +-
 .../content/pages/search/search.module.ts     |  2 +-
 .../main/content/services/services.module.ts  |  6 +-
 .../main/content/ui/colors/colors.module.ts   |  2 +-
 src/app/main/content/ui/forms/forms.module.ts |  2 +-
 .../helper-classes/helper-classes.module.ts   |  2 +-
 src/app/main/content/ui/icons/icons.module.ts |  2 +-
 .../ui/page-layouts/page-layouts.module.ts    | 38 ++++----
 .../ui/typography/typography.module.ts        |  2 +-
 src/app/main/content/ui/ui.module.ts          |  2 +-
 39 files changed, 254 insertions(+), 118 deletions(-)
 create mode 100644 src/app/main/content/apps/apps.module.ts

diff --git a/package-lock.json b/package-lock.json
index c4ec46de..de35b092 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -724,6 +724,12 @@
       "dev": true,
       "optional": true
     },
+    "async-limiter": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.0.tgz",
+      "integrity": "sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg==",
+      "dev": true
+    },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -2649,6 +2655,12 @@
         "crossvent": "1.5.4"
       }
     },
+    "duplexer": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",
+      "integrity": "sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=",
+      "dev": true
+    },
     "duplexify": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.5.1.tgz",
@@ -3325,6 +3337,12 @@
         "minimatch": "3.0.4"
       }
     },
+    "filesize": {
+      "version": "3.5.11",
+      "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.5.11.tgz",
+      "integrity": "sha512-ZH7loueKBoDb7yG9esn1U+fgq7BzlzW6NRi5/rMdxIZ05dj7GFD/Xc5rq2CDt5Yq86CyfSYVyx4242QQNZbx1g==",
+      "dev": true
+    },
     "fill-range": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-2.2.3.tgz",
@@ -4620,6 +4638,15 @@
       "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
       "dev": true
     },
+    "gzip-size": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-3.0.0.tgz",
+      "integrity": "sha1-VGGI6b3DN/Zzdy+BZgRks4nc5SA=",
+      "dev": true,
+      "requires": {
+        "duplexer": "0.1.1"
+      }
+    },
     "hammerjs": {
       "version": "2.0.8",
       "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
@@ -6949,6 +6976,12 @@
         "wrappy": "1.0.2"
       }
     },
+    "opener": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/opener/-/opener-1.4.3.tgz",
+      "integrity": "sha1-XG2ixdflgx6P+jlklQ+NZnSskLg=",
+      "dev": true
+    },
     "opn": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/opn/-/opn-5.1.0.tgz",
@@ -10604,6 +10637,69 @@
         }
       }
     },
+    "webpack-bundle-analyzer": {
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-2.9.1.tgz",
+      "integrity": "sha512-a+UcvlsXvCmclNgfThT8PVyuJKd029By7CxkYEbNNCfs0Lqj9gagjkdv3S3MBvCIKBaUGYs8l4UpiVI0bFoh2Q==",
+      "dev": true,
+      "requires": {
+        "acorn": "5.3.0",
+        "chalk": "1.1.3",
+        "commander": "2.12.1",
+        "ejs": "2.5.7",
+        "express": "4.16.2",
+        "filesize": "3.5.11",
+        "gzip-size": "3.0.0",
+        "lodash": "4.17.4",
+        "mkdirp": "0.5.1",
+        "opener": "1.4.3",
+        "ws": "3.3.3"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+          "dev": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "2.2.1",
+            "escape-string-regexp": "1.0.5",
+            "has-ansi": "2.0.0",
+            "strip-ansi": "3.0.1",
+            "supports-color": "2.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+          "dev": true
+        },
+        "ultron": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/ultron/-/ultron-1.1.1.tgz",
+          "integrity": "sha512-UIEXBNeYmKptWH6z8ZnqTeS8fV74zG0/eRU9VGkpzz+LIJNs8W/zM/L+7ctCkRrgbNnnR0xxw4bKOr0cW0N0Og==",
+          "dev": true
+        },
+        "ws": {
+          "version": "3.3.3",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-3.3.3.tgz",
+          "integrity": "sha512-nnWLa/NwZSt4KQJu51MYlCcSQ5g7INpOrOMt4XV8j4dqTXdmlUmSHQ8/oLC069ckre0fRsgfvsKwbTdtKLCDkA==",
+          "dev": true,
+          "requires": {
+            "async-limiter": "1.0.0",
+            "safe-buffer": "5.1.1",
+            "ultron": "1.1.1"
+          }
+        }
+      }
+    },
     "webpack-core": {
       "version": "0.6.9",
       "resolved": "https://registry.npmjs.org/webpack-core/-/webpack-core-0.6.9.tgz",
diff --git a/package.json b/package.json
index 7fb50514..545901f7 100644
--- a/package.json
+++ b/package.json
@@ -8,10 +8,13 @@
     "start-hmr": "ng serve --hmr -e=hmr -sm=false",
     "start-hmr-sourcemaps": "ng serve --hmr -e=hmr",
     "build": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev",
+    "build-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev --stats-json",
     "build-prod": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod",
+    "build-prod-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod --stats-json",
     "test": "ng test",
     "lint": "ng lint",
-    "e2e": "ng e2e"
+    "e2e": "ng e2e",
+    "bundle-report": "webpack-bundle-analyzer dist/stats.json"
   },
   "private": true,
   "dependencies": {
@@ -29,6 +32,10 @@
     "@angular/platform-browser": "5.1.2",
     "@angular/platform-browser-dynamic": "5.1.2",
     "@angular/router": "5.1.2",
+    "@ngrx/effects": "4.1.1",
+    "@ngrx/router-store": "4.1.1",
+    "@ngrx/store": "4.1.1",
+    "@ngrx/store-devtools": "4.1.1",
     "@ngx-translate/core": "9.0.2",
     "@swimlane/ngx-charts": "7.0.1",
     "@swimlane/ngx-datatable": "11.1.7",
@@ -43,10 +50,6 @@
     "highlight.js": "9.12.0",
     "intl": "1.2.5",
     "moment": "2.20.1",
-    "@ngrx/effects": "4.1.1",
-    "@ngrx/router-store": "4.1.1",
-    "@ngrx/store": "4.1.1",
-    "@ngrx/store-devtools": "4.1.1",
     "ngrx-store-freeze": "0.2.0",
     "ngx-color-picker": "5.3.0",
     "ngx-cookie-service": "1.0.9",
@@ -75,6 +78,7 @@
     "protractor": "5.1.2",
     "ts-node": "3.2.2",
     "tslint": "5.7.0",
-    "typescript": "2.4.2"
+    "typescript": "2.4.2",
+    "webpack-bundle-analyzer": "2.9.1"
   }
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index eaa580ca..796b335e 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -7,62 +7,39 @@ import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
 import 'hammerjs';
 import { SharedModule } from './core/modules/shared.module';
 import { AppComponent } from './app.component';
-import { ProjectModule } from './main/content/apps/dashboards/project/project.module';
 import { FuseFakeDbService } from './fuse-fake-db/fuse-fake-db.service';
 import { FuseMainModule } from './main/main.module';
-import { PagesModule } from './main/content/pages/pages.module';
-import { UIModule } from './main/content/ui/ui.module';
-import { ComponentsModule } from './main/content/components/components.module';
 import { FuseSplashScreenService } from './core/services/splash-screen.service';
 import { FuseConfigService } from './core/services/config.service';
 import { FuseNavigationService } from './core/components/navigation/navigation.service';
-import { ComponentsThirdPartyModule } from './main/content/components-third-party/components-third-party.module';
-import { ServicesModule } from './main/content/services/services.module';
-import { FuseAngularMaterialModule } from './main/content/components/angular-material/angular-material.module';
 import { MarkdownModule } from 'angular2-markdown';
 import { TranslateModule } from '@ngx-translate/core';
 import { AppStoreModule } from './store/store.module';
 
 const appRoutes: Routes = [
     {
-        path        : 'apps/mail',
-        loadChildren: './main/content/apps/mail/mail.module#FuseMailModule'
+        path        : 'apps',
+        loadChildren: './main/content/apps/apps.module#FuseAppsModule'
     },
     {
-        path        : 'apps/mail-ngrx',
-        loadChildren: './main/content/apps/mail-ngrx/mail.module#FuseMailNgrxModule'
+        path        : 'pages',
+        loadChildren: './main/content/pages/pages.module#FusePagesModule'
     },
     {
-        path        : 'apps/chat',
-        loadChildren: './main/content/apps/chat/chat.module#FuseChatModule'
+        path        : 'ui',
+        loadChildren: './main/content/ui/ui.module#FuseUIModule'
     },
     {
-        path        : 'apps/calendar',
-        loadChildren: './main/content/apps/calendar/calendar.module#FuseCalendarModule'
+        path        : 'services',
+        loadChildren: './main/content/services/services.module#FuseServicesModule'
     },
     {
-        path        : 'apps/e-commerce',
-        loadChildren: './main/content/apps/e-commerce/e-commerce.module#FuseEcommerceModule'
+        path        : 'components',
+        loadChildren: './main/content/components/components.module#FuseComponentsModule'
     },
     {
-        path        : 'apps/academy',
-        loadChildren: './main/content/apps/academy/academy.module#FuseAcademyModule'
-    },
-    {
-        path        : 'apps/todo',
-        loadChildren: './main/content/apps/todo/todo.module#FuseTodoModule'
-    },
-    {
-        path        : 'apps/file-manager',
-        loadChildren: './main/content/apps/file-manager/file-manager.module#FuseFileManagerModule'
-    },
-    {
-        path        : 'apps/contacts',
-        loadChildren: './main/content/apps/contacts/contacts.module#FuseContactsModule'
-    },
-    {
-        path        : 'apps/scrumboard',
-        loadChildren: './main/content/apps/scrumboard/scrumboard.module#FuseScrumboardModule'
+        path        : 'components-third-party',
+        loadChildren: './main/content/components-third-party/components-third-party.module#FuseComponentsThirdPartyModule'
     },
     {
         path      : '**',
@@ -87,14 +64,7 @@ const appRoutes: Routes = [
             passThruUnknownUrl: true
         }),
         AppStoreModule,
-        FuseMainModule,
-        ProjectModule,
-        PagesModule,
-        UIModule,
-        ServicesModule,
-        ComponentsModule,
-        FuseAngularMaterialModule,
-        ComponentsThirdPartyModule
+        FuseMainModule
     ],
     providers   : [
         FuseSplashScreenService,
diff --git a/src/app/main/content/apps/apps.module.ts b/src/app/main/content/apps/apps.module.ts
new file mode 100644
index 00000000..56d93e17
--- /dev/null
+++ b/src/app/main/content/apps/apps.module.ts
@@ -0,0 +1,63 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../../core/modules/shared.module';
+import { RouterModule } from '@angular/router';
+import { FuseAngularMaterialModule } from '../components/angular-material/angular-material.module';
+
+const routes = [
+    {
+        path        : 'dashboards/project',
+        loadChildren: './dashboards/project/project.module#FuseProjectDashboardModule'
+    },
+    {
+        path        : 'mail',
+        loadChildren: './mail/mail.module#FuseMailModule'
+    },
+    {
+        path        : 'mail-ngrx',
+        loadChildren: './mail-ngrx/mail.module#FuseMailNgrxModule'
+    },
+    {
+        path        : 'chat',
+        loadChildren: './chat/chat.module#FuseChatModule'
+    },
+    {
+        path        : 'calendar',
+        loadChildren: './calendar/calendar.module#FuseCalendarModule'
+    },
+    {
+        path        : 'e-commerce',
+        loadChildren: './e-commerce/e-commerce.module#FuseEcommerceModule'
+    },
+    {
+        path        : 'academy',
+        loadChildren: './academy/academy.module#FuseAcademyModule'
+    },
+    {
+        path        : 'todo',
+        loadChildren: './todo/todo.module#FuseTodoModule'
+    },
+    {
+        path        : 'file-manager',
+        loadChildren: './file-manager/file-manager.module#FuseFileManagerModule'
+    },
+    {
+        path        : 'contacts',
+        loadChildren: './contacts/contacts.module#FuseContactsModule'
+    },
+    {
+        path        : 'scrumboard',
+        loadChildren: './scrumboard/scrumboard.module#FuseScrumboardModule'
+    }
+];
+
+@NgModule({
+    imports     : [
+        SharedModule,
+        RouterModule.forChild(routes),
+        FuseAngularMaterialModule
+    ],
+    declarations: []
+})
+export class FuseAppsModule
+{
+}
diff --git a/src/app/main/content/apps/dashboards/project/project.module.ts b/src/app/main/content/apps/dashboards/project/project.module.ts
index c9d229e9..95816a25 100644
--- a/src/app/main/content/apps/dashboards/project/project.module.ts
+++ b/src/app/main/content/apps/dashboards/project/project.module.ts
@@ -8,7 +8,7 @@ import { NgxChartsModule } from '@swimlane/ngx-charts';
 
 const routes: Routes = [
     {
-        path     : 'apps/dashboards/project',
+        path     : '**',
         component: FuseProjectComponent,
         resolve  : {
             data: ProjectsDashboardService
@@ -30,7 +30,7 @@ const routes: Routes = [
         ProjectsDashboardService
     ]
 })
-export class ProjectModule
+export class FuseProjectDashboardModule
 {
 }
 
diff --git a/src/app/main/content/components-third-party/components-third-party.module.ts b/src/app/main/content/components-third-party/components-third-party.module.ts
index de3ede1a..60908c4d 100644
--- a/src/app/main/content/components-third-party/components-third-party.module.ts
+++ b/src/app/main/content/components-third-party/components-third-party.module.ts
@@ -6,7 +6,7 @@ import { GoogleMapsModule } from './google-maps/google-maps.module';
 
 const routes = [
     {
-        path     : 'components-third-party/datatables/ngx-datatable',
+        path     : 'datatables/ngx-datatable',
         component: FuseNgxDatatableComponent
     }
 ];
@@ -21,6 +21,6 @@ const routes = [
         FuseNgxDatatableComponent
     ]
 })
-export class ComponentsThirdPartyModule
+export class FuseComponentsThirdPartyModule
 {
 }
diff --git a/src/app/main/content/components-third-party/google-maps/google-maps.module.ts b/src/app/main/content/components-third-party/google-maps/google-maps.module.ts
index ce58c417..59c0ee67 100644
--- a/src/app/main/content/components-third-party/google-maps/google-maps.module.ts
+++ b/src/app/main/content/components-third-party/google-maps/google-maps.module.ts
@@ -6,7 +6,7 @@ import { AgmCoreModule } from '@agm/core';
 
 const routes = [
     {
-        path     : 'components-third-party/google-maps',
+        path     : 'google-maps',
         component: FuseGoogleMapsDocsComponent
     }
 ];
diff --git a/src/app/main/content/components/angular-material/angular-material.module.ts b/src/app/main/content/components/angular-material/angular-material.module.ts
index acffb5e6..ca8e48fa 100644
--- a/src/app/main/content/components/angular-material/angular-material.module.ts
+++ b/src/app/main/content/components/angular-material/angular-material.module.ts
@@ -8,7 +8,7 @@ import { FuseAngularMaterialComponent } from './angular-material.component';
 
 const routes: Routes = [
     {
-        path    : 'components/angular-material',
+        path    : 'angular-material',
         children: [
             {
                 path     : ':id',
diff --git a/src/app/main/content/components/components.module.ts b/src/app/main/content/components/components.module.ts
index cd467f0b..826c049a 100644
--- a/src/app/main/content/components/components.module.ts
+++ b/src/app/main/content/components/components.module.ts
@@ -11,42 +11,43 @@ import { FuseShortcutsDocsComponent } from './shortcuts/shortcuts.component';
 import { FuseSearchBarDocsComponent } from 'app/main/content/components/search-bar/search-bar.component';
 import { FuseWidgetDocsComponent } from './widget/widget.component';
 import { FuseWidgetModule } from '../../../core/components/widget/widget.module';
+import { FuseAngularMaterialModule } from './angular-material/angular-material.module';
 
 const routes = [
     {
-        path     : 'components/cards',
+        path     : 'cards',
         component: FuseCardsDocsComponent
     },
     {
-        path     : 'components/countdown',
+        path     : 'countdown',
         component: FuseCountdownDocsComponent
     },
     {
-        path     : 'components/highlightjs',
+        path     : 'highlightjs',
         component: FuseHljsDocsComponent
     },
     {
-        path     : 'components/material-color-picker',
+        path     : 'material-color-picker',
         component: FuseMaterialColorPickerDocsComponent
     },
     {
-        path     : 'components/multi-language',
+        path     : 'multi-language',
         component: FuseMultiLanguageDocsComponent
     },
     {
-        path     : 'components/navigation',
+        path     : 'navigation',
         component: FuseNavigationDocsComponent
     },
     {
-        path     : 'components/search-bar',
+        path     : 'search-bar',
         component: FuseSearchBarDocsComponent
     },
     {
-        path     : 'components/shortcuts',
+        path     : 'shortcuts',
         component: FuseShortcutsDocsComponent
     },
     {
-        path     : 'components/widget',
+        path     : 'widget',
         component: FuseWidgetDocsComponent
     }
 ];
@@ -55,7 +56,8 @@ const routes = [
     imports     : [
         SharedModule,
         RouterModule.forChild(routes),
-        FuseWidgetModule
+        FuseWidgetModule,
+        FuseAngularMaterialModule
     ],
     declarations: [
         FuseCardsDocsComponent,
@@ -69,6 +71,6 @@ const routes = [
         FuseWidgetDocsComponent
     ]
 })
-export class ComponentsModule
+export class FuseComponentsModule
 {
 }
diff --git a/src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.module.ts b/src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.module.ts
index f072c7c4..8ae766c6 100644
--- a/src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.module.ts
+++ b/src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.module.ts
@@ -6,7 +6,7 @@ import { FuseForgotPassword2Component } from './forgot-password-2.component';
 
 const routes = [
     {
-        path     : 'pages/auth/forgot-password-2',
+        path     : 'auth/forgot-password-2',
         component: FuseForgotPassword2Component
     }
 ];
diff --git a/src/app/main/content/pages/authentication/forgot-password/forgot-password.module.ts b/src/app/main/content/pages/authentication/forgot-password/forgot-password.module.ts
index 40554f80..53a9da79 100644
--- a/src/app/main/content/pages/authentication/forgot-password/forgot-password.module.ts
+++ b/src/app/main/content/pages/authentication/forgot-password/forgot-password.module.ts
@@ -6,7 +6,7 @@ import { FuseForgotPasswordComponent } from './forgot-password.component';
 
 const routes = [
     {
-        path     : 'pages/auth/forgot-password',
+        path     : 'auth/forgot-password',
         component: FuseForgotPasswordComponent
     }
 ];
diff --git a/src/app/main/content/pages/authentication/lock/lock.module.ts b/src/app/main/content/pages/authentication/lock/lock.module.ts
index 6a7def37..edd87d4b 100644
--- a/src/app/main/content/pages/authentication/lock/lock.module.ts
+++ b/src/app/main/content/pages/authentication/lock/lock.module.ts
@@ -6,7 +6,7 @@ import { FuseLockComponent } from './lock.component';
 
 const routes = [
     {
-        path     : 'pages/auth/lock',
+        path     : 'auth/lock',
         component: FuseLockComponent
     }
 ];
diff --git a/src/app/main/content/pages/authentication/login-2/login-2.module.ts b/src/app/main/content/pages/authentication/login-2/login-2.module.ts
index 6bc84d1f..f5356245 100644
--- a/src/app/main/content/pages/authentication/login-2/login-2.module.ts
+++ b/src/app/main/content/pages/authentication/login-2/login-2.module.ts
@@ -6,7 +6,7 @@ import { FuseLogin2Component } from './login-2.component';
 
 const routes = [
     {
-        path     : 'pages/auth/login-2',
+        path     : 'auth/login-2',
         component: FuseLogin2Component
     }
 ];
diff --git a/src/app/main/content/pages/authentication/login/login.module.ts b/src/app/main/content/pages/authentication/login/login.module.ts
index 00ed3966..cf5307f8 100644
--- a/src/app/main/content/pages/authentication/login/login.module.ts
+++ b/src/app/main/content/pages/authentication/login/login.module.ts
@@ -6,7 +6,7 @@ import { FuseLoginComponent } from './login.component';
 
 const routes = [
     {
-        path     : 'pages/auth/login',
+        path     : 'auth/login',
         component: FuseLoginComponent
     }
 ];
diff --git a/src/app/main/content/pages/authentication/mail-confirm/mail-confirm.module.ts b/src/app/main/content/pages/authentication/mail-confirm/mail-confirm.module.ts
index 2f61bb28..4d0b52b3 100644
--- a/src/app/main/content/pages/authentication/mail-confirm/mail-confirm.module.ts
+++ b/src/app/main/content/pages/authentication/mail-confirm/mail-confirm.module.ts
@@ -6,7 +6,7 @@ import { FuseMailConfirmComponent } from './mail-confirm.component';
 
 const routes = [
     {
-        path     : 'pages/auth/mail-confirm',
+        path     : 'auth/mail-confirm',
         component: FuseMailConfirmComponent
     }
 ];
diff --git a/src/app/main/content/pages/authentication/register-2/register-2.module.ts b/src/app/main/content/pages/authentication/register-2/register-2.module.ts
index 181fd924..16975fca 100644
--- a/src/app/main/content/pages/authentication/register-2/register-2.module.ts
+++ b/src/app/main/content/pages/authentication/register-2/register-2.module.ts
@@ -6,7 +6,7 @@ import { FuseRegister2Component } from './register-2.component';
 
 const routes = [
     {
-        path     : 'pages/auth/register-2',
+        path     : 'auth/register-2',
         component: FuseRegister2Component
     }
 ];
diff --git a/src/app/main/content/pages/authentication/register/register.module.ts b/src/app/main/content/pages/authentication/register/register.module.ts
index ad23ce6c..61a7c904 100644
--- a/src/app/main/content/pages/authentication/register/register.module.ts
+++ b/src/app/main/content/pages/authentication/register/register.module.ts
@@ -6,7 +6,7 @@ import { FuseRegisterComponent } from './register.component';
 
 const routes = [
     {
-        path     : 'pages/auth/register',
+        path     : 'auth/register',
         component: FuseRegisterComponent
     }
 ];
diff --git a/src/app/main/content/pages/authentication/reset-password-2/reset-password-2.module.ts b/src/app/main/content/pages/authentication/reset-password-2/reset-password-2.module.ts
index 4d7149d0..3fd19ca5 100644
--- a/src/app/main/content/pages/authentication/reset-password-2/reset-password-2.module.ts
+++ b/src/app/main/content/pages/authentication/reset-password-2/reset-password-2.module.ts
@@ -6,7 +6,7 @@ import { FuseResetPassword2Component } from './reset-password-2.component';
 
 const routes = [
     {
-        path     : 'pages/auth/reset-password-2',
+        path     : 'auth/reset-password-2',
         component: FuseResetPassword2Component
     }
 ];
diff --git a/src/app/main/content/pages/authentication/reset-password/reset-password.module.ts b/src/app/main/content/pages/authentication/reset-password/reset-password.module.ts
index fa352940..4737858c 100644
--- a/src/app/main/content/pages/authentication/reset-password/reset-password.module.ts
+++ b/src/app/main/content/pages/authentication/reset-password/reset-password.module.ts
@@ -6,7 +6,7 @@ import { FuseResetPasswordComponent } from './reset-password.component';
 
 const routes = [
     {
-        path     : 'pages/auth/reset-password',
+        path     : 'auth/reset-password',
         component: FuseResetPasswordComponent
     }
 ];
diff --git a/src/app/main/content/pages/coming-soon/coming-soon.module.ts b/src/app/main/content/pages/coming-soon/coming-soon.module.ts
index 21490ce3..ddf8fa79 100644
--- a/src/app/main/content/pages/coming-soon/coming-soon.module.ts
+++ b/src/app/main/content/pages/coming-soon/coming-soon.module.ts
@@ -6,7 +6,7 @@ import { FuseComingSoonComponent } from './coming-soon.component';
 
 const routes = [
     {
-        path     : 'pages/coming-soon',
+        path     : 'coming-soon',
         component: FuseComingSoonComponent
     }
 ];
diff --git a/src/app/main/content/pages/errors/404/error-404.module.ts b/src/app/main/content/pages/errors/404/error-404.module.ts
index c42409e4..791f4a38 100644
--- a/src/app/main/content/pages/errors/404/error-404.module.ts
+++ b/src/app/main/content/pages/errors/404/error-404.module.ts
@@ -6,7 +6,7 @@ import { FuseError404Component } from './error-404.component';
 
 const routes = [
     {
-        path     : 'pages/errors/error-404',
+        path     : 'errors/error-404',
         component: FuseError404Component
     }
 ];
diff --git a/src/app/main/content/pages/errors/500/error-500.module.ts b/src/app/main/content/pages/errors/500/error-500.module.ts
index b9b70575..7b2c0b50 100644
--- a/src/app/main/content/pages/errors/500/error-500.module.ts
+++ b/src/app/main/content/pages/errors/500/error-500.module.ts
@@ -6,7 +6,7 @@ import { FuseError500Component } from './error-500.component';
 
 const routes = [
     {
-        path     : 'pages/errors/error-500',
+        path     : 'errors/error-500',
         component: FuseError500Component
     }
 ];
diff --git a/src/app/main/content/pages/faq/faq.module.ts b/src/app/main/content/pages/faq/faq.module.ts
index 127eeeb2..b4f36cc0 100644
--- a/src/app/main/content/pages/faq/faq.module.ts
+++ b/src/app/main/content/pages/faq/faq.module.ts
@@ -6,7 +6,7 @@ import { FaqService } from './faq.service';
 
 const routes = [
     {
-        path     : 'pages/faq',
+        path     : 'faq',
         component: FuseFaqComponent,
         resolve  : {
             faq: FaqService
diff --git a/src/app/main/content/pages/invoices/compact/compact.module.ts b/src/app/main/content/pages/invoices/compact/compact.module.ts
index f30e6773..d2dd171c 100644
--- a/src/app/main/content/pages/invoices/compact/compact.module.ts
+++ b/src/app/main/content/pages/invoices/compact/compact.module.ts
@@ -7,7 +7,7 @@ import { InvoiceService } from '../invoice.service';
 
 const routes = [
     {
-        path     : 'pages/invoices/compact',
+        path     : 'invoices/compact',
         component: FuseInvoiceCompactComponent,
         resolve  : {
             search: InvoiceService
diff --git a/src/app/main/content/pages/invoices/modern/modern.module.ts b/src/app/main/content/pages/invoices/modern/modern.module.ts
index afe268d3..02b361c4 100644
--- a/src/app/main/content/pages/invoices/modern/modern.module.ts
+++ b/src/app/main/content/pages/invoices/modern/modern.module.ts
@@ -7,7 +7,7 @@ import { InvoiceService } from '../invoice.service';
 
 const routes = [
     {
-        path     : 'pages/invoices/modern',
+        path     : 'invoices/modern',
         component: FuseInvoiceModernComponent,
         resolve  : {
             search: InvoiceService
diff --git a/src/app/main/content/pages/knowledge-base/knowledge-base.module.ts b/src/app/main/content/pages/knowledge-base/knowledge-base.module.ts
index a29ae8b5..b26bd919 100644
--- a/src/app/main/content/pages/knowledge-base/knowledge-base.module.ts
+++ b/src/app/main/content/pages/knowledge-base/knowledge-base.module.ts
@@ -7,7 +7,7 @@ import { FuseKnowledgeBaseArticleComponent } from './dialogs/article/article.com
 
 const routes = [
     {
-        path     : 'pages/knowledge-base',
+        path     : 'knowledge-base',
         component: FuseKnowledgeBaseComponent,
         resolve  : {
             knowledgeBase: KnowledgeBaseService
diff --git a/src/app/main/content/pages/maintenance/maintenence.module.ts b/src/app/main/content/pages/maintenance/maintenence.module.ts
index 660a70df..08195d77 100644
--- a/src/app/main/content/pages/maintenance/maintenence.module.ts
+++ b/src/app/main/content/pages/maintenance/maintenence.module.ts
@@ -6,7 +6,7 @@ import { FuseMaintenanceComponent } from './maintenance.component';
 
 const routes = [
     {
-        path     : 'pages/maintenance',
+        path     : 'maintenance',
         component: FuseMaintenanceComponent
     }
 ];
diff --git a/src/app/main/content/pages/pages.module.ts b/src/app/main/content/pages/pages.module.ts
index 786c9792..96a6ba58 100644
--- a/src/app/main/content/pages/pages.module.ts
+++ b/src/app/main/content/pages/pages.module.ts
@@ -66,6 +66,7 @@ import { KnowledgeBaseModule } from './knowledge-base/knowledge-base.module';
         KnowledgeBaseModule
     ]
 })
-export class PagesModule
+export class FusePagesModule
 {
+
 }
diff --git a/src/app/main/content/pages/pricing/pricing.module.ts b/src/app/main/content/pages/pricing/pricing.module.ts
index 8be47e18..115bba06 100644
--- a/src/app/main/content/pages/pricing/pricing.module.ts
+++ b/src/app/main/content/pages/pricing/pricing.module.ts
@@ -8,15 +8,15 @@ import { FusePricingStyle3Component } from './style-3/style-3.component';
 
 const routes = [
     {
-        path     : 'pages/pricing/style-1',
+        path     : 'pricing/style-1',
         component: FusePricingStyle1Component
     },
     {
-        path     : 'pages/pricing/style-2',
+        path     : 'pricing/style-2',
         component: FusePricingStyle2Component
     },
     {
-        path     : 'pages/pricing/style-3',
+        path     : 'pricing/style-3',
         component: FusePricingStyle3Component
     }
 ];
diff --git a/src/app/main/content/pages/profile/profile.module.ts b/src/app/main/content/pages/profile/profile.module.ts
index 971c39b9..aa699d6a 100644
--- a/src/app/main/content/pages/profile/profile.module.ts
+++ b/src/app/main/content/pages/profile/profile.module.ts
@@ -10,7 +10,7 @@ import { ProfileService } from './profile.service';
 
 const routes = [
     {
-        path     : 'pages/profile',
+        path     : 'profile',
         component: FuseProfileComponent,
         resolve  : {
             profile: ProfileService
diff --git a/src/app/main/content/pages/search/search.module.ts b/src/app/main/content/pages/search/search.module.ts
index 97baa3fa..325c790e 100644
--- a/src/app/main/content/pages/search/search.module.ts
+++ b/src/app/main/content/pages/search/search.module.ts
@@ -9,7 +9,7 @@ import { SearchService } from './search.service';
 
 const routes = [
     {
-        path     : 'pages/search',
+        path     : 'search',
         component: FuseSearchComponent,
         resolve  : {
             search: SearchService
diff --git a/src/app/main/content/services/services.module.ts b/src/app/main/content/services/services.module.ts
index 4d52ac3a..2b55e89b 100644
--- a/src/app/main/content/services/services.module.ts
+++ b/src/app/main/content/services/services.module.ts
@@ -6,11 +6,11 @@ import { FuseSplashScreenServiceDocsComponent } from './splash-screen/splash-scr
 
 const routes = [
     {
-        path     : 'services/config',
+        path     : 'config',
         component: FuseConfigServiceDocsComponent
     },
     {
-        path     : 'services/splash-screen',
+        path     : 'splash-screen',
         component: FuseSplashScreenServiceDocsComponent
     }
 ];
@@ -25,6 +25,6 @@ const routes = [
         FuseSplashScreenServiceDocsComponent
     ]
 })
-export class ServicesModule
+export class FuseServicesModule
 {
 }
diff --git a/src/app/main/content/ui/colors/colors.module.ts b/src/app/main/content/ui/colors/colors.module.ts
index c06a419c..cbf2dc1e 100644
--- a/src/app/main/content/ui/colors/colors.module.ts
+++ b/src/app/main/content/ui/colors/colors.module.ts
@@ -6,7 +6,7 @@ import { FuseColorsComponent } from './colors.component';
 
 const routes: Routes = [
     {
-        path     : 'ui/colors',
+        path     : 'colors',
         component: FuseColorsComponent
     }
 ];
diff --git a/src/app/main/content/ui/forms/forms.module.ts b/src/app/main/content/ui/forms/forms.module.ts
index ccbdb13f..8c0d4fb4 100644
--- a/src/app/main/content/ui/forms/forms.module.ts
+++ b/src/app/main/content/ui/forms/forms.module.ts
@@ -6,7 +6,7 @@ import { FuseFormsComponent } from './forms.component';
 
 const routes: Routes = [
     {
-        path     : 'ui/forms',
+        path     : 'forms',
         component: FuseFormsComponent
     }
 ];
diff --git a/src/app/main/content/ui/helper-classes/helper-classes.module.ts b/src/app/main/content/ui/helper-classes/helper-classes.module.ts
index 4d163162..bb99ecb2 100644
--- a/src/app/main/content/ui/helper-classes/helper-classes.module.ts
+++ b/src/app/main/content/ui/helper-classes/helper-classes.module.ts
@@ -8,7 +8,7 @@ import { FuseHelperClassesWidthHeightComponent } from './tabs/width-height/width
 
 const routes: Routes = [
     {
-        path     : 'ui/helper-classes',
+        path     : 'helper-classes',
         component: FuseHelperClassesComponent
     }
 ];
diff --git a/src/app/main/content/ui/icons/icons.module.ts b/src/app/main/content/ui/icons/icons.module.ts
index 1c382528..fe75f5b7 100644
--- a/src/app/main/content/ui/icons/icons.module.ts
+++ b/src/app/main/content/ui/icons/icons.module.ts
@@ -5,7 +5,7 @@ import { FuseIconsComponent } from './icons.component';
 
 const routes: Routes = [
     {
-        path     : 'ui/icons',
+        path     : 'icons',
         component: FuseIconsComponent
     }
 ];
diff --git a/src/app/main/content/ui/page-layouts/page-layouts.module.ts b/src/app/main/content/ui/page-layouts/page-layouts.module.ts
index e11436dd..c87cb18f 100644
--- a/src/app/main/content/ui/page-layouts/page-layouts.module.ts
+++ b/src/app/main/content/ui/page-layouts/page-layouts.module.ts
@@ -24,79 +24,79 @@ import { FuseBlankComponent } from './blank/blank.component';
 
 const routes: Routes = [
     {
-        path     : 'ui/page-layouts/carded/full-width',
+        path     : 'page-layouts/carded/full-width',
         component: FuseCardedFullWidthComponent
     },
     {
-        path     : 'ui/page-layouts/carded/full-width-2',
+        path     : 'page-layouts/carded/full-width-2',
         component: FuseCardedFullWidth2Component
     },
     {
-        path     : 'ui/page-layouts/carded/left-sidenav',
+        path     : 'page-layouts/carded/left-sidenav',
         component: FuseCardedLeftSidenavComponent
     },
     {
-        path     : 'ui/page-layouts/carded/left-sidenav-tabbed',
+        path     : 'page-layouts/carded/left-sidenav-tabbed',
         component: FuseCardedLeftSidenavTabbedComponent
     },
     {
-        path     : 'ui/page-layouts/carded/left-sidenav-2',
+        path     : 'page-layouts/carded/left-sidenav-2',
         component: FuseCardedLeftSidenav2Component
     },
     {
-        path     : 'ui/page-layouts/carded/left-sidenav-2-tabbed',
+        path     : 'page-layouts/carded/left-sidenav-2-tabbed',
         component: FuseCardedLeftSidenav2TabbedComponent
     },
     {
-        path     : 'ui/page-layouts/carded/right-sidenav',
+        path     : 'page-layouts/carded/right-sidenav',
         component: FuseCardedRightSidenavComponent
     },
     {
-        path     : 'ui/page-layouts/carded/right-sidenav-tabbed',
+        path     : 'page-layouts/carded/right-sidenav-tabbed',
         component: FuseCardedRightSidenavTabbedComponent
     },
     {
-        path     : 'ui/page-layouts/carded/right-sidenav-2',
+        path     : 'page-layouts/carded/right-sidenav-2',
         component: FuseCardedRightSidenav2Component
     },
     {
-        path     : 'ui/page-layouts/carded/right-sidenav-2-tabbed',
+        path     : 'page-layouts/carded/right-sidenav-2-tabbed',
         component: FuseCardedRightSidenav2TabbedComponent
     },
     {
-        path     : 'ui/page-layouts/simple/full-width',
+        path     : 'page-layouts/simple/full-width',
         component: FuseSimpleFullWidthComponent
     },
     {
-        path     : 'ui/page-layouts/simple/left-sidenav',
+        path     : 'page-layouts/simple/left-sidenav',
         component: FuseSimpleLeftSidenavComponent
     },
     {
-        path     : 'ui/page-layouts/simple/left-sidenav-2',
+        path     : 'page-layouts/simple/left-sidenav-2',
         component: FuseSimpleLeftSidenav2Component
     },
     {
-        path     : 'ui/page-layouts/simple/left-sidenav-3',
+        path     : 'page-layouts/simple/left-sidenav-3',
         component: FuseSimpleLeftSidenav3Component
     },
     {
-        path     : 'ui/page-layouts/simple/right-sidenav',
+        path     : 'page-layouts/simple/right-sidenav',
         component: FuseSimpleRightSidenavComponent
     },
     {
-        path     : 'ui/page-layouts/simple/right-sidenav-2',
+        path     : 'page-layouts/simple/right-sidenav-2',
         component: FuseSimpleRightSidenav2Component
     },
     {
-        path     : 'ui/page-layouts/simple/right-sidenav-3',
+        path     : 'page-layouts/simple/right-sidenav-3',
         component: FuseSimpleRightSidenav3Component
     },
     {
-        path     : 'ui/page-layouts/simple/tabbed',
+        path     : 'page-layouts/simple/tabbed',
         component: FuseTabbedComponent
     },
     {
-        path     : 'ui/page-layouts/blank',
+        path     : 'page-layouts/blank',
         component: FuseBlankComponent
     }
 ];
diff --git a/src/app/main/content/ui/typography/typography.module.ts b/src/app/main/content/ui/typography/typography.module.ts
index d02c680c..ca1e0f93 100644
--- a/src/app/main/content/ui/typography/typography.module.ts
+++ b/src/app/main/content/ui/typography/typography.module.ts
@@ -10,7 +10,7 @@ import { FuseTypographyHelpersComponent } from './tabs/helpers/helpers.component
 
 const routes: Routes = [
     {
-        path     : 'ui/typography',
+        path     : 'typography',
         component: FuseTypographyComponent
     }
 ];
diff --git a/src/app/main/content/ui/ui.module.ts b/src/app/main/content/ui/ui.module.ts
index f5ca2582..31acd6a4 100644
--- a/src/app/main/content/ui/ui.module.ts
+++ b/src/app/main/content/ui/ui.module.ts
@@ -17,6 +17,6 @@ import { UIColorsModule } from './colors/colors.module';
         UIColorsModule
     ]
 })
-export class UIModule
+export class FuseUIModule
 {
 }

From b56088948cd1f738ab0c36068f14335015dcf647 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Mon, 8 Jan 2018 12:39:55 +0300
Subject: [PATCH 3/8] added --open to the "npm start"

---
 package.json | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 7fb50514..b781fe13 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "license": "https://themeforest.net/licenses/terms/regular",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --open",
     "start-hmr": "ng serve --hmr -e=hmr -sm=false",
     "start-hmr-sourcemaps": "ng serve --hmr -e=hmr",
     "build": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev",
@@ -29,6 +29,10 @@
     "@angular/platform-browser": "5.1.2",
     "@angular/platform-browser-dynamic": "5.1.2",
     "@angular/router": "5.1.2",
+    "@ngrx/effects": "4.1.1",
+    "@ngrx/router-store": "4.1.1",
+    "@ngrx/store": "4.1.1",
+    "@ngrx/store-devtools": "4.1.1",
     "@ngx-translate/core": "9.0.2",
     "@swimlane/ngx-charts": "7.0.1",
     "@swimlane/ngx-datatable": "11.1.7",
@@ -43,10 +47,6 @@
     "highlight.js": "9.12.0",
     "intl": "1.2.5",
     "moment": "2.20.1",
-    "@ngrx/effects": "4.1.1",
-    "@ngrx/router-store": "4.1.1",
-    "@ngrx/store": "4.1.1",
-    "@ngrx/store-devtools": "4.1.1",
     "ngrx-store-freeze": "0.2.0",
     "ngx-color-picker": "5.3.0",
     "ngx-cookie-service": "1.0.9",

From 65e637eeb92c7315f73fa2b20bb47792c0974d63 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Mon, 8 Jan 2018 12:40:25 +0300
Subject: [PATCH 4/8] Use [overlapTrigger] in toolbar menus

---
 src/app/main/toolbar/toolbar.component.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/main/toolbar/toolbar.component.html b/src/app/main/toolbar/toolbar.component.html
index 940c5f03..770b245f 100644
--- a/src/app/main/toolbar/toolbar.component.html
+++ b/src/app/main/toolbar/toolbar.component.html
@@ -36,7 +36,7 @@
                 </div>
             </button>
 
-            <mat-menu #userMenu="matMenu">
+            <mat-menu #userMenu="matMenu" [overlapTrigger]="false">
 
                 <button mat-menu-item>
                     <mat-icon>account_circle</mat-icon>
@@ -70,7 +70,7 @@
                 </div>
             </button>
 
-            <mat-menu #languageMenu="matMenu">
+            <mat-menu #languageMenu="matMenu" [overlapTrigger]="false">
 
                 <button mat-menu-item *ngFor="let lang of languages" (click)="setLanguage(lang)">
                     <div fxLayout="row" fxLayoutAlign="start center">

From b7c10a515c463ca39332e898a38fbfb59125dacf Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Mon, 8 Jan 2018 12:40:39 +0300
Subject: [PATCH 5/8] Added new cards

---
 .../scss/partials/_angular-material-fix.scss  |    4 +-
 src/app/core/scss/partials/_cards.scss        |  164 +-
 src/app/core/scss/partials/_helpers.scss      |  114 +-
 src/app/core/scss/partials/_material.scss     |    1 -
 src/app/core/scss/partials/_typography.scss   |   16 +
 .../components/cards/cards.component.html     | 1969 ++++++++++++++---
 .../components/cards/cards.component.scss     |   51 +-
 .../components/cards/cards.component.ts       |  197 ++
 .../content/components/components.module.ts   |    6 +-
 9 files changed, 2046 insertions(+), 476 deletions(-)

diff --git a/src/app/core/scss/partials/_angular-material-fix.scss b/src/app/core/scss/partials/_angular-material-fix.scss
index 5358bd1f..3214df95 100644
--- a/src/app/core/scss/partials/_angular-material-fix.scss
+++ b/src/app/core/scss/partials/_angular-material-fix.scss
@@ -20,8 +20,8 @@
 }
 
 .mat-pseudo-checkbox-checked:after {
-    width: 14px;
-    height: 7px;
+    width: 14px !important;
+    height: 7px !important;
 }
 
 // Fix: "Input underlines has wrong color opacity value"
diff --git a/src/app/core/scss/partials/_cards.scss b/src/app/core/scss/partials/_cards.scss
index 9b38e690..a7be8cc2 100644
--- a/src/app/core/scss/partials/_cards.scss
+++ b/src/app/core/scss/partials/_cards.scss
@@ -9,145 +9,47 @@
         min-width: 0;
     }
 
-    .card-rich-media {
-        position: relative;
+    // Buttons
+    .mat-button {
+        min-width: 0 !important;
+        padding: 0 8px !important;
+    }
 
-        .card-title {
-            position: absolute;
-            right: 16px;
-            bottom: 16px;
-            left: 16px;
-            font-size: 20px;
-            color: white;
-        }
-    }
-
-    .card-media-header {
-        display: flex;
-        padding: 16px;
-        align-items: center;
-
-        &.medium {
-            align-items: flex-start;
-
-            .card-rich-media {
-                width: 120px;
-                height: 120px;
-            }
-        }
-
-        &.large {
-            align-items: flex-start;
-
-            .card-rich-media {
-                width: 160px;
-                height: 160px;
-            }
-        }
-
-        .card-primary-title {
-            padding: 0 16px 0 0;
-            flex: 1;
-        }
-
-        .card-rich-media {
-            width: 80px;
-            height: 80px;
-        }
-
-        + div {
-            padding-top: 0;
-        }
-    }
-
-    .card-avatar-header {
-        display: flex;
-        padding: 16px;
-        align-items: center;
-
-        .card-avatar {
-            width: 40px;
-            height: 40px;
-            border-radius: 100%;
-            margin-right: 16px;
-        }
-
-        .card-avatar-title {
-
-            .card-title {
-                font-size: 14px;
-                font-weight: bold;
-            }
-
-            .card-subtitle {
-                font-size: 13px;
-                font-weight: bold;
-            }
-        }
-    }
-
-    .card-primary-title {
-        padding: 16px;
-
-        .card-title {
-            font-size: 24px;
-        }
-
-        .card-subtitle {
-            font-size: 14px;
-        }
-
-        + div {
-            padding-top: 0;
-        }
-    }
-
-    .card-supporting-text {
-        padding: 16px;
-        font-size: 14px;
-        line-height: 1.75;
-
-        + div {
-            padding-top: 0;
-        }
-    }
-
-    .card-actions {
-        display: flex;
-        padding: 8px;
-
-        &.icon-buttons {
-            padding: 0 8px;
-        }
-
-        &.align-center {
-            justify-content: center;
-        }
-
-        &.align-right {
-            justify-content: flex-end;
-        }
-
-        .mat-button {
-            min-width: 0 !important;
-            padding: 0 8px !important;
-        }
-
-        .card-expander {
-            margin-left: auto;
-        }
-
-        + div {
-            padding-top: 0;
+    // Button Toggle Group
+    .mat-button-toggle-group,
+    .mat-button-toggle-standalone {
+        box-shadow: none !important;
+    }
+
+    // Tabs
+    .mat-tab-labels {
+        justify-content: center;
+    }
+
+    .mat-tab-label {
+        min-width: 0 !important;
+    }
+
+    // Divider
+    .card-divider {
+        border-top: 1px solid rgba(0, 0, 0, 0.12);
+        margin: 16px;
+
+        &.light {
+            border-top-color: rgba(255, 255, 255, 0.12);
+        }
+
+        &.full-width {
+            margin: 0;
         }
     }
 
+    // Expand Area
     .card-expand-area {
         overflow: hidden;
 
-        .card-expanded-supporting-text {
+        .card-expanded-content {
             padding: 8px 16px 16px 16px;
-            font-size: 14px;
             line-height: 1.75;
         }
     }
diff --git a/src/app/core/scss/partials/_helpers.scss b/src/app/core/scss/partials/_helpers.scss
index 6d261285..d4cea445 100644
--- a/src/app/core/scss/partials/_helpers.scss
+++ b/src/app/core/scss/partials/_helpers.scss
@@ -1,9 +1,59 @@
+// ######################
+// POSITION HELPERS
+// ######################
+@each $breakpoint in map-keys($grid-breakpoints) {
+
+    @include media-breakpoint-up($breakpoint) {
+
+        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+        .position#{$infix}-relative {
+            position: relative;
+        }
+
+        .position#{$infix}-absolute {
+            position: absolute;
+        }
+
+        .position#{$infix}-static {
+            position: static;
+        }
+    }
+}
+
+// ####################################
+// ABSOLUTE POSITION ALIGNMENT HELPERS
+// ####################################
+@each $breakpoint in map-keys($grid-breakpoints) {
+
+    @include media-breakpoint-up($breakpoint) {
+
+        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+        .align#{$infix}-top {
+            top: 0;
+        }
+
+        .align#{$infix}-right {
+            right: 0;
+        }
+
+        .align#{$infix}-bottom {
+            bottom: 0;
+        }
+
+        .align#{$infix}-left {
+            left: 0;
+        }
+    }
+}
+
 // ######################
 // SIZE HELPERS
 // ######################
 @each $prop, $abbrev in (height: h, width: w) {
 
-    @for $index from 0 through 128 {
+    @for $index from 0 through 180 {
         $size: $index * 4;
         $length: #{$size}px;
 
@@ -28,7 +78,6 @@
 // ######################
 // SPACING HELPERS
 // ######################
-
 @each $breakpoint in map-keys($grid-breakpoints) {
 
     @include media-breakpoint-up($breakpoint) {
@@ -83,47 +132,45 @@
             }
 
             @if ($abbrev == m) {
-                @for $index from 0 through 64 {
-                    $size: $index * 4;
-                    $length: #{$size}px;
 
-                    // Some special margin utils for flex alignments
-                    .m#{$infix}-auto {
-                        margin: auto !important;
-                    }
+                // Some special margin utils for flex alignments
+                .m#{$infix}-auto {
+                    margin: auto !important;
+                }
 
-                    .mt#{$infix}-auto {
-                        margin-top: auto !important;
-                    }
+                .mt#{$infix}-auto {
+                    margin-top: auto !important;
+                }
 
-                    .mr#{$infix}-auto {
-                        margin-right: auto !important;
-                    }
+                .mr#{$infix}-auto {
+                    margin-right: auto !important;
+                }
 
-                    .mb#{$infix}-auto {
-                        margin-bottom: auto !important;
-                    }
+                .mb#{$infix}-auto {
+                    margin-bottom: auto !important;
+                }
 
-                    .ml#{$infix}-auto {
-                        margin-left: auto !important;
-                    }
+                .ml#{$infix}-auto {
+                    margin-left: auto !important;
+                }
 
-                    .mx#{$infix}-auto {
-                        margin-right: auto !important;
-                        margin-left: auto !important;
-                    }
+                .mx#{$infix}-auto {
+                    margin-right: auto !important;
+                    margin-left: auto !important;
+                }
 
-                    .my#{$infix}-auto {
-                        margin-top: auto !important;
-                        margin-bottom: auto !important;
-                    }
+                .my#{$infix}-auto {
+                    margin-top: auto !important;
+                    margin-bottom: auto !important;
                 }
             }
         }
     }
 }
 
-// Border helpers
+// ######################
+// BORDER HELPERS
+// ######################
 $border-style: 1px solid rgba(0, 0, 0, 0.12);
 
 .border,
@@ -162,3 +209,10 @@ $border-style: 1px solid rgba(0, 0, 0, 0.12);
     border-top: $border-style;
     border-bottom: $border-style;
 }
+
+// ######################
+// BORDER RADIUS HELPERS
+// ######################
+.border-radius-100 {
+    border-radius: 100%;
+}
\ No newline at end of file
diff --git a/src/app/core/scss/partials/_material.scss b/src/app/core/scss/partials/_material.scss
index fb6c488e..75c1b02c 100644
--- a/src/app/core/scss/partials/_material.scss
+++ b/src/app/core/scss/partials/_material.scss
@@ -411,7 +411,6 @@ table {
                     color: rgba(0, 0, 0, 0.54);
                     border-bottom: 1px solid rgba(0, 0, 0, 0.12);
                     white-space: nowrap;
-                    min-width: 120px;
 
                     &:first-child {
                         padding-left: 24px;
diff --git a/src/app/core/scss/partials/_typography.scss b/src/app/core/scss/partials/_typography.scss
index 0d81ce8a..2e779328 100644
--- a/src/app/core/scss/partials/_typography.scss
+++ b/src/app/core/scss/partials/_typography.scss
@@ -229,6 +229,22 @@ strong {
     }
 }
 
+.line-height-1 {
+    line-height: 1;
+}
+
+.line-height-1\.25 {
+    line-height: 1.25;
+}
+
+.line-height-1\.50 {
+    line-height: 1.5;
+}
+
+.line-height-1\.75 {
+    line-height: 1.75;
+}
+
 // Boxed text
 .text-boxed {
     border-radius: 2px;
diff --git a/src/app/main/content/components/cards/cards.component.html b/src/app/main/content/components/cards/cards.component.html
index 08e092c1..0d62a6e0 100644
--- a/src/app/main/content/components/cards/cards.component.html
+++ b/src/app/main/content/components/cards/cards.component.html
@@ -1,7 +1,8 @@
 <div id="cards" class="page-layout simple fullwidth" fusePerfectScrollbar>
 
     <!-- HEADER -->
-    <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
+    <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="space-between center">
+
         <div fxLayout="column" fxLayoutAlign="center start">
             <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
                 <mat-icon class="secondary-text s-16">home</mat-icon>
@@ -10,33 +11,37 @@
             </div>
             <div class="h2 mt-16">Cards</div>
         </div>
+
+        <div>
+            <mat-slide-toggle color="primary" (change)="toggleView()">
+                View Source
+            </mat-slide-toggle>
+        </div>
+
     </div>
     <!-- / HEADER -->
 
     <!-- CONTENT -->
-    <div class="content">
+    <div class="content" [ngClass]="this.view">
 
-        <div fxLayout="column" fxLayoutAlign="start start">
+        <div class="cards">
 
             <!-- CARD 1 -->
-            <div class="card-row" fxLayout="row" fxLayoutAlign="center start" fxLayoutAlign.gt-sm="start start"
-                 fxLayoutWrap>
+            <div class="card">
 
                 <!-- PREVIEW -->
                 <div class="card-preview">
 
                     <div class="fuse-card">
 
-                        <div class="card-rich-media">
-                            <img src="assets/images/cards/card1.jpg">
+                        <img src="assets/images/cards/card1.jpg">
+
+                        <div class="p-16">
+                            <div class="h1">Kangaroo Valley Safari</div>
+                            <div class="h4 secondary-text">Free on Thursdays</div>
                         </div>
 
-                        <div class="card-primary-title">
-                            <div class="card-title">Kangaroo Valley Safari</div>
-                            <div class="card-subtitle secondary-text">Free on Thursdays</div>
-                        </div>
-
-                        <div class="card-supporting-text">
+                        <div class="p-16 pt-0 line-height-1.75">
                             Cards provide context and an entry point to more robust information and views, and their
                             content and quantity can vary greatly.
                         </div>
@@ -52,18 +57,17 @@
                         <textarea #source hidden="hidden">
                             <div class="fuse-card">
 
-                                <div class="card-rich-media">
-                                    <img src="assets/images/cards/card1.jpg">
+                                <img src="assets/images/cards/card1.jpg">
+
+                                <div class="p-16">
+                                    <div class="h1">Kangaroo Valley Safari</div>
+                                    <div class="h4 secondary-text">Free on Thursdays</div>
                                 </div>
 
-                                <div class="card-primary-title">
-                                    <div class="card-title">Kangaroo Valley Safari</div>
-                                    <div class="card-subtitle secondary-text">Free on Thursdays</div>
-                                </div>
-
-                                <div class="card-supporting-text">
+                                <div class="p-16 pt-0 line-height-1.75">
                                     Cards provide context and an entry point to more robust information and views, and
-                                    their content and quantity can vary greatly.
+                                    their
+                                    content and quantity can vary greatly.
                                 </div>
 
                             </div>
@@ -76,29 +80,26 @@
             <!-- / CARD 1 -->
 
             <!-- CARD 2 -->
-            <div class="card-row" fxLayout="row" fxLayoutAlign="center start" fxLayoutAlign.gt-sm="start start"
-                 fxLayoutWrap>
+            <div class="card">
 
                 <!-- PREVIEW -->
                 <div class="card-preview">
 
                     <div class="fuse-card">
 
-                        <div class="card-rich-media">
-                            <img src="assets/images/cards/card1.jpg">
+                        <img src="assets/images/cards/card1.jpg">
+
+                        <div class="p-16">
+                            <div class="h1">Kangaroo Valley Safari</div>
+                            <div class="h4 secondary-text">Free on Thursdays</div>
                         </div>
 
-                        <div class="card-primary-title">
-                            <div class="card-title">Kangaroo Valley Safari</div>
-                            <div class="card-subtitle secondary-text">Free on Thursdays</div>
-                        </div>
-
-                        <div class="card-supporting-text">
+                        <div class="p-16 pt-0 line-height-1.75">
                             Cards provide context and an entry point to more robust information and views, and their
                             content and quantity can vary greatly.
                         </div>
 
-                        <div class="card-actions">
+                        <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
                             <button mat-button color="accent">SHARE</button>
                             <button mat-button color="accent">EXPLORE</button>
                         </div>
@@ -114,21 +115,20 @@
                         <textarea #source hidden="hidden">
                             <div class="fuse-card">
 
-                                <div class="card-rich-media">
-                                    <img src="assets/images/cards/card1.jpg">
+                                <img src="assets/images/cards/card1.jpg">
+
+                                <div class="p-16">
+                                    <div class="h1">Kangaroo Valley Safari</div>
+                                    <div class="h4 secondary-text">Free on Thursdays</div>
                                 </div>
 
-                                <div class="card-primary-title">
-                                    <div class="card-title">Kangaroo Valley Safari</div>
-                                    <div class="card-subtitle secondary-text">Free on Thursdays</div>
-                                </div>
-
-                                <div class="card-supporting-text">
+                                <div class="p-16 pt-0 line-height-1.75">
                                     Cards provide context and an entry point to more robust information and views, and
-                                    their content and quantity can vary greatly.
+                                    their
+                                    content and quantity can vary greatly.
                                 </div>
 
-                                <div class="card-actions">
+                                <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
                                     <button mat-button color="accent">SHARE</button>
                                     <button mat-button color="accent">EXPLORE</button>
                                 </div>
@@ -143,20 +143,19 @@
             <!-- / CARD 2 -->
 
             <!-- CARD 3 -->
-            <div class="card-row" fxLayout="row" fxLayoutAlign="center start" fxLayoutAlign.gt-sm="start start"
-                 fxLayoutWrap>
+            <div class="card">
 
                 <!-- PREVIEW -->
                 <div class="card-preview">
 
                     <div class="fuse-card">
 
-                        <div class="card-primary-title">
-                            <div class="card-title">Kangaroo Valley Safari</div>
-                            <div class="card-subtitle secondary-text">Free on Thursdays</div>
+                        <div class="p-16">
+                            <div class="h1">Kangaroo Valley Safari</div>
+                            <div class="h4 secondary-text">Free on Thursdays</div>
                         </div>
 
-                        <div class="card-supporting-text">
+                        <div class="p-16 pt-0 line-height-1.75">
                             Cards provide context and an entry point to more robust information and views, and their
                             content and quantity can vary greatly.
                         </div>
@@ -172,14 +171,15 @@
                         <textarea #source hidden="hidden">
                             <div class="fuse-card">
 
-                                <div class="card-primary-title">
-                                    <div class="card-title">Kangaroo Valley Safari</div>
-                                    <div class="card-subtitle secondary-text">Free on Thursdays</div>
+                                <div class="p-16">
+                                    <div class="h1">Kangaroo Valley Safari</div>
+                                    <div class="h4 secondary-text">Free on Thursdays</div>
                                 </div>
 
-                                <div class="card-supporting-text">
+                                <div class="p-16 pt-0 line-height-1.75">
                                     Cards provide context and an entry point to more robust information and views, and
-                                    their content and quantity can vary greatly.
+                                    their
+                                    content and quantity can vary greatly.
                                 </div>
 
                             </div>
@@ -192,26 +192,25 @@
             <!-- / CARD 3 -->
 
             <!-- CARD 4 -->
-            <div class="card-row" fxLayout="row" fxLayoutAlign="center start" fxLayoutAlign.gt-sm="start start"
-                 fxLayoutWrap>
+            <div class="card">
 
                 <!-- PREVIEW -->
                 <div class="card-preview">
 
                     <div class="fuse-card mat-indigo-bg">
 
-                        <div class="card-primary-title">
-                            <div class="card-title">Kangaroo Valley Safari</div>
-                            <div class="card-subtitle secondary-text">Free on Thursdays</div>
+                        <div class="p-16">
+                            <div class="h1">Kangaroo Valley Safari</div>
+                            <div class="h4 secondary-text">Free on Thursdays</div>
                         </div>
 
-                        <div class="card-supporting-text">
+                        <div class="p-16 pt-0 line-height-1.75">
                             All cards can be mixed with Fuse Color Classes to have different colors. This greatly
                             increases the unique variations of all cards. Cards provide context and an entry point to
                             more robust information and views, and their content and quantity can vary greatly.
                         </div>
 
-                        <div class="card-actions">
+                        <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
                             <button mat-button>SHARE</button>
                             <button mat-button>EXPLORE</button>
                         </div>
@@ -225,21 +224,22 @@
                 <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
                     <fuse-hljs lang="html" class="source-code">
                         <textarea #source hidden="hidden">
-                            <div class="fuse-card">
+                            <div class="fuse-card mat-indigo-bg">
 
-                                <div class="card-primary-title">
-                                    <div class="card-title">Kangaroo Valley Safari</div>
-                                    <div class="card-subtitle secondary-text">Free on Thursdays</div>
+                                <div class="p-16">
+                                    <div class="h1">Kangaroo Valley Safari</div>
+                                    <div class="h4 secondary-text">Free on Thursdays</div>
                                 </div>
 
-                                <div class="card-supporting-text">
+                                <div class="p-16 pt-0 line-height-1.75">
                                     All cards can be mixed with Fuse Color Classes to have different colors. This
-                                    greatly increases the unique variations of all cards. Cards provide context and an
-                                    entry point to more robust information and views, and their content and quantity can
-                                    vary greatly.
+                                    greatly
+                                    increases the unique variations of all cards. Cards provide context and an entry
+                                    point to
+                                    more robust information and views, and their content and quantity can vary greatly.
                                 </div>
 
-                                <div class="card-actions">
+                                <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
                                     <button mat-button>SHARE</button>
                                     <button mat-button>EXPLORE</button>
                                 </div>
@@ -254,21 +254,18 @@
             <!-- / CARD 4 -->
 
             <!-- CARD 5 -->
-            <div class="card-row" fxLayout="row" fxLayoutAlign="center start" fxLayoutAlign.gt-sm="start start"
-                 fxLayoutWrap>
+            <div class="card">
 
                 <!-- PREVIEW -->
                 <div class="card-preview">
 
                     <div class="fuse-card">
 
-                        <div class="card-rich-media">
-                            <img src="assets/images/cards/card1.jpg">
-                        </div>
+                        <img src="assets/images/cards/card1.jpg">
 
-                        <div class="card-primary-title">
-                            <div class="card-title">Kangaroo Valley Safari</div>
-                            <div class="card-subtitle secondary-text">Free on Thursdays</div>
+                        <div class="p-16">
+                            <div class="h1">Kangaroo Valley Safari</div>
+                            <div class="h4 secondary-text">Free on Thursdays</div>
                         </div>
 
                     </div>
@@ -282,13 +279,11 @@
                         <textarea #source hidden="hidden">
                             <div class="fuse-card">
 
-                                <div class="card-rich-media">
-                                    <img src="assets/images/cards/card1.jpg">
-                                </div>
+                                <img src="assets/images/cards/card1.jpg">
 
-                                <div class="card-primary-title">
-                                    <div class="card-title">Kangaroo Valley Safari</div>
-                                    <div class="card-subtitle secondary-text">Free on Thursdays</div>
+                                <div class="p-16">
+                                    <div class="h1">Kangaroo Valley Safari</div>
+                                    <div class="h4 secondary-text">Free on Thursdays</div>
                                 </div>
 
                             </div>
@@ -301,19 +296,16 @@
             <!-- / CARD 5 -->
 
             <!-- CARD 6 -->
-            <div class="card-row" fxLayout="row" fxLayoutAlign="center start" fxLayoutAlign.gt-sm="start start"
-                 fxLayoutWrap>
+            <div class="card">
 
                 <!-- PREVIEW -->
                 <div class="card-preview">
 
                     <div class="fuse-card">
 
-                        <div class="card-rich-media">
-                            <img src="assets/images/cards/card1.jpg">
-                        </div>
+                        <img src="assets/images/cards/card1.jpg">
 
-                        <div class="card-supporting-text">
+                        <div class="p-16 line-height-1.75">
                             Cards provide context and an entry point to more robust information and views, and their
                             content and quantity can vary greatly.
                         </div>
@@ -329,11 +321,9 @@
                         <textarea #source hidden="hidden">
                             <div class="fuse-card">
 
-                                <div class="card-rich-media">
-                                    <img src="assets/images/cards/card1.jpg">
-                                </div>
+                                <img src="assets/images/cards/card1.jpg">
 
-                                <div class="card-supporting-text">
+                                <div class="p-16 line-height-1.75">
                                     Cards provide context and an entry point to more robust information and views, and
                                     their content and quantity can vary greatly.
                                 </div>
@@ -348,28 +338,29 @@
             <!-- / CARD 6 -->
 
             <!-- CARD 7 -->
-            <div class="card-row" fxLayout="row" fxLayoutAlign="center start" fxLayoutAlign.gt-sm="start start"
-                 fxLayoutWrap>
+            <div class="card">
 
                 <!-- PREVIEW -->
                 <div class="card-preview">
 
                     <div class="fuse-card">
 
-                        <div class="card-rich-media">
-                            <div class="card-title">Top 10 Holiday Locations</div>
+                        <div class="position-relative">
                             <img src="assets/images/cards/card3.jpg">
+                            <div class="position-absolute font-size-20 white-fg p-16 align-left align-bottom">
+                                Top 10 Holiday Locations
+                            </div>
                         </div>
 
-                        <div class="card-primary-title">
-                            <div class="card-subtitle secondary-text">Number 10</div>
+                        <div class="p-16">
+                            <div class="h4 secondary-text">Number 10</div>
                         </div>
 
-                        <div class="card-supporting-text">
+                        <div class="p-16 pt-0 line-height-1.75">
                             Cards are a convenient means of displaying content composed of different elements.
                         </div>
 
-                        <div class="card-actions">
+                        <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
                             <button mat-button color="accent">SHARE</button>
                             <button mat-button color="accent">EXPLORE</button>
                         </div>
@@ -385,20 +376,22 @@
                         <textarea #source hidden="hidden">
                             <div class="fuse-card">
 
-                                <div class="card-rich-media">
-                                    <div class="card-title">Top 10 Holiday Locations</div>
+                                <div class="position-relative">
                                     <img src="assets/images/cards/card3.jpg">
+                                    <div class="position-absolute font-size-20 white-fg p-16 align-left align-bottom">
+                                        Top 10 Holiday Locations
+                                    </div>
                                 </div>
 
-                                <div class="card-primary-title">
-                                    <div class="card-subtitle secondary-text">Number 10</div>
+                                <div class="p-16">
+                                    <div class="h4 secondary-text">Number 10</div>
                                 </div>
 
-                                <div class="card-supporting-text">
+                                <div class="p-16 pt-0 line-height-1.75">
                                     Cards are a convenient means of displaying content composed of different elements.
                                 </div>
 
-                                <div class="card-actions">
+                                <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
                                     <button mat-button color="accent">SHARE</button>
                                     <button mat-button color="accent">EXPLORE</button>
                                 </div>
@@ -413,33 +406,32 @@
             <!-- / CARD 7 -->
 
             <!-- CARD 8 -->
-            <div class="card-row" fxLayout="row" fxLayoutAlign="center start" fxLayoutAlign.gt-sm="start start"
-                 fxLayoutWrap>
+            <div class="card">
 
                 <!-- PREVIEW -->
                 <div class="card-preview">
 
                     <div class="fuse-card">
 
-                        <div class="card-media-header">
+                        <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
 
-                            <div class="card-primary-title">
-                                <div class="card-subtitle secondary-text">Travel</div>
-                                <div class="card-title">Big City Life</div>
+                            <div class="pr-16">
+                                <div class="h4 secondary-text">Travel</div>
+                                <div class="h1">Big City Life</div>
                             </div>
 
-                            <div class="card-rich-media">
+                            <div class="w-80 h-80">
                                 <img src="assets/images/cards/card2-small.jpg">
                             </div>
 
                         </div>
 
-                        <div class="card-supporting-text">
+                        <div class="p-16 pt-0 line-height-1.75">
                             Cards provide context and an entry point to more robust information and views, and their
                             content and quantity can vary greatly.
                         </div>
 
-                        <div class="card-actions">
+                        <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
                             <button mat-button color="accent">READ</button>
                             <button mat-button color="accent">SHARE</button>
                         </div>
@@ -455,25 +447,26 @@
                         <textarea #source hidden="hidden">
                             <div class="fuse-card">
 
-                                <div class="card-media-header">
+                                <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
 
-                                    <div class="card-primary-title">
-                                        <div class="card-subtitle secondary-text">Travel</div>
-                                        <div class="card-title">Big City Life</div>
+                                    <div class="pr-16">
+                                        <div class="h4 secondary-text">Travel</div>
+                                        <div class="h1">Big City Life</div>
                                     </div>
 
-                                    <div class="card-rich-media">
+                                    <div class="w-80 h-80">
                                         <img src="assets/images/cards/card2-small.jpg">
                                     </div>
 
                                 </div>
 
-                                <div class="card-supporting-text">
+                                <div class="p-16 pt-0 line-height-1.75">
                                     Cards provide context and an entry point to more robust information and views, and
-                                    their content and quantity can vary greatly.
+                                    their
+                                    content and quantity can vary greatly.
                                 </div>
 
-                                <div class="card-actions">
+                                <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
                                     <button mat-button color="accent">READ</button>
                                     <button mat-button color="accent">SHARE</button>
                                 </div>
@@ -488,42 +481,40 @@
             <!-- / CARD 8 -->
 
             <!-- CARD 9 -->
-            <div class="card-row" fxLayout="row" fxLayoutAlign="center start" fxLayoutAlign.gt-sm="start start"
-                 fxLayoutWrap>
+            <div class="card">
 
                 <!-- PREVIEW -->
                 <div class="card-preview">
 
                     <div class="fuse-card">
 
-                        <div class="card-rich-media">
-                            <img src="assets/images/cards/card3.jpg">
+                        <img src="assets/images/cards/card3.jpg">
+
+                        <div class="p-16">
+                            <div class="h1">Top Winter Locations</div>
+                            <div class="h4 secondary-text">More than 200 locations</div>
                         </div>
 
-                        <div class="card-primary-title">
-                            <div class="card-title">Top Winter Locations</div>
-                            <div class="card-subtitle secondary-text">More than 200 locations</div>
-                        </div>
-
-                        <div class="card-supporting-text">
+                        <div class="p-16 pt-0 line-height-1.75">
                             Cards provide context and an entry point to more robust information and views, and their
                             content and quantity can vary greatly.
                         </div>
 
-                        <div class="card-actions">
-                            <button mat-button color="accent">SHARE</button>
-                            <button mat-button color="accent">EXPLORE</button>
-                            <div class="card-expander">
-                                <button mat-icon-button aria-label="expand card"
-                                        (click)="card9Expanded = !card9Expanded">
-                                    <mat-icon *ngIf="card9Expanded">keyboard_arrow_up</mat-icon>
-                                    <mat-icon *ngIf="!card9Expanded">keyboard_arrow_down</mat-icon>
-                                </button>
+                        <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="space-between center">
+                            <div fxLayout="row" fxLayoutAlign="start center">
+                                <button mat-button color="accent">SHARE</button>
+                                <button mat-button color="accent">EXPLORE</button>
                             </div>
+
+                            <button mat-icon-button aria-label="expand card"
+                                    (click)="card9Expanded = !card9Expanded">
+                                <mat-icon *ngIf="card9Expanded">keyboard_arrow_up</mat-icon>
+                                <mat-icon *ngIf="!card9Expanded">keyboard_arrow_down</mat-icon>
+                            </button>
                         </div>
 
                         <div class="card-expand-area" *ngIf="card9Expanded" [@expandCollapse]>
-                            <div class="card-expanded-supporting-text">
+                            <div class="card-expanded-content">
                                 Card content that exceeds the maximum card height is truncated and does not scroll, but
                                 the card can be expanded. Once expanded, the card may exceed the maximum height of the
                                 view. In this case, the card will scroll with the card collection.
@@ -541,38 +532,39 @@
                         <textarea #source hidden="hidden">
                             <div class="fuse-card">
 
-                                <div class="card-rich-media">
-                                    <img src="assets/images/cards/card3.jpg">
+                                <img src="assets/images/cards/card3.jpg">
+
+                                <div class="p-16">
+                                    <div class="h1">Top Winter Locations</div>
+                                    <div class="h4 secondary-text">More than 200 locations</div>
                                 </div>
 
-                                <div class="card-primary-title">
-                                    <div class="card-title">Top Winter Locations</div>
-                                    <div class="card-subtitle secondary-text">More than 200 locations</div>
-                                </div>
-
-                                <div class="card-supporting-text">
+                                <div class="p-16 pt-0 line-height-1.75">
                                     Cards provide context and an entry point to more robust information and views, and
-                                    their content and quantity can vary greatly.
+                                    their
+                                    content and quantity can vary greatly.
                                 </div>
 
-                                <div class="card-actions">
-                                    <button mat-button color="accent">SHARE</button>
-                                    <button mat-button color="accent">EXPLORE</button>
-                                    <div class="card-expander">
-                                        <button mat-icon-button aria-label="expand card"
-                                                (click)="card9Expanded = !card9Expanded">
-                                            <mat-icon *ngIf="card9Expanded">keyboard_arrow_up</mat-icon>
-                                            <mat-icon *ngIf="!card9Expanded">keyboard_arrow_down</mat-icon>
-                                        </button>
+                                <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="space-between center">
+                                    <div fxLayout="row" fxLayoutAlign="start center">
+                                        <button mat-button color="accent">SHARE</button>
+                                        <button mat-button color="accent">EXPLORE</button>
                                     </div>
+
+                                    <button mat-icon-button aria-label="expand card"
+                                            (click)="card9Expanded = !card9Expanded">
+                                        <mat-icon *ngIf="card9Expanded">keyboard_arrow_up</mat-icon>
+                                        <mat-icon *ngIf="!card9Expanded">keyboard_arrow_down</mat-icon>
+                                    </button>
                                 </div>
 
                                 <div class="card-expand-area" *ngIf="card9Expanded" [@expandCollapse]>
-                                    <div class="card-expanded-supporting-text">
+                                    <div class="card-expanded-content">
                                         Card content that exceeds the maximum card height is truncated and does not
-                                        scroll, but the card can be expanded. Once expanded, the card may exceed the
-                                        maximum height of the view. In this case, the card will scroll with the card
-                                        collection.
+                                        scroll, but
+                                        the card can be expanded. Once expanded, the card may exceed the maximum height
+                                        of the
+                                        view. In this case, the card will scroll with the card collection.
                                     </div>
                                 </div>
 
@@ -586,37 +578,35 @@
             <!-- / CARD 9 -->
 
             <!-- CARD 10 -->
-            <div class="card-row" fxLayout="row" fxLayoutAlign="center start" fxLayoutAlign.gt-sm="start start"
-                 fxLayoutWrap>
+            <div class="card">
 
                 <!-- PREVIEW -->
                 <div class="card-preview">
 
                     <div class="fuse-card">
 
-                        <div class="card-rich-media">
-                            <img src="assets/images/cards/card2.jpg">
+                        <img src="assets/images/cards/card2.jpg">
+
+                        <div class="p-16">
+                            <div class="h1">Top eastern road trips</div>
+                            <div class="h4 secondary-text">2,000 miles of wonder</div>
                         </div>
 
-                        <div class="card-primary-title">
-                            <div class="card-title">Top eastern road trips</div>
-                            <div class="card-subtitle secondary-text">2,000 miles of wonder</div>
-                        </div>
-
-                        <div class="card-actions">
-                            <button mat-button color="accent">SHARE</button>
-                            <button mat-button color="accent">EXPLORE</button>
-                            <div class="card-expander">
-                                <button mat-icon-button aria-label="expand card"
-                                        (click)="card10Expanded = !card10Expanded">
-                                    <mat-icon *ngIf="card10Expanded">keyboard_arrow_up</mat-icon>
-                                    <mat-icon *ngIf="!card10Expanded">keyboard_arrow_down</mat-icon>
-                                </button>
+                        <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="space-between center">
+                            <div fxLayout="row" fxLayoutAlign="start center">
+                                <button mat-button color="accent">SHARE</button>
+                                <button mat-button color="accent">EXPLORE</button>
                             </div>
+
+                            <button mat-icon-button aria-label="expand card"
+                                    (click)="card10Expanded = !card10Expanded">
+                                <mat-icon *ngIf="card10Expanded">keyboard_arrow_up</mat-icon>
+                                <mat-icon *ngIf="!card10Expanded">keyboard_arrow_down</mat-icon>
+                            </button>
                         </div>
 
                         <div class="card-expand-area" *ngIf="card10Expanded" [@expandCollapse]>
-                            <div class="card-expanded-supporting-text">
+                            <div class="card-expanded-content">
                                 Card content that exceeds the maximum card height is truncated and does not scroll, but
                                 the card can be expanded. Once expanded, the card may exceed the maximum height of the
                                 view. In this case, the card will scroll with the card collection.
@@ -634,33 +624,33 @@
                         <textarea #source hidden="hidden">
                             <div class="fuse-card">
 
-                                <div class="card-rich-media">
-                                    <img src="assets/images/cards/card2.jpg">
+                                <img src="assets/images/cards/card2.jpg">
+
+                                <div class="p-16">
+                                    <div class="h1">Top eastern road trips</div>
+                                    <div class="h4 secondary-text">2,000 miles of wonder</div>
                                 </div>
 
-                                <div class="card-primary-title">
-                                    <div class="card-title">Top eastern road trips</div>
-                                    <div class="card-subtitle secondary-text">2,000 miles of wonder</div>
-                                </div>
-
-                                <div class="card-actions">
-                                    <button mat-button color="accent">SHARE</button>
-                                    <button mat-button color="accent">EXPLORE</button>
-                                    <div class="card-expander">
-                                        <button mat-icon-button aria-label="expand card"
-                                                (click)="card10Expanded = !card10Expanded">
-                                            <mat-icon *ngIf="card10Expanded">keyboard_arrow_up</mat-icon>
-                                            <mat-icon *ngIf="!card10Expanded">keyboard_arrow_down</mat-icon>
-                                        </button>
+                                <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="space-between center">
+                                    <div fxLayout="row" fxLayoutAlign="start center">
+                                        <button mat-button color="accent">SHARE</button>
+                                        <button mat-button color="accent">EXPLORE</button>
                                     </div>
+
+                                    <button mat-icon-button aria-label="expand card"
+                                            (click)="card10Expanded = !card10Expanded">
+                                        <mat-icon *ngIf="card10Expanded">keyboard_arrow_up</mat-icon>
+                                        <mat-icon *ngIf="!card10Expanded">keyboard_arrow_down</mat-icon>
+                                    </button>
                                 </div>
 
                                 <div class="card-expand-area" *ngIf="card10Expanded" [@expandCollapse]>
-                                    <div class="card-expanded-supporting-text">
+                                    <div class="card-expanded-content">
                                         Card content that exceeds the maximum card height is truncated and does not
-                                        scroll, but the card can be expanded. Once expanded, the card may exceed the
-                                        maximum height of the view. In this case, the card will scroll with the card
-                                        collection.
+                                        scroll, but
+                                        the card can be expanded. Once expanded, the card may exceed the maximum height
+                                        of the
+                                        view. In this case, the card will scroll with the card collection.
                                     </div>
                                 </div>
 
@@ -674,33 +664,30 @@
             <!-- / CARD 10 -->
 
             <!-- CARD 11 -->
-            <div class="card-row" fxLayout="row" fxLayoutAlign="center start" fxLayoutAlign.gt-sm="start start"
-                 fxLayoutWrap>
+            <div class="card">
 
                 <!-- PREVIEW -->
                 <div class="card-preview">
 
                     <div class="fuse-card">
 
-                        <div class="card-avatar-header">
-                            <img class="card-avatar" src="assets/images/avatars/Christy.jpg">
+                        <div class="p-16" fxLayout="row" fxLayoutAlign="start center">
+                            <img class="w-40 h-40 border-radius-100" src="assets/images/avatars/Christy.jpg">
 
-                            <div class="card-avatar-title">
-                                <div class="card-title">Christy</div>
-                                <div class="card-subtitle secondary-text">20 mins. ago</div>
+                            <div class="ml-16">
+                                <div class="text-bold">Christy</div>
+                                <div class="h5 text-bold secondary-text">20 mins. ago</div>
                             </div>
                         </div>
 
-                        <div class="card-rich-media">
-                            <img src="assets/images/cards/card1.jpg">
+                        <img src="assets/images/cards/card1.jpg">
+
+                        <div class="p-16">
+                            <div class="h1">Kangaroo Valley Safari</div>
+                            <div class="h4 secondary-text">Free on Thursdays</div>
                         </div>
 
-                        <div class="card-primary-title">
-                            <div class="card-title">Kangaroo Valley Safari</div>
-                            <div class="card-subtitle secondary-text">Free on Thursdays</div>
-                        </div>
-
-                        <div class="card-supporting-text">
+                        <div class="p-16 pt-0 line-height-1.75">
                             Cards provide context and an entry point to more robust information and views, and their
                             content and quantity can vary greatly.
                         </div>
@@ -716,27 +703,26 @@
                         <textarea #source hidden="hidden">
                             <div class="fuse-card">
 
-                                <div class="card-avatar-header">
-                                    <img class="card-avatar" src="assets/images/avatars/Christy.jpg">
+                                <div class="p-16" fxLayout="row" fxLayoutAlign="start center">
+                                    <img class="w-40 h-40 border-radius-100" src="assets/images/avatars/Christy.jpg">
 
-                                    <div class="card-avatar-title">
-                                        <div class="card-title">Christy</div>
-                                        <div class="card-subtitle secondary-text">20 mins. ago</div>
+                                    <div class="ml-16">
+                                        <div class="text-bold">Christy</div>
+                                        <div class="h5 text-bold secondary-text">20 mins. ago</div>
                                     </div>
                                 </div>
 
-                                <div class="card-rich-media">
-                                    <img src="assets/images/cards/card1.jpg">
+                                <img src="assets/images/cards/card1.jpg">
+
+                                <div class="p-16">
+                                    <div class="h1">Kangaroo Valley Safari</div>
+                                    <div class="h4 secondary-text">Free on Thursdays</div>
                                 </div>
 
-                                <div class="card-primary-title">
-                                    <div class="card-title">Kangaroo Valley Safari</div>
-                                    <div class="card-subtitle secondary-text">Free on Thursdays</div>
-                                </div>
-
-                                <div class="card-supporting-text">
+                                <div class="p-16 pt-0 line-height-1.75">
                                     Cards provide context and an entry point to more robust information and views, and
-                                    their content and quantity can vary greatly.
+                                    their
+                                    content and quantity can vary greatly.
                                 </div>
 
                             </div>
@@ -749,19 +735,16 @@
             <!-- / CARD 11 -->
 
             <!-- CARD 12 -->
-            <div class="card-row" fxLayout="row" fxLayoutAlign="center start" fxLayoutAlign.gt-sm="start start"
-                 fxLayoutWrap>
+            <div class="card">
 
                 <!-- PREVIEW -->
                 <div class="card-preview">
 
                     <div class="fuse-card">
 
-                        <div class="card-rich-media">
-                            <img src="assets/images/cards/card2.jpg">
-                        </div>
+                        <img src="assets/images/cards/card2.jpg">
 
-                        <div class="card-actions icon-buttons align-right">
+                        <div class="px-16 py-4" fxLayout="row" fxLayoutAlign="end center">
                             <button mat-icon-button aria-label="add to favorites">
                                 <mat-icon>favorite</mat-icon>
                             </button>
@@ -786,11 +769,9 @@
                         <textarea #source hidden="hidden">
                             <div class="fuse-card">
 
-                                <div class="card-rich-media">
-                                    <img src="assets/images/cards/card2.jpg">
-                                </div>
+                                <img src="assets/images/cards/card2.jpg">
 
-                                <div class="card-actions icon-buttons align-right">
+                                <div class="px-16 py-4" fxLayout="row" fxLayoutAlign="end center">
                                     <button mat-icon-button aria-label="add to favorites">
                                         <mat-icon>favorite</mat-icon>
                                     </button>
@@ -814,20 +795,21 @@
             <!-- / CARD 12 -->
 
             <!-- CARD 13 -->
-            <div class="card-row" fxLayout="row" fxLayoutAlign="center start" fxLayoutAlign.gt-sm="start start"
-                 fxLayoutWrap>
+            <div class="card">
 
                 <!-- PREVIEW -->
                 <div class="card-preview">
 
                     <div class="fuse-card variable-width">
 
-                        <div class="card-rich-media">
-                            <div class="card-title">Winter</div>
+                        <div class="position-relative">
                             <img src="assets/images/cards/card3-square.jpg">
+                            <div class="position-absolute font-size-20 white-fg p-16 align-left align-bottom">
+                                Winter
+                            </div>
                         </div>
 
-                        <div class="card-actions icon-buttons align-center">
+                        <div class="px-16 py-4" fxLayout="row" fxLayoutAlign="center center">
                             <button mat-icon-button aria-label="add to favorites">
                                 <mat-icon>favorite</mat-icon>
                             </button>
@@ -850,14 +832,16 @@
                 <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
                     <fuse-hljs lang="html" class="source-code">
                         <textarea #source hidden="hidden">
-                            <div class="fuse-card">
+                            <div class="fuse-card variable-width">
 
-                                <div class="card-rich-media">
-                                    <div class="card-title">Winter</div>
+                                <div class="position-relative">
                                     <img src="assets/images/cards/card3-square.jpg">
+                                    <div class="position-absolute font-size-20 white-fg p-16 align-left align-bottom">
+                                        Winter
+                                    </div>
                                 </div>
 
-                                <div class="card-actions icon-buttons align-center">
+                                <div class="px-16 py-4" fxLayout="row" fxLayoutAlign="center center">
                                     <button mat-icon-button aria-label="add to favorites">
                                         <mat-icon>favorite</mat-icon>
                                     </button>
@@ -881,28 +865,27 @@
             <!-- / CARD 13 -->
 
             <!-- CARD 14 -->
-            <div class="card-row" fxLayout="row" fxLayoutAlign="center start" fxLayoutAlign.gt-sm="start start"
-                 fxLayoutWrap>
+            <div class="card">
 
                 <!-- PREVIEW -->
                 <div class="card-preview">
 
                     <div class="fuse-card">
 
-                        <div class="card-media-header">
+                        <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
 
-                            <div class="card-primary-title">
-                                <div class="card-title">Brooklyn</div>
-                                <div class="card-subtitle secondary-text">Travel guide</div>
+                            <div class="pr-16">
+                                <div class="h1">Brooklyn</div>
+                                <div class="h4 secondary-text">Travel guide</div>
                             </div>
 
-                            <div class="card-rich-media">
+                            <div class="w-80 h-80">
                                 <img src="assets/images/cards/card2-small.jpg">
                             </div>
 
                         </div>
 
-                        <div class="card-actions">
+                        <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
                             <button mat-button color="accent">READ</button>
                             <button mat-button color="accent">SHARE</button>
                         </div>
@@ -918,20 +901,20 @@
                         <textarea #source hidden="hidden">
                             <div class="fuse-card">
 
-                                <div class="card-media-header">
+                                <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
 
-                                    <div class="card-primary-title">
-                                        <div class="card-title">Brooklyn</div>
-                                        <div class="card-subtitle secondary-text">Travel guide</div>
+                                    <div class="pr-16">
+                                        <div class="h1">Brooklyn</div>
+                                        <div class="h4 secondary-text">Travel guide</div>
                                     </div>
 
-                                    <div class="card-rich-media">
+                                    <div class="w-80 h-80">
                                         <img src="assets/images/cards/card2-small.jpg">
                                     </div>
 
                                 </div>
 
-                                <div class="card-actions">
+                                <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
                                     <button mat-button color="accent">READ</button>
                                     <button mat-button color="accent">SHARE</button>
                                 </div>
@@ -946,28 +929,27 @@
             <!-- / CARD 14 -->
 
             <!-- CARD 15 -->
-            <div class="card-row" fxLayout="row" fxLayoutAlign="center start" fxLayoutAlign.gt-sm="start start"
-                 fxLayoutWrap>
+            <div class="card">
 
                 <!-- PREVIEW -->
                 <div class="card-preview">
 
                     <div class="fuse-card">
 
-                        <div class="card-media-header medium">
+                        <div class="p-16" fxLayout="row" fxLayoutAlign="space-between start">
 
-                            <div class="card-primary-title">
-                                <div class="card-title">Brooklyn</div>
-                                <div class="card-subtitle secondary-text">Travel guide</div>
+                            <div class="pr-16">
+                                <div class="h1">Brooklyn</div>
+                                <div class="h4 secondary-text">Travel guide</div>
                             </div>
 
-                            <div class="card-rich-media">
+                            <div class="w-120 h-120">
                                 <img src="assets/images/cards/card2-medium.jpg">
                             </div>
 
                         </div>
 
-                        <div class="card-actions">
+                        <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
                             <button mat-button color="accent">READ</button>
                             <button mat-button color="accent">SHARE</button>
                         </div>
@@ -983,20 +965,20 @@
                         <textarea #source hidden="hidden">
                             <div class="fuse-card">
 
-                                <div class="card-media-header medium">
+                                <div class="p-16" fxLayout="row" fxLayoutAlign="space-between start">
 
-                                    <div class="card-primary-title">
-                                        <div class="card-title">Brooklyn</div>
-                                        <div class="card-subtitle secondary-text">Travel guide</div>
+                                    <div class="pr-16">
+                                        <div class="h1">Brooklyn</div>
+                                        <div class="h4 secondary-text">Travel guide</div>
                                     </div>
 
-                                    <div class="card-rich-media">
+                                    <div class="w-120 h-120">
                                         <img src="assets/images/cards/card2-medium.jpg">
                                     </div>
 
                                 </div>
 
-                                <div class="card-actions">
+                                <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
                                     <button mat-button color="accent">READ</button>
                                     <button mat-button color="accent">SHARE</button>
                                 </div>
@@ -1011,28 +993,27 @@
             <!-- / CARD 15 -->
 
             <!-- CARD 16 -->
-            <div class="card-row" fxLayout="row" fxLayoutAlign="center start" fxLayoutAlign.gt-sm="start start"
-                 fxLayoutWrap>
+            <div class="card">
 
                 <!-- PREVIEW -->
                 <div class="card-preview">
 
                     <div class="fuse-card">
 
-                        <div class="card-media-header large">
+                        <div class="p-16" fxLayout="row" fxLayoutAlign="space-between start">
 
-                            <div class="card-primary-title">
-                                <div class="card-title">Brooklyn</div>
-                                <div class="card-subtitle secondary-text">Travel guide</div>
+                            <div class="pr-16">
+                                <div class="h1">Brooklyn</div>
+                                <div class="h4 secondary-text">Travel guide</div>
                             </div>
 
-                            <div class="card-rich-media">
+                            <div class="w-160 h-160">
                                 <img src="assets/images/cards/card2-large.jpg">
                             </div>
 
                         </div>
 
-                        <div class="card-actions">
+                        <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
                             <button mat-button color="accent">READ</button>
                             <button mat-button color="accent">SHARE</button>
                         </div>
@@ -1048,20 +1029,20 @@
                         <textarea #source hidden="hidden">
                             <div class="fuse-card">
 
-                                <div class="card-media-header large">
+                                <div class="p-16" fxLayout="row" fxLayoutAlign="space-between start">
 
-                                    <div class="card-primary-title">
-                                        <div class="card-title">Brooklyn</div>
-                                        <div class="card-subtitle secondary-text">Travel guide</div>
+                                    <div class="pr-16">
+                                        <div class="h1">Brooklyn</div>
+                                        <div class="h4 secondary-text">Travel guide</div>
                                     </div>
 
-                                    <div class="card-rich-media">
+                                    <div class="w-160 h-160">
                                         <img src="assets/images/cards/card2-large.jpg">
                                     </div>
 
                                 </div>
 
-                                <div class="card-actions">
+                                <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
                                     <button mat-button color="accent">READ</button>
                                     <button mat-button color="accent">SHARE</button>
                                 </div>
@@ -1075,6 +1056,1402 @@
             </div>
             <!-- / CARD 16 -->
 
+            <!-- CARD 17 -->
+            <div class="card">
+
+                <!-- PREVIEW -->
+                <div class="card-preview">
+
+                    <div class="fuse-card">
+
+                        <img src="assets/images/cards/card2.jpg">
+
+                        <div class="p-16">
+                            <div class="h1">Coffee NewYork</div>
+                            <div class="h5 secondary-text">
+                                <div fxLayout="row" fxLayoutAlign="start center">
+                                    <mat-icon class="s-16 amber-fg">star</mat-icon>
+                                    <mat-icon class="s-16 amber-fg">star</mat-icon>
+                                    <mat-icon class="s-16 amber-fg">star</mat-icon>
+                                    <mat-icon class="s-16 amber-fg">star</mat-icon>
+                                    <mat-icon class="s-16 amber-fg">star_half</mat-icon>
+                                    <div class="ml-8 secondary-text">4.7</div>
+                                    <div class="ml-4 secondary-text">(51)</div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="px-16 line-height-1.75">
+                            Small plates, salads & sandwiches in an intimate setting with 12 indoor seats plus patio
+                            seating.
+                        </div>
+
+                        <div class="card-divider"></div>
+
+                        <div class="p-16 pt-0 line-height-1.75">
+                            <div class="mb-16 text-bold">Tonight's Availability</div>
+                            <div fxLayout="row" fxLayoutAlign="start center">
+                                <mat-icon class="mr-16">access_time</mat-icon>
+                                <mat-button-toggle-group>
+                                    <mat-button-toggle value="0530PM">
+                                        5:30PM
+                                    </mat-button-toggle>
+                                    <mat-button-toggle value="0730PM" [checked]="true">
+                                        7:30PM
+                                    </mat-button-toggle>
+                                    <mat-button-toggle value="0900PM">
+                                        9:00PM
+                                    </mat-button-toggle>
+                                </mat-button-toggle-group>
+                            </div>
+                        </div>
+
+                        <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
+                            <button mat-button color="accent">RESERVE</button>
+                        </div>
+
+                    </div>
+
+                </div>
+                <!-- / PREVIEW -->
+
+                <!-- SOURCE -->
+                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
+                    <fuse-hljs lang="html" class="source-code">
+                        <textarea #source hidden="hidden">
+                            <div class="fuse-card">
+
+                                <img src="assets/images/cards/card2.jpg">
+
+                                <div class="p-16">
+                                    <div class="h1">Coffee NewYork</div>
+                                    <div class="h5 secondary-text">
+                                        <div fxLayout="row" fxLayoutAlign="start center">
+                                            <mat-icon class="s-16 amber-fg">star</mat-icon>
+                                            <mat-icon class="s-16 amber-fg">star</mat-icon>
+                                            <mat-icon class="s-16 amber-fg">star</mat-icon>
+                                            <mat-icon class="s-16 amber-fg">star</mat-icon>
+                                            <mat-icon class="s-16 amber-fg">star_half</mat-icon>
+                                            <div class="ml-8 secondary-text">4.7</div>
+                                            <div class="ml-4 secondary-text">(51)</div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="px-16 line-height-1.75">
+                                    Small plates, salads & sandwiches in an intimate setting with 12 indoor seats plus
+                                    patio
+                                    seating.
+                                </div>
+
+                                <div class="card-divider"></div>
+
+                                <div class="p-16 pt-0 line-height-1.75">
+                                    <div class="mb-16 text-bold">Tonight's Availability</div>
+                                    <div fxLayout="row" fxLayoutAlign="start center">
+                                        <mat-icon class="mr-16">access_time</mat-icon>
+                                        <mat-button-toggle-group>
+                                            <mat-button-toggle value="0530PM">
+                                                5:30PM
+                                            </mat-button-toggle>
+                                            <mat-button-toggle value="0730PM" [checked]="true">
+                                                7:30PM
+                                            </mat-button-toggle>
+                                            <mat-button-toggle value="0900PM">
+                                                9:00PM
+                                            </mat-button-toggle>
+                                        </mat-button-toggle-group>
+                                    </div>
+                                </div>
+
+                                <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
+                                    <button mat-button color="accent">RESERVE</button>
+                                </div>
+
+                            </div>
+                        </textarea>
+                    </fuse-hljs>
+                </div>
+                <!-- / SOURCE -->
+
+            </div>
+            <!-- / CARD 17 -->
+
+            <!-- CARD 18 -->
+            <div class="card">
+
+                <!-- PREVIEW -->
+                <div class="card-preview">
+
+                    <div class="fuse-card">
+
+                        <div class="p-16">
+                            <div class="h1">San Francisco</div>
+                            <div class="h4 secondary-text">Mon, 12:30 PM, Mostly Sunny</div>
+                        </div>
+
+                        <div class="p-16 pt-0" fxLayout="row" fxLayoutAlign="space-between center">
+                            <div fxLayout="row" fxLayoutAlign="start start">
+                                <span class="font-weight-300 font-size-72 line-height-72">23</span>
+                                <span class="font-weight-300 font-size-48 line-height-48 ml-8 mt-4">°</span>
+                                <span class="font-weight-300 font-size-48 line-height-48 mt-4">C</span>
+                            </div>
+                            <mat-icon fontSet="meteocons" fontIcon="icon-cloudy" class="icon s-64"></mat-icon>
+                        </div>
+
+                        <div class="px-16 pb-4">
+                            <div class="pb-8" fxLayout="row" fxLayoutAlign="start center">
+                                <mat-icon fontSet="meteocons" fontIcon="icon-wind"
+                                          class="icon s-16 mr-16"></mat-icon>
+                                <div>23 km/h</div>
+                            </div>
+
+                            <div fxLayout="row" fxLayoutAlign="start center">
+                                <mat-icon fontSet="meteocons" fontIcon="icon-rainy2"
+                                          class="icon s-16 mr-16"></mat-icon>
+                                <div>48 %</div>
+                            </div>
+                        </div>
+
+                        <div class="card-divider"></div>
+
+                        <div class="p-16 pt-4">
+                            <div class="mb-12" fxLayout="row" fxLayoutAlign="space-between center">
+                                <div>Tuesday</div>
+                                <div fxLayout="row" fxLayoutAlign="start center">
+                                    <mat-icon fontSet="meteocons" fontIcon="icon-sun"
+                                              class="icon s-16 mr-16"></mat-icon>
+                                    <div class="secondary-text">24°</div>
+                                    <div class="disabled-text">/</div>
+                                    <div class="disabled-text">12°</div>
+                                </div>
+                            </div>
+
+                            <div class="mb-12" fxLayout="row" fxLayoutAlign="space-between center">
+                                <div>Wednesday</div>
+                                <div fxLayout="row" fxLayoutAlign="start center">
+                                    <mat-icon fontSet="meteocons" fontIcon="icon-sun"
+                                              class="icon s-16 mr-16"></mat-icon>
+                                    <div class="secondary-text">22°</div>
+                                    <div class="disabled-text">/</div>
+                                    <div class="disabled-text">14°</div>
+                                </div>
+                            </div>
+
+                            <div class="mb-12" fxLayout="row" fxLayoutAlign="space-between center">
+                                <div>Thursday</div>
+                                <div fxLayout="row" fxLayoutAlign="start center">
+                                    <mat-icon fontSet="meteocons" fontIcon="icon-cloudy"
+                                              class="icon s-16 mr-16"></mat-icon>
+                                    <div class="secondary-text">23°</div>
+                                    <div class="disabled-text">/</div>
+                                    <div class="disabled-text">13°</div>
+                                </div>
+                            </div>
+
+                            <div class="mb-12" fxLayout="row" fxLayoutAlign="space-between center">
+                                <div>Friday</div>
+                                <div fxLayout="row" fxLayoutAlign="start center">
+                                    <mat-icon fontSet="meteocons" fontIcon="icon-cloudy"
+                                              class="icon s-16 mr-16"></mat-icon>
+                                    <div class="secondary-text">25°</div>
+                                    <div class="disabled-text">/</div>
+                                    <div class="disabled-text">15°</div>
+                                </div>
+                            </div>
+
+                            <div fxLayout="row" fxLayoutAlign="space-between center">
+                                <div>Saturday</div>
+                                <div fxLayout="row" fxLayoutAlign="start center">
+                                    <mat-icon fontSet="meteocons" fontIcon="icon-cloudy"
+                                              class="icon s-16 mr-16"></mat-icon>
+                                    <div class="secondary-text">24°</div>
+                                    <div class="disabled-text">/</div>
+                                    <div class="disabled-text">15°</div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
+                            <button mat-button color="accent">FULL REPORT</button>
+                        </div>
+
+                    </div>
+
+                </div>
+                <!-- / PREVIEW -->
+
+                <!-- SOURCE -->
+                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
+                    <fuse-hljs lang="html" class="source-code">
+                        <textarea #source hidden="hidden">
+                            <div class="fuse-card">
+
+                                <div class="p-16">
+                                    <div class="h1">San Francisco</div>
+                                    <div class="h4 secondary-text">Mon, 12:30 PM, Mostly Sunny</div>
+                                </div>
+
+                                <div class="p-16 pt-0" fxLayout="row" fxLayoutAlign="space-between center">
+                                    <div fxLayout="row" fxLayoutAlign="start start">
+                                        <span class="font-weight-300 font-size-72 line-height-72">23</span>
+                                        <span class="font-weight-300 font-size-48 line-height-48 ml-8 mt-4">°</span>
+                                        <span class="font-weight-300 font-size-48 line-height-48 mt-4">C</span>
+                                    </div>
+                                    <mat-icon fontSet="meteocons" fontIcon="icon-cloudy" class="icon s-64"></mat-icon>
+                                </div>
+
+                                <div class="px-16 pb-4">
+                                    <div class="pb-8" fxLayout="row" fxLayoutAlign="start center">
+                                        <mat-icon fontSet="meteocons" fontIcon="icon-wind"
+                                                  class="icon s-16 mr-16"></mat-icon>
+                                        <div>23 km/h</div>
+                                    </div>
+
+                                    <div fxLayout="row" fxLayoutAlign="start center">
+                                        <mat-icon fontSet="meteocons" fontIcon="icon-rainy2"
+                                                  class="icon s-16 mr-16"></mat-icon>
+                                        <div>48 %</div>
+                                    </div>
+                                </div>
+
+                                <div class="card-divider"></div>
+
+                                <div class="p-16 pt-4">
+                                    <div class="mb-12" fxLayout="row" fxLayoutAlign="space-between center">
+                                        <div>Tuesday</div>
+                                        <div fxLayout="row" fxLayoutAlign="start center">
+                                            <mat-icon fontSet="meteocons" fontIcon="icon-sun"
+                                                      class="icon s-16 mr-16"></mat-icon>
+                                            <div class="secondary-text">24°</div>
+                                            <div class="disabled-text">/</div>
+                                            <div class="disabled-text">12°</div>
+                                        </div>
+                                    </div>
+
+                                    <div class="mb-12" fxLayout="row" fxLayoutAlign="space-between center">
+                                        <div>Wednesday</div>
+                                        <div fxLayout="row" fxLayoutAlign="start center">
+                                            <mat-icon fontSet="meteocons" fontIcon="icon-sun"
+                                                      class="icon s-16 mr-16"></mat-icon>
+                                            <div class="secondary-text">22°</div>
+                                            <div class="disabled-text">/</div>
+                                            <div class="disabled-text">14°</div>
+                                        </div>
+                                    </div>
+
+                                    <div class="mb-12" fxLayout="row" fxLayoutAlign="space-between center">
+                                        <div>Thursday</div>
+                                        <div fxLayout="row" fxLayoutAlign="start center">
+                                            <mat-icon fontSet="meteocons" fontIcon="icon-cloudy"
+                                                      class="icon s-16 mr-16"></mat-icon>
+                                            <div class="secondary-text">23°</div>
+                                            <div class="disabled-text">/</div>
+                                            <div class="disabled-text">13°</div>
+                                        </div>
+                                    </div>
+
+                                    <div class="mb-12" fxLayout="row" fxLayoutAlign="space-between center">
+                                        <div>Friday</div>
+                                        <div fxLayout="row" fxLayoutAlign="start center">
+                                            <mat-icon fontSet="meteocons" fontIcon="icon-cloudy"
+                                                      class="icon s-16 mr-16"></mat-icon>
+                                            <div class="secondary-text">25°</div>
+                                            <div class="disabled-text">/</div>
+                                            <div class="disabled-text">15°</div>
+                                        </div>
+                                    </div>
+
+                                    <div fxLayout="row" fxLayoutAlign="space-between center">
+                                        <div>Saturday</div>
+                                        <div fxLayout="row" fxLayoutAlign="start center">
+                                            <mat-icon fontSet="meteocons" fontIcon="icon-cloudy"
+                                                      class="icon s-16 mr-16"></mat-icon>
+                                            <div class="secondary-text">24°</div>
+                                            <div class="disabled-text">/</div>
+                                            <div class="disabled-text">15°</div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
+                                    <button mat-button color="accent">FULL REPORT</button>
+                                </div>
+
+                            </div>
+                        </textarea>
+                    </fuse-hljs>
+                </div>
+                <!-- / SOURCE -->
+
+            </div>
+            <!-- / CARD 18 -->
+
+            <!-- CARD 19 -->
+            <div class="card">
+
+                <!-- PREVIEW -->
+                <div class="card-preview">
+
+                    <div class="fuse-card">
+
+                        <div class="mat-light-blue-600-bg">
+
+                            <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
+                                <div class="pr-16">
+                                    <div class="h1 font-weight-300">Google Inc.</div>
+                                    <div class="h5 secondary-text">NASDAQ: GOOG</div>
+                                </div>
+
+                                <div>
+                                    <button mat-icon-button [matMenuTriggerFor]="card19Menu" aria-label="more">
+                                        <mat-icon>more_vert</mat-icon>
+                                    </button>
+
+                                    <mat-menu #card19Menu="matMenu">
+                                        <button mat-menu-item>
+                                            <mat-icon>trending_up</mat-icon>
+                                            <span>Trend</span>
+                                        </button>
+                                        <button mat-menu-item>
+                                            <mat-icon>history</mat-icon>
+                                            <span>History</span>
+                                        </button>
+                                        <button mat-menu-item>
+                                            <mat-icon>notifications_off</mat-icon>
+                                            <span>Disable alerts</span>
+                                        </button>
+                                    </mat-menu>
+                                </div>
+                            </div>
+
+                            <div class="p-16 pt-8" fxLayout="row" fxLayoutAlign="space-between end">
+                                <div class="font-size-48 font-weight-300 line-height-1">540.48</div>
+                                <div fxLayout="row" fxLayoutAlign="start center">
+                                    <mat-icon>trending_up</mat-icon>
+                                    <div class="ml-8">2.29 (2.05%)</div>
+                                </div>
+                            </div>
+
+                        </div>
+
+                        <mat-tab-group backgroundColor="accent">
+                            <mat-tab label="1DAY">
+                                <div class="h-200 my-16">
+                                    <ngx-charts-line-chart
+                                        *fuseIfOnDom
+                                        [scheme]="card19.scheme"
+                                        [results]="card19.data"
+                                        [xAxis]="false"
+                                        [yAxis]="true"
+                                        [yScaleMin]="'538'"
+                                        [yScaleMax]="'541'">
+                                    </ngx-charts-line-chart>
+                                </div>
+                            </mat-tab>
+
+                            <mat-tab label="1WEEK">
+                                <div class="h-200 my-16">
+                                    <ngx-charts-line-chart
+                                        *fuseIfOnDom
+                                        [scheme]="card19.scheme"
+                                        [results]="card19.data"
+                                        [xAxis]="false"
+                                        [yAxis]="true"
+                                        [yScaleMin]="'538'"
+                                        [yScaleMax]="'541'">
+                                    </ngx-charts-line-chart>
+                                </div>
+                            </mat-tab>
+
+                            <mat-tab label="1MONTH">
+                                <div class="h-200 my-16">
+                                    <ngx-charts-line-chart
+                                        *fuseIfOnDom
+                                        [scheme]="card19.scheme"
+                                        [results]="card19.data"
+                                        [xAxis]="false"
+                                        [yAxis]="true"
+                                        [yScaleMin]="'538'"
+                                        [yScaleMax]="'541'">
+                                    </ngx-charts-line-chart>
+                                </div>
+                            </mat-tab>
+                        </mat-tab-group>
+
+                    </div>
+
+                </div>
+                <!-- / PREVIEW -->
+
+                <!-- SOURCE -->
+                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
+                    <fuse-hljs lang="html" class="source-code">
+                        <textarea #source hidden="hidden">
+                            <div class="fuse-card">
+
+                                <div class="mat-light-blue-600-bg">
+
+                                    <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
+                                        <div class="pr-16">
+                                            <div class="h1 font-weight-300">Google Inc.</div>
+                                            <div class="h5 secondary-text">NASDAQ: GOOG</div>
+                                        </div>
+
+                                        <div>
+                                            <button mat-icon-button [matMenuTriggerFor]="card19Menu" aria-label="more">
+                                                <mat-icon>more_vert</mat-icon>
+                                            </button>
+
+                                            <mat-menu #card19Menu="matMenu">
+                                                <button mat-menu-item>
+                                                    <mat-icon>trending_up</mat-icon>
+                                                    <span>Trend</span>
+                                                </button>
+                                                <button mat-menu-item>
+                                                    <mat-icon>history</mat-icon>
+                                                    <span>History</span>
+                                                </button>
+                                                <button mat-menu-item>
+                                                    <mat-icon>notifications_off</mat-icon>
+                                                    <span>Disable alerts</span>
+                                                </button>
+                                            </mat-menu>
+                                        </div>
+                                    </div>
+
+                                    <div class="p-16 pt-8" fxLayout="row" fxLayoutAlign="space-between end">
+                                        <div class="font-size-48 font-weight-300 line-height-1">540.48</div>
+                                        <div fxLayout="row" fxLayoutAlign="start center">
+                                            <mat-icon>trending_up</mat-icon>
+                                            <div class="ml-8">2.29 (2.05%)</div>
+                                        </div>
+                                    </div>
+
+                                </div>
+
+                                <mat-tab-group backgroundColor="accent">
+                                    <mat-tab label="1DAY">
+                                        <div class="h-200 my-16">
+                                            <ngx-charts-line-chart
+                                                *fuseIfOnDom
+                                                [scheme]="card19.scheme"
+                                                [results]="card19.data"
+                                                [xAxis]="false"
+                                                [yAxis]="true"
+                                                [yScaleMin]="'538'"
+                                                [yScaleMax]="'541'">
+                                            </ngx-charts-line-chart>
+                                        </div>
+                                    </mat-tab>
+
+                                    <mat-tab label="1WEEK">
+                                        <div class="h-200 my-16">
+                                            <ngx-charts-line-chart
+                                                *fuseIfOnDom
+                                                [scheme]="card19.scheme"
+                                                [results]="card19.data"
+                                                [xAxis]="false"
+                                                [yAxis]="true"
+                                                [yScaleMin]="'538'"
+                                                [yScaleMax]="'541'">
+                                            </ngx-charts-line-chart>
+                                        </div>
+                                    </mat-tab>
+
+                                    <mat-tab label="1MONTH">
+                                        <div class="h-200 my-16">
+                                            <ngx-charts-line-chart
+                                                *fuseIfOnDom
+                                                [scheme]="card19.scheme"
+                                                [results]="card19.data"
+                                                [xAxis]="false"
+                                                [yAxis]="true"
+                                                [yScaleMin]="'538'"
+                                                [yScaleMax]="'541'">
+                                            </ngx-charts-line-chart>
+                                        </div>
+                                    </mat-tab>
+                                </mat-tab-group>
+
+                            </div>
+                        </textarea>
+                    </fuse-hljs>
+                </div>
+                <!-- / SOURCE -->
+
+            </div>
+            <!-- / CARD 19 -->
+
+            <!-- CARD 20 -->
+            <div class="card">
+
+                <!-- PREVIEW -->
+                <div class="card-preview">
+
+                    <div class="fuse-card">
+
+                        <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
+                            <div class="h1 pr-16">Top campaigns</div>
+
+                            <div>
+                                <button mat-icon-button [matMenuTriggerFor]="card20Menu" aria-label="more">
+                                    <mat-icon>more_vert</mat-icon>
+                                </button>
+
+                                <mat-menu #card20Menu="matMenu">
+                                    <button fxLayout="row" fxLayoutAlign="start center" mat-menu-item>
+                                        <mat-icon color="accent">check_box</mat-icon>
+                                        <span>Show Clicks</span>
+                                    </button>
+                                    <button fxLayout="row" fxLayoutAlign="start center" mat-menu-item>
+                                        <mat-icon color="accent">check_box</mat-icon>
+                                        <span>Show Conversion</span>
+                                    </button>
+                                    <button fxLayout="row" fxLayoutAlign="start center" mat-menu-item>
+                                        <mat-icon>check_box_outline_blank</mat-icon>
+                                        <span>Show CPC</span>
+                                    </button>
+                                </mat-menu>
+                            </div>
+                        </div>
+
+                        <table class="simple clickable">
+                            <thead>
+                                <tr>
+                                    <th></th>
+                                    <th class="text-right">Clicks</th>
+                                    <th class="text-right">Conv</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>Holiday Travel</td>
+                                    <td class="text-right">3621</td>
+                                    <td class="text-right">90</td>
+                                </tr>
+                                <tr>
+                                    <td>Get Away Deals</td>
+                                    <td class="text-right">703</td>
+                                    <td class="text-right">7</td>
+                                </tr>
+                                <tr>
+                                    <td>Airfare</td>
+                                    <td class="text-right">532</td>
+                                    <td class="text-right">0</td>
+                                </tr>
+                                <tr>
+                                    <td>Vacation</td>
+                                    <td class="text-right">201</td>
+                                    <td class="text-right">8</td>
+                                </tr>
+                                <tr>
+                                    <td>Hotels</td>
+                                    <td class="text-right">94</td>
+                                    <td class="text-right">4</td>
+                                </tr>
+                            </tbody>
+                        </table>
+
+                        <div class="card-divider full-width"></div>
+
+                        <div class="p-8 pt-16" fxLayout="row" fxLayoutAlign="start center">
+                            <button mat-button color="accent">GO TO CAMPAIGNS</button>
+                        </div>
+
+                    </div>
+
+                </div>
+                <!-- / PREVIEW -->
+
+                <!-- SOURCE -->
+                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
+                    <fuse-hljs lang="html" class="source-code">
+                        <textarea #source hidden="hidden">
+                            <div class="fuse-card">
+
+                                <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
+                                    <div class="h1 pr-16">Top campaigns</div>
+
+                                    <div>
+                                        <button mat-icon-button [matMenuTriggerFor]="card20Menu" aria-label="more">
+                                            <mat-icon>more_vert</mat-icon>
+                                        </button>
+
+                                        <mat-menu #card20Menu="matMenu">
+                                            <button fxLayout="row" fxLayoutAlign="start center" mat-menu-item>
+                                                <mat-icon color="accent">check_box</mat-icon>
+                                                <span>Show Clicks</span>
+                                            </button>
+                                            <button fxLayout="row" fxLayoutAlign="start center" mat-menu-item>
+                                                <mat-icon color="accent">check_box</mat-icon>
+                                                <span>Show Conversion</span>
+                                            </button>
+                                            <button fxLayout="row" fxLayoutAlign="start center" mat-menu-item>
+                                                <mat-icon>check_box_outline_blank</mat-icon>
+                                                <span>Show CPC</span>
+                                            </button>
+                                        </mat-menu>
+                                    </div>
+                                </div>
+
+                                <table class="simple clickable">
+                                    <thead>
+                                        <tr>
+                                            <th></th>
+                                            <th class="text-right">Clicks</th>
+                                            <th class="text-right">Conv</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr>
+                                            <td>Holiday Travel</td>
+                                            <td class="text-right">3621</td>
+                                            <td class="text-right">90</td>
+                                        </tr>
+                                        <tr>
+                                            <td>Get Away Deals</td>
+                                            <td class="text-right">703</td>
+                                            <td class="text-right">7</td>
+                                        </tr>
+                                        <tr>
+                                            <td>Airfare</td>
+                                            <td class="text-right">532</td>
+                                            <td class="text-right">0</td>
+                                        </tr>
+                                        <tr>
+                                            <td>Vacation</td>
+                                            <td class="text-right">201</td>
+                                            <td class="text-right">8</td>
+                                        </tr>
+                                        <tr>
+                                            <td>Hotels</td>
+                                            <td class="text-right">94</td>
+                                            <td class="text-right">4</td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+
+                                <div class="card-divider full-width"></div>
+
+                                <div class="p-8 pt-16" fxLayout="row" fxLayoutAlign="start center">
+                                    <button mat-button color="accent">GO TO CAMPAIGNS</button>
+                                </div>
+
+                            </div>
+                        </textarea>
+                    </fuse-hljs>
+                </div>
+                <!-- / SOURCE -->
+
+            </div>
+            <!-- / CARD 20 -->
+
+            <!-- CARD 21 -->
+            <div class="card">
+
+                <!-- PREVIEW -->
+                <div class="card-preview">
+
+                    <div class="fuse-card">
+
+                        <div class="p-16 pb-0" fxLayout="row" fxLayoutAlign="space-between center">
+                            <div class="h1 pr-16">Schedule</div>
+
+                            <mat-form-field>
+                                <mat-select class="simplified" value="today">
+                                    <mat-option value="today">Today</mat-option>
+                                    <mat-option value="yesterday">Yesterday</mat-option>
+                                </mat-select>
+                            </mat-form-field>
+                        </div>
+
+                        <mat-list>
+                            <mat-list-item>
+                                <h3 matLine>Group Meeting</h3>
+                                <p matLine>
+                                    <span class="secondary-text">In 32 minutes -</span>
+                                    <span class="text-bold">Room 1B</span>
+                                </p>
+                            </mat-list-item>
+
+                            <mat-list-item>
+                                <h3 matLine>Coffee Break</h3>
+                                <p matLine>
+                                    <span class="secondary-text">10:30AM</span>
+                                </p>
+                            </mat-list-item>
+
+                            <mat-list-item>
+                                <h3 matLine>Public Beta Release</h3>
+                                <p matLine>
+                                    <span class="secondary-text">11:00AM</span>
+                                </p>
+                            </mat-list-item>
+
+                            <mat-list-item>
+                                <h3 matLine>Lunch</h3>
+                                <p matLine>
+                                    <span class="secondary-text">12:10PM</span>
+                                </p>
+                            </mat-list-item>
+
+                            <mat-list-item>
+                                <h3 matLine>Dinner with David</h3>
+                                <p matLine>
+                                    <span class="secondary-text">17:30PM</span>
+                                </p>
+                            </mat-list-item>
+                        </mat-list>
+
+                        <div class="p-8 pt-16" fxLayout="row" fxLayoutAlign="start center">
+                            <button mat-button color="accent">SEE COMPLETE SCHEDULE</button>
+                        </div>
+
+                    </div>
+
+                </div>
+                <!-- / PREVIEW -->
+
+                <!-- SOURCE -->
+                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
+                    <fuse-hljs lang="html" class="source-code">
+                        <textarea #source hidden="hidden">
+                            <div class="fuse-card">
+
+                                <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
+                                    <div class="h1 pr-16">Top campaigns</div>
+
+                                    <div>
+                                        <button mat-icon-button [matMenuTriggerFor]="card20Menu" aria-label="more">
+                                            <mat-icon>more_vert</mat-icon>
+                                        </button>
+
+                                        <mat-menu #card20Menu="matMenu">
+                                            <button mat-menu-item>
+                                                <mat-icon color="accent">check_box</mat-icon>
+                                                <span>Show Clicks</span>
+                                            </button>
+                                            <button mat-menu-item>
+                                                <mat-icon color="accent">check_box</mat-icon>
+                                                <span>Show Conversion</span>
+                                            </button>
+                                            <button mat-menu-item>
+                                                <mat-icon>check_box_outline_blank</mat-icon>
+                                                <span>Show CPC</span>
+                                            </button>
+                                        </mat-menu>
+                                    </div>
+                                </div>
+
+                                <table class="simple clickable">
+                                    <thead>
+                                        <tr>
+                                            <th></th>
+                                            <th>Clicks</th>
+                                            <th>Conv</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr>
+                                            <td>Holiday Travel</td>
+                                            <td>3621</td>
+                                            <td>90</td>
+                                        </tr>
+                                        <tr>
+                                            <td>Get Away Deals</td>
+                                            <td>703</td>
+                                            <td>7</td>
+                                        </tr>
+                                        <tr>
+                                            <td>Airfare</td>
+                                            <td>532</td>
+                                            <td>0</td>
+                                        </tr>
+                                        <tr>
+                                            <td>Vacation</td>
+                                            <td>201</td>
+                                            <td>8</td>
+                                        </tr>
+                                        <tr>
+                                            <td>Hotels</td>
+                                            <td>94</td>
+                                            <td>4</td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+
+                                <div class="p-8 pt-16" fxLayout="row" fxLayoutAlign="start center">
+                                    <button mat-button color="accent">SEE COMPLETE SCHEDULE</button>
+                                </div>
+
+                            </div>
+                        </textarea>
+                    </fuse-hljs>
+                </div>
+                <!-- / SOURCE -->
+
+            </div>
+            <!-- / CARD 21 -->
+
+            <!-- CARD 22 -->
+            <div class="card">
+
+                <!-- PREVIEW -->
+                <div class="card-preview">
+
+                    <div class="fuse-card">
+
+                        <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
+                            <div class="pr-16">
+                                <div class="h1 font-weight-300">Sales Reports</div>
+                            </div>
+
+                            <div>
+                                <button mat-icon-button [matMenuTriggerFor]="card22Menu" aria-label="more">
+                                    <mat-icon>more_vert</mat-icon>
+                                </button>
+
+                                <mat-menu #card22Menu="matMenu">
+                                    <button mat-menu-item>
+                                        <mat-icon>history</mat-icon>
+                                        <span>History</span>
+                                    </button>
+                                    <button mat-menu-item>
+                                        <mat-icon>notifications_off</mat-icon>
+                                        <span>Disable alerts</span>
+                                    </button>
+                                </mat-menu>
+                            </div>
+                        </div>
+
+                        <mat-tab-group>
+                            <mat-tab label="1WEEK">
+                                <div class="p-16">
+                                    <p>
+                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante
+                                        augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam
+                                        cursus. In sodales pretium ultrices.
+                                    </p>
+                                    <p>
+                                        Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi.
+                                        Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim
+                                        rutrum enim, vel tempor sapien arcu a tellus.
+                                    </p>
+                                    <p>
+                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante
+                                        augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam
+                                        cursus. In sodales pretium ultrices.
+                                    </p>
+                                </div>
+                            </mat-tab>
+
+                            <mat-tab label="2WEEKS">
+                                <div class="p-16">
+                                    <p>
+                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante
+                                        augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam
+                                        cursus. In sodales pretium ultrices.
+                                    </p>
+                                    <p>
+                                        Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi.
+                                        Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim
+                                        rutrum enim, vel tempor sapien arcu a tellus.
+                                    </p>
+                                    <p>
+                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante
+                                        augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam
+                                        cursus. In sodales pretium ultrices.
+                                    </p>
+                                </div>
+                            </mat-tab>
+
+                            <mat-tab label="3WEEKS">
+                                <div class="p-16">
+                                    <p>
+                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante
+                                        augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam
+                                        cursus. In sodales pretium ultrices.
+                                    </p>
+                                    <p>
+                                        Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi.
+                                        Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim
+                                        rutrum enim, vel tempor sapien arcu a tellus.
+                                    </p>
+                                    <p>
+                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante
+                                        augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam
+                                        cursus. In sodales pretium ultrices.
+                                    </p>
+                                </div>
+                            </mat-tab>
+                        </mat-tab-group>
+
+                    </div>
+
+                </div>
+                <!-- / PREVIEW -->
+
+                <!-- SOURCE -->
+                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
+                    <fuse-hljs lang="html" class="source-code">
+                        <textarea #source hidden="hidden">
+                            <div class="fuse-card">
+
+                                <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
+                                    <div class="pr-16">
+                                        <div class="h1 font-weight-300">Sales Reports</div>
+                                    </div>
+
+                                    <div>
+                                        <button mat-icon-button [matMenuTriggerFor]="card22Menu" aria-label="more">
+                                            <mat-icon>more_vert</mat-icon>
+                                        </button>
+
+                                        <mat-menu #card22Menu="matMenu">
+                                            <button mat-menu-item>
+                                                <mat-icon>history</mat-icon>
+                                                <span>History</span>
+                                            </button>
+                                            <button mat-menu-item>
+                                                <mat-icon>notifications_off</mat-icon>
+                                                <span>Disable alerts</span>
+                                            </button>
+                                        </mat-menu>
+                                    </div>
+                                </div>
+
+                                <mat-tab-group>
+                                    <mat-tab label="1WEEK">
+                                        <div class="p-16">
+                                            <p>
+                                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis
+                                                ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam
+                                                consequat aliquam cursus. In sodales pretium ultrices.
+                                            </p>
+                                            <p>
+                                                Maecenas lectus est, sollicitudin consectetur felis nec, feugiat
+                                                ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices
+                                                porttitor, orci enim rutrum enim, vel tempor sapien arcu a tellus.
+                                            </p>
+                                            <p>
+                                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis
+                                                ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam
+                                                consequat aliquam cursus. In sodales pretium ultrices.
+                                            </p>
+                                        </div>
+                                    </mat-tab>
+
+                                    <mat-tab label="2WEEKS">
+                                        <div class="p-16">
+                                            <p>
+                                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis
+                                                ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam
+                                                consequat aliquam cursus. In sodales pretium ultrices.
+                                            </p>
+                                            <p>
+                                                Maecenas lectus est, sollicitudin consectetur felis nec, feugiat
+                                                ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices
+                                                porttitor, orci enim rutrum enim, vel tempor sapien arcu a tellus.
+                                            </p>
+                                            <p>
+                                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis
+                                                ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam
+                                                consequat aliquam cursus. In sodales pretium ultrices.
+                                            </p>
+                                        </div>
+                                    </mat-tab>
+
+                                    <mat-tab label="3WEEKS">
+                                        <div class="p-16">
+                                            <p>
+                                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis
+                                                ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam
+                                                consequat aliquam cursus. In sodales pretium ultrices.
+                                            </p>
+                                            <p>
+                                                Maecenas lectus est, sollicitudin consectetur felis nec, feugiat
+                                                ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices
+                                                porttitor, orci enim rutrum enim, vel tempor sapien arcu a tellus.
+                                            </p>
+                                            <p>
+                                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis
+                                                ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam
+                                                consequat aliquam cursus. In sodales pretium ultrices.
+                                            </p>
+                                        </div>
+                                    </mat-tab>
+                                </mat-tab-group>
+
+                            </div>
+                        </textarea>
+                    </fuse-hljs>
+                </div>
+                <!-- / SOURCE -->
+
+            </div>
+            <!-- / CARD 22 -->
+
+            <!-- CARD 23 -->
+            <div class="card">
+
+                <!-- PREVIEW -->
+                <div class="card-preview">
+
+                    <div class="fuse-card">
+
+                        <div class="p-16 pb-0">
+                            <div class="h1 font-weight-300">Shopping List</div>
+                        </div>
+
+                        <div class="card-divider"></div>
+
+                        <mat-selection-list class="pt-0 pb-16">
+                            <mat-list-option checkboxPosition="before" selected>Milk</mat-list-option>
+                            <mat-list-option checkboxPosition="before">Tomatoes</mat-list-option>
+                            <mat-list-option checkboxPosition="before" selected>Green Apples</mat-list-option>
+                            <mat-list-option checkboxPosition="before" selected>Chocolate Bar</mat-list-option>
+                            <mat-list-option checkboxPosition="before">Break</mat-list-option>
+                            <mat-list-option checkboxPosition="before">Eggs</mat-list-option>
+                            <mat-list-option checkboxPosition="before" selected>Lettuce</mat-list-option>
+                            <mat-list-option checkboxPosition="before">Pickles</mat-list-option>
+                        </mat-selection-list>
+
+                    </div>
+
+                </div>
+                <!-- / PREVIEW -->
+
+                <!-- SOURCE -->
+                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
+                    <fuse-hljs lang="html" class="source-code">
+                        <textarea #source hidden="hidden">
+                            <div class="fuse-card">
+
+                                <div class="p-16 pb-0">
+                                    <div class="h1 font-weight-300">Shopping List</div>
+                                </div>
+
+                                <div class="card-divider"></div>
+
+                                <mat-selection-list class="pt-0 pb-16">
+                                    <mat-list-option checkboxPosition="before" selected>Milk</mat-list-option>
+                                    <mat-list-option checkboxPosition="before">Tomatoes</mat-list-option>
+                                    <mat-list-option checkboxPosition="before" selected>Green Apples</mat-list-option>
+                                    <mat-list-option checkboxPosition="before" selected>Chocolate Bar</mat-list-option>
+                                    <mat-list-option checkboxPosition="before">Break</mat-list-option>
+                                    <mat-list-option checkboxPosition="before">Eggs</mat-list-option>
+                                    <mat-list-option checkboxPosition="before" selected>Lettuce</mat-list-option>
+                                    <mat-list-option checkboxPosition="before">Pickles</mat-list-option>
+                                </mat-selection-list>
+
+                            </div>
+                        </textarea>
+                    </fuse-hljs>
+                </div>
+                <!-- / SOURCE -->
+
+            </div>
+            <!-- / CARD 23 -->
+
+            <!-- CARD 24 -->
+            <div class="card">
+
+                <!-- PREVIEW -->
+                <div class="card-preview">
+
+                    <div class="fuse-card">
+
+                        <div class="p-16">
+                            <div class="h1 font-weight-300">Sessions by device</div>
+                        </div>
+
+                        <div class="h-200">
+                            <ngx-charts-pie-chart
+                                [scheme]="card24.scheme"
+                                [results]="card24.devices"
+                                [doughnut]="true">
+                            </ngx-charts-pie-chart>
+                        </div>
+
+                        <div class="p-16" fxLayout="row" fxLayoutAlign="center center">
+                            <div class="px-16" fxLayout="column" fxLayoutAlign="start center">
+                                <div class="h4 secondary-text">Desktop</div>
+                                <div class="h2 font-weight-300 py-8">92.8%</div>
+                                <div fxLayout="row" fxLayoutAlign="center center">
+                                    <mat-icon class="s-18 pr-4 red-fg">
+                                        arrow_downward
+                                    </mat-icon>
+
+                                    <div class="h5 red-fg">
+                                        -0.6%
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="px-16" fxLayout="column" fxLayoutAlign="start center">
+                                <div class="h4 secondary-text">Mobile</div>
+                                <div class="h2 font-weight-300 py-8">6.1%</div>
+                                <div fxLayout="row" fxLayoutAlign="center center">
+                                    <mat-icon class="s-18 pr-4 green-fg">
+                                        arrow_upward
+                                    </mat-icon>
+
+                                    <div class="h5 green-fg">
+                                        +0.7%
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="px-16" fxLayout="column" fxLayoutAlign="start center">
+                                <div class="h4 secondary-text">Tablet</div>
+                                <div class="h2 font-weight-300 py-8">1.1%</div>
+                                <div fxLayout="row" fxLayoutAlign="center center">
+                                    <mat-icon class="s-18 pr-4 green-fg">
+                                        arrow_upward
+                                    </mat-icon>
+
+                                    <div class="h5 green-fg">
+                                        +0.1%
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="card-divider mb-0"></div>
+
+                        <div class="px-16" fxLayout="row" fxLayoutAlign="space-between center">
+                            <mat-form-field>
+                                <mat-select class="simplified" value="7days">
+                                    <mat-option value="today">Today</mat-option>
+                                    <mat-option value="yesterday">Yesterday</mat-option>
+                                    <mat-option value="7days">Last 7 days</mat-option>
+                                    <mat-option value="28days">Last 28 days</mat-option>
+                                    <mat-option value="90days">Last 90 days</mat-option>
+                                </mat-select>
+                            </mat-form-field>
+
+                            <button mat-button color="accent">OVERVIEW</button>
+                        </div>
+
+                    </div>
+
+                </div>
+                <!-- / PREVIEW -->
+
+                <!-- SOURCE -->
+                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
+                    <fuse-hljs lang="html" class="source-code">
+                        <textarea #source hidden="hidden">
+                            <div class="fuse-card">
+
+                                <div class="p-16">
+                                    <div class="h1 font-weight-300">Sessions by device</div>
+                                </div>
+
+                                <div class="h-200">
+                                    <ngx-charts-pie-chart
+                                        [scheme]="card24.scheme"
+                                        [results]="card24.devices"
+                                        [doughnut]="true">
+                                    </ngx-charts-pie-chart>
+                                </div>
+
+                                <div class="p-16" fxLayout="row" fxLayoutAlign="center center">
+                                    <div class="px-16" fxLayout="column" fxLayoutAlign="start center">
+                                        <div class="h4 secondary-text">Desktop</div>
+                                        <div class="h2 font-weight-300 py-8">92.8%</div>
+                                        <div fxLayout="row" fxLayoutAlign="center center">
+                                            <mat-icon class="s-18 pr-4 red-fg">
+                                                arrow_downward
+                                            </mat-icon>
+
+                                            <div class="h5 red-fg">
+                                                -0.6%
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div class="px-16" fxLayout="column" fxLayoutAlign="start center">
+                                        <div class="h4 secondary-text">Mobile</div>
+                                        <div class="h2 font-weight-300 py-8">6.1%</div>
+                                        <div fxLayout="row" fxLayoutAlign="center center">
+                                            <mat-icon class="s-18 pr-4 green-fg">
+                                                arrow_upward
+                                            </mat-icon>
+
+                                            <div class="h5 green-fg">
+                                                +0.7%
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div class="px-16" fxLayout="column" fxLayoutAlign="start center">
+                                        <div class="h4 secondary-text">Tablet</div>
+                                        <div class="h2 font-weight-300 py-8">1.1%</div>
+                                        <div fxLayout="row" fxLayoutAlign="center center">
+                                            <mat-icon class="s-18 pr-4 green-fg">
+                                                arrow_upward
+                                            </mat-icon>
+
+                                            <div class="h5 green-fg">
+                                                +0.1%
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="card-divider mb-0"></div>
+
+                                <div class="px-16" fxLayout="row" fxLayoutAlign="space-between center">
+                                    <mat-form-field>
+                                        <mat-select class="simplified" value="7days">
+                                            <mat-option value="today">Today</mat-option>
+                                            <mat-option value="yesterday">Yesterday</mat-option>
+                                            <mat-option value="7days">Last 7 days</mat-option>
+                                            <mat-option value="28days">Last 28 days</mat-option>
+                                            <mat-option value="90days">Last 90 days</mat-option>
+                                        </mat-select>
+                                    </mat-form-field>
+
+                                    <button mat-button color="accent">OVERVIEW</button>
+                                </div>
+
+                            </div>
+                        </textarea>
+                    </fuse-hljs>
+                </div>
+                <!-- / SOURCE -->
+
+            </div>
+            <!-- / CARD 24 -->
+
+            <!-- CARD 25 -->
+            <div class="card">
+
+                <!-- PREVIEW -->
+                <div class="card-preview">
+
+                    <div class="fuse-card">
+
+                        <div class="p-16">
+                            <div class="h5 secondary-text">Conversion</div>
+                            <div class="font-size-54 font-weight-300 line-height-1 mt-8">492</div>
+                        </div>
+
+                        <div class="p-16 pt-0">
+                            <span class="green-fg">+22%</span>
+                            of target
+                        </div>
+
+                        <div class="h-80">
+                            <ngx-charts-bar-vertical
+                                [scheme]="card25.scheme"
+                                [results]="card25.data">
+                            </ngx-charts-bar-vertical>
+                        </div>
+
+                    </div>
+
+                </div>
+                <!-- / PREVIEW -->
+
+                <!-- SOURCE -->
+                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
+                    <fuse-hljs lang="html" class="source-code">
+                        <textarea #source hidden="hidden">
+                            <div class="fuse-card">
+
+                                <div class="p-16">
+                                    <div class="h5 secondary-text">Conversion</div>
+                                    <div class="font-size-54 font-weight-300 line-height-1 mt-8">492</div>
+                                </div>
+
+                                <div class="p-16 pt-0">
+                                    <span class="green-fg">+22%</span>
+                                    of target
+                                </div>
+
+                                <div class="h-80">
+                                    <ngx-charts-bar-vertical
+                                        [scheme]="card25.scheme"
+                                        [results]="card25.data">
+                                    </ngx-charts-bar-vertical>
+                                </div>
+
+                            </div>
+                        </textarea>
+                    </fuse-hljs>
+                </div>
+                <!-- / SOURCE -->
+
+            </div>
+            <!-- / CARD 25 -->
+
+            <!-- CARD 26 -->
+            <div class="card">
+
+                <!-- PREVIEW -->
+                <div class="card-preview">
+
+                    <div class="fuse-card">
+
+                        <div class="p-16">
+                            <div class="h5 secondary-text">Impressions</div>
+                            <div class="font-size-54 font-weight-300 line-height-1 mt-8">87.4M</div>
+                        </div>
+
+                        <div class="p-16 pt-0">
+                            <span class="green-fg">+12.3%</span>
+                            of target
+                        </div>
+
+                        <div class="h-80">
+                            <ngx-charts-line-chart
+                                [scheme]="card26.scheme"
+                                [results]="card26.data"
+                                [curve]="card26.curve">
+                            </ngx-charts-line-chart>
+                        </div>
+
+                    </div>
+
+                </div>
+                <!-- / PREVIEW -->
+
+                <!-- SOURCE -->
+                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
+                    <fuse-hljs lang="html" class="source-code">
+                        <textarea #source hidden="hidden">
+                            <div class="fuse-card">
+
+                                <div class="p-16">
+                                    <div class="h5 secondary-text">Impressions</div>
+                                    <div class="font-size-54 font-weight-300 line-height-1 mt-8">87.4M</div>
+                                </div>
+
+                                <div class="p-16 pt-0">
+                                    <span class="green-fg">+12.3%</span>
+                                    of target
+                                </div>
+
+                                <div class="h-80">
+                                    <ngx-charts-line-chart
+                                        [scheme]="card26.scheme"
+                                        [results]="card26.data"
+                                        [curve]="card26.curve">
+                                    </ngx-charts-line-chart>
+                                </div>
+
+                            </div>
+                        </textarea>
+                    </fuse-hljs>
+                </div>
+                <!-- / SOURCE -->
+
+            </div>
+            <!-- / CARD 26 -->
+
         </div>
 
     </div>
diff --git a/src/app/main/content/components/cards/cards.component.scss b/src/app/main/content/components/cards/cards.component.scss
index f97843c6..36075af0 100644
--- a/src/app/main/content/components/cards/cards.component.scss
+++ b/src/app/main/content/components/cards/cards.component.scss
@@ -4,25 +4,48 @@
 
     .content {
 
-        .card-row {
+        .cards {
             display: flex;
-            width: 100%;
-            padding: 24px 24px 48px 24px;
-            margin-bottom: 24px;
-            border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+            flex-direction: row;
+            flex-wrap: wrap;
+            justify-content: flex-start;
+            align-items: flex-start;
 
-            .card-preview {
+            .card {
                 display: flex;
-                min-width: 320px;
+                padding: 24px 24px 48px 24px;
+                margin-bottom: 96px;
+
+                .card-preview {
+                    display: flex;
+                    min-width: 320px;
+                }
+
+                .card-source {
+                    display: none;
+                }
             }
+        }
 
-            .card-source {
-                display: flex;
-                flex: 1;
-                max-height: 400px;
-                overflow: auto;
-                min-width: 400px;
-                margin-left: 24px;
+        &.source {
+
+            .cards {
+                flex-direction: column;
+
+                .card {
+                    width: 100%;
+                    margin-bottom: 24px;
+                    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+
+                    .card-source {
+                        display: flex !important;
+                        flex: 1;
+                        max-height: 400px;
+                        overflow: auto;
+                        min-width: 400px;
+                        margin-left: 24px;
+                    }
+                }
             }
         }
     }
diff --git a/src/app/main/content/components/cards/cards.component.ts b/src/app/main/content/components/cards/cards.component.ts
index d43b7aa3..924998bf 100644
--- a/src/app/main/content/components/cards/cards.component.ts
+++ b/src/app/main/content/components/cards/cards.component.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import * as shape from 'd3-shape';
 import { fuseAnimations } from '../../../../core/animations';
 
 @Component({
@@ -9,11 +10,207 @@ import { fuseAnimations } from '../../../../core/animations';
 })
 export class FuseCardsDocsComponent
 {
+    view = 'preview';
+
+    // Card 9
     card9Expanded = false;
+
+    // Card 10
     card10Expanded = false;
 
+    // Card 19
+    card19 = {
+        scheme: {
+            domain: ['#5c84f1']
+        },
+        data  : [
+            {
+                'name'  : 'GOOG',
+                'series': [
+                    {
+                        'name' : 'Jan 1',
+                        'value': 540.2
+                    },
+                    {
+                        'name' : 'Jan 2',
+                        'value': 539.4
+                    },
+                    {
+                        'name' : 'Jan 3',
+                        'value': 538.9
+                    },
+                    {
+                        'name' : 'Jan 4',
+                        'value': 539.6
+                    },
+                    {
+                        'name' : 'Jan 5',
+                        'value': 540
+                    },
+                    {
+                        'name' : 'Jan 6',
+                        'value': 540.2
+                    },
+                    {
+                        'name' : 'Jan 7',
+                        'value': 540.48
+                    }
+                ]
+            }
+        ],
+        curve         : shape.curveBasis
+    };
+
+    // Card 24
+    card24 = {
+        scheme : {
+            domain: ['#4867d2', '#5c84f1', '#89a9f4']
+        },
+        devices: [
+            {
+                'name'  : 'Desktop',
+                'value' : 92.8,
+                'change': -0.6
+            },
+            {
+                'name'  : 'Mobile',
+                'value' : 6.1,
+                'change': 0.7
+            },
+            {
+                'name'  : 'Tablet',
+                'value' : 1.1,
+                'change': 0.1
+            }
+        ]
+    };
+
+    // Card 25
+    card25 = {
+        scheme: {
+            domain: ['#5c84f1']
+        },
+        data  : [
+            {
+                'name' : 'Monday',
+                'value': 221
+            },
+            {
+                'name' : 'Tuesday',
+                'value': 428
+            },
+            {
+                'name' : 'Wednesday',
+                'value': 492
+            },
+            {
+                'name' : 'Thursday',
+                'value': 471
+            },
+            {
+                'name' : 'Friday',
+                'value': 413
+            },
+            {
+                'name' : 'Saturday',
+                'value': 344
+            },
+            {
+                'name' : 'Sunday',
+                'value': 294
+            }
+        ]
+    };
+
+    // Card 26
+    card26 = {
+        scheme: {
+            domain: ['#5c84f1']
+        },
+        data  : [
+            {
+                'name'  : 'Impressions',
+                'series': [
+                    {
+                        'name' : 'Jan 1',
+                        'value': 670000
+                    },
+                    {
+                        'name' : 'Jan 2',
+                        'value': 540000
+                    },
+                    {
+                        'name' : 'Jan 3',
+                        'value': 820000
+                    },
+                    {
+                        'name' : 'Jan 4',
+                        'value': 570000
+                    },
+                    {
+                        'name' : 'Jan 5',
+                        'value': 720000
+                    },
+                    {
+                        'name' : 'Jan 6',
+                        'value': 570000
+                    },
+                    {
+                        'name' : 'Jan 7',
+                        'value': 870000
+                    },
+                    {
+                        'name' : 'Jan 8',
+                        'value': 720000
+                    },
+                    {
+                        'name' : 'Jan 9',
+                        'value': 890000
+                    },
+                    {
+                        'name' : 'Jan 10',
+                        'value': 987000
+                    },
+                    {
+                        'name' : 'Jan 11',
+                        'value': 1120000
+                    },
+                    {
+                        'name' : 'Jan 12',
+                        'value': 1360000
+                    },
+                    {
+                        'name' : 'Jan 13',
+                        'value': 1100000
+                    },
+                    {
+                        'name' : 'Jan 14',
+                        'value': 1490000
+                    },
+                    {
+                        'name' : 'Jan 15',
+                        'value': 980000
+                    }
+                ]
+            }
+        ],
+        curve         : shape.curveBasis
+    };
+
     constructor()
     {
 
     }
+
+    toggleView()
+    {
+        if ( this.view === 'preview' )
+        {
+            this.view = 'source';
+        }
+        else
+        {
+            this.view = 'preview';
+        }
+    }
 }
diff --git a/src/app/main/content/components/components.module.ts b/src/app/main/content/components/components.module.ts
index cd467f0b..d53da9e0 100644
--- a/src/app/main/content/components/components.module.ts
+++ b/src/app/main/content/components/components.module.ts
@@ -7,10 +7,11 @@ import { FuseHljsDocsComponent } from './hljs/hljs.component';
 import { FuseMaterialColorPickerDocsComponent } from './material-color-picker/material-color-picker.component';
 import { FuseMultiLanguageDocsComponent } from './multi-language/multi-language.component';
 import { FuseNavigationDocsComponent } from './navigation/navigation.component';
+import { FuseSearchBarDocsComponent } from './search-bar/search-bar.component';
 import { FuseShortcutsDocsComponent } from './shortcuts/shortcuts.component';
-import { FuseSearchBarDocsComponent } from 'app/main/content/components/search-bar/search-bar.component';
 import { FuseWidgetDocsComponent } from './widget/widget.component';
 import { FuseWidgetModule } from '../../../core/components/widget/widget.module';
+import { NgxChartsModule } from '@swimlane/ngx-charts';
 
 const routes = [
     {
@@ -55,7 +56,8 @@ const routes = [
     imports     : [
         SharedModule,
         RouterModule.forChild(routes),
-        FuseWidgetModule
+        FuseWidgetModule,
+        NgxChartsModule
     ],
     declarations: [
         FuseCardsDocsComponent,

From 2288905cbdbb4e06fc345bd4bd1263e4845ce5fe Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Mon, 8 Jan 2018 15:29:04 +0300
Subject: [PATCH 6/8] Merge branch 'master' of
 https://github.com/withinpixels/fuse2 + fuse-hljs replaced with
 fuse-highlight

---
 package-lock.json                             |   5 +
 package.json                                  |   2 +
 .../highlight/highlight.component.scss        |   5 +-
 .../highlight/highlight.component.ts          |  40 +-
 .../components/highlight/prism-languages.ts   |  16 +
 src/app/core/modules/shared.module.ts         |   6 +-
 .../core/scss/partials/plugins/_plugins.scss  |   1 -
 .../core/scss/partials/plugins/_prism.scss    |   2 +-
 .../google-maps/google-maps.component.html    |   6 +-
 .../components/cards/cards.component.html     | 347 +++++++++++-------
 .../components/cards/cards.component.scss     |   1 +
 .../content/components/components.module.ts   |  10 +-
 .../countdown/countdown.component.html        |   8 +-
 .../highlight/highlight.component.html        |  30 +-
 .../highlight/highlight.component.ts          |   8 +-
 .../material-color-picker.component.html      |   8 +-
 .../multi-language.component.html             |  24 +-
 .../navigation/navigation.component.html      |  56 +--
 .../search-bar/search-bar.component.html      |   8 +-
 .../shortcuts/shortcuts.component.html        |   8 +-
 .../components/widget/widget.component.html   |  12 +-
 .../services/config/config.component.html     |  10 +-
 .../main/content/services/services.module.ts  |   1 +
 .../splash-screen.component.html              |  10 +-
 .../padding-margin.component.html             |  40 +-
 .../padding-margin.component.scss             |   1 -
 .../width-height/width-height.component.html  |  32 +-
 .../width-height/width-height.component.scss  |   1 -
 .../blockquotes-lists.component.html          |  24 +-
 .../blockquotes-lists.component.scss          |   1 -
 .../tabs/headings/headings.component.html     |  68 ++--
 .../tabs/headings/headings.component.scss     |   1 -
 .../tabs/helpers/helpers.component.html       |  52 +--
 .../tabs/helpers/helpers.component.scss       |   1 -
 .../inline-text-elements.component.html       |  52 +--
 .../inline-text-elements.component.scss       |   1 -
 src/app/navigation/navigation.model.ts        |   6 +-
 37 files changed, 529 insertions(+), 375 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index de35b092..485922f4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -358,6 +358,11 @@
       "integrity": "sha512-d1Twx1NM49dQ7jbNZfaHTQWuYL9cFVrGxYpbc3BvMf4626lOJOZnp2aJQNB9vP/WX3UOe1TrTUMABrGRu6FZhg==",
       "dev": true
     },
+    "@types/prismjs": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.9.0.tgz",
+      "integrity": "sha512-zeh+xd2pcCvWm1XtWLR4v5pzZMybKeq6X8Q4cIZMMx8GmyKDUfJaOtw+JaONHUQt5ncKFXezl8QGIDQsSF5YfA=="
+    },
     "@types/q": {
       "version": "0.0.32",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-0.0.32.tgz",
diff --git a/package.json b/package.json
index 926f200c..a747c17f 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "@swimlane/ngx-charts": "7.0.1",
     "@swimlane/ngx-datatable": "11.1.7",
     "@swimlane/ngx-dnd": "3.1.0",
+    "@types/prismjs": "1.9.0",
     "angular-calendar": "0.23.0",
     "angular-in-memory-web-api": "0.5.2",
     "angular2-markdown": "1.6.0",
@@ -54,6 +55,7 @@
     "ngx-color-picker": "5.3.0",
     "ngx-cookie-service": "1.0.9",
     "perfect-scrollbar": "1.3.0",
+    "prismjs": "1.9.0",
     "rxjs": "5.5.6",
     "web-animations-js": "2.3.1",
     "zone.js": "0.8.18"
diff --git a/src/app/core/components/highlight/highlight.component.scss b/src/app/core/components/highlight/highlight.component.scss
index 8fdbe2d4..1844f192 100644
--- a/src/app/core/components/highlight/highlight.component.scss
+++ b/src/app/core/components/highlight/highlight.component.scss
@@ -1,3 +1,6 @@
 :host {
-
+    display: block;
+    padding: 8px;
+    background: #263238;
+    cursor: text;
 }
\ No newline at end of file
diff --git a/src/app/core/components/highlight/highlight.component.ts b/src/app/core/components/highlight/highlight.component.ts
index 3bf9c1fc..1066b449 100644
--- a/src/app/core/components/highlight/highlight.component.ts
+++ b/src/app/core/components/highlight/highlight.component.ts
@@ -1,15 +1,14 @@
 import { Component, ContentChild, ElementRef, Input, OnInit } from '@angular/core';
-import * as hljs from 'highlight.js';
+import * as Prism from 'prismjs/prism';
+import './prism-languages';
 
 @Component({
-    selector : 'fuse-hljs',
+    selector : 'fuse-highlight',
     template : ' ',
-    styleUrls: ['./hljs.component.scss']
+    styleUrls: ['./highlight.component.scss']
 })
-export class FuseHljsComponent implements OnInit
+export class FuseHighlightComponent implements OnInit
 {
-    hljs: any;
-
     @ContentChild('source') source: ElementRef;
     @Input('lang') lang: string;
 
@@ -17,7 +16,7 @@ export class FuseHljsComponent implements OnInit
         private elementRef: ElementRef
     )
     {
-        this.hljs = hljs;
+
     }
 
     ngOnInit()
@@ -32,6 +31,20 @@ export class FuseHljsComponent implements OnInit
         // Split the source into lines
         const sourceLines = originalSource.split('\n');
 
+        // Remove the first and the last line of the source
+        // code if they are blank lines. This way, the html
+        // can be formatted properly while using fuse-highlight
+        // component
+        if ( !sourceLines[0].trim() )
+        {
+            sourceLines.shift();
+        }
+
+        if ( !sourceLines[sourceLines.length - 1].trim() )
+        {
+            sourceLines.pop();
+        }
+
         // Find the first non-whitespace char index in
         // the first line of the source code
         const indexOfFirstChar = sourceLines[0].search(/\S|$/);
@@ -39,20 +52,27 @@ export class FuseHljsComponent implements OnInit
         // Generate the trimmed source
         let source = '';
 
-        // Iterate through all the lines and trim the
-        // beginning white space depending on the index
+        // Iterate through all the lines
         sourceLines.forEach((line, index) => {
 
+            // Trim the beginning white space depending on the index
+            // and concat the source code
             source = source + line.substr(indexOfFirstChar, line.length);
 
+            // If it's not the last line...
             if ( index !== sourceLines.length - 1 )
             {
+                // Add a line break at the end
                 source = source + '\n';
             }
         });
 
+        // Generate the highlighted code
+        const highlightedCode = Prism.highlight(source, Prism.languages[this.lang]);
+
+        // Replace the innerHTML of the component with the highlighted code
         this.elementRef.nativeElement.innerHTML =
-            `<pre><code class="highlight">` + this.hljs.highlight(this.lang, source).value + `</code></pre>`;
+            '<pre><code class="highlight language-' + this.lang + '">' + highlightedCode + '</code></pre>';
     }
 }
 
diff --git a/src/app/core/components/highlight/prism-languages.ts b/src/app/core/components/highlight/prism-languages.ts
index e69de29b..14842a35 100644
--- a/src/app/core/components/highlight/prism-languages.ts
+++ b/src/app/core/components/highlight/prism-languages.ts
@@ -0,0 +1,16 @@
+import 'prismjs/prism';
+import 'prismjs/components/prism-c';
+import 'prismjs/components/prism-cpp';
+import 'prismjs/components/prism-csharp';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-diff';
+import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-java';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-perl';
+import 'prismjs/components/prism-php';
+import 'prismjs/components/prism-python';
+import 'prismjs/components/prism-sass';
+import 'prismjs/components/prism-scss';
+import 'prismjs/components/prism-typescript';
diff --git a/src/app/core/modules/shared.module.ts b/src/app/core/modules/shared.module.ts
index 9cd8dc98..168a0c4b 100644
--- a/src/app/core/modules/shared.module.ts
+++ b/src/app/core/modules/shared.module.ts
@@ -15,7 +15,7 @@ import { FuseConfirmDialogComponent } from '../components/confirm-dialog/confirm
 import { FuseCountdownComponent } from '../components/countdown/countdown.component';
 import { FuseMatchMedia } from '../services/match-media.service';
 import { FuseNavbarVerticalService } from '../../main/navbar/vertical/navbar-vertical.service';
-import { FuseHljsComponent } from '../components/hljs/hljs.component';
+import { FuseHighlightComponent } from '../components/highlight/highlight.component';
 import { FusePerfectScrollbarDirective } from '../directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
 import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-dom.directive';
 import { FuseMaterialColorPickerComponent } from '../components/material-color-picker/material-color-picker.component';
@@ -30,7 +30,7 @@ import { TranslateModule } from '@ngx-translate/core';
         FuseMatSidenavTogglerDirective,
         FuseConfirmDialogComponent,
         FuseCountdownComponent,
-        FuseHljsComponent,
+        FuseHighlightComponent,
         FuseIfOnDomDirective,
         FusePerfectScrollbarDirective,
         FuseMaterialColorPickerComponent
@@ -56,7 +56,7 @@ import { TranslateModule } from '@ngx-translate/core';
         FuseMatSidenavTogglerDirective,
         FusePipesModule,
         FuseCountdownComponent,
-        FuseHljsComponent,
+        FuseHighlightComponent,
         FusePerfectScrollbarDirective,
         ReactiveFormsModule,
         ColorPickerModule,
diff --git a/src/app/core/scss/partials/plugins/_plugins.scss b/src/app/core/scss/partials/plugins/_plugins.scss
index f9d4c979..3ca67732 100644
--- a/src/app/core/scss/partials/plugins/_plugins.scss
+++ b/src/app/core/scss/partials/plugins/_plugins.scss
@@ -1,4 +1,3 @@
-@import "highlight";
 @import "prism";
 @import "perfect-scrollbar";
 @import "ngx-datatable";
diff --git a/src/app/core/scss/partials/plugins/_prism.scss b/src/app/core/scss/partials/plugins/_prism.scss
index 40eb6fec..276ee250 100644
--- a/src/app/core/scss/partials/plugins/_prism.scss
+++ b/src/app/core/scss/partials/plugins/_prism.scss
@@ -2,7 +2,7 @@
 
 $base00: #263238;
 $base01: #2C393F;
-$base02: #37474F;
+$base02: #4A5A62;
 $base03: #707880;
 $base04: #C9CCD3;
 $base05: #CDD3DE;
diff --git a/src/app/main/content/components-third-party/google-maps/google-maps.component.html b/src/app/main/content/components-third-party/google-maps/google-maps.component.html
index 04f955ed..a85e5cc0 100644
--- a/src/app/main/content/components-third-party/google-maps/google-maps.component.html
+++ b/src/app/main/content/components-third-party/google-maps/google-maps.component.html
@@ -38,13 +38,13 @@
         <div class="my-48">
             <h2>Usage</h2>
             <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="html" class="source-code">
-                    <textarea #source hidden="hidden">
+                <fuse-highlight lang="html">
+                    <textarea #source>
                         <agm-map [latitude]="lat" [longitude]="lng">
                             <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
                         </agm-map>
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
         </div>
 
diff --git a/src/app/main/content/components/cards/cards.component.html b/src/app/main/content/components/cards/cards.component.html
index 0d62a6e0..8b50a74e 100644
--- a/src/app/main/content/components/cards/cards.component.html
+++ b/src/app/main/content/components/cards/cards.component.html
@@ -52,9 +52,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <img src="assets/images/cards/card1.jpg">
@@ -66,13 +68,14 @@
 
                                 <div class="p-16 pt-0 line-height-1.75">
                                     Cards provide context and an entry point to more robust information and views, and
-                                    their
-                                    content and quantity can vary greatly.
+                                    their content and quantity can vary greatly.
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -110,9 +113,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <img src="assets/images/cards/card1.jpg">
@@ -124,8 +129,7 @@
 
                                 <div class="p-16 pt-0 line-height-1.75">
                                     Cards provide context and an entry point to more robust information and views, and
-                                    their
-                                    content and quantity can vary greatly.
+                                    their content and quantity can vary greatly.
                                 </div>
 
                                 <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
@@ -134,8 +138,10 @@
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -166,9 +172,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <div class="p-16">
@@ -178,13 +186,14 @@
 
                                 <div class="p-16 pt-0 line-height-1.75">
                                     Cards provide context and an entry point to more robust information and views, and
-                                    their
-                                    content and quantity can vary greatly.
+                                    their content and quantity can vary greatly.
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -221,9 +230,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card mat-indigo-bg">
 
                                 <div class="p-16">
@@ -233,10 +244,9 @@
 
                                 <div class="p-16 pt-0 line-height-1.75">
                                     All cards can be mixed with Fuse Color Classes to have different colors. This
-                                    greatly
-                                    increases the unique variations of all cards. Cards provide context and an entry
-                                    point to
-                                    more robust information and views, and their content and quantity can vary greatly.
+                                    greatly increases the unique variations of all cards. Cards provide context and an
+                                    entry point to more robust information and views, and their content and quantity can
+                                    vary greatly.
                                 </div>
 
                                 <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
@@ -245,8 +255,10 @@
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -274,9 +286,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <img src="assets/images/cards/card1.jpg">
@@ -287,8 +301,10 @@
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -316,9 +332,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <img src="assets/images/cards/card1.jpg">
@@ -329,8 +347,10 @@
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -371,9 +391,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <div class="position-relative">
@@ -397,8 +419,10 @@
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -442,9 +466,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
@@ -462,8 +488,7 @@
 
                                 <div class="p-16 pt-0 line-height-1.75">
                                     Cards provide context and an entry point to more robust information and views, and
-                                    their
-                                    content and quantity can vary greatly.
+                                    their content and quantity can vary greatly.
                                 </div>
 
                                 <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
@@ -472,8 +497,10 @@
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -527,9 +554,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <img src="assets/images/cards/card3.jpg">
@@ -561,16 +590,17 @@
                                 <div class="card-expand-area" *ngIf="card9Expanded" [@expandCollapse]>
                                     <div class="card-expanded-content">
                                         Card content that exceeds the maximum card height is truncated and does not
-                                        scroll, but
-                                        the card can be expanded. Once expanded, the card may exceed the maximum height
-                                        of the
-                                        view. In this case, the card will scroll with the card collection.
+                                        scroll, but the card can be expanded. Once expanded, the card may exceed the
+                                        maximum height of the view. In this case, the card will scroll with the card
+                                        collection.
                                     </div>
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -619,9 +649,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <img src="assets/images/cards/card2.jpg">
@@ -647,16 +679,17 @@
                                 <div class="card-expand-area" *ngIf="card10Expanded" [@expandCollapse]>
                                     <div class="card-expanded-content">
                                         Card content that exceeds the maximum card height is truncated and does not
-                                        scroll, but
-                                        the card can be expanded. Once expanded, the card may exceed the maximum height
-                                        of the
-                                        view. In this case, the card will scroll with the card collection.
+                                        scroll, but the card can be expanded. Once expanded, the card may exceed the
+                                        maximum height of the view. In this case, the card will scroll with the card
+                                        collection.
                                     </div>
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -698,9 +731,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <div class="p-16" fxLayout="row" fxLayoutAlign="start center">
@@ -721,13 +756,14 @@
 
                                 <div class="p-16 pt-0 line-height-1.75">
                                     Cards provide context and an entry point to more robust information and views, and
-                                    their
-                                    content and quantity can vary greatly.
+                                    their content and quantity can vary greatly.
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -764,9 +800,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <img src="assets/images/cards/card2.jpg">
@@ -786,8 +824,10 @@
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -829,9 +869,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card variable-width">
 
                                 <div class="position-relative">
@@ -856,8 +898,10 @@
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -896,9 +940,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
@@ -920,8 +966,10 @@
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -960,9 +1008,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <div class="p-16" fxLayout="row" fxLayoutAlign="space-between start">
@@ -984,8 +1034,10 @@
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -1024,9 +1076,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <div class="p-16" fxLayout="row" fxLayoutAlign="space-between start">
@@ -1048,8 +1102,10 @@
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -1116,9 +1172,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <img src="assets/images/cards/card2.jpg">
@@ -1169,8 +1227,10 @@
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -1282,9 +1342,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <div class="p-16">
@@ -1379,8 +1441,10 @@
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -1485,9 +1549,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <div class="mat-light-blue-600-bg">
@@ -1575,8 +1641,10 @@
                                 </mat-tab-group>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -1665,9 +1733,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
@@ -1739,8 +1809,10 @@
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -1814,9 +1886,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
@@ -1886,8 +1960,10 @@
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -1993,9 +2069,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
@@ -2084,8 +2162,9 @@
                                 </mat-tab-group>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
                 </div>
                 <!-- / SOURCE -->
 
@@ -2123,9 +2202,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <div class="p-16 pb-0">
@@ -2146,8 +2227,10 @@
                                 </mat-selection-list>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -2240,9 +2323,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <div class="p-16">
@@ -2318,8 +2403,10 @@
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -2357,9 +2444,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <div class="p-16">
@@ -2380,8 +2469,10 @@
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -2420,9 +2511,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <div class="p-16">
@@ -2444,8 +2537,10 @@
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
diff --git a/src/app/main/content/components/cards/cards.component.scss b/src/app/main/content/components/cards/cards.component.scss
index 36075af0..37f9b98b 100644
--- a/src/app/main/content/components/cards/cards.component.scss
+++ b/src/app/main/content/components/cards/cards.component.scss
@@ -38,6 +38,7 @@
                     border-bottom: 1px solid rgba(0, 0, 0, 0.12);
 
                     .card-source {
+                        background: #263238;
                         display: flex !important;
                         flex: 1;
                         max-height: 400px;
diff --git a/src/app/main/content/components/components.module.ts b/src/app/main/content/components/components.module.ts
index eea3144a..754b2631 100644
--- a/src/app/main/content/components/components.module.ts
+++ b/src/app/main/content/components/components.module.ts
@@ -3,7 +3,7 @@ import { SharedModule } from '../../../core/modules/shared.module';
 import { RouterModule } from '@angular/router';
 import { FuseCardsDocsComponent } from './cards/cards.component';
 import { FuseCountdownDocsComponent } from './countdown/countdown.component';
-import { FuseHljsDocsComponent } from './hljs/hljs.component';
+import { FuseHighlightDocsComponent } from './highlight/highlight.component';
 import { FuseMaterialColorPickerDocsComponent } from './material-color-picker/material-color-picker.component';
 import { FuseMultiLanguageDocsComponent } from './multi-language/multi-language.component';
 import { FuseNavigationDocsComponent } from './navigation/navigation.component';
@@ -24,8 +24,8 @@ const routes = [
         component: FuseCountdownDocsComponent
     },
     {
-        path     : 'highlightjs',
-        component: FuseHljsDocsComponent
+        path     : 'highlight',
+        component: FuseHighlightDocsComponent
     },
     {
         path     : 'material-color-picker',
@@ -64,7 +64,7 @@ const routes = [
     declarations: [
         FuseCardsDocsComponent,
         FuseCountdownDocsComponent,
-        FuseHljsDocsComponent,
+        FuseHighlightDocsComponent,
         FuseMaterialColorPickerDocsComponent,
         FuseMultiLanguageDocsComponent,
         FuseNavigationDocsComponent,
@@ -73,6 +73,6 @@ const routes = [
         FuseWidgetDocsComponent
     ]
 })
-export class ComponentsModule
+export class FuseComponentsModule
 {
 }
diff --git a/src/app/main/content/components/countdown/countdown.component.html b/src/app/main/content/components/countdown/countdown.component.html
index 982ac683..bffd539c 100644
--- a/src/app/main/content/components/countdown/countdown.component.html
+++ b/src/app/main/content/components/countdown/countdown.component.html
@@ -29,12 +29,12 @@
 
         <div class="my-48">
             <h2>Usage</h2>
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="html" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="html">
+                    <textarea #source>
                         <fuse-countdown eventDate="2019-07-28"></fuse-countdown>
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
         </div>
 
diff --git a/src/app/main/content/components/highlight/highlight.component.html b/src/app/main/content/components/highlight/highlight.component.html
index c110a5a8..1b6c8315 100644
--- a/src/app/main/content/components/highlight/highlight.component.html
+++ b/src/app/main/content/components/highlight/highlight.component.html
@@ -1,4 +1,4 @@
-<div id="hljs" class="page-layout simple fullwidth" fusePerfectScrollbar>
+<div id="highlight" class="page-layout simple fullwidth" fusePerfectScrollbar>
 
     <!-- HEADER -->
     <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
@@ -8,7 +8,7 @@
                 <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                 <span class="secondary-text">Components</span>
             </div>
-            <div class="h2 mt-16">highlight.js</div>
+            <div class="h2 mt-16">Highlight</div>
         </div>
     </div>
     <!-- / HEADER -->
@@ -17,36 +17,42 @@
     <div class="content p-24">
 
         <p>
-            <code>fuse-hljs</code> is a custom built Fuse component allows to show syntax highlighted codes.
+            <code>fuse-highlight</code> is a custom built Fuse component allows to show syntax highlighted codes.
         </p>
 
         <div class="my-48">
             <h2>Sample</h2>
             <p fxLayout="row" fxLayoutAlign="start start">
-                <fuse-hljs lang="html" class="source-code">
-                    <textarea #source hidden="hidden">
+
+                <fuse-highlight lang="html">
+                    <textarea #source>
+
                         <div class="title">
                             <span>Example Title</span>
                         </div>
+
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
+
             </p>
         </div>
 
         <div class="my-48">
             <h2>Usage</h2>
             <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="html" class="source-code">
-                    <textarea #source hidden="hidden">
-&lt;fuse-hljs lang="html" class="source-code"&gt;
-    &lt;textarea #source hidden="hidden"&gt;
+                <fuse-highlight lang="html">
+                    <textarea #source>
+
+&lt;fuse-highlight lang="html"&gt;
+    &lt;textarea #source&gt;
         &lt;div class="title"&gt;
             &lt;span&gt;Example Title&lt;/span&gt;
         &lt;/div&gt;
     &lt;/textarea&gt;
-&lt;/fuse-hljs&gt;
+&lt;/fuse-highlight&gt;
+
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
         </div>
 
diff --git a/src/app/main/content/components/highlight/highlight.component.ts b/src/app/main/content/components/highlight/highlight.component.ts
index 142ab034..46b3f84e 100644
--- a/src/app/main/content/components/highlight/highlight.component.ts
+++ b/src/app/main/content/components/highlight/highlight.component.ts
@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-hljs-docs',
-    templateUrl: './hljs.component.html',
-    styleUrls  : ['./hljs.component.scss']
+    selector   : 'fuse-highlight-docs',
+    templateUrl: './highlight.component.html',
+    styleUrls  : ['./highlight.component.scss']
 })
-export class FuseHljsDocsComponent
+export class FuseHighlightDocsComponent
 {
     constructor()
     {
diff --git a/src/app/main/content/components/material-color-picker/material-color-picker.component.html b/src/app/main/content/components/material-color-picker/material-color-picker.component.html
index b338d722..d27ee235 100644
--- a/src/app/main/content/components/material-color-picker/material-color-picker.component.html
+++ b/src/app/main/content/components/material-color-picker/material-color-picker.component.html
@@ -30,14 +30,14 @@
 
         <div class="my-48">
             <h2>Usage</h2>
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="html" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="html">
+                    <textarea #source>
                         <fuse-material-color-picker [(selectedClass)]="colorClass"
                                                     (onValueChange)="onSettingsChange()">
                         </fuse-material-color-picker>
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
         </div>
 
diff --git a/src/app/main/content/components/multi-language/multi-language.component.html b/src/app/main/content/components/multi-language/multi-language.component.html
index 76abc8f6..9a29d1ee 100644
--- a/src/app/main/content/components/multi-language/multi-language.component.html
+++ b/src/app/main/content/components/multi-language/multi-language.component.html
@@ -41,9 +41,9 @@
                 translation data:
             </p>
 
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="ts" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="typescript">
+                    <textarea #source>
                         // i18n/en.ts
                         export const locale = {
                             lang: 'en',
@@ -64,7 +64,7 @@
                             }
                         };
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
         </div>
 
@@ -75,9 +75,9 @@
                 <code>mail.component.ts</code> file:
             </p>
 
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="ts" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="typescript">
+                    <textarea #source>
                         // Your imports
                         import { ... } from '..';
 
@@ -100,7 +100,7 @@
                             ...
                         }
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
         </div>
 
@@ -110,9 +110,9 @@
                 Changing the current language can happen instantly. Simply call the <code>use</code> method from the
                 translate service:
             </p>
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="ts" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="typescript">
+                    <textarea #source>
                         import { TranslateService } from '@ngx-translate/core';
 
                         constructor(private translate: TranslateService) {}
@@ -123,7 +123,7 @@
                             this.translate.use('tr');
                         }
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
             <p>
                 More detailed usage of the translation service can be found in the <code>toolbar.component.ts</code>
diff --git a/src/app/main/content/components/navigation/navigation.component.html b/src/app/main/content/components/navigation/navigation.component.html
index 6625f89a..9238d01d 100644
--- a/src/app/main/content/components/navigation/navigation.component.html
+++ b/src/app/main/content/components/navigation/navigation.component.html
@@ -23,12 +23,12 @@
 
         <div class="my-48">
             <h2>Usage</h2>
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="html" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="html">
+                    <textarea #source>
                         <fuse-navigation></fuse-navigation>
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
         </div>
 
@@ -49,9 +49,9 @@
 
         <div class="my-48">
             <h3>Grouping</h3>
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="json" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="json">
+                    <textarea #source>
                         {
                             'title'    : 'COMPONENTS',
                             'translate': 'NAV.COMPONENTS',
@@ -65,15 +65,15 @@
                             ]
                         },
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
         </div>
 
         <div class="my-48">
             <h3>Collapsable</h3>
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="json" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="json">
+                    <textarea #source>
                         {
                             'title'    : 'Datatables',
                             'translate': 'NAV.DATATABLES',
@@ -88,15 +88,15 @@
                             ]
                         },
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
         </div>
 
         <div class="my-48">
             <h3>Item</h3>
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="json" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="json">
+                    <textarea #source>
                         {
                             'title'    : 'Countdown',
                             'translate': 'NAV.COUNTDOWN',
@@ -105,7 +105,7 @@
                             'url'      : '/components/countdown'
                         },
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
         </div>
 
@@ -132,9 +132,9 @@
 
             <h4>Update navigation item on-the-fly</h4>
 
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="ts" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="typescript">
+                    <textarea #source>
                         updateMailBadge()
                         {
                             // Get the mail nav item
@@ -144,7 +144,7 @@
                             mailNavItem.badge.title = 35;
                         }
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
 
             <div class="mt-24 mb-64">
@@ -157,9 +157,9 @@
 
             <h4>Add a subitem to the Calendar nav item</h4>
 
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="ts" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="typescript">
+                    <textarea #source>
                         addSubitemToCalendar()
                         {
                             // Prepare the new nav item
@@ -174,7 +174,7 @@
                             this.navigationService.addNavigationItem('applications.calendar', newNavItem);
                         }
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
 
             <div class="mt-24 mb-64">
@@ -187,9 +187,9 @@
 
             <h4>Add a nav item with custom function</h4>
 
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="ts" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="typescript">
+                    <textarea #source>
                         addNavItemWithCustomFunction()
                         {
                             // Prepare the new nav item
@@ -209,7 +209,7 @@
                             applicationsNavItem.children.unshift(newNavItem);
                         }
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
 
             <div class="mt-24">
diff --git a/src/app/main/content/components/search-bar/search-bar.component.html b/src/app/main/content/components/search-bar/search-bar.component.html
index c1c643a7..069f9eab 100644
--- a/src/app/main/content/components/search-bar/search-bar.component.html
+++ b/src/app/main/content/components/search-bar/search-bar.component.html
@@ -23,12 +23,12 @@
 
         <div class="my-48">
             <h2>Usage</h2>
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="html" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="html">
+                    <textarea #source>
                         <fuse-search-bar (onInput)="search($event)"></fuse-search-bar>
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
         </div>
 
diff --git a/src/app/main/content/components/shortcuts/shortcuts.component.html b/src/app/main/content/components/shortcuts/shortcuts.component.html
index bdcdd4cc..2e8c87eb 100644
--- a/src/app/main/content/components/shortcuts/shortcuts.component.html
+++ b/src/app/main/content/components/shortcuts/shortcuts.component.html
@@ -23,12 +23,12 @@
 
         <div class="my-48">
             <h2>Usage</h2>
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="html" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="html">
+                    <textarea #source>
                         <fuse-shortcuts></fuse-shortcuts>
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
         </div>
 
diff --git a/src/app/main/content/components/widget/widget.component.html b/src/app/main/content/components/widget/widget.component.html
index 58315761..a8b2f951 100644
--- a/src/app/main/content/components/widget/widget.component.html
+++ b/src/app/main/content/components/widget/widget.component.html
@@ -62,9 +62,11 @@
 
         <div class="my-48">
             <h2>Usage</h2>
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="html" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+
+                <fuse-highlight lang="html">
+                    <textarea #source>
+
                         <fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
 
                             <!-- Front -->
@@ -97,8 +99,10 @@
                             <!-- / Back -->
 
                         </fuse-widget>
+
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
+
             </p>
         </div>
 
diff --git a/src/app/main/content/services/config/config.component.html b/src/app/main/content/services/config/config.component.html
index 3506a56a..604eea39 100644
--- a/src/app/main/content/services/config/config.component.html
+++ b/src/app/main/content/services/config/config.component.html
@@ -24,8 +24,10 @@
         <div class="my-48">
             <h2>Usage</h2>
             <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="ts" class="source-code">
-                    <textarea #source hidden="hidden">
+
+                <fuse-highlight lang="typescript">
+                    <textarea #source>
+
                         export class SomeComponent
                         {
                             settings: any;
@@ -61,8 +63,10 @@
                                 });
                             }
                         }
+
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
+
             </p>
         </div>
 
diff --git a/src/app/main/content/services/services.module.ts b/src/app/main/content/services/services.module.ts
index 2b55e89b..75be1738 100644
--- a/src/app/main/content/services/services.module.ts
+++ b/src/app/main/content/services/services.module.ts
@@ -25,6 +25,7 @@ const routes = [
         FuseSplashScreenServiceDocsComponent
     ]
 })
+
 export class FuseServicesModule
 {
 }
diff --git a/src/app/main/content/services/splash-screen/splash-screen.component.html b/src/app/main/content/services/splash-screen/splash-screen.component.html
index bb0519c9..8b72d5ef 100644
--- a/src/app/main/content/services/splash-screen/splash-screen.component.html
+++ b/src/app/main/content/services/splash-screen/splash-screen.component.html
@@ -25,8 +25,10 @@
         <div class="my-48">
             <h2>Usage</h2>
             <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="ts" class="source-code">
-                    <textarea #source hidden="hidden">
+
+                <fuse-highlight lang="typescript">
+                    <textarea #source>
+
                         export class SomeComponent
                         {
                             constructor(private fuseSplashScreen: FuseSplashScreenService) {}
@@ -36,8 +38,10 @@
                                 this.fuseSplashScreen.hide();
                             }
                         }
+
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
+
             </p>
         </div>
 
diff --git a/src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.html b/src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.html
index ff07fd51..52fa03ed 100644
--- a/src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.html
+++ b/src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.html
@@ -10,12 +10,12 @@
                 <span>p-0</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="p-0">No padding</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -26,12 +26,12 @@
                 <span>p-4</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="p-4">4px padding</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -42,12 +42,12 @@
                 <span>p-12</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="p-12">12px padding</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -69,7 +69,7 @@
                 <span>py-0</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="pt-0">0 padding from top</span>
@@ -79,7 +79,7 @@
                     <span class="px-0">0 padding from left and right</span>
                     <span class="py-0">0 padding from top and bottom</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -95,7 +95,7 @@
                 <span>py-4</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="pt-4">4px padding from top</span>
@@ -105,7 +105,7 @@
                     <span class="px-4">4px padding from left and right</span>
                     <span class="py-4">4px padding from top and bottom</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -121,12 +121,12 @@
                 <span>m-0</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="m-0">No margin</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -137,12 +137,12 @@
                 <span>m-4</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="m-4">4px margin</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -153,12 +153,12 @@
                 <span>m-12</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="m-12">12px margin</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -180,7 +180,7 @@
                 <span>my-0</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="mt-0">0 margin from top</span>
@@ -190,7 +190,7 @@
                     <span class="mx-0">0 margin from left and right</span>
                     <span class="my-0">0 margin from top and bottom</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -206,7 +206,7 @@
                 <span>my-4</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="mt-4">4px margin from top</span>
@@ -216,7 +216,7 @@
                     <span class="mx-4">4px margin from left and right</span>
                     <span class="my-4">4px margin from top and bottom</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
diff --git a/src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.scss b/src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.scss
index 17201e2f..a54cf7ba 100644
--- a/src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.scss
+++ b/src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.scss
@@ -4,7 +4,6 @@
 
         .source-code {
             position: relative;
-            background: #F3F4F6;
             margin-bottom: 24px;
             min-height: 180px;
 
diff --git a/src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.html b/src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.html
index 199c935b..93003f6f 100644
--- a/src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.html
+++ b/src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.html
@@ -10,12 +10,12 @@
                 <span>w-0</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="w-0">0px width</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -26,12 +26,12 @@
                 <span>w-100</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="w-100">100px width</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -42,12 +42,12 @@
                 <span>w-25-p</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="w-25-p">25% width</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -58,12 +58,12 @@
                 <span>w-100-p</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="w-100-p">100% width</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -79,12 +79,12 @@
                 <span>h-0</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="h-0">0px height</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -95,12 +95,12 @@
                 <span>h-100</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="h-100">100px height</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -111,12 +111,12 @@
                 <span>h-25-p</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="h-25-p">25% height</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -127,12 +127,12 @@
                 <span>h-100-p</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="h-100-p">100% height</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
diff --git a/src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.scss b/src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.scss
index d1ed4228..073878fb 100644
--- a/src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.scss
+++ b/src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.scss
@@ -4,7 +4,6 @@
 
         .source-code {
             position: relative;
-            background: #F3F4F6;
             margin-bottom: 24px;
             min-height: 180px;
 
diff --git a/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.html b/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.html
index fc28433b..97e71b48 100644
--- a/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.html
+++ b/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.html
@@ -14,7 +14,7 @@
                 </blockquote>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <blockquote>
@@ -23,7 +23,7 @@
                         </p>
                     </blockquote>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -40,7 +40,7 @@
                 </blockquote>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <blockquote>
@@ -52,7 +52,7 @@
                         </footer>
                     </blockquote>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -69,7 +69,7 @@
                 </blockquote>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <blockquote class="reverse">
@@ -81,7 +81,7 @@
                         </footer>
                     </blockquote>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -108,7 +108,7 @@
                 </ol>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <ol>
@@ -124,7 +124,7 @@
                         <li>Ordered list item</li>
                     </ol>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -145,7 +145,7 @@
                 </ul>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <ul>
@@ -161,7 +161,7 @@
                         <li>Unordered list item</li>
                     </ul>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -183,7 +183,7 @@
                 </dl>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <dl>
@@ -194,7 +194,7 @@
                         <dd>This is also another definition description</dd>
                     </dl>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
diff --git a/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.scss b/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.scss
index a4340ab6..91755f27 100644
--- a/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.scss
+++ b/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.scss
@@ -4,7 +4,6 @@
 
         .source-code {
             position: relative;
-            background: #F3F4F6;
             margin-bottom: 24px;
             min-height: 180px;
 
diff --git a/src/app/main/content/ui/typography/tabs/headings/headings.component.html b/src/app/main/content/ui/typography/tabs/headings/headings.component.html
index 1d320c6c..389e725e 100644
--- a/src/app/main/content/ui/typography/tabs/headings/headings.component.html
+++ b/src/app/main/content/ui/typography/tabs/headings/headings.component.html
@@ -11,12 +11,12 @@
                 <span class="mat-display-4">Display 4</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="mat-display-4">Display 4</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -27,12 +27,12 @@
                 <span class="mat-display-3">Display 3</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="mat-display-3">Display 3</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -43,12 +43,12 @@
                 <span class="mat-display-2">Display 2</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="mat-display-2">Display 2</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
         </div>
 
         <div fxLayout="column" fxLayout.gt-md="row">
@@ -58,12 +58,12 @@
                 <span class="mat-display-1">Display 1</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="mat-display-1">Display 1</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -74,12 +74,12 @@
                 <span class="mat-headline">Headline</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="mat-headline">Headline</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -90,12 +90,12 @@
                 <span class="mat-title">Title</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="mat-title">Title</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -106,12 +106,12 @@
                 <span class="mat-subheading-2">Subheading 2</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="mat-subheading-2">Subheading 2</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -122,12 +122,12 @@
                 <span class="mat-subheading-1">Subheading 1</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="mat-subheading-1">Subheading 1</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -138,12 +138,12 @@
                 <span class="mat-body-1">Body 1</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="mat-body-1">Body 1</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -154,12 +154,12 @@
                 <span class="mat-body-2">Body 2</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="mat-body-2">Body 2</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -170,12 +170,12 @@
                 <span class="mat-caption">Caption</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="mat-caption">Caption</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -192,13 +192,13 @@
                 <span class="h1">Heading 1</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <h1>Heading 1</h1>
                     <span class="h1">Heading 1</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -209,13 +209,13 @@
                 <span class="h2">Heading 2</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <h2>Heading 2</h2>
                     <span class="h2">Heading 2</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -226,13 +226,13 @@
                 <span class="h3">Heading 3</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <h3>Heading 3</h3>
                     <span class="h3">Heading 3</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -243,13 +243,13 @@
                 <span class="h4">Heading 4</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <h4>Heading 4</h4>
                     <span class="h4">Heading 4</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -260,13 +260,13 @@
                 <span class="h5">Heading 5</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <h5>Heading 5</h5>
                     <span class="h5">Heading 5</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -277,13 +277,13 @@
                 <span class="h6">Heading 6</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <h6>Heading 6</h6>
                     <span class="h6">Heading 6</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
diff --git a/src/app/main/content/ui/typography/tabs/headings/headings.component.scss b/src/app/main/content/ui/typography/tabs/headings/headings.component.scss
index 94d9b834..66ca047d 100644
--- a/src/app/main/content/ui/typography/tabs/headings/headings.component.scss
+++ b/src/app/main/content/ui/typography/tabs/headings/headings.component.scss
@@ -4,7 +4,6 @@
 
         .source-code {
             position: relative;
-            background: #F3F4F6;
             margin-bottom: 24px;
             min-height: 180px;
 
diff --git a/src/app/main/content/ui/typography/tabs/helpers/helpers.component.html b/src/app/main/content/ui/typography/tabs/helpers/helpers.component.html
index 56cf09ac..9f7f7252 100644
--- a/src/app/main/content/ui/typography/tabs/helpers/helpers.component.html
+++ b/src/app/main/content/ui/typography/tabs/helpers/helpers.component.html
@@ -13,14 +13,14 @@
                 <span class="font-weight-900">font-weight: 900</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="font-weight-100">100 font weight</span>
                     ...
                     <span class="font-weight-900">900 font weight</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -37,12 +37,12 @@
                 <span class="font-size-20">font-size: 20</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="font-size-20">font-size: 20</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -61,14 +61,14 @@
                 <span>line-height: 120</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="line-height-2">2px line height</span>
                     ...
                     <span class="line-height-120">120px line height</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -84,12 +84,12 @@
                 <div class="text-left">Left aligned text</div>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <div class="text-left">Left aligned text</div>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -99,12 +99,12 @@
                 <div class="text-center">Center aligned text</div>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <div class="text-center">Center aligned text</div>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -114,12 +114,12 @@
                 <div class="text-right">Right aligned text</div>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <div class="text-right">Right aligned text</div>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -131,14 +131,14 @@
                 </p>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <p>
                         <span class="text-boxed">Boxed text</span>
                     </p>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -150,14 +150,14 @@
                 </p>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <p>
                         <span class="text-boxed-light">Boxed text light</span>
                     </p>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -169,14 +169,14 @@
                 </p>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <p>
                         <span class="text-strike">Strike-through text</span>
                     </p>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -186,12 +186,12 @@
                 <div class="text-italic">Italic text</div>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <div class="text-italic">Italic text</div>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -201,12 +201,12 @@
                 <div class="text-semibold">Semi-bold text</div>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <div class="text-semibold">Semi-bold text</div>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -216,12 +216,12 @@
                 <div class="text-bold">Bold text</div>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <div class="text-bold">Bold text</div>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -233,14 +233,14 @@
                 </span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="text-truncate">
                         This is a truncated text. It will be truncated if it's too long. Vivamus convallis dui porta massa.
                     </span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
diff --git a/src/app/main/content/ui/typography/tabs/helpers/helpers.component.scss b/src/app/main/content/ui/typography/tabs/helpers/helpers.component.scss
index 48dd1da4..faa39dc7 100644
--- a/src/app/main/content/ui/typography/tabs/helpers/helpers.component.scss
+++ b/src/app/main/content/ui/typography/tabs/helpers/helpers.component.scss
@@ -4,7 +4,6 @@
 
         .source-code {
             position: relative;
-            background: #F3F4F6;
             margin-bottom: 24px;
             min-height: 180px;
 
diff --git a/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.html b/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.html
index 454d9343..067d9f0f 100644
--- a/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.html
+++ b/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.html
@@ -8,12 +8,12 @@
                 <span><abbr title="Cascaded Style Sheet">CSS</abbr></span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <abbr title="Cascaded Style Sheet">CSS</abbr>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -23,12 +23,12 @@
                 <span>This is a <mark>marked</mark> text.</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     This is a <mark>marked</mark> text.
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -40,12 +40,12 @@
                 </span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <del>This is a deleted text.</del>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -55,12 +55,12 @@
                 <span><s>This is a strike-through text.</s></span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <s>This is a strike-through text.</s>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -70,12 +70,12 @@
                 <span><u>This is an underlined text.</u></span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <u>This is an underlined text.</u>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -87,12 +87,12 @@
                 </span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <small>This is a small text.</small>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -102,12 +102,12 @@
                 <span><strong>This is a strong text.</strong></span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <strong>This is a strong text.</strong>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -117,12 +117,12 @@
                 <span><em>This is an italic text.</em></span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <em>This is an italic text.</em>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -135,14 +135,14 @@
                 </span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     This is a
                     <span class="text-super">super</span>
                     text.
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -156,14 +156,14 @@
                 </span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     This is a
                     <span class="text-sub">sub</span>
                     text.
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -176,14 +176,14 @@
                 </span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     This is a
                     <span class="text-capitalized">capitalized</span>
                     text.
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -196,14 +196,14 @@
                 </span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     This is an
                     <span class="text-uppercase">uppercase</span>
                     text.
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -216,14 +216,14 @@
                 </span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     This is a
                     <span class="text-lowercase">LOWERCASE</span>
                     text.
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
diff --git a/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.scss b/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.scss
index 0445f273..81248227 100644
--- a/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.scss
+++ b/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.scss
@@ -4,7 +4,6 @@
 
         .source-code {
             position: relative;
-            background: #F3F4F6;
             margin-bottom: 24px;
             min-height: 180px;
 
diff --git a/src/app/navigation/navigation.model.ts b/src/app/navigation/navigation.model.ts
index a0029669..da8e126d 100644
--- a/src/app/navigation/navigation.model.ts
+++ b/src/app/navigation/navigation.model.ts
@@ -823,11 +823,11 @@ export class FuseNavigationModel implements FuseNavigationModelInterface
                         'url'  : '/components/countdown'
                     },
                     {
-                        'id'   : 'highlightjs',
-                        'title': 'Highlight.js',
+                        'id'   : 'highlight',
+                        'title': 'Highlight',
                         'type' : 'item',
                         'icon' : 'settings_input_component',
-                        'url'  : '/components/highlightjs'
+                        'url'  : '/components/highlight'
                     },
                     {
                         'id'   : 'material-color-picker',

From 35f3512e89fff662b9b07ed6af9312c1fe19c85b Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Mon, 8 Jan 2018 16:02:00 +0300
Subject: [PATCH 7/8] Added the [path] input to the fuse-highlight for loading
 source code externally + Removed highlight.js and angular2-markdown + Updated
 the Angular Material example viewer

---
 package-lock.json                             | 19 ----------
 package.json                                  |  2 --
 src/app/app.module.ts                         |  2 --
 .../highlight/highlight.component.ts          | 36 +++++++++++++++----
 src/app/core/modules/shared.module.ts         |  5 +--
 .../core/scss/partials/plugins/_prism.scss    |  2 +-
 .../example-viewer/example-viewer.html        | 29 ++++++++++-----
 .../highlight/highlight.component.html        |  2 +-
 8 files changed, 54 insertions(+), 43 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 485922f4..7cd49ef6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -512,15 +512,6 @@
       "resolved": "https://registry.npmjs.org/angular-resizable-element/-/angular-resizable-element-2.0.0.tgz",
       "integrity": "sha512-Jsa818fxtAtBA3Fp1u4mWV9tcpakM+bNYFFbB/AjKig2BtzZkeyLx3vjcBCfwPmXkK10kX2QKR8RDALk1w209A=="
     },
-    "angular2-markdown": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/angular2-markdown/-/angular2-markdown-1.6.0.tgz",
-      "integrity": "sha1-hja/narXD8NWMxJnB/+zPmhPurE=",
-      "requires": {
-        "marked": "0.3.9",
-        "prismjs": "1.9.0"
-      }
-    },
     "ansi-html": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz",
@@ -4863,11 +4854,6 @@
       "integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0=",
       "dev": true
     },
-    "highlight.js": {
-      "version": "9.12.0",
-      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.12.0.tgz",
-      "integrity": "sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4="
-    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -6274,11 +6260,6 @@
       "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
       "dev": true
     },
-    "marked": {
-      "version": "0.3.9",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-0.3.9.tgz",
-      "integrity": "sha512-nW5u0dxpXxHfkHzzrveY45gCbi+R4PaO4WRZYqZNl+vB0hVGeqlFn0aOg1c8AKL63TrNFn9Bm2UP4AdiZ9TPLw=="
-    },
     "math-expression-evaluator": {
       "version": "1.2.17",
       "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz",
diff --git a/package.json b/package.json
index a747c17f..2f50f7e9 100644
--- a/package.json
+++ b/package.json
@@ -43,12 +43,10 @@
     "@types/prismjs": "1.9.0",
     "angular-calendar": "0.23.0",
     "angular-in-memory-web-api": "0.5.2",
-    "angular2-markdown": "1.6.0",
     "classlist.js": "1.1.20150312",
     "core-js": "2.5.3",
     "d3": "4.12.0",
     "hammerjs": "2.0.8",
-    "highlight.js": "9.12.0",
     "intl": "1.2.5",
     "moment": "2.20.1",
     "ngrx-store-freeze": "0.2.0",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 796b335e..2087f484 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -12,7 +12,6 @@ import { FuseMainModule } from './main/main.module';
 import { FuseSplashScreenService } from './core/services/splash-screen.service';
 import { FuseConfigService } from './core/services/config.service';
 import { FuseNavigationService } from './core/components/navigation/navigation.service';
-import { MarkdownModule } from 'angular2-markdown';
 import { TranslateModule } from '@ngx-translate/core';
 import { AppStoreModule } from './store/store.module';
 
@@ -57,7 +56,6 @@ const appRoutes: Routes = [
         BrowserAnimationsModule,
         RouterModule.forRoot(appRoutes),
         SharedModule,
-        MarkdownModule.forRoot(),
         TranslateModule.forRoot(),
         InMemoryWebApiModule.forRoot(FuseFakeDbService, {
             delay             : 0,
diff --git a/src/app/core/components/highlight/highlight.component.ts b/src/app/core/components/highlight/highlight.component.ts
index 1066b449..e58be26d 100644
--- a/src/app/core/components/highlight/highlight.component.ts
+++ b/src/app/core/components/highlight/highlight.component.ts
@@ -1,4 +1,6 @@
 import { Component, ContentChild, ElementRef, Input, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
 import * as Prism from 'prismjs/prism';
 import './prism-languages';
 
@@ -11,25 +13,46 @@ export class FuseHighlightComponent implements OnInit
 {
     @ContentChild('source') source: ElementRef;
     @Input('lang') lang: string;
+    @Input('path') path: string;
 
     constructor(
-        private elementRef: ElementRef
+        private elementRef: ElementRef,
+        private http: HttpClient
     )
     {
-
     }
 
     ngOnInit()
     {
-        const originalSource = this.source.nativeElement.value;
-
-        if ( !originalSource || !this.lang )
+        // If there is no language defined, return...
+        if ( !this.lang )
         {
             return;
         }
 
+        // If the path is defined...
+        if ( this.path )
+        {
+            // Get the source
+            this.http.get(this.path, {responseType: 'text'}).subscribe((response) => {
+
+                // Highlight it
+                this.highlight(response);
+            });
+        }
+
+        // If the path is not defined and the source element exists...
+        if ( !this.path && this.source )
+        {
+            // Highlight it
+            this.highlight(this.source.nativeElement.value);
+        }
+    }
+
+    highlight(sourceCode)
+    {
         // Split the source into lines
-        const sourceLines = originalSource.split('\n');
+        const sourceLines = sourceCode.split('\n');
 
         // Remove the first and the last line of the source
         // code if they are blank lines. This way, the html
@@ -73,6 +96,7 @@ export class FuseHighlightComponent implements OnInit
         // Replace the innerHTML of the component with the highlighted code
         this.elementRef.nativeElement.innerHTML =
             '<pre><code class="highlight language-' + this.lang + '">' + highlightedCode + '</code></pre>';
+
     }
 }
 
diff --git a/src/app/core/modules/shared.module.ts b/src/app/core/modules/shared.module.ts
index 168a0c4b..f0ab802f 100644
--- a/src/app/core/modules/shared.module.ts
+++ b/src/app/core/modules/shared.module.ts
@@ -21,7 +21,6 @@ import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-do
 import { FuseMaterialColorPickerComponent } from '../components/material-color-picker/material-color-picker.component';
 import { FuseTranslationLoaderService } from '../services/translation-loader.service';
 import { CookieService } from 'ngx-cookie-service';
-import { MarkdownModule } from 'angular2-markdown';
 import { TranslateModule } from '@ngx-translate/core';
 
 @NgModule({
@@ -44,8 +43,7 @@ import { TranslateModule } from '@ngx-translate/core';
         ReactiveFormsModule,
         ColorPickerModule,
         NgxDnDModule,
-        NgxDatatableModule,
-        MarkdownModule
+        NgxDatatableModule
     ],
     exports        : [
         FlexLayoutModule,
@@ -64,7 +62,6 @@ import { TranslateModule } from '@ngx-translate/core';
         NgxDatatableModule,
         FuseIfOnDomDirective,
         FuseMaterialColorPickerComponent,
-        MarkdownModule,
         TranslateModule
     ],
     entryComponents: [
diff --git a/src/app/core/scss/partials/plugins/_prism.scss b/src/app/core/scss/partials/plugins/_prism.scss
index 276ee250..9502fa8f 100644
--- a/src/app/core/scss/partials/plugins/_prism.scss
+++ b/src/app/core/scss/partials/plugins/_prism.scss
@@ -2,7 +2,7 @@
 
 $base00: #263238;
 $base01: #2C393F;
-$base02: #4A5A62;
+$base02: #62727A;
 $base03: #707880;
 $base04: #C9CCD3;
 $base05: #CDD3DE;
diff --git a/src/app/main/content/components/angular-material/example-viewer/example-viewer.html b/src/app/main/content/components/angular-material/example-viewer/example-viewer.html
index dfbc59dc..ddb89c69 100644
--- a/src/app/main/content/components/angular-material/example-viewer/example-viewer.html
+++ b/src/app/main/content/components/angular-material/example-viewer/example-viewer.html
@@ -7,9 +7,11 @@
         <button mat-icon-button type="button" (click)="toggleSourceView()"
                 [matTooltip]="'View source'">
             <mat-icon>
-                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fit="" preserveAspectRatio="xMidYMid meet" focusable="false">
+                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fit=""
+                     preserveAspectRatio="xMidYMid meet" focusable="false">
                     <path fill="none" d="M0 0h24v24H0V0z"></path>
-                    <path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"></path>
+                    <path
+                        d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"></path>
                 </svg>
             </mat-icon>
         </button>
@@ -23,29 +25,40 @@
             <mat-tab label="CSS"></mat-tab>
         </mat-tab-group>
         <div class="tab-content">
-            <section class="tab" *ngIf="selectedIndex === 0" [@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}">
+            <section class="tab" *ngIf="selectedIndex === 0"
+                     [@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}">
                 <button mat-icon-button type="button" class="example-source-copy"
                         title="Copy example source" aria-label="Copy example source to clipboard"
                         (click)="copySource(htmlView.el.nativeElement.innerText)">
                     <mat-icon>content_copy</mat-icon>
                 </button>
-                <div Markdown #htmlView class="example-source" [path]="'/assets/angular-material-examples/'+example+'/'+example+'-example.html'"></div>
+                <fuse-highlight lang="html"
+                                [path]="'/assets/angular-material-examples/'+example+'/'+example+'-example.html'">
+                </fuse-highlight>
             </section>
-            <section class="tab" *ngIf="selectedIndex === 1" [@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}">
+
+            <section class="tab" *ngIf="selectedIndex === 1"
+                     [@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}">
                 <button mat-icon-button type="button" class="example-source-copy"
                         title="Copy example source" aria-label="Copy example source to clipboard"
                         (click)="copySource(tsView.el.nativeElement.innerText)">
                     <mat-icon>content_copy</mat-icon>
                 </button>
-                <div Markdown #tsView class="example-source" [path]="'/assets/angular-material-examples/'+example+'/'+example+'-example.ts'"></div>
+                <fuse-highlight lang="typescript"
+                                [path]="'/assets/angular-material-examples/'+example+'/'+example+'-example.ts'">
+                </fuse-highlight>
             </section>
-            <section class="tab" *ngIf="selectedIndex === 2" [@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}">
+
+            <section class="tab" *ngIf="selectedIndex === 2"
+                     [@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}">
                 <button mat-icon-button type="button" class="example-source-copy"
                         title="Copy example source" aria-label="Copy example source to clipboard"
                         (click)="copySource(cssView.el.nativeElement.innerText)">
                     <mat-icon>content_copy</mat-icon>
                 </button>
-                <div Markdown #cssView class="example-source" [path]="'/assets/angular-material-examples/'+example+'/'+example+'-example.css'"></div>
+                <fuse-highlight lang="css"
+                                [path]="'/assets/angular-material-examples/'+example+'/'+example+'-example.css'">
+                </fuse-highlight>
             </section>
         </div>
     </div>
diff --git a/src/app/main/content/components/highlight/highlight.component.html b/src/app/main/content/components/highlight/highlight.component.html
index 1b6c8315..175abdb0 100644
--- a/src/app/main/content/components/highlight/highlight.component.html
+++ b/src/app/main/content/components/highlight/highlight.component.html
@@ -61,7 +61,7 @@
             <p class="py-8" fxLayout="row" fxLayoutAlign="start center">
                 <code class="mr-16">lang</code>
                 <span>
-                    Language of the code to be highlighted. All highlight.js languages can be used.
+                    Language of the code to be highlighted.
                 </span>
             </p>
         </div>

From fcfbedfd74271620390df98dc92ed4250bb2983d Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Mon, 8 Jan 2018 16:02:45 +0300
Subject: [PATCH 8/8] Increase the version number to 1.3.2

---
 package-lock.json | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7cd49ef6..0fe3b46f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "fuse2",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 2f50f7e9..04ee3ad2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fuse2",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "license": "https://themeforest.net/licenses/terms/regular",
   "scripts": {
     "ng": "ng",