init v0.0.1

2025-12-21 17:34:25 +04:00 · 2018-02-14 21:56:12 +01:00
commit 994dea290b
991 changed files with 55971 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,16 @@
+.idea/
+_site/
+/Gemfile.lock
+/node_modules/
+/.sass-cache/
+/.jekyll-metadata
+/.asset-cache/
+.DS_Store
+package-lock.json
+/_test/
+src/assets/css/dashboard.css
+src/assets/css/dashboard.min.css
+src/assets/plugins/**/plugin.css
+src/assets/plugins/**/plugin.min.css
+generated-site
+deploy-site
--- a/.htaccess
+++ b/.htaccess
@@ -0,0 +1,41 @@
+RewriteEngine On
+RewriteCond %{HTTPS} off
+RewriteCond %{HTTP_HOST} !=localhost
+RewriteCond %{HTTP_HOST} !=127.0.0.1
+RewriteCond %{REMOTE_ADDR} !=127.0.0.1
+RewriteCond %{REMOTE_ADDR} !=::1
+RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L]
+
+ErrorDocument 404 /404.html
+ErrorDocument 500 /500.html
+
+<IfModule mod_deflate.c>
+    SetOutputFilter DEFLATE
+    SetEnvIfNoCase Request_URI \
+    \.(?:gif|jpe?g|png)$ no-gzip dont-vary
+</IfModule>
+
+<IfModule mod_headers.c>
+    ServerSignature Off
+    Header unset X-Powered-By
+    Header set X-XSS-Protection "1; mode=block"
+</IfModule>
+
+<IfModule mod_expires.c>
+    ExpiresActive on
+    ExpiresByType image/jpg "access 2 month"
+    ExpiresByType image/gif "access 2 month"
+    ExpiresByType image/jpeg "access 2 month"
+    ExpiresByType image/png "access 2 month"
+    ExpiresByType text/css "access 2 month"
+    ExpiresByType image/svg+xml "access 2 month"
+    ExpiresByType application/x-javascript "access plus 2 month"
+    ExpiresByType text/javascript "access plus 2 month"
+    ExpiresByType application/javascript "access plus 2 month"
+    ExpiresByType image/x-icon "access plus 12 month"
+    ExpiresByType image/icon "access plus 12 month"
+    ExpiresByType application/x-ico "access plus 12 month"
+    ExpiresByType application/ico "access plus 12 month"
+
+    ExpiresByType text/html "access plus 2 days"
+</IfModule>
--- a/8
+++ b/8
@@ -0,0 +1,8 @@
+source 'https://rubygems.org' do
+  gem 'jekyll-tidy'
+  gem 'octopress-autoprefixer'
+  gem 'jekyll-contentblocks'
+  gem 'jekyll-redirect-from'
+  gem 'jekyll-toc'
+  gem 'public_suffix', '3.0.0'
+end
--- a/_config.yml
+++ b/_config.yml
@@ -0,0 +1,92 @@
+title: tabler.io
+description: tabler.io - a responsive, flat and full featured admin template
+base_color: '#cc0000'
+
+collections:
+  docs:
+    output: true
+
+
+defaults:
+  - scope:
+      path: ""
+      type: docs
+    values:
+      layout: docs
+
+source: src
+
+author:
+   name: codecalm.net
+   url: https://codecalm.net
+
+plugins:
+  - jekyll-tidy
+  - jekyll-contentblocks
+  - jekyll-toc
+
+exclude:
+  - buddy.yml
+  - package.json
+  - gulpfile.js
+  - start.sh
+  - Gemfile
+  - Gemfile.lock
+  - .git
+  - .idea
+  - .gitignore
+  - node_modules/
+  - .DS_Store
+  - .sass-cache/
+  - .asset-cache/
+  - assets/scss/*
+  - assets/plugins/**/*.scss
+  - push-to-repo.sh
+
+markdown: kramdown
+highlighter: rouge
+
+kramdown:
+  input: GFM
+  syntax_highlighter: rouge
+  syntax_highlighter_opts:
+    css_class: ''
+    span:
+      line_numbers: false
+
+toc:
+  min_level: 2
+  max_level: 3
+
+jekyll_tidy:
+  compress_html: false
+  ignore_env: development
+
+colors:
+  blue: '#467fcf'
+  azure: '#45aaf2'
+  indigo: '#6574cd'
+  purple: '#a55eea'
+  pink: '#f66d9b'
+  red: '#e74c3c'
+  orange: '#fd9644'
+  yellow: '#f1c40f'
+  lime: '#7bd235'
+  green: '#5eba00'
+  teal: '#2bcbba'
+  cyan: '#17a2b8'
+  gray: '#868e96'
+  gray-dark: '#343a40'
+
+theme-colors:
+  primary: '#467fcf'
+  secondary: '#868e96'
+  success: '#38c172'
+  info: '#17a2b8'
+  warning: '#f8b700'
+  danger: '#f90049'
+  light: '#f8f9fa'
+  dark: '#343a40'
+
+google-maps-key: AIzaSyBEJy4UvF-JfcNciWlvlznyDlUckcspiD4
+google-maps-url: https://maps.googleapis.com/maps/api/js?key=AIzaSyCOJwXN0eoyeFZ3cYtGzPLFw8zGhQ750Xk
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -0,0 +1,46 @@
+var gulp = require('gulp'),
+    sass = require('gulp-sass'),
+    rename = require('gulp-rename'),
+	gs = require('gulp-selectors'),
+    autoprefixer = require('gulp-autoprefixer');
+
+gulp.task('styles', function () {
+    return gulp.src('src/assets/scss/bundle.scss', { base: '.' })
+        .pipe(sass({
+            precision: 8,
+            outputStyle: 'expanded'
+        }).on('error', sass.logError))
+        .pipe(autoprefixer({
+            browsers: ['>1%'],
+            cascade: false
+        }))
+        .pipe(rename('dashboard.css'))
+        .pipe(gulp.dest('src/assets/css/'));
+});
+
+gulp.task('styles-plugins', function () {
+    return gulp.src('src/assets/plugins/**/plugin.scss', { base: '.' })
+        .pipe(sass({
+            precision: 6,
+            outputStyle: 'expanded'
+        }).on('error', sass.logError))
+        .pipe(autoprefixer({
+            browsers: ['>1%'],
+            cascade: false
+        }))
+        .pipe(rename(function(path) {
+            path.extname = '.css';
+        }))
+        .pipe(gulp.dest('.'))
+        .pipe(rename(function(path) {
+            path.extname = '.min.css';
+        }))
+        .pipe(gulp.dest('.'));
+});
+
+gulp.task('watch', ['styles', 'styles-plugins'], function() {
+    gulp.watch('src/assets/scss/**/*.scss', ['styles']);
+    gulp.watch('src/assets/plugins/**/*.scss', ['styles-plugins']);
+});
+
+gulp.task('default', ['styles', 'styles-plugins']);
--- a/package.json
+++ b/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "dashboard",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/codecalm/bootstrap-dashboard.git"
+  },
+  "author": "codecalm",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/codecalm/bootstrap-dashboard/issues"
+  },
+  "homepage": "https://github.com/codecalm/bootstrap-dashboard#readme",
+  "devDependencies": {
+    "gulp": "^3.9.1",
+    "gulp-autoprefixer": "^4.0.0",
+    "gulp-rcs": "^1.1.0",
+    "gulp-rename": "^1.2.2",
+    "gulp-sass": "^3.1.0",
+    "gulp-selectors": "^0.1.10"
+  },
+  "dependencies": {},
+  "description": ""
+}
--- a/regenerate-images.sh
+++ b/regenerate-images.sh
@@ -0,0 +1 @@
+for i in *.jpg; do convert "$i" -resize 500x333^ -gravity center -crop 500x333+0+0 -quality 80 -monitor "${i%.*}-500.jpg"; done
--- a/src/404.html
+++ b/src/404.html
@@ -0,0 +1,6 @@
+---
+title: Page 404
+layout: error
+---
+
+{% include page-error.html error="error-404" %}
--- a/src/LICENSE
+++ b/src/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018 Paweł Kuna
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/src/README.md
+++ b/src/README.md
@@ -0,0 +1,17 @@
+# Dashboard
+
+We’ve created this admin panel for everyone who wants to create any templates based on our ready components. Our mission is to deliver a user-friendly, clear and easy administration panel, that can be used by both, simple websites and sophisticated systems. The only requirement is a basic HTML and CSS knowledge—as a reward, you'll be able to manage and visualize different types of data in the easiest possible way!
+
+After using many of different admin panels, no matter free or paid, we've noticed they all had a lot of defects—and the main one was resource intensity.
+They were loading loads of useless components that you wouldn't ever use, so we've decided to choose a different way. The whole system is plugin-based, what means that you have a control over what is needed and what not.
+
+To make the system works fast and reliable, we've converted most of the components to CSS. Thanks to this, you don't have to load a lot of unnecessary libraries into your browser what really boosts the overall speed.
+
+In this documentation we're going to describe common use-cases for most of our components since we want to make our tool be accessible to everyone.
+
+
+## Browser Support
+
+![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png)
+--- | --- | --- | --- | --- | --- |
+Latest ✔ | Latest ✔ | Latest ✔ | 11+ ✔ | 9.1+ ✔ | Latest ✔ |
--- a/src/_400.html
+++ b/src/_400.html
@@ -0,0 +1,6 @@
+---
+title: Page 400
+layout: error
+---
+
+{% include page-error.html error="error-400" %}
--- a/src/_401.html
+++ b/src/_401.html
@@ -0,0 +1,6 @@
+---
+title: Page 401
+layout: error
+---
+
+{% include page-error.html error="error-401" %}
--- a/src/_403.html
+++ b/src/_403.html
@@ -0,0 +1,6 @@
+---
+title: Page 403
+layout: error
+---
+
+{% include page-error.html error="error-403" %}
--- a/src/_500.html
+++ b/src/_500.html
@@ -0,0 +1,6 @@
+---
+title: Page 500
+layout: error
+---
+
+{% include page-error.html error="error-500" %}
--- a/src/_503.html
+++ b/src/_503.html
@@ -0,0 +1,6 @@
+---
+title: Page 503
+layout: error
+---
+
+{% include page-error.html error="error-503" %}
--- a/src/_buttons.html
+++ b/src/_buttons.html
@@ -0,0 +1,110 @@
+---
+layout: default
+title: Buttons
+---
+
+{% assign states = 'secondary dropdown-toggle,secondary,primary,danger' | split: ',' %}
+{% assign states-outlined = 'primary,danger,success' | split: ',' %}
+
+<div class="container">
+	<div class="row row-cards">
+		<div class="col-6">
+			<div class="card">
+				<div class="card-body">
+					<h3 class="card-title">Default buttons</h3>
+					<div class="row mb-3 sm-gutters">
+						<div class="col-auto">
+							{% for state in states %}
+							<button class="btn btn-{{ state }}">Button</button>
+							{% endfor %}
+						</div>
+						<div class="col">
+							<input class="form-control d-inline-block w-auto">
+						</div>
+					</div>
+					<div class="row mb-3 sm-gutters">
+						<div class="col-auto">
+							{% for state in states %}
+							<button class="btn btn-sm btn-{{ state }}">Button</button>
+							{% endfor %}
+						</div>
+						<div class="col">
+							<input class="form-control form-control-sm d-inline-block w-auto">
+						</div>
+					</div>
+					<div class="row mb-3 sm-gutters">
+						<div class="col-auto">
+							{% for state in states %}
+							<button class="btn btn-lg btn-{{ state }}">Button</button>
+							{% endfor %}
+						</div>
+						<div class="col">
+							<input class="form-control form-control-lg d-inline-block w-auto">
+						</div>
+					</div>
+
+					<p>
+						{% for state in states %}
+						<button class="btn btn-{{ state }}"><i class="fe fe-star mr-2"></i>Button</button>
+						{% endfor %}
+					</p>
+					<p>
+						{% for state in states %}
+						<button class="btn btn-{{ state }} btn-icon"><i class="fe fe-star"></i></button>
+						{% endfor %}
+					</p>
+				</div>
+			</div>
+		</div>
+		<div class="col-6">
+			<div class="card">
+				<div class="card-body">
+					<h3 class="card-title">
+						Outlined buttons
+					</h3>
+					<p>
+						{% for state in states-outlined %}
+						<button class="btn btn-outline-{{ state }}">Button</button>
+						{% endfor %}
+					</p>
+					<p>
+						{% for state in states-outlined %}
+						<button class="btn btn-outline-{{ state }} btn-icon"><i class="fe fe-star mr-2"></i>Button</button>
+						{% endfor %}
+					</p>
+				</div>
+			</div>
+		</div>
+		<div class="col-6">
+			<div class="card">
+				<div class="card-body">
+					<p>
+						<button type="button" class="btn btn-facebook"><i class="fa fa-facebook"></i></button>
+						<button type="button" class="btn btn-twitter"><i class="fa fa-twitter"></i></button>
+						<button type="button" class="btn btn-google"><i class="fa fa-google-plus"></i></button>
+						<button type="button" class="btn btn-youtube"><i class="fa fa-youtube"></i></button>
+						<button type="button" class="btn btn-vimeo"><i class="fa fa-vimeo-square"></i></button>
+						<button type="button" class="btn btn-dribbble"><i class="fa fa-dribbble"></i></button>
+						<button type="button" class="btn btn-github"><i class="fa fa-github"></i></button>
+						<button type="button" class="btn btn-instagram"><i class="fa fa-instagram"></i></button>
+						<button type="button" class="btn btn-pinterest"><i class="fa fa-pinterest"></i></button>
+						<button type="button" class="btn btn-vk"><i class="fa fa-vk"></i></button>
+						<button type="button" class="btn btn-rss"><i class="fa fa-rss"></i></button>
+						<button type="button" class="btn btn-flickr"><i class="fa fa-flickr"></i></button>
+						<button type="button" class="btn btn-bitbucket"><i class="fa fa-bitbucket"></i></button>
+					</p>
+					<p>
+						<button type="button" class="btn btn-facebook"><i class="fa fa-facebook mr-2"></i> Facebook</button>
+						<button type="button" class="btn btn-twitter"><i class="fa fa-twitter mr-2"></i> Twitter</button>
+						<button type="button" class="btn btn-google"><i class="fa fa-google-plus mr-2"></i> Google Plus</button>
+					</p>
+					<p>
+						<button type="button" class="btn btn-sm btn-facebook"><i class="fa fa-facebook mr-2"></i> Facebook</button>
+						<button type="button" class="btn btn-sm btn-twitter"><i class="fa fa-twitter mr-2"></i> Twitter</button>
+						<button type="button" class="btn btn-sm btn-google"><i class="fa fa-google-plus mr-2"></i> Google Plus</button>
+					</p>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
--- a/src/_calendar.html
+++ b/src/_calendar.html
@@ -0,0 +1,9 @@
+---
+layout: default
+title: Calendar
+page-title: Calendar
+---
+
+<div class="container">
+	{% include cards/fullcalendar.html %}
+</div>
--- a/src/_cards.html
+++ b/src/_cards.html
@@ -0,0 +1,187 @@
+---
+layout: default
+title: Homepage
+menu: cards
+---
+
+
+<!--<div class="container">-->
+	<!--<nav class="breadcrumb breadcrumb-content">-->
+		<!--<a class="breadcrumb-item" href="javascript:void(0)">Library</a>-->
+		<!--<span class="breadcrumb-item active">Cards</span>-->
+	<!--</nav>-->
+<!--</div>-->
+
+<div class="container">
+	<div class="page-header">
+		<div>
+			<h1 class="page-title">Dashboard</h1>
+			<div class="page-description">
+				<ul class="list-inline list-inline-dots m-0">
+					<li class="list-inline-item">Section 500</li>
+					<li class="list-inline-item">English learning French</li>
+					<li class="list-inline-item">
+						<a href="javascript:void(0)">United states</a>
+					</li>
+					<li class="list-inline-item">7 students</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+
+
+	<div class="row row-cards">
+
+		<div class="col-lg-6">
+			{% include cards/twitter.html %}
+			{% include cards/twitter.html %}
+		</div>
+		<div class="col-lg-6">
+			{% include cards/twitter.html show-image=true %}
+		</div>
+
+		<div class="col-lg-8">
+			{% include cards/http-request.html %}
+		</div>
+
+		<div class="col-12"></div>
+
+		<div class="col-md-3">
+			{% include cards/icon-box.html color="blue" icon="fa fa-eur" value="132" description="Sales" subtitle="12 waiting payments" %}
+		</div>
+		<div class="col-md-3">
+			{% include cards/icon-box.html color="green" icon="fa fa-shopping-bag" value="78" description="Orders" subtitle="32 shipped" %}
+		</div>
+		<div class="col-md-3">
+			{% include cards/icon-box.html color="red" icon="fa fa-user" value="1,352" description="Members" subtitle="163 registered today" %}
+		</div>
+		<div class="col-md-3">
+			{% include cards/icon-box.html color="yellow" icon="fa fa-comments" value="132" description="Comments" subtitle="16 waiting" %}
+		</div>
+
+		<div class="col-md-3">
+			{% include cards/price-box.html color="green" change=4 %}
+		</div>
+		<div class="col-md-3">
+			{% include cards/price-box.html title="Order status" subtitle="New order" color="red" value="738" change=-10 %}
+		</div>
+		<div class="col-md-3">
+			{% include cards/price-box.html title="Income status" subtitle="New income" color="blue" change=0 value="$3,205" %}
+		</div>
+		<div class="col-md-3">
+			{% include cards/price-box.html title="Customer status" subtitle="New users" color="yellow" value="118" change=3 %}
+		</div>
+
+		<div class="col-md-4">
+			{% include cards/map-metro.html %}
+		</div>
+		<div class="col-lg-8">{% include cards/profile-edit-big.html %}</div>
+
+		<div class="col-md-6 col-lg-3">{% include cards/icon-card.html icon="si si-drawer" icon-color="yellow" title="Capacity" value="105GB" %}</div>
+		<div class="col-md-6 col-lg-3">{% include cards/icon-card.html icon="si si-diamond" icon-color="green" title="Revenue" value="$1,345"  %}</div>
+		<div class="col-md-6 col-lg-3">{% include cards/icon-card.html icon="si si-exclamation" icon-color="red" title="Errors" value="23"  %}</div>
+		<div class="col-md-6 col-lg-3">{% include cards/icon-card.html icon="si si-social-tumblr" icon-color="blue" title="Followers" value="1685"  %}</div>
+
+		<div class="col-md-6 col-lg-4">
+			{% include cards/subcards.html %}
+		</div>
+		<div class="col-lg-8">
+			{% include cards/classroom.html %}
+		</div>
+		<div class="col-md-6 col-lg-4">
+			{% include cards/colors.html %}
+			{% include cards/calendar.html %}
+		</div>
+		<div class="col-md-6 col-lg-4">
+			{% include cards/chart-browsers.html %}
+		</div>
+		<div class="col-md-6 col-lg-4">
+			{% include cards/email-stats.html %}
+		</div>
+		<div class="col-12">
+			{% include cards/invoices.html %}
+			{% include cards/chart-visitors.html %}
+		</div>
+		<div class="col-lg-4 col-md-6">
+			{% include cards/chips.html %}
+			{% include cards/progress-circle.html %}
+			{% include cards/statuses.html %}
+			{% include cards/loader.html %}
+			{% include cards/progress.html %}
+			{% include cards/image-info.html %}
+			{% include cards/packages.html %}
+			{% include cards/map-germany.html %}
+			{% include cards/stock.html %}
+			{% include cards/match.html %}
+			{% include cards/profile-edit.html %}
+			{% include cards/sparkline.html type="bar" limit="16" %}
+			{% include cards/sparkline.html type="line" color="red" offset="60" limit="16" %}
+			{% include cards/options.html %}
+			{% include cards/chart-bg.html id="chart-bg-users" %}
+			{% include cards/avatars.html %}
+			{% include cards/media.html title="1530" color="primary" description="Total Leads" rate="20%" progress="20%" %}
+			{% include cards/media.html title="$8,530" color="warning" description="Total Payment" rate="0%" %}
+			{% include cards/photos.html %}
+			{% include cards/media.html title="16°C" color="warning" description="Warsaw, Poland" rate='<i class="wi wi-day-cloudy"></i>' %}
+			{% include cards/aside.html %}
+			{% include cards/links.html %}
+			{% include cards/store-product.html %}
+			{% include cards/color.html color="success" %}
+			{% include cards/follow.html %}
+			{% include cards/profile.html %}
+			{% include cards/centered.html %}
+			{% include cards/pills.html %}
+			{% include cards/color.html color="danger" %}
+		</div>
+		<div class="col-lg-8 col-md-6">
+			{% include cards/tasks.html %}
+			{% include cards/map-world.html %}
+			{% include cards/tickets.html %}
+
+			<div class="row">
+				<div class="col-lg-6">
+					{% include cards/profile-2.html %}
+					{% include cards/client.html %}
+					{% include cards/digit.html %}
+					<div class="row row-deck">
+						<div class="col-6">{% include cards/digit.html color="red" title="New fedbacks" digit="62" width="34%" %}</div>
+						<div class="col-6">{% include cards/digit.html color="green" title="Users online" digit="76" width="32%" %}</div>
+					</div>
+					{% include cards/digit.html color="yellow" title="Profit for this month" digit="$65,256" width="85%" %}
+					{% include cards/chart-bg.html id="chart-bg-revenue" description="Revenue" title="$5255" offset=60 rate="-3%" color="yellow" %}
+					{% include cards/server.html %}
+					{% include cards/media.html title="935" color="danger" description="Total Sales" rate="-1%" progress="75%" %}
+					{% include cards/media-inverse.html title="5324" color="success" description="New Orders" rate="60%" %}
+					{% include cards/image.html %}
+					{% include cards/header.html %}
+					{% include cards/border.html color="danger" %}
+					{% include cards/empty.html %}
+					{% include cards/color.html color="warning" %}
+					{% include cards/countries.html %}
+					{% include cards/all.html %}
+					{% include cards/register.html %}
+					{% include cards/search-custom.html %}
+				</div>
+				<div class="col-lg-6">
+					{% include cards/alert.html %}
+					{% include cards/finance.html %}
+					{% include cards/sales.html %}
+					{% include cards/chart-pie.html %}
+					{% include cards/chart-radar.html %}
+					{% include cards/message.html %}
+					{% include cards/image-bg.html %}
+					{% include cards/browsers.html %}
+					{% include cards/color.html color="dark" %}
+					{% include cards/footer.html %}
+					{% include cards/feed.html %}
+					{% include cards/list.html %}
+					{% include cards/tabs.html %}
+					{% include cards/color.html color="primary" %}
+					{% include cards/login.html %}
+					{% include cards/forgot.html %}
+				</div>
+			</div>
+		</div>
+
+	</div>
+</div>
--- a/src/_chat.html
+++ b/src/_chat.html
@@ -0,0 +1,4 @@
+---
+layout: default
+body-class: aside-opened
+---
--- a/src/_data/articles.yml
+++ b/src/_data/articles.yml
@@ -0,0 +1,34 @@
+- title: And this isn't my nose. This is a false one.
+  description: Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migrate? Well, I got better.
+  image: 14
+  author: 3
+
+- title: Well, I didn't vote for you.
+  description: Well, we did do the nose. Why? Shut up! Will you shut up?! You don't frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits!
+  image: 15
+  author: 4
+
+- title: How do you know she is a witch?
+  description: Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You don't vote for kings. Ah, now we see the violence inherent in the system!
+  image: 16
+  author: 5
+
+- title: Shut up!
+  description: Burn her! How do you know she is a witch? You don't frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits!
+  image: 17
+  author: 6
+
+- title: Weaseling out of things is important to learn.
+  description: Please do not offer my god a peanut. That's why I love elementary school, Edna. The children believe anything you tell them. Brace yourselves gentlemen. According to the gas chromatograph, the secret ingredient is… Love!? Who's been screwing with this thing?
+  image: 20
+  author: 12
+
+- title: You don't like your job, you don't strike.
+  description: "But, Aquaman, you cannot marry a woman without gills. You're from two different worlds… Oh, I've wasted my life. Son, when you participate in sporting events, it's not whether you win or lose: it's how drunk you get."
+  image: 21
+  author: 13
+
+- title: I hope I didn't brain my damage.
+  description: "I don't like being outdoors, Smithers. For one thing, there's too many fat children. Oh, loneliness and cheeseburgers are a dangerous mix. Jesus must be spinning in his grave! I hope this has taught you kids a lesson: kids never learn."
+  image: 22
+  author: 14
--- a/src/_data/charts.yml
+++ b/src/_data/charts.yml
@@ -0,0 +1,267 @@
+tasks:
+  name: Tasks
+  type: area-spline
+  categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W']
+  groups: [1, 2, 3]
+  hide-points: true
+  series:
+    - name: 'New'
+      color: blue
+      data: [0, 0, 1, 2, 21, 9, 12, 10, 31, 13, 65, 10, 12, 6, 4, 3, 0]
+    - name: 'Completed'
+      color: lime
+      data: [0, 0, 1, 2, 7, 5, 6, 8, 24, 7, 12, 5, 6, 3, 2, 2, 0]
+    - name: 'Closed'
+      color: orange
+      data: [0, 0, 1, 0, 2, 0, 1, 0, 2, 3, 0, 2, 3, 2, 1, 0, 0]
+
+employment:
+  name: Employment Growth
+  display: true
+  type: line
+  hide-legend: true
+  categories: ['2013', '2014', '2015', '2016', '2017', '2018']
+  series:
+    - name: Development
+      color: orange
+      data: [2, 8, 6, 7, 14, 11]
+    - name: Marketing
+      color: blue
+      data: [5, 15, 11, 15, 21, 25]
+    - name: Sales
+      color: green
+      data: [17, 18, 21, 20, 30, 29]
+
+temperature:
+  name: Monthly Average Temperature
+  display: true
+  type: line
+  show-labels: true
+  hide-legend: true
+  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
+  series:
+    - name: Tokyo
+      color: blue
+      data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
+    - name: London
+      color: green
+      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
+
+
+area:
+  name: Lorem ipsum
+  display: true
+  type: area
+  hide-legend: true
+  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
+  series:
+    - name: Maximum
+      color: blue
+      data: [11, 8, 15, 18, 19, 17]
+    - name: Minimum
+      color: pink
+      data: [7, 7, 5, 7, 9, 12]
+
+
+area-spline:
+  name: Lorem ipsum
+  display: true
+  type: area-spline
+  hide-legend: true
+  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
+  series:
+    - name: Maximum
+      color: blue
+      data: [11, 8, 15, 18, 19, 17]
+    - name: Minimum
+      color: pink
+      data: [7, 7, 5, 7, 9, 12]
+
+
+area-spline-sracked:
+  name: Lorem ipsum
+  display: true
+  type: area-spline
+  hide-legend: true
+  groups: [1, 2]
+  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
+  series:
+    - name: Maximum
+      color: blue
+      data: [11, 8, 15, 18, 19, 17]
+    - name: Minimum
+      color: pink
+      data: [7, 7, 5, 7, 9, 12]
+
+
+spline:
+  name: Wind speed during two days
+  display: true
+  type: spline
+  show-labels: true
+  hide-legend: true
+  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
+  series:
+    - name: Hestavollane
+      color: blue
+      data: [0.2, 0.8, 0.8, 0.8, 1, 1.3, 1.5, 2.9, 1.9, 2.6, 1.6, 3, 4, 3.6, 4.5, 4.2, 4.5, 4.5, 4, 3.1, 2.7, 4, 2.7, 2.3, 2.3, 4.1, 7.7, 7.1, 5.6, 6.1, 5.8, 8.6, 7.2, 9, 10.9, 11.5, 11.6, 11.1, 12, 12.3, 10.7, 9.4, 9.8, 9.6, 9.8, 9.5, 8.5, 7.4, 7.6]
+    - name: Vik
+      color: green
+      data: [0, 0, 0.6, 0.9, 0.8, 0.2, 0, 0, 0, 0.1, 0.6, 0.7, 0.8, 0.6, 0.2, 0, 0.1, 0.3, 0.3, 0, 0.1, 0, 0, 0, 0.2, 0.1, 0, 0.3, 0, 0.1, 0.2, 0.1, 0.3, 0.3, 0, 3.1, 3.1, 2.5, 1.5, 1.9, 2.1, 1, 2.3, 1.9, 1.2, 0.7, 1.3, 0.4, 0.3]
+
+
+spline-rotated:
+  name: Lorem ipsum
+  display: true
+  type: spline
+  rotated: true
+  hide-legend: true
+  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
+  series:
+    - name: Maximum
+      color: blue
+      data: [11, 8, 15, 18, 19, 17]
+    - name: Minimum
+      color: pink
+      data: [7, 7, 5, 7, 9, 12]
+
+
+step:
+  name: Lorem ipsum
+  display: true
+  type: step
+  hide-legend: true
+  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
+  series:
+    - name: Maximum
+      color: blue
+      data: [11, 8, 15, 18, 19, 17]
+    - name: Minimum
+      color: pink
+      data: [7, 7, 5, 7, 9, 12]
+
+
+area-step:
+  name: Lorem ipsum
+  display: true
+  type: area-step
+  hide-legend: true
+  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
+  series:
+    - name: Maximum
+      color: blue
+      data: [11, 8, 15, 18, 19, 17]
+    - name: Minimum
+      color: pink
+      data: [7, 7, 5, 7, 9, 12]
+
+
+bar:
+  name: Lorem ipsum
+  display: true
+  type: bar
+  hide-legend: true
+  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
+  series:
+    - name: Maximum
+      color: blue
+      data: [11, 8, 15, 18, 19, 17]
+    - name: Minimum
+      color: pink
+      data: [7, 7, 5, 7, 9, 12]
+
+bar-rotated:
+  name: Lorem ipsum
+  display: true
+  type: bar
+  rotated: true
+  hide-legend: true
+  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
+  series:
+    - name: Maximum
+      color: blue
+      data: [11, 8, 15, 18, 19, 17]
+    - name: Minimum
+      color: pink
+      data: [7, 7, 5, 7, 9, 12]
+
+
+bar-stacked:
+  name: Lorem ipsum
+  display: true
+  type: bar
+  groups: [1, 2]
+  hide-legend: true
+  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
+  series:
+    - name: Maximum
+      color: blue
+      data: [11, 8, 15, 18, 19, 17]
+    - name: Minimum
+      color: pink
+      data: [7, 7, 5, 7, 9, 12]
+
+
+pie:
+  name: Lorem ipsum
+  display: true
+  type: pie
+  series:
+    - name: Maximum
+      color: blue
+      data: [63]
+    - name: Minimum
+      color: pink
+      data: [37]
+
+donut:
+  name: Lorem ipsum
+  display: true
+  type: donut
+  series:
+    - name: Maximum
+      color: blue
+      data: [63]
+    - name: Minimum
+      color: pink
+      data: [37]
+
+
+scatter:
+  name: Lorem ipsum
+  display: true
+  type: scatter
+  hide-legend: true
+  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
+  series:
+    - name: Maximum
+      color: blue
+      data: [11, 8, 15, 18, 19, 17]
+    - name: Minimum
+      color: pink
+      data: [7, 7, 5, 7, 9, 12]
+
+
+combination:
+  name: Combination chart
+  display: true
+  type: bar
+  types:
+    2: 'line'
+    3: 'spline'
+  groups: [1, 4]
+  hide-legend: true
+  categories: ['2013', '2014', '2015', '2016', '2017', '2018']
+  series:
+    - name: Development
+      color: green
+      data: [30, 20, 50, 40, 60, 50]
+    - name: Marketing
+      color: pink
+      data: [200, 130, 90, 240, 130, 220]
+    - name: Sales
+      color: green
+      data: [300, 200, 160, 400, 250, 250]
+    - name: Sales
+      color: blue
+      data: [200, 130, 90, 240, 130, 220]
--- a/src/_data/commits.yml
+++ b/src/_data/commits.yml
@@ -0,0 +1,113 @@
+---
+- commiter:
+    name: Earvin Yoakley
+    position: CEO
+  commit:
+    name: Initial commit
+    project: Front-end
+    md5: 8ed2c32
+    date: 'Oct 13, 2017'
+    hour: '0:58'
+  milestone:
+    percentage: 3
+    start: 5
+    end: 30
+  branch: feature/cards
+- commiter:
+    name: Colette Saenz
+    position: CEO
+  commit:
+    name: Main structure markup
+    project: Database
+    md5: a7c1f12
+    date: 'May 26, 2017'
+    hour: '5:53'
+  milestone:
+    percentage: 84
+    start: 30
+    end: 46
+  branch: stage
+- commiter:
+    name: Hilario Kleuer
+    position: Developer
+  commit:
+    name: Left sidebar fix
+    project: Bootstrap Admin
+    md5: 31697d4
+    date: 'Nov 27, 2016'
+    hour: '7:05'
+  milestone:
+    percentage: 4
+    start: 1
+    end: 37
+  branch: feature/cards
+- commiter:
+    name: Brenda Ubsdell
+    position: CEO
+  commit:
+    name: Topbar dropdown style
+    project: Front-end
+    md5: e481486
+    date: 'May 09, 2017'
+    hour: '14:00'
+  milestone:
+    percentage: 78
+    start: 18
+    end: 38
+  branch: feature/cards
+- commiter:
+    name: Andrei Widger
+    position: Designer
+  commit:
+    name: Right sidebar style
+    project: Front-end
+    md5: e59546d
+    date: 'Jan 10, 2017'
+    hour: '6:02'
+  milestone:
+    percentage: 53
+    start: 26
+    end: 48
+  branch: stage
+- commiter:
+    name: Catriona St. Queintain
+    position: CEO
+  commit:
+    name: Initial commit
+    project: Front-end
+    md5: 14966c9
+    date: 'Dec 28, 2016'
+    hour: '9:51'
+  milestone:
+    percentage: 59
+    start: 27
+    end: 42
+  branch: dev
+- commiter:
+    name: Therine Cordeau
+    position: CEO
+  commit:
+    name: Main structure markup
+    project: Bootstrap Admin
+    md5: d4b8c06
+    date: 'Mar 26, 2017'
+    hour: '10:11'
+  milestone:
+    percentage: 20
+    start: 29
+    end: 40
+  branch: stage
+- commiter:
+    name: Derward Lafaye
+    position: Designer
+  commit:
+    name: Left sidebar fix
+    project: Database
+    md5: d754ded
+    date: 'Feb 24, 2017'
+    hour: '0:24'
+  milestone:
+    percentage: 40
+    start: 26
+    end: 34
+  branch: feature/cards
--- a/src/_data/crypto-currencies.yml
+++ b/src/_data/crypto-currencies.yml
@@ -0,0 +1,907 @@
+- name: Bitcoin
+  price: "$10513.00"
+  p24h: -7
+  market-cap: "$179,470,305,923"
+  circulating-supply: 16,819,612 BTC
+  volume-24h: "$9,578,830,000"
+  cmgr: 8.11% / 57
+  inflation: 0.36%
+  icon: bitcoin.svg
+
+- name: Ethereum
+  price: "$966.61"
+  p24h: -6
+  market-cap: "$95,270,125,036"
+  circulating-supply: 97,145,024 ETH
+  volume-24h: "$3,466,060,000"
+  cmgr: 22.62% / 29
+  inflation: 0.64%
+  icon: ethereum.svg
+
+- name: Ripple
+  price: "$1.2029"
+  p24h: -11
+  market-cap: "$47,649,145,657"
+  circulating-supply: 38,739,144,704 XRP
+  volume-24h: "$2,081,450,000"
+  cmgr: 10.85% / 53
+  inflation: 0.06%
+  icon: ripple.svg
+
+- name: Bitcoin Cash
+  price: "$1547.00"
+  p24h: -11
+  market-cap: "$26,720,210,956"
+  circulating-supply: 16,925,988 BCH
+  volume-24h: "$598,337,000"
+  cmgr: 21.30% / 6
+  inflation: 0.32%
+
+- name: Cardano
+  price: "$0.550768"
+  p24h: -9
+  market-cap: "$14,279,800,786"
+  circulating-supply: 25,927,069,696 ADA
+  volume-24h: "$466,381,000"
+  cmgr: 205.35% / 3
+  inflation: 0.00%
+  icon: cardano.svg
+
+- name: Litecoin
+  price: "$173.86"
+  p24h: -7
+  market-cap: "$9,670,920,267"
+  circulating-supply: 54,873,584 LTC
+  volume-24h: "$430,524,000"
+  cmgr: 6.87% / 57
+  inflation: 0.80%
+  icon: litecoin.svg
+
+- name: EOS
+  price: "$13.394"
+  p24h: 5
+  market-cap: "$8,420,143,033"
+  circulating-supply: 621,412,800 EOS
+  volume-24h: "$2,864,780,000"
+  cmgr: 53.25% / 6
+  inflation: 11.56%
+  icon: eos.svg
+
+- name: NEM
+  price: "$0.935049"
+  p24h: -11
+  market-cap: "$8,415,440,999"
+  circulating-supply: 8,999,999,488 XEM
+  volume-24h: "$66,061,000"
+  cmgr: 26.99% / 33
+  inflation: 0.24%
+  icon: nem.svg
+
+- name: Stellar
+  price: "$0.467813"
+  p24h: 2
+  market-cap: "$8,358,735,080"
+  circulating-supply: 17,867,683,840 XLM
+  volume-24h: "$370,297,000"
+  cmgr: 13.12% / 41
+  inflation: 0.19%
+
+- name: NEO
+  price: "$118.61"
+  p24h: -9
+  market-cap: "$7,693,400,000"
+  circulating-supply: 65,000,000 NEO
+  volume-24h: "$318,308,000"
+  cmgr: 62.68% / 15
+  inflation: 0.00%
+
+- name: IOTA
+  price: "$2.34"
+  p24h: -14
+  market-cap: "$6,504,100,862"
+  circulating-supply: 2,779,530,240 MIOTA
+  volume-24h: "$103,132,000"
+  cmgr: 23.27% / 7
+  inflation: "-0.02%"
+
+- name: Dash
+  price: "$747.222"
+  p24h: -8
+  market-cap: "$5,881,413,815"
+  circulating-supply: 7,833,738 DASH
+  volume-24h: "$96,147,900"
+  cmgr: 19.19% / 47
+  inflation: 0.81%
+  icon: dash.svg
+
+- name: Monero
+  price: "$305.16"
+  p24h: -11
+  market-cap: "$4,778,157,533"
+  circulating-supply: 15,633,286 XMR
+  volume-24h: "$100,788,000"
+  cmgr: 11.88% / 44
+  inflation: 0.78%
+
+- name: TRON
+  price: "$0.067691"
+  p24h: -5
+  market-cap: "$4,450,560,896"
+  circulating-supply: 65,748,193,280 TRX
+  volume-24h: "$581,651,000"
+  cmgr: 142.69% / 4
+  inflation: 0.00%
+
+- name: Bitcoin Gold
+  price: "$181.39"
+  p24h: -7
+  market-cap: "$3,084,108,676"
+  circulating-supply: 16,779,700 BTG
+  volume-24h: "$199,652,000"
+  cmgr: "-25.44% / 3"
+  inflation: 0.34%
+
+- name: ICON
+  price: "$7.90"
+  p24h: -10
+  market-cap: "$3,002,355,531"
+  circulating-supply: 380,044,992 ICX
+  volume-24h: "$78,201,200"
+  cmgr: 179.33% / 3
+  inflation: 90.09%
+
+- name: Qtum
+  price: "$38.37"
+  p24h: -9
+  market-cap: "$2,832,729,404"
+  circulating-supply: 73,826,672 QTUM
+  volume-24h: "$593,524,000"
+  cmgr: 30.43% / 8
+  inflation: 0.11%
+
+- name: Ethereum Classic
+  price: "$28.023"
+  p24h: -6
+  market-cap: "$2,827,320,112"
+  circulating-supply: 99,308,752 ETC
+  volume-24h: "$303,356,000"
+  cmgr: 22.79% / 18
+  inflation: 0.74%
+
+- name: Lisk
+  price: "$20.48"
+  p24h: -6
+  market-cap: "$2,401,760,051"
+  circulating-supply: 117,273,440 LSK
+  volume-24h: "$44,483,500"
+  cmgr: 12.05% / 21
+  inflation: 0.86%
+
+- name: VeChain
+  price: "$8.33"
+  p24h: 9
+  market-cap: "$2,308,764,732"
+  circulating-supply: 277,162,624 VEN
+  volume-24h: "$348,907,000"
+  cmgr: 101.15% / 5
+  inflation: "-0.06%"
+
+- name: RaiBlocks
+  price: "$14.46"
+  p24h: -15
+  market-cap: "$1,926,770,258"
+  circulating-supply: 133,248,288 XRB
+  volume-24h: "$13,331,500"
+  cmgr: 112.15% / 10
+  inflation: 0.06%
+
+- name: Tether
+  price: "$1.0097"
+  p24h: -1
+  market-cap: "$1,618,090,823"
+  circulating-supply: 1,618,090,880 USDT
+  volume-24h: "$3,022,620,000"
+  cmgr: 0.03% / 33
+  inflation: 33.71%
+
+- name: OmiseGO
+  price: "$14.83"
+  p24h: -11
+  market-cap: "$1,532,679,131"
+  circulating-supply: 102,042,552 OMG
+  volume-24h: "$63,574,500"
+  cmgr: 50.49% / 6
+  inflation: "-0.04%"
+
+- name: Populous
+  price: "$41.22"
+  p24h: -3
+  market-cap: "$1,525,305,992"
+  circulating-supply: 37,004,028 PPT
+  volume-24h: "$2,271,650"
+  cmgr: 58.49% / 6
+  inflation: "-10.29%"
+
+- name: Zcash
+  price: "$431.43"
+  p24h: -10
+  market-cap: "$1,358,979,711"
+  circulating-supply: 3,114,069 ZEC
+  volume-24h: "$71,375,000"
+  cmgr: "-13.51% / 15"
+  inflation: 7.44%
+
+- name: Verge
+  price: "$0.089875"
+  p24h: -13
+  market-cap: "$1,303,358,298"
+  circulating-supply: 14,501,900,288 XVG
+  volume-24h: "$75,841,900"
+  cmgr: 27.95% / 39
+  inflation: 2.06%
+
+- name: Binance Coin
+  price: "$12.60"
+  p24h: -9
+  market-cap: "$1,247,576,400"
+  circulating-supply: 99,014,000 BNB
+  volume-24h: "$129,483,000"
+  cmgr: 122.80% / 6
+  inflation: 0.08%
+
+- name: Siacoin
+  price: "$0.037594"
+  p24h: -13
+  market-cap: "$1,180,306,719"
+  circulating-supply: 31,396,145,152 SC
+  volume-24h: "$58,783,600"
+  cmgr: 26.70% / 29
+  inflation: 0.00%
+
+- name: Stratis
+  price: "$11.50"
+  p24h: -13
+  market-cap: "$1,135,175,764"
+  circulating-supply: 98,710,936 STRAT
+  volume-24h: "$25,548,100"
+  cmgr: 49.79% / 17
+  inflation: "-0.02%"
+
+- name: Bytecoin
+  price: "$0.006127"
+  p24h: -8
+  market-cap: "$1,125,403,469"
+  circulating-supply: 183,679,369,216 BCN
+  volume-24h: "$7,904,870"
+  cmgr: 11.39% / 43
+  inflation: 0.23%
+
+- name: Steem
+  price: "$4.13"
+  p24h: -14
+  market-cap: "$1,022,039,920"
+  circulating-supply: 247,467,296 STEEM
+  volume-24h: "$29,580,000"
+  cmgr: 10.15% / 21
+  inflation: 0.68%
+
+- name: Ardor
+  price: "$0.995641"
+  p24h: -9
+  market-cap: "$994,644,856"
+  circulating-supply: 998,999,488 ARDR
+  volume-24h: "$143,752,000"
+  cmgr: 20.75% / 18
+  inflation: "-0.41%"
+
+- name: Status
+  price: "$0.264278"
+  p24h: -9
+  market-cap: "$917,172,514"
+  circulating-supply: 3,470,483,712 SNT
+  volume-24h: "$355,833,000"
+  cmgr: 24.53% / 7
+  inflation: 0.00%
+
+- name: Maker
+  price: "$1480.84"
+  p24h: -7
+  market-cap: "$915,496,751"
+  circulating-supply: 618,228 MKR
+  volume-24h: "$1,662,690"
+  cmgr: 42.77% / 12
+  inflation: "-"
+
+- name: Augur
+  price: "$81.55"
+  p24h: -5
+  market-cap: "$897,050,000"
+  circulating-supply: 11,000,000 REP
+  volume-24h: "$16,086,600"
+  cmgr: 16.36% / 27
+  inflation: 0.01%
+
+- name: BitShares
+  price: "$0.317687"
+  p24h: -9
+  market-cap: "$828,330,730"
+  circulating-supply: 2,607,379,968 BTS
+  volume-24h: "$43,185,600"
+  cmgr: 8.22% / 42
+  inflation: 0.06%
+
+- name: 0x
+  price: "$1.66"
+  p24h: -3
+  market-cap: "$827,949,569"
+  circulating-supply: 498,764,800 ZRX
+  volume-24h: "$20,493,000"
+  cmgr: 72.59% / 5
+  inflation: "-0.24%"
+
+- name: Waves
+  price: "$8.13"
+  p24h: -1
+  market-cap: "$813,000,000"
+  circulating-supply: 100,000,000 WAVES
+  volume-24h: "$26,239,600"
+  cmgr: 10.11% / 19
+  inflation: "-0.01%"
+
+- name: Dogecoin
+  price: "$0.00659"
+  p24h: -8
+  market-cap: "$743,890,685"
+  circulating-supply: 112,881,745,920 DOGE
+  volume-24h: "$20,613,400"
+  cmgr: 5.35% / 49
+  inflation: 0.36%
+
+- name: KuCoin Shares
+  price: "$7.91"
+  p24h: -17
+  market-cap: "$720,150,731"
+  circulating-supply: 91,043,072 KCS
+  volume-24h: "$5,481,780"
+  cmgr: 276.01% / 2
+  inflation: "-0.04%"
+
+- name: Electroneum
+  price: "$0.120304"
+  p24h: -7
+  market-cap: "$712,763,819"
+  circulating-supply: 5,924,689,408 ETN
+  volume-24h: "$5,103,980"
+  cmgr: 19.45% / 2
+  inflation: 18.19%
+
+- name: Walton
+  price: "$27.79"
+  p24h: 1
+  market-cap: "$691,920,366"
+  circulating-supply: 24,898,178 WTC
+  volume-24h: "$50,403,900"
+  cmgr: 92.30% / 5
+  inflation: 0.00%
+
+- name: Veritaseum
+  price: "$335.15"
+  p24h: -8
+  market-cap: "$682,581,571"
+  circulating-supply: 2,036,645 VERI
+  volume-24h: "$628,128"
+  cmgr: 33.82% / 7
+  inflation: 0.00%
+
+- name: Komodo
+  price: "$5.96"
+  p24h: -11
+  market-cap: "$614,151,644"
+  circulating-supply: 103,045,576 KMD
+  volume-24h: "$7,010,050"
+  cmgr: 45.00% / 11
+  inflation: "-1.09%"
+
+- name: Decred
+  price: "$91.29"
+  p24h: -8
+  market-cap: "$603,249,158"
+  circulating-supply: 6,608,053 DCR
+  volume-24h: "$1,304,410"
+  cmgr: 22.47% / 23
+  inflation: 3.04%
+
+- name: Dragonchain
+  price: "$2.39"
+  p24h: -11
+  market-cap: "$569,828,436"
+  circulating-supply: 238,421,936 DRGN
+  volume-24h: "$3,490,920"
+  cmgr: 926.29% / 1
+  inflation: 0.14%
+
+- name: Dentacoin
+  price: "$0.001735"
+  p24h: -5
+  market-cap: "$564,205,023"
+  circulating-supply: 325,190,221,824 DCN
+  volume-24h: "$1,082,850"
+  cmgr: 43.44% / 5
+  inflation: 0.05%
+
+- name: Loopring
+  price: "$0.965091"
+  p24h: -9
+  market-cap: "$541,577,621"
+  circulating-supply: 561,167,424 LRC
+  volume-24h: "$11,179,900"
+  cmgr: 55.67% / 5
+  inflation: 95.51%
+
+- name: Ark
+  price: "$5.36"
+  p24h: -11
+  market-cap: "$525,179,682"
+  circulating-supply: 97,981,280 ARK
+  volume-24h: "$7,183,610"
+  cmgr: 68.16% / 10
+  inflation: "-0.07%"
+
+- name: SALT
+  price: "$7.23"
+  p24h: -11
+  market-cap: "$514,095,078"
+  circulating-supply: 71,105,824 SALT
+  volume-24h: "$12,135,100"
+  cmgr: 4.35% / 4
+  inflation: 38.07%
+
+- name: QASH
+  price: "$1.46"
+  p24h: -9
+  market-cap: "$511,000,000"
+  circulating-supply: 350,000,000 QASH
+  volume-24h: "$19,206,800"
+  cmgr: 85.16% / 2
+  inflation: "-0.17%"
+
+- name: DigiByte
+  price: "$0.050116"
+  p24h: -11
+  market-cap: "$487,853,928"
+  circulating-supply: 9,734,494,208 DGB
+  volume-24h: "$11,389,900"
+  cmgr: 8.02% / 47
+  inflation: 1.48%
+
+- name: Basic Attention Token
+  price: "$0.487348"
+  p24h: -12
+  market-cap: "$487,348,000"
+  circulating-supply: 1,000,000,000 BAT
+  volume-24h: "$14,891,300"
+  cmgr: 19.38% / 7
+  inflation: 0.00%
+
+- name: PIVX
+  price: "$8.68"
+  p24h: 4
+  market-cap: "$480,968,834"
+  circulating-supply: 55,411,156 PIVX
+  volume-24h: "$11,144,700"
+  cmgr: 47.24% / 23
+  inflation: 0.42%
+
+- name: Golem
+  price: "$0.571295"
+  p24h: -9
+  market-cap: "$476,609,709"
+  circulating-supply: 834,262,016 GNT
+  volume-24h: "$10,420,800"
+  cmgr: 30.48% / 14
+  inflation: 0.10%
+
+- name: Hshare
+  price: "$10.82"
+  p24h: -9
+  market-cap: "$460,173,193"
+  circulating-supply: 42,529,872 HSR
+  volume-24h: "$100,098,000"
+  cmgr: "-9.81% / 5"
+  inflation: 0.30%
+
+- name: Byteball Bytes
+  price: "$700.65"
+  p24h: -1
+  market-cap: "$452,074,794"
+  circulating-supply: 645,222 GBYTE
+  volume-24h: "$1,461,460"
+  cmgr: 32.04% / 13
+  inflation: 0.00%
+
+- name: Kyber Network
+  price: "$3.32"
+  p24h: -9
+  market-cap: "$445,320,554"
+  circulating-supply: 134,132,696 KNC
+  volume-24h: "$39,139,800"
+  cmgr: 18.46% / 4
+  inflation: 0.08%
+
+- name: WAX
+  price: "$0.903366"
+  p24h: -8
+  market-cap: "$445,318,368"
+  circulating-supply: 492,954,528 WAX
+  volume-24h: "$8,945,930"
+  cmgr: "-77.44% / 1"
+  inflation: "-"
+
+- name: Ethos
+  price: "$5.84"
+  p24h: -8
+  market-cap: "$440,377,399"
+  circulating-supply: 75,407,088 ETHOS
+  volume-24h: "$3,608,200"
+  cmgr: 84.05% / 2
+  inflation: 0.31%
+
+- name: Gas
+  price: "$44.44"
+  p24h: -12
+  market-cap: "$425,068,288"
+  circulating-supply: 9,564,993 GAS
+  volume-24h: "$19,148,900"
+  cmgr: 74.36% / 6
+  inflation: 4.55%
+
+- name: RChain
+  price: "$1.71"
+  p24h: -6
+  market-cap: "$417,309,706"
+  circulating-supply: 244,040,768 RHOC
+  volume-24h: "$773,418"
+  cmgr: 117.91% / 3
+  inflation: 33.41%
+
+- name: FunFair
+  price: "$0.092324"
+  p24h: -8
+  market-cap: "$407,987,657"
+  circulating-supply: 4,419,085,824 FUN
+  volume-24h: "$12,285,800"
+  cmgr: 37.92% / 6
+  inflation: 3.98%
+
+- name: Cindicator
+  price: "$0.272886"
+  p24h: 32
+  market-cap: "$394,586,767"
+  circulating-supply: 1,445,976,576 CND
+  volume-24h: "$262,465,000"
+  cmgr: 120.78% / 3
+  inflation: 0.00%
+
+- name: SmartCash
+  price: "$0.634479"
+  p24h: -14
+  market-cap: "$393,086,475"
+  circulating-supply: 619,542,144 SMART
+  volume-24h: "$943,553"
+  cmgr: 88.55% / 6
+  inflation: 24.97%
+
+- name: Factom
+  price: "$44.59"
+  p24h: -6
+  market-cap: "$389,944,098"
+  circulating-supply: 8,745,102 FCT
+  volume-24h: "$10,792,400"
+  cmgr: 22.26% / 27
+  inflation: 0.00%
+
+- name: Nxt
+  price: "$0.381823"
+  p24h: 29
+  market-cap: "$381,441,154"
+  circulating-supply: 998,999,936 NXT
+  volume-24h: "$122,842,000"
+  cmgr: 6.32% / 49
+  inflation: "-0.20%"
+
+- name: Kin
+  price: "$0.000492"
+  p24h: 0
+  market-cap: "$372,000,000"
+  circulating-supply: 756,097,548,288 KIN
+  volume-24h: "$1,325,070"
+  cmgr: 49.42% / 4
+  inflation: 0.11%
+
+- name: Aion
+  price: "$4.75"
+  p24h: -13
+  market-cap: "$370,278,764"
+  circulating-supply: 77,953,424 AION
+  volume-24h: "$8,336,950"
+  cmgr: 108.52% / 3
+  inflation: 30.32%
+
+- name: Dent
+  price: "$0.033938"
+  p24h: -12
+  market-cap: "$360,243,757"
+  circulating-supply: 10,614,761,472 DENT
+  volume-24h: "$10,021,500"
+  cmgr: 129.26% / 5
+  inflation: 0.00%
+
+- name: MonaCoin
+  price: "$6.24"
+  p24h: -8
+  market-cap: "$355,053,036"
+  circulating-supply: 56,899,524 MONA
+  volume-24h: "$5,033,730"
+  cmgr: 10.28% / 46
+  inflation: 1.17%
+
+- name: DigixDAO
+  price: "$176.77"
+  p24h: -6
+  market-cap: "$353,540,000"
+  circulating-supply: 2,000,000 DGD
+  volume-24h: "$6,663,630"
+  cmgr: 12.74% / 8
+  inflation: 0.00%
+
+- name: Power Ledger
+  price: "$0.949943"
+  p24h: -9
+  market-cap: "$345,599,442"
+  circulating-supply: 363,810,720 POWR
+  volume-24h: "$27,744,500"
+  cmgr: 337.83% / 2
+  inflation: 1.12%
+
+- name: Aeternity
+  price: "$1.48"
+  p24h: -2
+  market-cap: "$344,870,298"
+  circulating-supply: 233,020,480 AE
+  volume-24h: "$2,399,090"
+  cmgr: 11.87% / 7
+  inflation: "-0.13%"
+
+- name: aelf
+  price: "$1.37"
+  p24h: -10
+  market-cap: "$342,500,000"
+  circulating-supply: 250,000,000 ELF
+  volume-24h: "$91,334,500"
+  cmgr: 43.85% / 1
+  inflation: "-"
+
+- name: Bytom
+  price: "$0.340729"
+  p24h: -4
+  market-cap: "$336,299,523"
+  circulating-supply: 987,000,000 BTM
+  volume-24h: "$20,267,400"
+  cmgr: 26.63% / 5
+  inflation: 0.00%
+
+- name: ZClassic
+  price: "$106.69"
+  p24h: -19
+  market-cap: "$336,029,543"
+  circulating-supply: 3,149,588 ZCL
+  volume-24h: "$29,954,800"
+  cmgr: 25.48% / 14
+  inflation: 73.30%
+
+- name: Nebulas
+  price: "$9.32"
+  p24h: -7
+  market-cap: "$330,860,000"
+  circulating-supply: 35,500,000 NAS
+  volume-24h: "$22,865,400"
+  cmgr: 17.66% / 5
+  inflation: "-"
+
+- name: MaidSafeCoin
+  price: "$0.730459"
+  p24h: 8
+  market-cap: "$330,570,982"
+  circulating-supply: 452,552,416 MAID
+  volume-24h: "$11,475,700"
+  cmgr: 8.94% / 44
+  inflation: 0.00%
+
+- name: Syscoin
+  price: "$0.613294"
+  p24h: -3
+  market-cap: "$325,307,399"
+  circulating-supply: 530,426,528 SYS
+  volume-24h: "$29,120,200"
+  cmgr: 15.10% / 41
+  inflation: 0.13%
+
+- name: ReddCoin
+  price: "$0.010511"
+  p24h: -11
+  market-cap: "$302,001,007"
+  circulating-supply: 28,731,899,904 RDD
+  volume-24h: "$5,219,450"
+  cmgr: 13.19% / 47
+  inflation: 0.09%
+
+- name: Nexus
+  price: "$5.47"
+  p24h: -6
+  market-cap: "$301,758,337"
+  circulating-supply: 55,166,056 NXS
+  volume-24h: "$2,823,430"
+  cmgr: 22.15% / 36
+  inflation: 1.13%
+
+- name: SIRIN LABS Token
+  price: "$3.02"
+  p24h: 23
+  market-cap: "$298,797,166"
+  circulating-supply: 98,939,456 SRN
+  volume-24h: "$15,880,000"
+  cmgr: 229.99% / 1
+  inflation: "-"
+
+- name: GXShares
+  price: "$4.92"
+  p24h: 0
+  market-cap: "$295,200,000"
+  circulating-supply: 60,000,000 GXS
+  volume-24h: "$9,631,300"
+  cmgr: "-2.54% / 7"
+  inflation: 48.19%
+
+- name: Enigma
+  price: "$3.91"
+  p24h: -11
+  market-cap: "$292,609,428"
+  circulating-supply: 74,836,168 ENG
+  volume-24h: "$7,421,050"
+  cmgr: 92.34% / 3
+  inflation: 0.41%
+
+- name: Request Network
+  price: "$0.455615"
+  p24h: -8
+  market-cap: "$292,069,688"
+  circulating-supply: 641,044,928 REQ
+  volume-24h: "$13,739,700"
+  cmgr: 104.63% / 3
+  inflation: 0.05%
+
+- name: Cryptonex
+  price: "$6.26"
+  p24h: 7
+  market-cap: "$282,187,766"
+  circulating-supply: 45,077,920 CNX
+  volume-24h: "$293,944"
+  cmgr: 30.18% / 3
+  inflation: 0.11%
+
+- name: Emercoin
+  price: "$6.72"
+  p24h: -10
+  market-cap: "$276,999,596"
+  circulating-supply: 41,220,176 EMC
+  volume-24h: "$1,951,950"
+  cmgr: 23.20% / 41
+  inflation: 0.14%
+
+- name: ChainLink
+  price: "$0.790746"
+  p24h: -10
+  market-cap: "$276,761,100"
+  circulating-supply: 350,000,000 LINK
+  volume-24h: "$11,327,700"
+  cmgr: 54.30% / 4
+  inflation: "-0.36%"
+
+- name: Neblio
+  price: "$21.57"
+  p24h: -13
+  market-cap: "$274,933,398"
+  circulating-supply: 12,746,101 NEBL
+  volume-24h: "$7,116,500"
+  cmgr: 153.01% / 4
+  inflation: 0.66%
+
+- name: Bancor
+  price: "$6.59"
+  p24h: -7
+  market-cap: "$268,693,219"
+  circulating-supply: 40,772,872 BNT
+  volume-24h: "$8,478,540"
+  cmgr: 6.69% / 7
+  inflation: "-0.01%"
+
+- name: ZCoin
+  price: "$67.90"
+  p24h: -12
+  market-cap: "$267,385,718"
+  circulating-supply: 3,937,934 XZC
+  volume-24h: "$3,653,910"
+  cmgr: 42.92% / 15
+  inflation: 5.28%
+
+- name: Substratum
+  price: "$1.17"
+  p24h: -16
+  market-cap: "$264,526,995"
+  circulating-supply: 226,091,456 SUB
+  volume-24h: "$12,041,500"
+  cmgr: 131.18% / 4
+  inflation: 0.14%
+
+- name: Experience Points
+  price: "$0.00127"
+  p24h: -11
+  market-cap: "$268,849,841"
+  circulating-supply: 211,692,781,568 XP
+  volume-24h: "$1,528,840"
+  cmgr: 160.93% / 1
+  inflation: 9.61%
+
+- name: MediBloc
+  price: "$0.088088"
+  p24h: -13
+  market-cap: "$261,302,842"
+  circulating-supply: 2,966,384,128 MED
+  volume-24h: "$6,968,920"
+  cmgr: 390.11% / 1
+  inflation: "-"
+
+- name: Quantstamp
+  price: "$0.412894"
+  p24h: -6
+  market-cap: "$254,885,317"
+  circulating-supply: 617,314,176 QSP
+  volume-24h: "$15,626,100"
+  cmgr: 159.68% / 2
+  inflation: 0.00%
+
+- name: Bitcore
+  price: "$22.43"
+  p24h: -17
+  market-cap: "$244,287,081"
+  circulating-supply: 10,891,087 BTX
+  volume-24h: "$3,291,470"
+  cmgr: 16.18% / 9
+  inflation: 444.11%
+
+- name: TenX
+  price: "$2.23"
+  p24h: -6
+  market-cap: "$233,394,721"
+  circulating-supply: 104,661,312 PAY
+  volume-24h: "$11,627,300"
+  cmgr: 17.68% / 6
+  inflation: 0.05%
+
+- name: XPlay
+  price: "$0.231756"
+  p24h: 0
+  market-cap: "$231,756,000"
+  circulating-supply: 1,000,000,000 XPA
+  volume-24h: "$143,905"
+  cmgr: 106.90% / 4
+  inflation: 0.00%
+
+- name: Iconomi
+  price: "$2.26"
+  p24h: -11
+  market-cap: "$225,521,589"
+  circulating-supply: 99,788,312 ICN
+  volume-24h: "$3,993,010"
+  cmgr: "-3.30% / 7"
+  inflation: "-0.19%"
--- a/src/_data/errors.yml
+++ b/src/_data/errors.yml
@@ -0,0 +1,23 @@
+error-400:
+  name: 400
+  description: We are sorry but your request contains bad syntax and cannot be fulfilled
+
+error-401:
+  name: 401
+  description: We are sorry but you are not authorized to access this page
+
+error-403:
+  name: 403
+  description: We are sorry but you do not have permission to access this page
+
+error-404:
+  name: 404
+  description: We are sorry but our service is currently not available
+
+error-500:
+  name: 500
+  description: We are sorry but your request contains bad syntax and cannot be fulfilled
+
+error-503:
+  name: 503
+  description: We are sorry but our service is currently not available
--- a/src/_data/icons-fa.yml
+++ b/src/_data/icons-fa.yml
@@ -0,0 +1,786 @@
+- fa-500px
+- fa-address-book
+- fa-address-book-o
+- fa-address-card
+- fa-address-card-o
+- fa-adjust
+- fa-adn
+- fa-align-center
+- fa-align-justify
+- fa-align-left
+- fa-align-right
+- fa-amazon
+- fa-ambulance
+- fa-american-sign-language-interpreting
+- fa-anchor
+- fa-android
+- fa-angellist
+- fa-angle-double-down
+- fa-angle-double-left
+- fa-angle-double-right
+- fa-angle-double-up
+- fa-angle-down
+- fa-angle-left
+- fa-angle-right
+- fa-angle-up
+- fa-apple
+- fa-archive
+- fa-area-chart
+- fa-arrow-circle-down
+- fa-arrow-circle-left
+- fa-arrow-circle-o-down
+- fa-arrow-circle-o-left
+- fa-arrow-circle-o-right
+- fa-arrow-circle-o-up
+- fa-arrow-circle-right
+- fa-arrow-circle-up
+- fa-arrow-down
+- fa-arrow-left
+- fa-arrow-right
+- fa-arrow-up
+- fa-arrows
+- fa-arrows-alt
+- fa-arrows-h
+- fa-arrows-v
+- fa-asl-interpreting
+- fa-assistive-listening-systems
+- fa-asterisk
+- fa-at
+- fa-audio-description
+- fa-automobile
+- fa-backward
+- fa-balance-scale
+- fa-ban
+- fa-bandcamp
+- fa-bank
+- fa-bar-chart
+- fa-bar-chart-o
+- fa-barcode
+- fa-bars
+- fa-bath
+- fa-bathtub
+- fa-battery
+- fa-battery-0
+- fa-battery-1
+- fa-battery-2
+- fa-battery-3
+- fa-battery-4
+- fa-battery-empty
+- fa-battery-full
+- fa-battery-half
+- fa-battery-quarter
+- fa-battery-three-quarters
+- fa-bed
+- fa-beer
+- fa-behance
+- fa-behance-square
+- fa-bell
+- fa-bell-o
+- fa-bell-slash
+- fa-bell-slash-o
+- fa-bicycle
+- fa-binoculars
+- fa-birthday-cake
+- fa-bitbucket
+- fa-bitbucket-square
+- fa-bitcoin
+- fa-black-tie
+- fa-blind
+- fa-bluetooth
+- fa-bluetooth-b
+- fa-bold
+- fa-bolt
+- fa-bomb
+- fa-book
+- fa-bookmark
+- fa-bookmark-o
+- fa-braille
+- fa-briefcase
+- fa-btc
+- fa-bug
+- fa-building
+- fa-building-o
+- fa-bullhorn
+- fa-bullseye
+- fa-bus
+- fa-buysellads
+- fa-cab
+- fa-calculator
+- fa-calendar
+- fa-calendar-check-o
+- fa-calendar-minus-o
+- fa-calendar-o
+- fa-calendar-plus-o
+- fa-calendar-times-o
+- fa-camera
+- fa-camera-retro
+- fa-car
+- fa-caret-down
+- fa-caret-left
+- fa-caret-right
+- fa-caret-square-o-down
+- fa-caret-square-o-left
+- fa-caret-square-o-right
+- fa-caret-square-o-up
+- fa-caret-up
+- fa-cart-arrow-down
+- fa-cart-plus
+- fa-cc
+- fa-cc-amex
+- fa-cc-diners-club
+- fa-cc-discover
+- fa-cc-jcb
+- fa-cc-mastercard
+- fa-cc-paypal
+- fa-cc-stripe
+- fa-cc-visa
+- fa-certificate
+- fa-chain
+- fa-chain-broken
+- fa-check
+- fa-check-circle
+- fa-check-circle-o
+- fa-check-square
+- fa-check-square-o
+- fa-chevron-circle-down
+- fa-chevron-circle-left
+- fa-chevron-circle-right
+- fa-chevron-circle-up
+- fa-chevron-down
+- fa-chevron-left
+- fa-chevron-right
+- fa-chevron-up
+- fa-child
+- fa-chrome
+- fa-circle
+- fa-circle-o
+- fa-circle-o-notch
+- fa-circle-thin
+- fa-clipboard
+- fa-clock-o
+- fa-clone
+- fa-close
+- fa-cloud
+- fa-cloud-download
+- fa-cloud-upload
+- fa-cny
+- fa-code
+- fa-code-fork
+- fa-codepen
+- fa-codiepie
+- fa-coffee
+- fa-cog
+- fa-cogs
+- fa-columns
+- fa-comment
+- fa-comment-o
+- fa-commenting
+- fa-commenting-o
+- fa-comments
+- fa-comments-o
+- fa-compass
+- fa-compress
+- fa-connectdevelop
+- fa-contao
+- fa-copy
+- fa-copyright
+- fa-creative-commons
+- fa-credit-card
+- fa-credit-card-alt
+- fa-crop
+- fa-crosshairs
+- fa-css3
+- fa-cube
+- fa-cubes
+- fa-cut
+- fa-cutlery
+- fa-dashboard
+- fa-dashcube
+- fa-database
+- fa-deaf
+- fa-deafness
+- fa-dedent
+- fa-delicious
+- fa-desktop
+- fa-deviantart
+- fa-diamond
+- fa-digg
+- fa-dollar
+- fa-dot-circle-o
+- fa-download
+- fa-dribbble
+- fa-drivers-license
+- fa-drivers-license-o
+- fa-dropbox
+- fa-drupal
+- fa-edge
+- fa-edit
+- fa-eercast
+- fa-eject
+- fa-ellipsis-h
+- fa-ellipsis-v
+- fa-empire
+- fa-envelope
+- fa-envelope-o
+- fa-envelope-open
+- fa-envelope-open-o
+- fa-envelope-square
+- fa-envira
+- fa-eraser
+- fa-etsy
+- fa-eur
+- fa-euro
+- fa-exchange
+- fa-exclamation
+- fa-exclamation-circle
+- fa-exclamation-triangle
+- fa-expand
+- fa-expeditedssl
+- fa-external-link
+- fa-external-link-square
+- fa-eye
+- fa-eye-slash
+- fa-eyedropper
+- fa-fa
+- fa-facebook
+- fa-facebook-f
+- fa-facebook-official
+- fa-facebook-square
+- fa-fast-backward
+- fa-fast-forward
+- fa-fax
+- fa-feed
+- fa-female
+- fa-fighter-jet
+- fa-file
+- fa-file-archive-o
+- fa-file-audio-o
+- fa-file-code-o
+- fa-file-excel-o
+- fa-file-image-o
+- fa-file-movie-o
+- fa-file-o
+- fa-file-pdf-o
+- fa-file-photo-o
+- fa-file-picture-o
+- fa-file-powerpoint-o
+- fa-file-sound-o
+- fa-file-text
+- fa-file-text-o
+- fa-file-video-o
+- fa-file-word-o
+- fa-file-zip-o
+- fa-files-o
+- fa-film
+- fa-filter
+- fa-fire
+- fa-fire-extinguisher
+- fa-firefox
+- fa-first-order
+- fa-flag
+- fa-flag-checkered
+- fa-flag-o
+- fa-flash
+- fa-flask
+- fa-flickr
+- fa-floppy-o
+- fa-folder
+- fa-folder-o
+- fa-folder-open
+- fa-folder-open-o
+- fa-font
+- fa-font-awesome
+- fa-fonticons
+- fa-fort-awesome
+- fa-forumbee
+- fa-forward
+- fa-foursquare
+- fa-free-code-camp
+- fa-frown-o
+- fa-futbol-o
+- fa-gamepad
+- fa-gavel
+- fa-gbp
+- fa-ge
+- fa-gear
+- fa-gears
+- fa-genderless
+- fa-get-pocket
+- fa-gg
+- fa-gg-circle
+- fa-gift
+- fa-git
+- fa-git-square
+- fa-github
+- fa-github-alt
+- fa-github-square
+- fa-gitlab
+- fa-gittip
+- fa-glass
+- fa-glide
+- fa-glide-g
+- fa-globe
+- fa-google
+- fa-google-plus
+- fa-google-plus-circle
+- fa-google-plus-official
+- fa-google-plus-square
+- fa-google-wallet
+- fa-graduation-cap
+- fa-gratipay
+- fa-grav
+- fa-group
+- fa-h-square
+- fa-hacker-news
+- fa-hand-grab-o
+- fa-hand-lizard-o
+- fa-hand-o-down
+- fa-hand-o-left
+- fa-hand-o-right
+- fa-hand-o-up
+- fa-hand-paper-o
+- fa-hand-peace-o
+- fa-hand-pointer-o
+- fa-hand-rock-o
+- fa-hand-scissors-o
+- fa-hand-spock-o
+- fa-hand-stop-o
+- fa-handshake-o
+- fa-hard-of-hearing
+- fa-hashtag
+- fa-hdd-o
+- fa-header
+- fa-headphones
+- fa-heart
+- fa-heart-o
+- fa-heartbeat
+- fa-history
+- fa-home
+- fa-hospital-o
+- fa-hotel
+- fa-hourglass
+- fa-hourglass-1
+- fa-hourglass-2
+- fa-hourglass-3
+- fa-hourglass-end
+- fa-hourglass-half
+- fa-hourglass-o
+- fa-hourglass-start
+- fa-houzz
+- fa-html5
+- fa-i-cursor
+- fa-id-badge
+- fa-id-card
+- fa-id-card-o
+- fa-ils
+- fa-image
+- fa-imdb
+- fa-inbox
+- fa-indent
+- fa-industry
+- fa-info
+- fa-info-circle
+- fa-inr
+- fa-instagram
+- fa-institution
+- fa-internet-explorer
+- fa-intersex
+- fa-ioxhost
+- fa-italic
+- fa-joomla
+- fa-jpy
+- fa-jsfiddle
+- fa-key
+- fa-keyboard-o
+- fa-krw
+- fa-language
+- fa-laptop
+- fa-lastfm
+- fa-lastfm-square
+- fa-leaf
+- fa-leanpub
+- fa-legal
+- fa-lemon-o
+- fa-level-down
+- fa-level-up
+- fa-life-bouy
+- fa-life-buoy
+- fa-life-ring
+- fa-life-saver
+- fa-lightbulb-o
+- fa-line-chart
+- fa-link
+- fa-linkedin
+- fa-linkedin-square
+- fa-linode
+- fa-linux
+- fa-list
+- fa-list-alt
+- fa-list-ol
+- fa-list-ul
+- fa-location-arrow
+- fa-lock
+- fa-long-arrow-down
+- fa-long-arrow-left
+- fa-long-arrow-right
+- fa-long-arrow-up
+- fa-low-vision
+- fa-magic
+- fa-magnet
+- fa-mail-forward
+- fa-mail-reply
+- fa-mail-reply-all
+- fa-male
+- fa-map
+- fa-map-marker
+- fa-map-o
+- fa-map-pin
+- fa-map-signs
+- fa-mars
+- fa-mars-double
+- fa-mars-stroke
+- fa-mars-stroke-h
+- fa-mars-stroke-v
+- fa-maxcdn
+- fa-meanpath
+- fa-medium
+- fa-medkit
+- fa-meetup
+- fa-meh-o
+- fa-mercury
+- fa-microchip
+- fa-microphone
+- fa-microphone-slash
+- fa-minus
+- fa-minus-circle
+- fa-minus-square
+- fa-minus-square-o
+- fa-mixcloud
+- fa-mobile
+- fa-mobile-phone
+- fa-modx
+- fa-money
+- fa-moon-o
+- fa-mortar-board
+- fa-motorcycle
+- fa-mouse-pointer
+- fa-music
+- fa-navicon
+- fa-neuter
+- fa-newspaper-o
+- fa-object-group
+- fa-object-ungroup
+- fa-odnoklassniki
+- fa-odnoklassniki-square
+- fa-opencart
+- fa-openid
+- fa-opera
+- fa-optin-monster
+- fa-outdent
+- fa-pagelines
+- fa-paint-brush
+- fa-paper-plane
+- fa-paper-plane-o
+- fa-paperclip
+- fa-paragraph
+- fa-paste
+- fa-pause
+- fa-pause-circle
+- fa-pause-circle-o
+- fa-paw
+- fa-paypal
+- fa-pencil
+- fa-pencil-square
+- fa-pencil-square-o
+- fa-percent
+- fa-phone
+- fa-phone-square
+- fa-photo
+- fa-picture-o
+- fa-pie-chart
+- fa-pied-piper
+- fa-pied-piper-alt
+- fa-pied-piper-pp
+- fa-pinterest
+- fa-pinterest-p
+- fa-pinterest-square
+- fa-plane
+- fa-play
+- fa-play-circle
+- fa-play-circle-o
+- fa-plug
+- fa-plus
+- fa-plus-circle
+- fa-plus-square
+- fa-plus-square-o
+- fa-podcast
+- fa-power-off
+- fa-print
+- fa-product-hunt
+- fa-puzzle-piece
+- fa-qq
+- fa-qrcode
+- fa-question
+- fa-question-circle
+- fa-question-circle-o
+- fa-quora
+- fa-quote-left
+- fa-quote-right
+- fa-ra
+- fa-random
+- fa-ravelry
+- fa-rebel
+- fa-recycle
+- fa-reddit
+- fa-reddit-alien
+- fa-reddit-square
+- fa-refresh
+- fa-registered
+- fa-remove
+- fa-renren
+- fa-reorder
+- fa-repeat
+- fa-reply
+- fa-reply-all
+- fa-resistance
+- fa-retweet
+- fa-rmb
+- fa-road
+- fa-rocket
+- fa-rotate-left
+- fa-rotate-right
+- fa-rouble
+- fa-rss
+- fa-rss-square
+- fa-rub
+- fa-ruble
+- fa-rupee
+- fa-s15
+- fa-safari
+- fa-save
+- fa-scissors
+- fa-scribd
+- fa-search
+- fa-search-minus
+- fa-search-plus
+- fa-sellsy
+- fa-send
+- fa-send-o
+- fa-server
+- fa-share
+- fa-share-alt
+- fa-share-alt-square
+- fa-share-square
+- fa-share-square-o
+- fa-shekel
+- fa-sheqel
+- fa-shield
+- fa-ship
+- fa-shirtsinbulk
+- fa-shopping-bag
+- fa-shopping-basket
+- fa-shopping-cart
+- fa-shower
+- fa-sign-in
+- fa-sign-language
+- fa-sign-out
+- fa-signal
+- fa-signing
+- fa-simplybuilt
+- fa-sitemap
+- fa-skyatlas
+- fa-skype
+- fa-slack
+- fa-sliders
+- fa-slideshare
+- fa-smile-o
+- fa-snapchat
+- fa-snapchat-ghost
+- fa-snapchat-square
+- fa-snowflake-o
+- fa-soccer-ball-o
+- fa-sort
+- fa-sort-alpha-asc
+- fa-sort-alpha-desc
+- fa-sort-amount-asc
+- fa-sort-amount-desc
+- fa-sort-asc
+- fa-sort-desc
+- fa-sort-down
+- fa-sort-numeric-asc
+- fa-sort-numeric-desc
+- fa-sort-up
+- fa-soundcloud
+- fa-space-shuttle
+- fa-spinner
+- fa-spoon
+- fa-spotify
+- fa-square
+- fa-square-o
+- fa-stack-exchange
+- fa-stack-overflow
+- fa-star
+- fa-star-half
+- fa-star-half-empty
+- fa-star-half-full
+- fa-star-half-o
+- fa-star-o
+- fa-steam
+- fa-steam-square
+- fa-step-backward
+- fa-step-forward
+- fa-stethoscope
+- fa-sticky-note
+- fa-sticky-note-o
+- fa-stop
+- fa-stop-circle
+- fa-stop-circle-o
+- fa-street-view
+- fa-strikethrough
+- fa-stumbleupon
+- fa-stumbleupon-circle
+- fa-subscript
+- fa-subway
+- fa-suitcase
+- fa-sun-o
+- fa-superpowers
+- fa-superscript
+- fa-support
+- fa-table
+- fa-tablet
+- fa-tachometer
+- fa-tag
+- fa-tags
+- fa-tasks
+- fa-taxi
+- fa-telegram
+- fa-television
+- fa-tencent-weibo
+- fa-terminal
+- fa-text-height
+- fa-text-width
+- fa-th
+- fa-th-large
+- fa-th-list
+- fa-themeisle
+- fa-thermometer
+- fa-thermometer-0
+- fa-thermometer-1
+- fa-thermometer-2
+- fa-thermometer-3
+- fa-thermometer-4
+- fa-thermometer-empty
+- fa-thermometer-full
+- fa-thermometer-half
+- fa-thermometer-quarter
+- fa-thermometer-three-quarters
+- fa-thumb-tack
+- fa-thumbs-down
+- fa-thumbs-o-down
+- fa-thumbs-o-up
+- fa-thumbs-up
+- fa-ticket
+- fa-times
+- fa-times-circle
+- fa-times-circle-o
+- fa-times-rectangle
+- fa-times-rectangle-o
+- fa-tint
+- fa-toggle-down
+- fa-toggle-left
+- fa-toggle-off
+- fa-toggle-on
+- fa-toggle-right
+- fa-toggle-up
+- fa-trademark
+- fa-train
+- fa-transgender
+- fa-transgender-alt
+- fa-trash
+- fa-trash-o
+- fa-tree
+- fa-trello
+- fa-tripadvisor
+- fa-trophy
+- fa-truck
+- fa-try
+- fa-tty
+- fa-tumblr
+- fa-tumblr-square
+- fa-turkish-lira
+- fa-tv
+- fa-twitch
+- fa-twitter
+- fa-twitter-square
+- fa-umbrella
+- fa-underline
+- fa-undo
+- fa-universal-access
+- fa-university
+- fa-unlink
+- fa-unlock
+- fa-unlock-alt
+- fa-unsorted
+- fa-upload
+- fa-usb
+- fa-usd
+- fa-user
+- fa-user-circle
+- fa-user-circle-o
+- fa-user-md
+- fa-user-o
+- fa-user-plus
+- fa-user-secret
+- fa-user-times
+- fa-users
+- fa-vcard
+- fa-vcard-o
+- fa-venus
+- fa-venus-double
+- fa-venus-mars
+- fa-viacoin
+- fa-viadeo
+- fa-viadeo-square
+- fa-video-camera
+- fa-vimeo
+- fa-vimeo-square
+- fa-vine
+- fa-vk
+- fa-volume-control-phone
+- fa-volume-down
+- fa-volume-off
+- fa-volume-up
+- fa-warning
+- fa-wechat
+- fa-weibo
+- fa-weixin
+- fa-whatsapp
+- fa-wheelchair
+- fa-wheelchair-alt
+- fa-wifi
+- fa-wikipedia-w
+- fa-window-close
+- fa-window-close-o
+- fa-window-maximize
+- fa-window-minimize
+- fa-window-restore
+- fa-windows
+- fa-won
+- fa-wordpress
+- fa-wpbeginner
+- fa-wpexplorer
+- fa-wpforms
+- fa-wrench
+- fa-xing
+- fa-xing-square
+- fa-y-combinator
+- fa-y-combinator-square
+- fa-yahoo
+- fa-yc
+- fa-yc-square
+- fa-yelp
+- fa-yen
+- fa-yoast
+- fa-youtube
+- fa-youtube-play
+- fa-youtube-square
--- a/src/_data/icons-fe.yml
+++ b/src/_data/icons-fe.yml
@@ -0,0 +1,263 @@
+- fe-activity
+- fe-airplay
+- fe-alert-circle
+- fe-alert-octagon
+- fe-alert-triangle
+- fe-align-center
+- fe-align-justify
+- fe-align-left
+- fe-align-right
+- fe-anchor
+- fe-aperture
+- fe-arrow-down
+- fe-arrow-down-circle
+- fe-arrow-down-left
+- fe-arrow-down-right
+- fe-arrow-left
+- fe-arrow-left-circle
+- fe-arrow-right
+- fe-arrow-right-circle
+- fe-arrow-up
+- fe-arrow-up-circle
+- fe-arrow-up-left
+- fe-arrow-up-right
+- fe-at-sign
+- fe-award
+- fe-bar-chart
+- fe-bar-chart-2
+- fe-battery
+- fe-battery-charging
+- fe-bell
+- fe-bell-off
+- fe-bluetooth
+- fe-bold
+- fe-book
+- fe-book-open
+- fe-bookmark
+- fe-box
+- fe-briefcase
+- fe-calendar
+- fe-camera
+- fe-camera-off
+- fe-cast
+- fe-check
+- fe-check-circle
+- fe-check-square
+- fe-chevron-down
+- fe-chevron-left
+- fe-chevron-right
+- fe-chevron-up
+- fe-chevrons-down
+- fe-chevrons-left
+- fe-chevrons-right
+- fe-chevrons-up
+- fe-chrome
+- fe-circle
+- fe-clipboard
+- fe-clock
+- fe-cloud
+- fe-cloud-drizzle
+- fe-cloud-lightning
+- fe-cloud-off
+- fe-cloud-rain
+- fe-cloud-snow
+- fe-code
+- fe-codepen
+- fe-command
+- fe-compass
+- fe-copy
+- fe-corner-down-left
+- fe-corner-down-right
+- fe-corner-left-down
+- fe-corner-left-up
+- fe-corner-right-down
+- fe-corner-right-up
+- fe-corner-up-left
+- fe-corner-up-right
+- fe-cpu
+- fe-credit-card
+- fe-crop
+- fe-crosshair
+- fe-database
+- fe-delete
+- fe-disc
+- fe-dollar-sign
+- fe-download
+- fe-download-cloud
+- fe-droplet
+- fe-edit
+- fe-edit-2
+- fe-edit-3
+- fe-external-link
+- fe-eye
+- fe-eye-off
+- fe-facebook
+- fe-fast-forward
+- fe-feather
+- fe-file
+- fe-file-minus
+- fe-file-plus
+- fe-file-text
+- fe-film
+- fe-filter
+- fe-flag
+- fe-folder
+- fe-folder-minus
+- fe-folder-plus
+- fe-git-branch
+- fe-git-commit
+- fe-git-merge
+- fe-git-pull-request
+- fe-github
+- fe-gitlab
+- fe-globe
+- fe-grid
+- fe-hard-drive
+- fe-hash
+- fe-headphones
+- fe-heart
+- fe-help-circle
+- fe-home
+- fe-image
+- fe-inbox
+- fe-info
+- fe-instagram
+- fe-italic
+- fe-layers
+- fe-layout
+- fe-life-buoy
+- fe-link
+- fe-link-2
+- fe-linkedin
+- fe-list
+- fe-loader
+- fe-lock
+- fe-log-in
+- fe-log-out
+- fe-mail
+- fe-map
+- fe-map-pin
+- fe-maximize
+- fe-maximize-2
+- fe-menu
+- fe-message-circle
+- fe-message-square
+- fe-mic
+- fe-mic-off
+- fe-minimize
+- fe-minimize-2
+- fe-minus
+- fe-minus-circle
+- fe-minus-square
+- fe-monitor
+- fe-moon
+- fe-more-horizontal
+- fe-more-vertical
+- fe-move
+- fe-music
+- fe-navigation
+- fe-navigation-2
+- fe-octagon
+- fe-package
+- fe-paperclip
+- fe-pause
+- fe-pause-circle
+- fe-percent
+- fe-phone
+- fe-phone-call
+- fe-phone-forwarded
+- fe-phone-incoming
+- fe-phone-missed
+- fe-phone-off
+- fe-phone-outgoing
+- fe-pie-chart
+- fe-play
+- fe-play-circle
+- fe-plus
+- fe-plus-circle
+- fe-plus-square
+- fe-pocket
+- fe-power
+- fe-printer
+- fe-radio
+- fe-refresh-ccw
+- fe-refresh-cw
+- fe-repeat
+- fe-rewind
+- fe-rotate-ccw
+- fe-rotate-cw
+- fe-rss
+- fe-save
+- fe-scissors
+- fe-search
+- fe-send
+- fe-server
+- fe-settings
+- fe-share
+- fe-share-2
+- fe-shield
+- fe-shield-off
+- fe-shopping-bag
+- fe-shopping-cart
+- fe-shuffle
+- fe-sidebar
+- fe-skip-back
+- fe-skip-forward
+- fe-slack
+- fe-slash
+- fe-sliders
+- fe-smartphone
+- fe-speaker
+- fe-square
+- fe-star
+- fe-stop-circle
+- fe-sun
+- fe-sunrise
+- fe-sunset
+- fe-tablet
+- fe-tag
+- fe-target
+- fe-terminal
+- fe-thermometer
+- fe-thumbs-down
+- fe-thumbs-up
+- fe-toggle-left
+- fe-toggle-right
+- fe-trash
+- fe-trash-2
+- fe-trending-down
+- fe-trending-up
+- fe-triangle
+- fe-truck
+- fe-tv
+- fe-twitter
+- fe-type
+- fe-umbrella
+- fe-underline
+- fe-unlock
+- fe-upload
+- fe-upload-cloud
+- fe-user
+- fe-user-check
+- fe-user-minus
+- fe-user-plus
+- fe-user-x
+- fe-users
+- fe-video
+- fe-video-off
+- fe-voicemail
+- fe-volume
+- fe-volume-1
+- fe-volume-2
+- fe-volume-x
+- fe-watch
+- fe-wifi
+- fe-wifi-off
+- fe-wind
+- fe-x
+- fe-x-circle
+- fe-x-square
+- fe-zap
+- fe-zap-off
+- fe-zoom-in
+- fe-zoom-out
--- a/src/_data/icons-flags.yml
+++ b/src/_data/icons-flags.yml
@@ -0,0 +1,255 @@
+- 'flag-ad'
+- 'flag-ae'
+- 'flag-af'
+- 'flag-ag'
+- 'flag-ai'
+- 'flag-al'
+- 'flag-am'
+- 'flag-ao'
+- 'flag-aq'
+- 'flag-ar'
+- 'flag-as'
+- 'flag-at'
+- 'flag-au'
+- 'flag-aw'
+- 'flag-ax'
+- 'flag-az'
+- 'flag-ba'
+- 'flag-bb'
+- 'flag-bd'
+- 'flag-be'
+- 'flag-bf'
+- 'flag-bg'
+- 'flag-bh'
+- 'flag-bi'
+- 'flag-bj'
+- 'flag-bl'
+- 'flag-bm'
+- 'flag-bn'
+- 'flag-bo'
+- 'flag-bq'
+- 'flag-br'
+- 'flag-bs'
+- 'flag-bt'
+- 'flag-bv'
+- 'flag-bw'
+- 'flag-by'
+- 'flag-bz'
+- 'flag-ca'
+- 'flag-cc'
+- 'flag-cd'
+- 'flag-cf'
+- 'flag-cg'
+- 'flag-ch'
+- 'flag-ci'
+- 'flag-ck'
+- 'flag-cl'
+- 'flag-cm'
+- 'flag-cn'
+- 'flag-co'
+- 'flag-cr'
+- 'flag-cu'
+- 'flag-cv'
+- 'flag-cw'
+- 'flag-cx'
+- 'flag-cy'
+- 'flag-cz'
+- 'flag-de'
+- 'flag-dj'
+- 'flag-dk'
+- 'flag-dm'
+- 'flag-do'
+- 'flag-dz'
+- 'flag-ec'
+- 'flag-ee'
+- 'flag-eg'
+- 'flag-eh'
+- 'flag-er'
+- 'flag-es'
+- 'flag-et'
+- 'flag-eu'
+- 'flag-fi'
+- 'flag-fj'
+- 'flag-fk'
+- 'flag-fm'
+- 'flag-fo'
+- 'flag-fr'
+- 'flag-ga'
+- 'flag-gb'
+- 'flag-gb-eng'
+- 'flag-gb-nir'
+- 'flag-gb-sct'
+- 'flag-gb-wls'
+- 'flag-gd'
+- 'flag-ge'
+- 'flag-gf'
+- 'flag-gg'
+- 'flag-gh'
+- 'flag-gi'
+- 'flag-gl'
+- 'flag-gm'
+- 'flag-gn'
+- 'flag-gp'
+- 'flag-gq'
+- 'flag-gr'
+- 'flag-gs'
+- 'flag-gt'
+- 'flag-gu'
+- 'flag-gw'
+- 'flag-gy'
+- 'flag-hk'
+- 'flag-hm'
+- 'flag-hn'
+- 'flag-hr'
+- 'flag-ht'
+- 'flag-hu'
+- 'flag-id'
+- 'flag-ie'
+- 'flag-il'
+- 'flag-im'
+- 'flag-in'
+- 'flag-io'
+- 'flag-iq'
+- 'flag-ir'
+- 'flag-is'
+- 'flag-it'
+- 'flag-je'
+- 'flag-jm'
+- 'flag-jo'
+- 'flag-jp'
+- 'flag-ke'
+- 'flag-kg'
+- 'flag-kh'
+- 'flag-ki'
+- 'flag-km'
+- 'flag-kn'
+- 'flag-kp'
+- 'flag-kr'
+- 'flag-kw'
+- 'flag-ky'
+- 'flag-kz'
+- 'flag-la'
+- 'flag-lb'
+- 'flag-lc'
+- 'flag-li'
+- 'flag-lk'
+- 'flag-lr'
+- 'flag-ls'
+- 'flag-lt'
+- 'flag-lu'
+- 'flag-lv'
+- 'flag-ly'
+- 'flag-ma'
+- 'flag-mc'
+- 'flag-md'
+- 'flag-me'
+- 'flag-mf'
+- 'flag-mg'
+- 'flag-mh'
+- 'flag-mk'
+- 'flag-ml'
+- 'flag-mm'
+- 'flag-mn'
+- 'flag-mo'
+- 'flag-mp'
+- 'flag-mq'
+- 'flag-mr'
+- 'flag-ms'
+- 'flag-mt'
+- 'flag-mu'
+- 'flag-mv'
+- 'flag-mw'
+- 'flag-mx'
+- 'flag-my'
+- 'flag-mz'
+- 'flag-na'
+- 'flag-nc'
+- 'flag-ne'
+- 'flag-nf'
+- 'flag-ng'
+- 'flag-ni'
+- 'flag-nl'
+- 'flag-no'
+- 'flag-np'
+- 'flag-nr'
+- 'flag-nu'
+- 'flag-nz'
+- 'flag-om'
+- 'flag-pa'
+- 'flag-pe'
+- 'flag-pf'
+- 'flag-pg'
+- 'flag-ph'
+- 'flag-pk'
+- 'flag-pl'
+- 'flag-pm'
+- 'flag-pn'
+- 'flag-pr'
+- 'flag-ps'
+- 'flag-pt'
+- 'flag-pw'
+- 'flag-py'
+- 'flag-qa'
+- 'flag-re'
+- 'flag-ro'
+- 'flag-rs'
+- 'flag-ru'
+- 'flag-rw'
+- 'flag-sa'
+- 'flag-sb'
+- 'flag-sc'
+- 'flag-sd'
+- 'flag-se'
+- 'flag-sg'
+- 'flag-sh'
+- 'flag-si'
+- 'flag-sj'
+- 'flag-sk'
+- 'flag-sl'
+- 'flag-sm'
+- 'flag-sn'
+- 'flag-so'
+- 'flag-sr'
+- 'flag-ss'
+- 'flag-st'
+- 'flag-sv'
+- 'flag-sx'
+- 'flag-sy'
+- 'flag-sz'
+- 'flag-tc'
+- 'flag-td'
+- 'flag-tf'
+- 'flag-tg'
+- 'flag-th'
+- 'flag-tj'
+- 'flag-tk'
+- 'flag-tl'
+- 'flag-tm'
+- 'flag-tn'
+- 'flag-to'
+- 'flag-tr'
+- 'flag-tt'
+- 'flag-tv'
+- 'flag-tw'
+- 'flag-tz'
+- 'flag-ua'
+- 'flag-ug'
+- 'flag-um'
+- 'flag-un'
+- 'flag-us'
+- 'flag-uy'
+- 'flag-uz'
+- 'flag-va'
+- 'flag-vc'
+- 'flag-ve'
+- 'flag-vg'
+- 'flag-vi'
+- 'flag-vn'
+- 'flag-vu'
+- 'flag-wf'
+- 'flag-ws'
+- 'flag-ye'
+- 'flag-yt'
+- 'flag-za'
+- 'flag-zm'
+- 'flag-zw'
--- a/src/_data/icons-mdi.yml
+++ b/src/_data/icons-mdi.yml
--- a/src/_data/icons-payments.yml
+++ b/src/_data/icons-payments.yml
@@ -0,0 +1,108 @@
+- 'payment-2checkout'
+- 'payment-alipay'
+- 'payment-amazon'
+- 'payment-americanexpress'
+- 'payment-applepay'
+- 'payment-bancontact'
+- 'payment-bitcoin'
+- 'payment-bitpay'
+- 'payment-cirrus'
+- 'payment-clickandbuy'
+- 'payment-coinkite'
+- 'payment-dinersclub'
+- 'payment-directdebit'
+- 'payment-discover'
+- 'payment-dwolla'
+- 'payment-ebay'
+- 'payment-eway'
+- 'payment-giropay'
+- 'payment-googlewallet'
+- 'payment-ingenico'
+- 'payment-jcb'
+- 'payment-klarna'
+- 'payment-laser'
+- 'payment-maestro'
+- 'payment-mastercard'
+- 'payment-monero'
+- 'payment-neteller'
+- 'payment-ogone'
+- 'payment-okpay'
+- 'payment-paybox'
+- 'payment-paymill'
+- 'payment-payone'
+- 'payment-payoneer'
+- 'payment-paypal'
+- 'payment-paysafecard'
+- 'payment-payu'
+- 'payment-payza'
+- 'payment-ripple'
+- 'payment-sage'
+- 'payment-sepa'
+- 'payment-shopify'
+- 'payment-skrill'
+- 'payment-solo'
+- 'payment-square'
+- 'payment-stripe'
+- 'payment-switch'
+- 'payment-ukash'
+- 'payment-unionpay'
+- 'payment-verifone'
+- 'payment-verisign'
+- 'payment-visa'
+- 'payment-webmoney'
+- 'payment-westernunion'
+- 'payment-worldpay'
+- 'payment-2checkout-dark'
+- 'payment-alipay-dark'
+- 'payment-amazon-dark'
+- 'payment-americanexpress-dark'
+- 'payment-applepay-dark'
+- 'payment-bancontact-dark'
+- 'payment-bitcoin-dark'
+- 'payment-bitpay-dark'
+- 'payment-cirrus-dark'
+- 'payment-clickandbuy-dark'
+- 'payment-coinkite-dark'
+- 'payment-dinersclub-dark'
+- 'payment-directdebit-dark'
+- 'payment-discover-dark'
+- 'payment-dwolla-dark'
+- 'payment-ebay-dark'
+- 'payment-eway-dark'
+- 'payment-giropay-dark'
+- 'payment-googlewallet-dark'
+- 'payment-ingenico-dark'
+- 'payment-jcb-dark'
+- 'payment-klarna-dark'
+- 'payment-laser-dark'
+- 'payment-maestro-dark'
+- 'payment-mastercard-dark'
+- 'payment-monero-dark'
+- 'payment-neteller-dark'
+- 'payment-ogone-dark'
+- 'payment-okpay-dark'
+- 'payment-paybox-dark'
+- 'payment-paymill-dark'
+- 'payment-payone-dark'
+- 'payment-payoneer-dark'
+- 'payment-paypal-dark'
+- 'payment-paysafecard-dark'
+- 'payment-payu-dark'
+- 'payment-payza-dark'
+- 'payment-ripple-dark'
+- 'payment-sage-dark'
+- 'payment-sepa-dark'
+- 'payment-shopify-dark'
+- 'payment-skrill-dark'
+- 'payment-solo-dark'
+- 'payment-square-dark'
+- 'payment-stripe-dark'
+- 'payment-switch-dark'
+- 'payment-ukash-dark'
+- 'payment-unionpay-dark'
+- 'payment-verifone-dark'
+- 'payment-verisign-dark'
+- 'payment-visa-dark'
+- 'payment-webmoney-dark'
+- 'payment-westernunion-dark'
+- 'payment-worldpay-dark'
--- a/src/_data/icons-sli.yml
+++ b/src/_data/icons-sli.yml
@@ -0,0 +1,189 @@
+- si-user
+- si-people
+- si-user-female
+- si-user-follow
+- si-user-following
+- si-user-unfollow
+- si-login
+- si-logout
+- si-emotsmile
+- si-phone
+- si-call-end
+- si-call-in
+- si-call-out
+- si-map
+- si-location-pin
+- si-direction
+- si-directions
+- si-compass
+- si-layers
+- si-menu
+- si-list
+- si-options-vertical
+- si-options
+- si-arrow-down
+- si-arrow-left
+- si-arrow-right
+- si-arrow-up
+- si-arrow-up-circle
+- si-arrow-left-circle
+- si-arrow-right-circle
+- si-arrow-down-circle
+- si-check
+- si-clock
+- si-plus
+- si-minus
+- si-close
+- si-event
+- si-exclamation
+- si-organization
+- si-trophy
+- si-screen-smartphone
+- si-screen-desktop
+- si-plane
+- si-notebook
+- si-mustache
+- si-mouse
+- si-magnet
+- si-energy
+- si-disc
+- si-cursor
+- si-cursor-move
+- si-crop
+- si-chemistry
+- si-speedometer
+- si-shield
+- si-screen-tablet
+- si-magic-wand
+- si-hourglass
+- si-graduation
+- si-ghost
+- si-game-controller
+- si-fire
+- si-eyeglass
+- si-envelope-open
+- si-envelope-letter
+- si-bell
+- si-badge
+- si-anchor
+- si-wallet
+- si-vector
+- si-speech
+- si-puzzle
+- si-printer
+- si-present
+- si-playlist
+- si-pin
+- si-picture
+- si-handbag
+- si-globe-alt
+- si-globe
+- si-folder-alt
+- si-folder
+- si-film
+- si-feed
+- si-drop
+- si-drawer
+- si-docs
+- si-doc
+- si-diamond
+- si-cup
+- si-calculator
+- si-bubbles
+- si-briefcase
+- si-book-open
+- si-basket-loaded
+- si-basket
+- si-bag
+- si-action-undo
+- si-action-redo
+- si-wrench
+- si-umbrella
+- si-trash
+- si-tag
+- si-support
+- si-frame
+- si-size-fullscreen
+- si-size-actual
+- si-shuffle
+- si-share-alt
+- si-share
+- si-rocket
+- si-question
+- si-pie-chart
+- si-pencil
+- si-note
+- si-loop
+- si-home
+- si-grid
+- si-graph
+- si-microphone
+- si-music-tone-alt
+- si-music-tone
+- si-earphones-alt
+- si-earphones
+- si-equalizer
+- si-like
+- si-dislike
+- si-control-start
+- si-control-rewind
+- si-control-play
+- si-control-pause
+- si-control-forward
+- si-control-end
+- si-volume-1
+- si-volume-2
+- si-volume-off
+- si-calendar
+- si-bulb
+- si-chart
+- si-ban
+- si-bubble
+- si-camrecorder
+- si-camera
+- si-cloud-download
+- si-cloud-upload
+- si-envelope
+- si-eye
+- si-flag
+- si-heart
+- si-info
+- si-key
+- si-link
+- si-lock
+- si-lock-open
+- si-magnifier
+- si-magnifier-add
+- si-magnifier-remove
+- si-paper-clip
+- si-paper-plane
+- si-power
+- si-refresh
+- si-reload
+- si-settings
+- si-star
+- si-symbol-female
+- si-symbol-male
+- si-target
+- si-credit-card
+- si-paypal
+- si-social-tumblr
+- si-social-twitter
+- si-social-facebook
+- si-social-instagram
+- si-social-linkedin
+- si-social-pinterest
+- si-social-github
+- si-social-google
+- si-social-reddit
+- si-social-skype
+- si-social-dribbble
+- si-social-behance
+- si-social-foursqare
+- si-social-soundcloud
+- si-social-spotify
+- si-social-stumbleupon
+- si-social-youtube
+- si-social-dropbox
+- si-social-vkontakte
+- si-social-steam
--- a/src/_data/icons-weather.yml
+++ b/src/_data/icons-weather.yml
@@ -0,0 +1,250 @@
+- wi-day-sunny
+- wi-day-cloudy
+- wi-day-cloudy-gusts
+- wi-day-cloudy-windy
+- wi-day-fog
+- wi-day-hail
+- wi-day-haze
+- wi-day-lightning
+- wi-day-rain
+- wi-day-rain-mix
+- wi-day-rain-wind
+- wi-day-showers
+- wi-day-sleet
+- wi-day-sleet-storm
+- wi-day-snow
+- wi-day-snow-thunderstorm
+- wi-day-snow-wind
+- wi-day-sprinkle
+- wi-day-storm-showers
+- wi-day-sunny-overcast
+- wi-day-thunderstorm
+- wi-day-windy
+- wi-solar-eclipse
+- wi-hot
+- wi-day-cloudy-high
+- wi-day-light-wind
+- wi-night-clear
+- wi-night-alt-cloudy
+- wi-night-alt-cloudy-gusts
+- wi-night-alt-cloudy-windy
+- wi-night-alt-hail
+- wi-night-alt-lightning
+- wi-night-alt-rain
+- wi-night-alt-rain-mix
+- wi-night-alt-rain-wind
+- wi-night-alt-showers
+- wi-night-alt-sleet
+- wi-night-alt-sleet-storm
+- wi-night-alt-snow
+- wi-night-alt-snow-thunderstorm
+- wi-night-alt-snow-wind
+- wi-night-alt-sprinkle
+- wi-night-alt-storm-showers
+- wi-night-alt-thunderstorm
+- wi-night-cloudy
+- wi-night-cloudy-gusts
+- wi-night-cloudy-windy
+- wi-night-fog
+- wi-night-hail
+- wi-night-lightning
+- wi-night-partly-cloudy
+- wi-night-rain
+- wi-night-rain-mix
+- wi-night-rain-wind
+- wi-night-showers
+- wi-night-sleet
+- wi-night-sleet-storm
+- wi-night-snow
+- wi-night-snow-thunderstorm
+- wi-night-snow-wind
+- wi-night-sprinkle
+- wi-night-storm-showers
+- wi-night-thunderstorm
+- wi-lunar-eclipse
+- wi-stars
+- wi-storm-showers
+- wi-thunderstorm
+- wi-night-alt-cloudy-high
+- wi-night-cloudy-high
+- wi-night-alt-partly-cloudy
+- wi-cloud
+- wi-cloudy
+- wi-cloudy-gusts
+- wi-cloudy-windy
+- wi-fog
+- wi-hail
+- wi-rain
+- wi-rain-mix
+- wi-rain-wind
+- wi-showers
+- wi-sleet
+- wi-snow
+- wi-sprinkle
+- wi-storm-showers
+- wi-thunderstorm
+- wi-snow-wind
+- wi-snow
+- wi-smog
+- wi-smoke
+- wi-lightning
+- wi-raindrops
+- wi-raindrop
+- wi-dust
+- wi-snowflake-cold
+- wi-windy
+- wi-strong-wind
+- wi-sandstorm
+- wi-earthquake
+- wi-fire
+- wi-flood
+- wi-meteor
+- wi-tsunami
+- wi-volcano
+- wi-hurricane
+- wi-tornado
+- wi-small-craft-advisory
+- wi-gale-warning
+- wi-storm-warning
+- wi-hurricane-warning
+- wi-wind-direction
+- wi-alien
+- wi-celsius
+- wi-fahrenheit
+- wi-degrees
+- wi-thermometer
+- wi-thermometer-exterior
+- wi-thermometer-internal
+- wi-cloud-down
+- wi-cloud-up
+- wi-cloud-refresh
+- wi-horizon
+- wi-horizon-alt
+- wi-sunrise
+- wi-sunset
+- wi-moonrise
+- wi-moonset
+- wi-refresh
+- wi-refresh-alt
+- wi-umbrella
+- wi-barometer
+- wi-humidity
+- wi-na
+- wi-train
+- wi-moon-new
+- wi-moon-waxing-crescent-1
+- wi-moon-waxing-crescent-2
+- wi-moon-waxing-crescent-3
+- wi-moon-waxing-crescent-4
+- wi-moon-waxing-crescent-5
+- wi-moon-waxing-crescent-6
+- wi-moon-first-quarter
+- wi-moon-waxing-gibbous-1
+- wi-moon-waxing-gibbous-2
+- wi-moon-waxing-gibbous-3
+- wi-moon-waxing-gibbous-4
+- wi-moon-waxing-gibbous-5
+- wi-moon-waxing-gibbous-6
+- wi-moon-full
+- wi-moon-waning-gibbous-1
+- wi-moon-waning-gibbous-2
+- wi-moon-waning-gibbous-3
+- wi-moon-waning-gibbous-4
+- wi-moon-waning-gibbous-5
+- wi-moon-waning-gibbous-6
+- wi-moon-third-quarter
+- wi-moon-waning-crescent-1
+- wi-moon-waning-crescent-2
+- wi-moon-waning-crescent-3
+- wi-moon-waning-crescent-4
+- wi-moon-waning-crescent-5
+- wi-moon-waning-crescent-6
+- wi-moon-alt-new
+- wi-moon-alt-waxing-crescent-1
+- wi-moon-alt-waxing-crescent-2
+- wi-moon-alt-waxing-crescent-3
+- wi-moon-alt-waxing-crescent-4
+- wi-moon-alt-waxing-crescent-5
+- wi-moon-alt-waxing-crescent-6
+- wi-moon-alt-first-quarter
+- wi-moon-alt-waxing-gibbous-1
+- wi-moon-alt-waxing-gibbous-2
+- wi-moon-alt-waxing-gibbous-3
+- wi-moon-alt-waxing-gibbous-4
+- wi-moon-alt-waxing-gibbous-5
+- wi-moon-alt-waxing-gibbous-6
+- wi-moon-alt-full
+- wi-moon-alt-waning-gibbous-1
+- wi-moon-alt-waning-gibbous-2
+- wi-moon-alt-waning-gibbous-3
+- wi-moon-alt-waning-gibbous-4
+- wi-moon-alt-waning-gibbous-5
+- wi-moon-alt-waning-gibbous-6
+- wi-moon-alt-third-quarter
+- wi-moon-alt-waning-crescent-1
+- wi-moon-alt-waning-crescent-2
+- wi-moon-alt-waning-crescent-3
+- wi-moon-alt-waning-crescent-4
+- wi-moon-alt-waning-crescent-5
+- wi-moon-alt-waning-crescent-6
+- wi-moon-0
+- wi-moon-1
+- wi-moon-2
+- wi-moon-3
+- wi-moon-4
+- wi-moon-5
+- wi-moon-6
+- wi-moon-7
+- wi-moon-8
+- wi-moon-9
+- wi-moon-10
+- wi-moon-11
+- wi-moon-12
+- wi-moon-13
+- wi-moon-14
+- wi-moon-15
+- wi-moon-16
+- wi-moon-17
+- wi-moon-18
+- wi-moon-19
+- wi-moon-20
+- wi-moon-21
+- wi-moon-22
+- wi-moon-23
+- wi-moon-24
+- wi-moon-25
+- wi-moon-26
+- wi-moon-27
+- wi-time-1
+- wi-time-2
+- wi-time-3
+- wi-time-4
+- wi-time-5
+- wi-time-6
+- wi-time-7
+- wi-time-8
+- wi-time-9
+- wi-time-10
+- wi-time-11
+- wi-time-12
+- wi-direction-up
+- wi-direction-up-right
+- wi-direction-right
+- wi-direction-down-right
+- wi-direction-down
+- wi-direction-down-left
+- wi-direction-left
+- wi-direction-up-left
+- wi-wind-beaufort-0
+- wi-wind-beaufort-1
+- wi-wind-beaufort-2
+- wi-wind-beaufort-3
+- wi-wind-beaufort-4
+- wi-wind-beaufort-5
+- wi-wind-beaufort-6
+- wi-wind-beaufort-7
+- wi-wind-beaufort-8
+- wi-wind-beaufort-9
+- wi-wind-beaufort-10
+- wi-wind-beaufort-11
+- wi-wind-beaufort-12
--- a/src/_data/invoices.yml
+++ b/src/_data/invoices.yml
@@ -0,0 +1,79 @@
+-
+  invoice: "00450"
+  name: Design Works
+  client: Carlson Limited
+  vat-no: 87956621
+  date: 15 Dec 2017
+  status: success
+  status-name: Paid
+  price: $887
+
+-
+  invoice: "00450"
+  name: UX Wireframes
+  client: Adobe
+  vat-no: 87956421
+  date: 12 Apr 2017
+  status: warning
+  status-name: Pending
+  price: $1200
+
+-
+  invoice: "00452"
+  name: New Dashboard
+  client: Bluewolf
+  vat-no: 87952621
+  date: 23 Oct 2017
+  status: warning
+  status-name: Pending
+  price: $534
+
+-
+  invoice: "00450"
+  name: Landing Page
+  client: Salesforce
+  vat-no: 87953421
+  date: 2 Sep 2017
+  status: secondary
+  status-name: Due in 2 Weeks
+  price: $1500
+
+-
+  invoice: "00450"
+  name: Marketing Templates
+  client: Printic
+  vat-no: 87956621
+  date: 29 Jan 2018
+  status: danger
+  status-name: Paid Today
+  price: $648
+
+-
+  invoice: "00450"
+  name: Sales Presentation
+  client: Tabdaq
+  vat-no: 87956621
+  date: 4 Feb 2018
+  status: secondary
+  status-name: Due in 3 Weeks
+  price: $300
+
+-
+  invoice: "00450"
+  name: Logo & Print
+  client: Apple
+  vat-no: 87956621
+  date: 22 Mar 2018
+  status: success
+  status-name: Paid Today
+  price: $2500
+
+-
+  invoice: "00450"
+  name: Icons
+  client: Tookapic
+  vat-no: 87956621
+  date: 13 May 2018
+  status: success
+  status-name: Paid Today
+  price: $940
--- a/src/_data/map-germany.yml
+++ b/src/_data/map-germany.yml
@@ -0,0 +1,16 @@
+"DE-BE": 11,
+"DE-ST": 43,
+"DE-RP": 4,
+"DE-BB": 65
+"DE-NI": 4,
+"DE-MV": 24,
+"DE-TH": 45,
+"DE-BW": 7,
+"DE-HH": 45,
+"DE-SH": 9,
+"DE-NW": 8,
+"DE-SN": 27,
+"DE-HB": 42,
+"DE-SL": 85,
+"DE-BY": 24,
+"DE-HE": 66
--- a/src/_data/map-world.yml
+++ b/src/_data/map-world.yml
@@ -0,0 +1,183 @@
+AF: 16.63
+AL: 11.58
+DZ: 158.97
+AO: 85.81
+AG: 1.1
+AR: 351.02
+AM: 8.83
+AU: 1219.72
+AT: 366.26
+AZ: 52.17
+BS: 7.54
+BH: 21.73
+BD: 105.4
+BB: 3.96
+BY: 52.89
+BE: 461.33
+BZ: 1.43
+BJ: 6.49
+BT: 1.4
+BO: 19.18
+BA: 16.2
+BW: 12.5
+BR: 2023.53
+BN: 11.96
+BG: 44.84
+BF: 8.67
+BI: 1.47
+KH: 11.36
+CM: 21.88
+CA: 1563.66
+CV: 1.57
+CF: 2.11
+TD: 7.59
+CL: 199.18
+CN: 5745.13
+CO: 283.11
+KM: 0.56
+CD: 12.6
+CG: 11.88
+CR: 35.02
+CI: 22.38
+HR: 59.92
+CY: 22.75
+CZ: 195.23
+DK: 304.56
+DJ: 1.14
+DM: 0.38
+DO: 50.87
+EC: 61.49
+EG: 216.83
+SV: 21.8
+GQ: 14.55
+ER: 2.25
+EE: 19.22
+ET: 30.94
+FJ: 3.15
+FI: 231.98
+FR: 2555.44
+GA: 12.56
+GM: 1.04
+GE: 11.23
+DE: 3305.9
+GH: 18.06
+GR: 305.01
+GD: 0.65
+GT: 40.77
+GN: 4.34
+GW: 0.83
+GY: 2.2
+HT: 6.5
+HN: 15.34
+HK: 226.49
+HU: 132.28
+IS: 12.77
+IN: 1430.02
+ID: 695.06
+IR: 337.9
+IQ: 84.14
+IE: 204.14
+IL: 201.25
+IT: 2036.69
+JM: 13.74
+JP: 5390.9
+JO: 27.13
+KZ: 129.76
+KE: 32.42
+KI: 0.15
+KR: 986.26
+UNDEFINED: 5.73
+KW: 117.32
+KG: 4.44
+LA: 6.34
+LV: 23.39
+LB: 39.15
+LS: 1.8
+LR: 0.98
+LY: 77.91
+LT: 35.73
+LU: 52.43
+MK: 9.58
+MG: 8.33
+MW: 5.04
+MY: 218.95
+MV: 1.43
+ML: 9.08
+MT: 7.8
+MR: 3.49
+MU: 9.43
+MX: 1004.04
+MD: 5.36
+MN: 5.81
+ME: 3.88
+MA: 91.7
+MZ: 10.21
+MM: 35.65
+NA: 11.45
+NP: 15.11
+NL: 770.31
+NZ: 138
+NI: 6.38
+NE: 5.6
+NG: 206.66
+NO: 413.51
+OM: 53.78
+PK: 174.79
+PA: 27.2
+PG: 8.81
+PY: 17.17
+PE: 153.55
+PH: 189.06
+PL: 438.88
+PT: 223.7
+QA: 126.52
+RO: 158.39
+RU: 1476.91
+RW: 5.69
+WS: 0.55
+ST: 0.19
+SA: 434.44
+SN: 12.66
+RS: 38.92
+SC: 0.92
+SL: 1.9
+SG: 217.38
+SK: 86.26
+SI: 46.44
+SB: 0.67
+ZA: 354.41
+ES: 1374.78
+LK: 48.24
+KN: 0.56
+LC: 1
+VC: 0.58
+SD: 65.93
+SR: 3.3
+SZ: 3.17
+SE: 444.59
+CH: 522.44
+SY: 59.63
+TW: 426.98
+TJ: 5.58
+TZ: 22.43
+TH: 312.61
+TL: 0.62
+TG: 3.07
+TO: 0.3
+TT: 21.2
+TN: 43.86
+TR: 729.05
+TM: 0
+UG: 17.12
+UA: 136.56
+AE: 239.65
+GB: 2258.57
+US: 14624.18
+UY: 40.71
+UZ: 37.72
+VU: 0.72
+VE: 285.21
+VN: 101.99
+YE: 30.02
+ZM: 15.69
+ZW: 5.5
--- a/src/_data/maps.yml
+++ b/src/_data/maps.yml
@@ -0,0 +1,20 @@
+default:
+  center: [37.772, -122.214]
+
+header-bg:
+  center: [52.230119, 20.983394]
+  custom-styles: true
+  zoom: 5
+
+metro:
+  center: [52.230119, 20.983394]
+  path-color: blue
+  custom-styles: true
+  points:
+    - [52.230119, 20.983394]
+    - [52.233063, 20.998307]
+    - [52.235192, 21.00837]
+    - [52.2369, 21.017189]
+    - [52.239817, 21.03163]
+    - [52.246991, 21.043046]
+    - [52.25419, 21.03504]
--- a/src/_data/menu.yml
+++ b/src/_data/menu.yml
@@ -0,0 +1,62 @@
+index:
+  name: Home
+  icon: fe fe-home
+  url: .
+
+interface:
+  name: Interface
+  icon: fe fe-box
+  subpages:
+    cards:
+      name: Cards design
+      icon: fe fe-box
+      url: cards.html
+
+    charts:
+      name: Charts
+      icon: fe fe-pie-chart
+      url: charts.html
+
+components:
+  name: Components
+  icon: fe fe-calendar
+  subpages:
+    maps:
+      name: Maps
+      icon: fe fe-map-pin
+      url: maps.html
+
+    icons:
+      name: Icons
+      icon: fe fe-heart
+      url: icons.html
+
+    store:
+      name: Store
+      icon: fe fe-shopping-cart
+      url: store.html
+
+    blog:
+      name: Blog
+      icon: fe fe-shopping-cart
+      url: blog.html
+
+profile:
+  name: Profile
+  icon: fe fe-user
+  url: profile.html
+
+gallery:
+  name: Gallery
+  icon: fe fe-image
+  url: gallery.html
+
+forms:
+  name: Forms
+  icon: fe fe-check-square
+  url: form-elements.html
+
+#docs:
+#  name: Docs
+#  icon: fe fe-file
+#  url: docs/index.html
--- a/src/_data/photos.yml
+++ b/src/_data/photos.yml
@@ -0,0 +1,150 @@
+-
+  big: 'assets/images/photos/adrian-infernus-281832-1500.jpg'
+  small: 'assets/images/photos/adrian-infernus-281832-500.jpg'
+-
+  big: 'assets/images/photos/ales-krivec-107499-1500.jpg'
+  small: 'assets/images/photos/ales-krivec-107499-500.jpg'
+-
+  big: 'assets/images/photos/alex-bertha-316137-1500.jpg'
+  small: 'assets/images/photos/alex-bertha-316137-500.jpg'
+-
+  big: 'assets/images/photos/anders-jilden-307322-1500.jpg'
+  small: 'assets/images/photos/anders-jilden-307322-500.jpg'
+-
+  big: 'assets/images/photos/andrew-neel-141710-1500.jpg'
+  small: 'assets/images/photos/andrew-neel-141710-500.jpg'
+-
+  big: 'assets/images/photos/aneta-ivanova-776-1500.jpg'
+  small: 'assets/images/photos/aneta-ivanova-776-500.jpg'
+-
+  big: 'assets/images/photos/anthony-intraversato-257182-1500.jpg'
+  small: 'assets/images/photos/anthony-intraversato-257182-500.jpg'
+-
+  big: 'assets/images/photos/artem-sapegin-229391-1500.jpg'
+  small: 'assets/images/photos/artem-sapegin-229391-500.jpg'
+-
+  big: 'assets/images/photos/bobby-burch-145906-1500.jpg'
+  small: 'assets/images/photos/bobby-burch-145906-500.jpg'
+-
+  big: 'assets/images/photos/casey-horner-339165-1500.jpg'
+  small: 'assets/images/photos/casey-horner-339165-500.jpg'
+-
+  big: 'assets/images/photos/christian-joudrey-96208-1500.jpg'
+  small: 'assets/images/photos/christian-joudrey-96208-500.jpg'
+-
+  big: 'assets/images/photos/christoph-bengtsson-lissalde-80291-1500.jpg'
+  small: 'assets/images/photos/christoph-bengtsson-lissalde-80291-500.jpg'
+-
+  big: 'assets/images/photos/clarisse-meyer-122804-1500.jpg'
+  small: 'assets/images/photos/clarisse-meyer-122804-500.jpg'
+-
+  big: 'assets/images/photos/cristina-gottardi-259243-1500.jpg'
+  small: 'assets/images/photos/cristina-gottardi-259243-500.jpg'
+-
+  big: 'assets/images/photos/david-klaasen-54203-1500.jpg'
+  small: 'assets/images/photos/david-klaasen-54203-500.jpg'
+-
+  big: 'assets/images/photos/david-marcu-114194-1500.jpg'
+  small: 'assets/images/photos/david-marcu-114194-500.jpg'
+-
+  big: 'assets/images/photos/davide-cantelli-139887-1500.jpg'
+  small: 'assets/images/photos/davide-cantelli-139887-500.jpg'
+-
+  big: 'assets/images/photos/dino-reichmuth-84359-1500.jpg'
+  small: 'assets/images/photos/dino-reichmuth-84359-500.jpg'
+-
+  big: 'assets/images/photos/eberhard-grossgasteiger-311213-1500.jpg'
+  small: 'assets/images/photos/eberhard-grossgasteiger-311213-500.jpg'
+-
+  big: 'assets/images/photos/geran-de-klerk-290418-1500.jpg'
+  small: 'assets/images/photos/geran-de-klerk-290418-500.jpg'
+-
+  big: 'assets/images/photos/grant-ritchie-338179-1500.jpg'
+  small: 'assets/images/photos/grant-ritchie-338179-500.jpg'
+-
+  big: 'assets/images/photos/ilnur-kalimullin-218996-1500.jpg'
+  small: 'assets/images/photos/ilnur-kalimullin-218996-500.jpg'
+-
+  big: 'assets/images/photos/jakob-owens-224352-1500.jpg'
+  small: 'assets/images/photos/jakob-owens-224352-500.jpg'
+-
+  big: 'assets/images/photos/jeremy-bishop-330225-1500.jpg'
+  small: 'assets/images/photos/jeremy-bishop-330225-500.jpg'
+-
+  big: 'assets/images/photos/jonatan-pie-226191-1500.jpg'
+  small: 'assets/images/photos/jonatan-pie-226191-500.jpg'
+-
+  big: 'assets/images/photos/josh-calabrese-66153-1500.jpg'
+  small: 'assets/images/photos/josh-calabrese-66153-500.jpg'
+-
+  big: 'assets/images/photos/joshua-earle-157231-1500.jpg'
+  small: 'assets/images/photos/joshua-earle-157231-500.jpg'
+-
+  big: 'assets/images/photos/mahkeo-222765-1500.jpg'
+  small: 'assets/images/photos/mahkeo-222765-500.jpg'
+-
+  big: 'assets/images/photos/matt-barrett-339981-1500.jpg'
+  small: 'assets/images/photos/matt-barrett-339981-500.jpg'
+-
+  big: 'assets/images/photos/nathan-anderson-297460-1500.jpg'
+  small: 'assets/images/photos/nathan-anderson-297460-500.jpg'
+-
+  big: 'assets/images/photos/nathan-anderson-316188-1500.jpg'
+  small: 'assets/images/photos/nathan-anderson-316188-500.jpg'
+-
+  big: 'assets/images/photos/nathan-dumlao-287713-1500.jpg'
+  small: 'assets/images/photos/nathan-dumlao-287713-500.jpg'
+-
+  big: 'assets/images/photos/nicolas-picard-208276-1500.jpg'
+  small: 'assets/images/photos/nicolas-picard-208276-500.jpg'
+-
+  big: 'assets/images/photos/oskar-vertetics-53043-1500.jpg'
+  small: 'assets/images/photos/oskar-vertetics-53043-500.jpg'
+-
+  big: 'assets/images/photos/priscilla-du-preez-181896-1500.jpg'
+  small: 'assets/images/photos/priscilla-du-preez-181896-500.jpg'
+-
+  big: 'assets/images/photos/ricardo-gomez-angel-262359-1500.jpg'
+  small: 'assets/images/photos/ricardo-gomez-angel-262359-500.jpg'
+-
+  big: 'assets/images/photos/sam-ferrara-136526-1500.jpg'
+  small: 'assets/images/photos/sam-ferrara-136526-500.jpg'
+-
+  big: 'assets/images/photos/sean-afnan-244576-1500.jpg'
+  small: 'assets/images/photos/sean-afnan-244576-500.jpg'
+-
+  big: 'assets/images/photos/sophie-higginbottom-133982-1500.jpg'
+  small: 'assets/images/photos/sophie-higginbottom-133982-500.jpg'
+-
+  big: 'assets/images/photos/stefan-kunze-26932-1500.jpg'
+  small: 'assets/images/photos/stefan-kunze-26932-500.jpg'
+-
+  big: 'assets/images/photos/stefan-stefancik-105376-1500.jpg'
+  small: 'assets/images/photos/stefan-stefancik-105376-500.jpg'
+-
+  big: 'assets/images/photos/sweet-ice-cream-photography-143023-1500.jpg'
+  small: 'assets/images/photos/sweet-ice-cream-photography-143023-500.jpg'
+-
+  big: 'assets/images/photos/tatyana-dobreva-288463-1500.jpg'
+  small: 'assets/images/photos/tatyana-dobreva-288463-500.jpg'
+-
+  big: 'assets/images/photos/teddy-kelley-109202-1500.jpg'
+  small: 'assets/images/photos/teddy-kelley-109202-500.jpg'
+-
+  big: 'assets/images/photos/tim-bogdanov-97988-1500.jpg'
+  small: 'assets/images/photos/tim-bogdanov-97988-500.jpg'
+-
+  big: 'assets/images/photos/tim-marshall-173957-1500.jpg'
+  small: 'assets/images/photos/tim-marshall-173957-500.jpg'
+-
+  big: 'assets/images/photos/tom-barrett-318952-1500.jpg'
+  small: 'assets/images/photos/tom-barrett-318952-500.jpg'
+-
+  big: 'assets/images/photos/vladimir-kudinov-12761-1500.jpg'
+  small: 'assets/images/photos/vladimir-kudinov-12761-500.jpg'
+-
+  big: 'assets/images/photos/web-agency-29200-1500.jpg'
+  small: 'assets/images/photos/web-agency-29200-500.jpg'
+-
+  big: 'assets/images/photos/wil-stewart-18242-1500.jpg'
+  small: 'assets/images/photos/wil-stewart-18242-500.jpg'
--- a/src/_data/products.yml
+++ b/src/_data/products.yml
@@ -0,0 +1,53 @@
+-
+  name: Apple iPhone 7 Plus 256GB Red Special Edition
+  image: assets/images/products/apple-iphone7-special.jpg
+  producer: Apple
+  price: $499
+
+-
+  name: Apple MacBook Pro i7 3,1GHz/16/512/Radeon 560 Space Gray
+  image: assets/images/products/apple-macbook-pro.jpg
+  producer: Apple
+  price: $1499
+
+-
+  name: Apple iPhone 7 32GB Jet Black
+  image: assets/images/products/apple-iphone7.jpg
+  producer: Apple
+  price: $499
+
+-
+  name: GoPro HERO6 Black
+  image: assets/images/products/gopro-hero.jpg
+  producer: GoPro
+  price: $599
+
+-
+  name: MSI GV62 i5-7300HQ/8GB/1TB/Win10X GTX1050
+  image: assets/images/products/msi.jpg
+  producer: MSI
+  price: $1599
+
+-
+  name: Xiaomi Mi A1 64GB Black
+  image: assets/images/products/xiaomi-mi.jpg
+  producer: Xiaomi
+  price: $269
+
+-
+  name: Huawei Mate 10 Pro Dual SIM Gray
+  image: assets/images/products/huawei-mate.jpg
+  producer: Huawei
+  price: $999
+
+-
+  name: Sony KD-49XE7005
+  image: assets/images/products/sony-kd.jpg
+  producer: Sony
+  price: $799
+
+-
+  name: Samsung Galaxy A5 A520F 2017 LTE Black Sky
+  image: assets/images/products/samsung-galaxy.jpg
+  producer: Samsung
+  price: $399
--- a/src/_data/random-numbers.yml
+++ b/src/_data/random-numbers.yml
@@ -0,0 +1,100 @@
+- 10.5
+- 5.1
+- 14.7
+- 18.5
+- 2.5
+- 59.5
+- 79.6
+- 35.3
+- 70.1
+- 1.4
+- 8.1
+- 30.9
+- 31.8
+- 36.4
+- 28.8
+- 91.3
+- 78.8
+- 37.3
+- 57.4
+- 16.1
+- 41.2
+- 97.6
+- 86.4
+- 94.7
+- 7.5
+- 64.5
+- 39.0
+- 99.9
+- 38.5
+- 93.7
+- 20.1
+- 50.3
+- 86.7
+- 98.0
+- 49.9
+- 81.1
+- 94.8
+- 41.7
+- 57.7
+- 88.2
+- 84.2
+- 65.4
+- 74.4
+- 46.7
+- 77.2
+- 68.6
+- 53.0
+- 68.6
+- 76.3
+- 65.9
+- 55.7
+- 94.9
+- 28.2
+- 82.4
+- 24.6
+- 2.4
+- 37.8
+- 98.6
+- 42.5
+- 43.4
+- 67.8
+- 57.4
+- 38.2
+- 77.9
+- 36.4
+- 39.0
+- 85.9
+- 24.9
+- 4.7
+- 40.6
+- 8.7
+- 36.9
+- 14.2
+- 53.0
+- 64.7
+- 28.2
+- 67.0
+- 87.8
+- 78.6
+- 95.1
+- 39.8
+- 62.4
+- 11.9
+- 36.8
+- 59.5
+- 12.4
+- 55.7
+- 6.7
+- 12.9
+- 32.7
+- 46.3
+- 12.0
+- 88.2
+- 13.8
+- 70.5
+- 76.5
+- 72.3
+- 61.7
+- 24.3
+- 85.3
--- a/src/_data/tasks.yml
+++ b/src/_data/tasks.yml
@@ -0,0 +1,23 @@
+- name: HTML & CSS lessons
+  date: 6 Dec 2017
+  place: Warsaw, Poland
+  icon: mdi mdi-map-marker
+  background: blue
+
+- name: HTML & CSS lessons
+  date: 5 Jun 2019
+  place: London, UK
+  icon: mdi mdi-map-marker
+  background: red
+
+- name: HTML & CSS lessons
+  date: 22 Oct 2018
+  place: Barcelona, Spain
+  icon: mdi mdi-map-marker
+  background: yellow
+
+- name: Smashing Magazine Conference
+  date: 11 Dec 2018
+  place: Santa Crus, Spain
+  icon: mdi mdi-map-marker
+  background: green
--- a/src/_data/theme-colors.yml
+++ b/src/_data/theme-colors.yml
@@ -0,0 +1,16 @@
+- name: primary
+  hex: "#1c7ed6"
+- name: secondary
+  hex: "#868e96"
+- name: success
+  hex: "#28a745"
+- name: danger
+  hex: "#dc3545"
+- name: warning
+  hex: "#ffc107"
+- name: info
+  hex: "#17a2b8"
+- name: light
+  hex: "#f8f9fa"
+- name: dark
+  hex: "#343a40"
--- a/src/_data/users.yml
+++ b/src/_data/users.yml
--- a/src/_docs/blog.md
+++ b/src/_docs/blog.md
@@ -0,0 +1,47 @@
+---
+title: Blog components
+---
+
+Tabler is a great choice when it comes to the blog management. It allows you to create advanced systems with which you'll be able to administrate your posts without the mess. With our components, your blog will be transparent and really nice-looking.
+
+### Post card
+
+The best way to make your post eye-catching is adding an image to it. To do so, just add the image with the `.card-img-top` class:
+
+{% example html columns=1 %}
+{% include cards/blog-single.html type="image" %}
+{% endexample %}
+
+We've added the `.d-flex .flex-column` classes to the `.card-body` to have the author details be on the bottom of the card.
+
+If you want to create a couple of posts next to each other, add the `.row-deck` class to `.row`—then they will all have the same height:
+
+{% example html columns=2 %}
+<div class="row row-cards row-deck">
+    <div class="col-md-4">
+        <div class="card">
+            <div class="card-body">Short content</div>
+        </div>
+    </div>
+    <div class="col-md-4">
+        <div class="card">
+            <div class="card-body">Extra long content of card. Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
+        </div>
+    </div>
+    <div class="col-md-4">
+        <div class="card">
+            <div class="card-body">Short content</div>
+        </div>
+    </div>
+</div>
+{% endexample %}
+
+### Post card with aside image
+
+You can also add the image on the left side of the card. All you need do to is: add the `.card-aside` class to the element with the `.card` class. Then add the image in the `.card-aside-column` element. No worries, tabler will automatically center it and scale to right size:
+
+{% example html columns=2 %}
+{% include cards/blog-single.html type="aside" liked=1 %}
+{% endexample %}
+
+See more live examples [here]({{ site.base }}/blog.html).
--- a/src/_docs/buttons.md
+++ b/src/_docs/buttons.md
@@ -0,0 +1,16 @@
+---
+title: Buttons
+---
+
+### Pill buttons
+
+Add `.btn-pill` to any button to make them more rounded.
+
+{% example html %}
+<a href="#" class="btn btn-pill btn-primary">Primary</a>
+<a href="#" class="btn btn-pill btn-secondary">Secondary</a>
+<a href="#" class="btn btn-pill btn-success">Success</a>
+<a href="#" class="btn btn-pill btn-info">Info</a>
+<a href="#" class="btn btn-pill btn-warning">Warning</a>
+<a href="#" class="btn btn-pill btn-danger">Danger</a>
+{% endexample %}
--- a/src/_docs/charts.md
+++ b/src/_docs/charts.md
@@ -0,0 +1,19 @@
+---
+title: Charts
+---
+
+### c3.js charts 
+
+Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+
+{% example html columns=2 %}
+<div class="card">
+	<div class="card-header">
+		<h3 class="card-title">Chart name</h3>
+	</div>
+	<div class="card-body">
+		<div id="chart-wrapper" style="height: 16rem"></div>
+	</div>
+</div>
+{% include js-charts.html id="chart-wrapper" data='temperature' %}
+{% endexample %}
--- a/src/_docs/form-components.md
+++ b/src/_docs/form-components.md
@@ -0,0 +1,47 @@
+---
+title: Form components
+---
+
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
+
+{:toc}
+
+### Color input
+
+At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+
+{% example html %}
+{% include parts/input-color.html %}
+{% endexample %}
+
+### Image input
+
+At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+
+{% example html %}
+{% include parts/input-image.html row-class="col-sm-2" limit=6 %}
+{% endexample %}
+
+### Icon input
+
+At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+
+{% example html %}
+{% include parts/input-icon.html %}
+{% endexample %}
+
+### Toggle switches
+
+At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+
+{% example html %}
+{% include parts/input-toggle.html %}
+{% endexample %}
+
+### Form fieldset
+
+At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+
+{% example html %}
+{% include parts/form-fieldset.html %}
+{% endexample %}
--- a/src/_docs/index.md
+++ b/src/_docs/index.md
@@ -0,0 +1,36 @@
+---
+title: Getting started
+---
+
+We’ve created this admin panel for everyone who wants to create any templates based on our ready components. Our mission is to deliver a user-friendly, clear and easy administration panel, that can be used by both, simple websites and sophisticated systems. The only requirement is a basic HTML and CSS knowledge—as a reward, you'll be able to manage and visualize different types of data in the easiest possible way!
+
+After using many of different admin panels, no matter free or paid, we've noticed they all had a lot of defects—and the main one was resource intensity.
+They were loading loads of useless components that you wouldn't ever use, so we've decided to choose a different way. The whole system is plugin-based, what means that you have a control over what is needed and what not.
+
+To make the system works fast and reliable, we've converted most of the components to CSS. Thanks to this, you don't have to load a lot of unnecessary libraries into your browser what really boosts the overall speed.
+
+In this documentation we're going to describe common use-cases for most of our components since we want to make our tool be accessible to everyone.
+
+If you miss any component, feel free to drop us a line at: [email]—we'll do our best to add it.
+
+### What’s included
+
+Within template you’ll find the following directories and files, grouping common resources and providing both compiled and minified distribution files, as well as raw source files.  It's up to you how you're going to use them.
+
+```
+tabler.io/
+  ├── assets/
+  ├── docs/
+  └── README.md
+```
+
+
+
+### Browser Support
+
+{{ site.title }} is build in Bootstrap, which supports the latest, stable releases of all major browsers and platforms. On Windows, we support Internet Explorer 10-11 / Microsoft Edge.
+
+### License
+
+tabler.io is released under MIT license. tabler.io is a free Bootstrap 4 admin template developed from [codecalm.net](http://codecalm.net). Feel free to download it, use it, share it, get creative with it.
+
--- a/src/_elements.html
+++ b/src/_elements.html
@@ -0,0 +1,555 @@
+---
+title: All elements
+layout: default
+---
+<div class="container">
+	<div class="card">
+		<div class="card-body">
+			<h1>h1. Bootstrap heading</h1>
+			<h2>h2. Bootstrap heading</h2>
+			<h3>h3. Bootstrap heading</h3>
+			<h4>h4. Bootstrap heading</h4>
+			<h5>h5. Bootstrap heading</h5>
+			<h6>h6. Bootstrap heading</h6>
+
+			<h3>
+				Fancy display heading
+				<small class="text-muted">With faded secondary text</small>
+			</h3>
+
+			<h1 class="display-1">Display 1</h1>
+			<h1 class="display-2">Display 2</h1>
+			<h1 class="display-3">Display 3</h1>
+			<h1 class="display-4">Display 4</h1>
+
+			<p class="lead">
+				Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
+			</p>
+
+			<p>You can use the mark tag to
+				<mark>highlight</mark>
+				text.
+			</p>
+			<p>
+				<del>This line of text is meant to be treated as deleted text.</del>
+			</p>
+			<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
+			<p>
+				<ins>This line of text is meant to be treated as an addition to the document.</ins>
+			</p>
+			<p><u>This line of text will render as underlined</u></p>
+			<p>
+				<small>This line of text is meant to be treated as fine print.</small>
+			</p>
+			<p><strong>This line rendered as bold text.</strong></p>
+			<p><em>This line rendered as italicized text.</em></p>
+
+			<blockquote class="blockquote">
+				<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+			</blockquote>
+
+			<blockquote class="blockquote">
+				<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+				<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
+			</blockquote>
+
+
+			<ul class="list-unstyled">
+				<li>Lorem ipsum dolor sit amet</li>
+				<li>Consectetur adipiscing elit</li>
+				<li>Integer molestie lorem at massa</li>
+				<li>Facilisis in pretium nisl aliquet</li>
+				<li>Nulla volutpat aliquam velit
+					<ul>
+						<li>Phasellus iaculis neque</li>
+						<li>Purus sodales ultricies</li>
+						<li>Vestibulum laoreet porttitor sem</li>
+						<li>Ac tristique libero volutpat at</li>
+					</ul>
+				</li>
+				<li>Faucibus porta lacus fringilla vel</li>
+				<li>Aenean sit amet erat nunc</li>
+				<li>Eget porttitor lorem</li>
+			</ul>
+
+			<dl class="row">
+				<dt class="col-sm-3">Description lists</dt>
+				<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
+
+				<dt class="col-sm-3">Euismod</dt>
+				<dd class="col-sm-9">
+					<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
+					<p>Donec id elit non mi porta gravida at eget metus.</p>
+				</dd>
+
+				<dt class="col-sm-3">Malesuada porta</dt>
+				<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
+
+				<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
+				<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
+
+				<dt class="col-sm-3">Nesting</dt>
+				<dd class="col-sm-9">
+					<dl class="row">
+						<dt class="col-sm-4">Nested definition list</dt>
+						<dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
+					</dl>
+				</dd>
+			</dl>
+
+			<p>For example, <code>&lt;section&gt;</code> should be wrapped as inline.</p>
+
+			<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
+&lt;p&gt;And another line of sample text here...&lt;/p&gt;
+</code></pre>
+
+			<p>
+				<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
+			</p>
+
+			<p>
+				To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
+				To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
+			</p>
+
+			<p>
+				<samp>This text is meant to be treated as sample output from a computer program.</samp>
+			</p>
+
+			<table class="table">
+				<thead>
+				<tr>
+					<th>#</th>
+					<th>First Name</th>
+					<th>Last Name</th>
+					<th>Username</th>
+				</tr>
+				</thead>
+				<tbody>
+				<tr>
+					<th scope="row">1</th>
+					<td>Mark</td>
+					<td>Otto</td>
+					<td>@mdo</td>
+				</tr>
+				<tr>
+					<th scope="row">2</th>
+					<td>Jacob</td>
+					<td>Thornton</td>
+					<td>@fat</td>
+				</tr>
+				<tr>
+					<th scope="row">3</th>
+					<td>Larry</td>
+					<td>the Bird</td>
+					<td>@twitter</td>
+				</tr>
+				</tbody>
+			</table>
+
+			<table class="table table-striped">
+				<thead>
+				<tr>
+					<th>#</th>
+					<th>First Name</th>
+					<th>Last Name</th>
+					<th>Username</th>
+				</tr>
+				</thead>
+				<tbody>
+				<tr>
+					<th scope="row">1</th>
+					<td>Mark</td>
+					<td>Otto</td>
+					<td>@mdo</td>
+				</tr>
+				<tr>
+					<th scope="row">2</th>
+					<td>Jacob</td>
+					<td>Thornton</td>
+					<td>@fat</td>
+				</tr>
+				<tr>
+					<th scope="row">3</th>
+					<td>Larry</td>
+					<td>the Bird</td>
+					<td>@twitter</td>
+				</tr>
+				</tbody>
+			</table>
+
+			<figure class="figure">
+				<img src="https://placehold.it/400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
+				<figcaption class="figure-caption">A caption for the above image.</figcaption>
+			</figure>
+
+			<div class="alert alert-primary" role="alert">
+				This is a primary alert with <a href="javascript:void(0)" class="alert-link">an example link</a>. Give it a click if you like.
+			</div>
+			<div class="alert alert-secondary" role="alert">
+				This is a secondary alert with <a href="javascript:void(0)" class="alert-link">an example link</a>. Give it a click if you like.
+			</div>
+			<div class="alert alert-success" role="alert">
+				This is a success alert with <a href="javascript:void(0)" class="alert-link">an example link</a>. Give it a click if you like.
+			</div>
+			<div class="alert alert-danger" role="alert">
+				This is a danger alert with <a href="javascript:void(0)" class="alert-link">an example link</a>. Give it a click if you like.
+			</div>
+			<div class="alert alert-warning" role="alert">
+				This is a warning alert with <a href="javascript:void(0)" class="alert-link">an example link</a>. Give it a click if you like.
+			</div>
+			<div class="alert alert-info" role="alert">
+				This is a info alert with <a href="javascript:void(0)" class="alert-link">an example link</a>. Give it a click if you like.
+			</div>
+			<div class="alert alert-light" role="alert">
+				This is a light alert with <a href="javascript:void(0)" class="alert-link">an example link</a>. Give it a click if you like.
+			</div>
+			<div class="alert alert-dark" role="alert">
+				This is a dark alert with <a href="javascript:void(0)" class="alert-link">an example link</a>. Give it a click if you like.
+			</div>
+
+			<div class="alert alert-warning alert-dismissible fade show" role="alert">
+				<button type="button" class="close" data-dismiss="alert" aria-label="Close">
+					<span aria-hidden="true">&times;</span>
+				</button>
+				<strong>Holy guacamole!</strong> You should check in on some of those fields below.
+			</div>
+
+			<h1>Example heading <span class="badge badge-default">New</span></h1>
+			<h2>Example heading <span class="badge badge-default">New</span></h2>
+			<h3>Example heading <span class="badge badge-default">New</span></h3>
+			<h4>Example heading <span class="badge badge-default">New</span></h4>
+			<h5>Example heading <span class="badge badge-default">New</span></h5>
+			<h6>Example heading <span class="badge badge-default">New</span></h6>
+
+			<p>
+				<button class="btn">
+					Profile <span class="badge badge-default">9</span>
+					<span class="sr-only">unread messages</span>
+				</button>
+			</p>
+
+			<p>
+				<span class="badge badge-primary">Primary</span>
+				<span class="badge badge-default">Secondary</span>
+				<span class="badge badge-success">Success</span>
+				<span class="badge badge-danger">Danger</span>
+				<span class="badge badge-warning">Warning</span>
+				<span class="badge badge-info">Info</span>
+				<span class="badge badge-light">Light</span>
+				<span class="badge badge-dark">Dark</span>
+			</p>
+
+			<p>
+				<span class="badge badge-pill badge-primary">Primary</span>
+				<span class="badge badge-pill badge-default">Secondary</span>
+				<span class="badge badge-pill badge-success">Success</span>
+				<span class="badge badge-pill badge-danger">Danger</span>
+				<span class="badge badge-pill badge-warning">Warning</span>
+				<span class="badge badge-pill badge-info">Info</span>
+				<span class="badge badge-pill badge-light">Light</span>
+				<span class="badge badge-pill badge-dark">Dark</span>
+			</p>
+
+			<p>
+				<a href="javascript:void(0)" class="badge badge-primary">Primary</a>
+				<a href="javascript:void(0)" class="badge badge-default">Secondary</a>
+				<a href="javascript:void(0)" class="badge badge-success">Success</a>
+				<a href="javascript:void(0)" class="badge badge-danger">Danger</a>
+				<a href="javascript:void(0)" class="badge badge-warning">Warning</a>
+				<a href="javascript:void(0)" class="badge badge-info">Info</a>
+				<a href="javascript:void(0)" class="badge badge-light">Light</a>
+				<a href="javascript:void(0)" class="badge badge-dark">Dark</a>
+			</p>
+
+			<ol class="breadcrumb">
+				<li class="breadcrumb-item active">Home</li>
+			</ol>
+			<ol class="breadcrumb">
+				<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
+				<li class="breadcrumb-item active">Library</li>
+			</ol>
+			<ol class="breadcrumb">
+				<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
+				<li class="breadcrumb-item"><a href="javascript:void(0)">Library</a></li>
+				<li class="breadcrumb-item active">Data</li>
+			</ol>
+
+			<nav class="breadcrumb">
+				<a class="breadcrumb-item" href="javascript:void(0)">Home</a>
+				<a class="breadcrumb-item" href="javascript:void(0)">Library</a>
+				<a class="breadcrumb-item" href="javascript:void(0)">Data</a>
+				<span class="breadcrumb-item active">Bootstrap</span>
+			</nav>
+
+			<p>
+				<button type="button" class="btn btn-primary">Primary</button>
+				<button type="button" class="btn btn-secondary">Secondary</button>
+				<button type="button" class="btn btn-success">Success</button>
+				<button type="button" class="btn btn-danger">Danger</button>
+				<button type="button" class="btn btn-warning">Warning</button>
+				<button type="button" class="btn btn-info">Info</button>
+				<button type="button" class="btn btn-light">Light</button>
+				<button type="button" class="btn btn-dark">Dark</button>
+
+				<button type="button" class="btn btn-link">Link</button>
+			</p>
+
+			<p>
+				<a class="btn btn-primary" href="javascript:void(0)" role="button">Link</a>
+				<button class="btn btn-primary" type="submit">Button</button>
+				<input class="btn btn-primary" type="button" value="Input">
+				<input class="btn btn-primary" type="submit" value="Submit">
+				<input class="btn btn-primary" type="reset" value="Reset">
+			</p>
+
+			<p>
+				<button type="button" class="btn btn-outline-primary">Primary</button>
+				<button type="button" class="btn btn-outline-secondary">Secondary</button>
+				<button type="button" class="btn btn-outline-success">Success</button>
+				<button type="button" class="btn btn-outline-danger">Danger</button>
+				<button type="button" class="btn btn-outline-warning">Warning</button>
+				<button type="button" class="btn btn-outline-info">Info</button>
+				<button type="button" class="btn btn-outline-light">Light</button>
+				<button type="button" class="btn btn-outline-dark">Dark</button>
+			</p>
+
+			<div class="btn-group" role="group" aria-label="Basic example">
+				<button type="button" class="btn btn-secondary">Left</button>
+				<button type="button" class="btn btn-secondary">Middle</button>
+				<button type="button" class="btn btn-secondary">Right</button>
+			</div>
+
+			<div class="card my-4" style="width: 20rem;">
+				<img class="card-img-top" src="https://placehold.it/318x180" alt="Card image cap">
+				<div class="card-body">
+					<h4 class="card-title">Card title</h4>
+					<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+					<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
+				</div>
+			</div>
+
+			<div class="card my-4">
+				<div class="card-body">
+					This is some text within a card block.
+				</div>
+			</div>
+
+			<div class="row my-4">
+				<div class="col-sm-6">
+					<div class="card">
+						<div class="card-body">
+							<h4 class="card-title">Special title treatment</h4>
+							<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+							<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
+						</div>
+					</div>
+				</div>
+				<div class="col-sm-6">
+					<div class="card">
+						<div class="card-body">
+							<h4 class="card-title">Special title treatment</h4>
+							<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+							<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="card text-center my-4">
+				<div class="card-header">
+					<ul class="nav nav-tabs card-header-tabs">
+						<li class="nav-item">
+							<a class="nav-link active" href="javascript:void(0)">Active</a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link" href="javascript:void(0)">Link</a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
+						</li>
+					</ul>
+				</div>
+				<div class="card-body">
+					<h4 class="card-title">Special title treatment</h4>
+					<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+					<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
+				</div>
+			</div>
+
+			<div class="card text-white bg-primary mb-3" style="max-width: 20rem;">
+				<div class="card-header">Header</div>
+				<div class="card-body">
+					<h4 class="card-title">Primary card title</h4>
+					<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+				</div>
+			</div>
+			<div class="card text-white bg-secondary mb-3" style="max-width: 20rem;">
+				<div class="card-header">Header</div>
+				<div class="card-body">
+					<h4 class="card-title">Secondary card title</h4>
+					<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+				</div>
+			</div>
+			<div class="card text-white bg-success mb-3" style="max-width: 20rem;">
+				<div class="card-header">Header</div>
+				<div class="card-body">
+					<h4 class="card-title">Success card title</h4>
+					<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+				</div>
+			</div>
+			<div class="card text-white bg-danger mb-3" style="max-width: 20rem;">
+				<div class="card-header">Header</div>
+				<div class="card-body">
+					<h4 class="card-title">Danger card title</h4>
+					<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+				</div>
+			</div>
+			<div class="card text-white bg-warning mb-3" style="max-width: 20rem;">
+				<div class="card-header">Header</div>
+				<div class="card-body">
+					<h4 class="card-title">Warning card title</h4>
+					<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+				</div>
+			</div>
+			<div class="card text-white bg-info mb-3" style="max-width: 20rem;">
+				<div class="card-header">Header</div>
+				<div class="card-body">
+					<h4 class="card-title">Info card title</h4>
+					<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+				</div>
+			</div>
+			<div class="card bg-light mb-3" style="max-width: 20rem;">
+				<div class="card-header">Header</div>
+				<div class="card-body">
+					<h4 class="card-title">Light card title</h4>
+					<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+				</div>
+			</div>
+			<div class="card text-white bg-dark mb-3" style="max-width: 20rem;">
+				<div class="card-header">Header</div>
+				<div class="card-body">
+					<h4 class="card-title">Dark card title</h4>
+					<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+				</div>
+			</div>
+
+			<div class="card-deck">
+				<div class="card">
+					<img class="card-img-top" src="https://placehold.it/318x180" alt="Card image cap">
+					<div class="card-body">
+						<h4 class="card-title">Card title</h4>
+						<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit
+							longer.</p>
+						<p class="card-text">
+							<small class="text-muted">Last updated 3 mins ago</small>
+						</p>
+					</div>
+				</div>
+				<div class="card">
+					<img class="card-img-top" src="https://placehold.it/318x180" alt="Card image cap">
+					<div class="card-body">
+						<h4 class="card-title">Card title</h4>
+						<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
+						<p class="card-text">
+							<small class="text-muted">Last updated 3 mins ago</small>
+						</p>
+					</div>
+				</div>
+				<div class="card">
+					<img class="card-img-top" src="https://placehold.it/318x180" alt="Card image cap">
+					<div class="card-body">
+						<h4 class="card-title">Card title</h4>
+						<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer
+							content than the first to show that equal height action.</p>
+						<p class="card-text">
+							<small class="text-muted">Last updated 3 mins ago</small>
+						</p>
+					</div>
+				</div>
+			</div>
+
+			<div class="progress my-4">
+				<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
+			</div>
+			<div class="progress my-4">
+				<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+			</div>
+			<div class="progress my-4">
+				<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+			</div>
+			<div class="progress my-4">
+				<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+			</div>
+			<div class="progress my-4">
+				<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
+			</div>
+			<div class="progress my-4">
+				<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
+			</div>
+
+			<div class="progress my-4">
+				<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+			</div>
+			<div class="progress my-4">
+				<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+			</div>
+			<div class="progress my-4">
+				<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+			</div>
+			<div class="progress my-4">
+				<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
+			</div>
+
+			<div class="progress my-4">
+				<div class="progress-bar progress-bar-animated progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0"
+					 aria-valuemax="100"></div>
+			</div>
+			<div class="progress my-4">
+				<div class="progress-bar progress-bar-animated progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25"
+					 aria-valuemin="0" aria-valuemax="100"></div>
+			</div>
+			<div class="progress my-4">
+				<div class="progress-bar progress-bar-animated progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0"
+					 aria-valuemax="100"></div>
+			</div>
+			<div class="progress my-4">
+				<div class="progress-bar progress-bar-animated progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75"
+					 aria-valuemin="0" aria-valuemax="100"></div>
+			</div>
+			<div class="progress my-4">
+				<div class="progress-bar progress-bar-animated progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100"
+					 aria-valuemin="0" aria-valuemax="100"></div>
+			</div>
+
+			<div class="my-4">
+				<div class="dropdown">
+					<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
+							aria-expanded="false">
+						Dropdown button
+					</button>
+					<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+						<a class="dropdown-item" href="javascript:void(0)">Action</a>
+						<a class="dropdown-item" href="javascript:void(0)">Another action</a>
+						<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
+					</div>
+				</div>
+			</div>
+
+			<div class="my-4">
+				<div class="btn-group">
+					<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+						Action
+					</button>
+					<div class="dropdown-menu">
+						<a class="dropdown-item" href="javascript:void(0)">Action</a>
+						<a class="dropdown-item" href="javascript:void(0)">Another action</a>
+						<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
+						<div class="dropdown-divider"></div>
+						<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
--- a/src/_includes/aside.html
+++ b/src/_includes/aside.html
@@ -0,0 +1,28 @@
+<aside class="aside">
+	<div class="aside-header">
+		<div class="row">
+			<div class="col-auto">
+				<span class="avatar" style="background-image: url({{ site.base }}/assets/images/faces/male/4.jpg)">
+		            <span class="avatar-status bg-green"></span>
+		        </span>
+			</div>
+			<div class="col">
+				<h5 class="mb-0">Boston Rob</h5>
+				<small class="d-block text-muted">3 minutes ago</small>
+			</div>
+		</div>
+	</div>
+	<div class="aside-body">
+		{% include chat-content.html %}
+	</div>
+	<div class="aside-footer">
+		<div class="row xs-gutters">
+			<div class="col">
+				<input type="text" class="form-control" placeholder="Message to Bob&hellip;">
+			</div>
+			<div class="col-auto">
+				<button class="btn btn-primary"><i class="si si-arrow-right"></i></button>
+			</div>
+		</div>
+	</div>
+</aside>
--- a/src/_includes/cards/alert.html
+++ b/src/_includes/cards/alert.html
@@ -0,0 +1,6 @@
+<div class="alert alert-warning alert-dismissible show mb-5" role="alert">
+	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
+		<span aria-hidden="true">&times;</span>
+	</button>
+	<strong>Holy guacamole!</strong> You should check in on some of those fields below.
+</div>
--- a/src/_includes/cards/all.html
+++ b/src/_includes/cards/all.html
@@ -0,0 +1,16 @@
+<div class="card">
+	<img class="card-img-top" src="{{ site.data.photos[5].small }}" alt="Card image cap">
+	<div class="card-body">
+		<h4 class="card-title">Card title</h4>
+		<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+	</div>
+	<ul class="list-group card-list-group">
+		<li class="list-group-item">Cras justo odio</li>
+		<li class="list-group-item">Dapibus ac facilisis in</li>
+		<li class="list-group-item">Vestibulum at eros</li>
+	</ul>
+	<div class="card-body">
+		<a href="javascript:void(0)" class="card-link">Card link</a>
+		<a href="javascript:void(0)" class="card-link">Another link</a>
+	</div>
+</div>
--- a/src/_includes/cards/aside.html
+++ b/src/_includes/cards/aside.html
@@ -0,0 +1,9 @@
+<div class="card card-aside">
+	<div class="card-aside-column" style="background-image: url({{ site.data.photos[49].small }})"></div>
+	<div class="card-body">
+		<h4 class="card-title">Card with aside</h4>
+		<p>
+			Lorem ipsum dolor sit amet.
+		</p>
+	</div>
+</div>
--- a/src/_includes/cards/auth.html
+++ b/src/_includes/cards/auth.html
@@ -0,0 +1,60 @@
+<div class="card">
+	<div class="card-header">
+		<h4 class="card-title">Authentication</h4>
+	</div>
+	<div class="card-body">
+		<ul class="list-unstyled list-separated">
+			<li class="list-separated-item">
+				<div class="row align-items-center">
+					<div class="col-auto w-8 text-center text-muted h1 m-0">
+						<i class="si si-user"></i>
+					</div>
+					<div class="col">
+						<div class="h5 mb-1">Everyone can look me up</div>
+						<p class="text-muted m-0">A Jedi can feel the Force flowing through him. You mean it controls your actions</p>
+					</div>
+					<div class="col-auto text-right">
+						<label class="custom-switch">
+							<input type="checkbox" class="custom-switch-input">
+							<span class="custom-switch-indicator"></span>
+						</label>
+					</div>
+				</div>
+			</li>
+			<li class="list-separated-item">
+				<div class="row align-items-center">
+					<div class="col-auto w-8 text-center text-muted h1 m-0">
+						<i class="si si-screen-smartphone"></i>
+					</div>
+					<div class="col">
+						<div class="h5 mb-1">Everyone can contact me</div>
+						<p class="text-muted m-0">When we heard about Alderaan, we were afraid that you were</p>
+					</div>
+					<div class="col-auto text-right">
+						<label class="custom-switch">
+							<input type="checkbox" class="custom-switch-input" checked>
+							<span class="custom-switch-indicator"></span>
+						</label>
+					</div>
+				</div>
+			</li>
+			<li class="list-separated-item">
+				<div class="row align-items-center">
+					<div class="col-auto w-8 text-center text-muted h1 m-0">
+						<i class="si si-location-pin"></i>
+					</div>
+					<div class="col">
+						<div class="h5 mb-1">Show my location</div>
+						<p class="text-muted m-0"> I said, all systems have been alerted to your presence, sir. </p>
+					</div>
+					<div class="col-auto text-right">
+						<label class="custom-switch">
+							<input type="checkbox" class="custom-switch-input" checked>
+							<span class="custom-switch-indicator"></span>
+						</label>
+					</div>
+				</div>
+			</li>
+		</ul>
+	</div>
+</div>
--- a/src/_includes/cards/avatars.html
+++ b/src/_includes/cards/avatars.html
@@ -0,0 +1,41 @@
+<div class="card">
+	<div class="card-header">
+		<h4 class="card-title">New users</h4>
+		<div class="card-options">
+			<button type="button" class="btn btn-option" data-toggle="tooltip" title="Edit">
+				<i class="si si-pencil"></i>
+			</button>
+			<div class="dropdown card-options-dropdown">
+				<button type="button" class="btn btn-option dropdown-toggle" data-toggle="dropdown"><i class="si si-options"></i></button>
+				<div class="dropdown-menu dropdown-menu-right">
+					<a class="dropdown-item" href="javascript:void(0)">
+						<i class="si si-bell mr-3"></i>News
+					</a>
+					<a class="dropdown-item" href="javascript:void(0)">
+						<i class="si si-envelope mr-3"></i>Messages
+					</a>
+					<div class="dropdown-divider"></div>
+					<a class="dropdown-item" href="javascript:void(0)">
+						<i class="si si-pencil mr-3"></i>Edit Profile
+					</a>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="card-body">
+		<div class="card-text">
+			<ul class="avatar-list">
+				{% for user in site.data.users limit: 10 offset: 16 %}
+				<li class="avatar-list-item">
+					<a href="javascript:void(0)" class="avatar avatar-lg" style="background-image: url({{ user.photo }})">
+						{% if forloop.index > 3 and forloop.index < 7 or forloop.index == 9 %}
+							<span class="avatar-status bg-green"></span>
+						{% endif %}
+					</a>
+				</li>
+				{% endfor %}
+			</ul>
+		</div>
+	</div>
+</div>
--- a/src/_includes/cards/blog-single.html
+++ b/src/_includes/cards/blog-single.html
@@ -0,0 +1,34 @@
+{% assign article = include.article | default: site.data.articles[0] %}
+{% assign type = include.type | default: 'none' %}
+{% assign author = site.data.users[article.author] %}
+{% assign liked = include.liked | default: false %}
+{% assign truncate = include.truncate | default: 100 %}
+
+<div class="card{% if type == 'aside' %} card-aside{% endif %}">
+	{% if type == 'image' %}
+	<a href="#"><img class="card-img-top" src="{{ site.base }}/{{ site.data.photos[article.image].small }}" alt="{{ article.title | escape}}"></a>
+	{% endif %}
+
+	{% if type == 'aside' %}
+	<a href="#" class="card-aside-column{% if include.aside-class %} {{ include.aside-class }}{% endif %}" style="background-image: url({{ site.base }}/{{ site.data.photos[article.image].small }})"></a>
+	{% endif %}
+
+
+
+	<div class="card-body d-flex flex-column">
+		<h4><a href="#">{{ article.title }}</a></h4>
+
+		<div class="text-muted">{{ article.description | truncate: truncate }}</div>
+
+		<div class="d-flex align-items-center pt-5 mt-auto">
+			<div class="avatar avatar-md mr-3" style="background-image: url({{ site.base }}/{{ author.photo }})"></div>
+			<div>
+				<a href="{{ site.base }}/profile.html" class="text-default">{{ author.name }} {{ author.surname }}</a>
+				<small class="d-block text-muted">3 days ago</small>
+			</div>
+			<div class="ml-auto {% if liked %}text-red{% else %}text-muted{% endif %}">
+				<a href="javascript:void(0)" class="icon d-none d-md-inline-block ml-3"><i class="fe fe-heart mr-1"></i></a>
+			</div>
+		</div>
+	</div>
+</div>
--- a/src/_includes/cards/border.html
+++ b/src/_includes/cards/border.html
@@ -0,0 +1,8 @@
+<div class="card border-{{ include.color }}">
+	<div class="card-body text-{{ include.color }}">
+		<h4 class="card-title">
+			{{ include.color | capitalize }} card title
+		</h4>
+		<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+	</div>
+</div>
--- a/src/_includes/cards/browsers.html
+++ b/src/_includes/cards/browsers.html
@@ -0,0 +1,37 @@
+<div class="card">
+	<div class="card-header">
+		<h4 class="card-title">Browser Stats</h4>
+	</div>
+	<table class="table card-table">
+		<tr>
+			<td width="1"><i class="fa fa-chrome text-muted"></i></td>
+			<td>Google Chrome</td>
+			<td class="text-right"><span class="text-muted">23%</span></td>
+		</tr>
+		<tr>
+			<td><i class="fa fa-firefox text-muted"></i></td>
+			<td>Mozila Firefox</td>
+			<td class="text-right"><span class="text-muted">15%</span></td>
+		</tr>
+		<tr>
+			<td><i class="fa fa-safari text-muted"></i></td>
+			<td>Apple Safari</td>
+			<td class="text-right"><span class="text-muted">7%</span></td>
+		</tr>
+		<tr>
+			<td><i class="fa fa-internet-explorer text-muted"></i></td>
+			<td>Internet Explorer</td>
+			<td class="text-right"><span class="text-muted">9%</span></td>
+		</tr>
+		<tr>
+			<td><i class="fa fa-opera text-muted"></i></td>
+			<td>Opera mini</td>
+			<td class="text-right"><span class="text-muted">23%</span></td>
+		</tr>
+		<tr>
+			<td><i class="fa fa-edge text-muted"></i></td>
+			<td>Microsoft edge</td>
+			<td class="text-right"><span class="text-muted">9%</span></td>
+		</tr>
+	</table>
+</div>
--- a/src/_includes/cards/buttons.html
+++ b/src/_includes/cards/buttons.html
@@ -0,0 +1,25 @@
+<div class="card">
+	<div class="card-header">
+		<h3 class="card-title">Buttons</h3>
+	</div>
+	<div class="card-body">
+		<p>
+			<button type="button" class="btn btn-primary">Primary</button>
+			<button type="button" class="btn btn-secondary">Default</button>
+			<button type="button" class="btn btn-secondary">Secondary</button>
+			<button type="button" class="btn btn-success">Success</button>
+			<button type="button" class="btn btn-info">Info</button>
+			<button type="button" class="btn btn-warning">Warning</button>
+			<button type="button" class="btn btn-danger">Danger</button>
+		</p>
+		<p>
+			<button type="button" class="btn btn-outline-primary">Primary</button>
+			<button type="button" class="btn btn-outline-default">Default</button>
+			<button type="button" class="btn btn-outline-secondary">Secondary</button>
+			<button type="button" class="btn btn-outline-success">Success</button>
+			<button type="button" class="btn btn-outline-info">Info</button>
+			<button type="button" class="btn btn-outline-warning">Warning</button>
+			<button type="button" class="btn btn-outline-danger">Danger</button>
+		</p>
+	</div>
+</div>
--- a/src/_includes/cards/calendar.html
+++ b/src/_includes/cards/calendar.html
@@ -0,0 +1,80 @@
+<div class="card">
+	<div class="card-header">
+		<h3 class="card-title text-center">December 2017</h3>
+	</div>
+	<div class="card-body p-3">
+		<table class="table table-calendar">
+			<tbody>
+			<tr>
+				<th>Mo</th>
+				<th>Tu</th>
+				<th>We</th>
+				<th>Th</th>
+				<th>Fr</th>
+				<th>Sa</th>
+				<th>Su</th>
+			</tr>
+			<tr>
+				<td class="text-muted">27</td>
+				<td class="text-muted">28</td>
+				<td class="text-muted">29</td>
+				<td class="text-muted">30</td>
+				<td>1</td>
+				<td>2</td>
+				<td>3</td>
+			</tr>
+			<tr>
+				<td><a href="javascript:void(0)" class="table-calendar-link">4</a></td>
+				<td>5</td>
+				<td><a href="javascript:void(0)" class="table-calendar-link">6</a></td>
+				<td>7</td>
+				<td>8</td>
+				<td>9</td>
+				<td>10</td>
+			</tr>
+			<tr>
+				<td>11</td>
+				<td><a href="javascript:void(0)" class="table-calendar-link">12</a></td>
+				<td>13</td>
+				<td>14</td>
+				<td><a href="javascript:void(0)">15</a></td>
+				<td>16</td>
+				<td>17</td>
+			</tr>
+			<tr>
+				<td>18</td>
+				<td><a href="javascript:void(0)" class="table-calendar-link">19</a></td>
+				<td><a href="javascript:void(0)" class="table-calendar-link">20</a></td>
+				<td>21</td>
+				<td>22</td>
+				<td>23</td>
+				<td>24</td>
+			</tr>
+			<tr>
+				<td>25</td>
+				<td>26</td>
+				<td>27</td>
+				<td>28</td>
+				<td>29</td>
+				<td>30</td>
+				<td class="text-muted">1</td>
+			</tr>
+			</tbody>
+		</table>
+	</div>
+
+	<ul class="list-group card-list-group">
+		<li class="list-group-item list-group-item-red">
+			<a href="javascript:void(0)" class="text-inherit">Cras justo odio</a>
+			<span class="pull-right text-muted">16 Dec</span>
+		</li>
+		<li class="list-group-item list-group-item-blue">
+			<a href="javascript:void(0)" class="text-inherit">Dapibus ac facilisis in</a>
+			<span class="pull-right text-muted">22 Dec</span>
+		</li>
+		<li class="list-group-item list-group-item-red">
+			<a href="javascript:void(0)" class="text-inherit">Vestibulum at eros</a>
+			<span class="pull-right text-muted">29 Dec</span>
+		</li>
+	</ul>
+</div>
--- a/src/_includes/cards/card.html
+++ b/src/_includes/cards/card.html
@@ -0,0 +1,40 @@
+<div class="card{% if include.collapsed %} card-collapsed{% endif %}">
+	{% if include.status or include.status-left %}
+	<div class="card-status{% if include.status-left %} card-status-left{% endif %} bg-{{ include.status | default: include.status-left }}"></div>
+	{% endif %}
+
+	<div class="card-header">
+		{% if include.title %}
+		<h3 class="card-title">{{ include.title }}</h3>
+		{% endif %}
+
+		{% unless include.hide-options %}
+		<div class="card-options">
+			{% if include.options %}
+			{{ include.options }}
+			{% else %}
+				<a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
+				{% if include.show-fullscreen %}
+				<a href="#" class="card-options-fullscreen" data-toggle="card-fullscreen"><i class="fe fe-maximize"></i></a>
+				{% endif %}
+				<a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
+			{% endif %}
+		</div>
+		{% endunless %}
+	</div>
+	{% if include.alert %}
+	<div class="card-alert alert alert-{{ include.alert-type | default: 'success' }} mb-0">
+		{{ include.alert }}
+	</div>
+	{% endif %}
+	<div class="card-body">
+		<p>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan.
+		</p>
+	</div>
+	{% if include.show-footer %}
+	<div class="card-footer">
+		This is standard card footer
+	</div>
+	{% endif %}
+</div>
--- a/src/_includes/cards/centered.html
+++ b/src/_includes/cards/centered.html
@@ -0,0 +1,7 @@
+<div class="card text-center">
+	<div class="card-body">
+		<h4 class="card-title">Special title treatment</h4>
+		<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+		<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
+	</div>
+</div>
--- a/src/_includes/cards/chart-bg.html
+++ b/src/_includes/cards/chart-bg.html
@@ -0,0 +1,19 @@
+{% assign color = include.color | default: 'blue' %}
+{% assign offset = include.offset | default: 0 %}
+{% assign limit = include.limit | default: 20 %}
+{% assign aggregate = include.aggregate | default: false %}
+
+<div class="card">
+	<div class="card-body">
+		<div class="card-value pull-right text-{{ color }}">{{ include.rate | default: '+5%' }}</div>
+		<h3 class="mb-1">{{ include.title | default: '423' }}</h3>
+		<div class="text-muted">{{ include.description | default: 'Users online' }}</div>
+	</div>
+	<div class="card-chart-bg">
+		<div id="{{ include.id }}" style="height: 100%"></div>
+	</div>
+</div>
+
+{% contentfor scripts %}
+{% include js/chart-bg.js id=include.id color=color %}
+{% endcontentfor %}
--- a/src/_includes/cards/chart-browsers.html
+++ b/src/_includes/cards/chart-browsers.html
@@ -0,0 +1,65 @@
+<div class="card">
+	<div class="card-body">
+		<h3 class="card-title">Browsers traffic</h3>
+		<div>
+			<div id="chart-browsers" style="height: 15rem"></div>
+		</div>
+	</div>
+	<table class="table card-table">
+		<tbody>
+		<tr>
+			<td width="1"><i class="browser browser-chrome"></i></td>
+			<td>Google Chrome</td>
+			<td class="text-right"><span class="text-muted">23%</span></td>
+		</tr>
+		<tr>
+			<td><i class="browser browser-firefox"></i></td>
+			<td>Mozila Firefox</td>
+			<td class="text-right"><span class="text-muted">15%</span></td>
+		</tr>
+		<tr>
+			<td><i class="browser browser-safari"></i></td>
+			<td>Apple Safari</td>
+			<td class="text-right"><span class="text-muted">7%</span></td>
+		</tr>
+		<tr>
+			<td><i class="browser browser-opera"></i></td>
+			<td>Opera mini</td>
+			<td class="text-right"><span class="text-muted">23%</span></td>
+		</tr>
+		<tr>
+			<td><i class="browser browser-edge"></i></td>
+			<td>Microsoft edge</td>
+			<td class="text-right"><span class="text-muted">9%</span></td>
+		</tr>
+		</tbody>
+	</table>
+</div>
+
+<script>
+    require(['c3', 'jquery'], function (c3) {
+        var chart = c3.generate({
+            bindto: '#chart-browsers',
+            data: {
+                columns: [
+                    ['Chrome', 36],
+                    ['Firefox', 5],
+                    ['Safari', 9],
+                    ['Edge', 20],
+                    ['Opera', 30],
+                ],
+                colors: {
+                    Chrome: '{{ site.colors.green }}',
+                    Firefox: '{{ site.colors.orange }}',
+                    Safari: '{{ site.colors.blue }}',
+                    Edge: '{{ site.colors.azure }}',
+                    Opera: '{{ site.colors.red }}',
+                },
+                type: 'donut'
+            },
+            legend: {
+                show: false
+            }
+        });
+    });
+</script>
--- a/src/_includes/cards/chart-followers.html
+++ b/src/_includes/cards/chart-followers.html
@@ -0,0 +1,87 @@
+<div class="card">
+	<div class="card-header">
+		<div class="card-title">Gained &amp; Lost Followers</div>
+	</div>
+	<div class="card-body">
+		<div id="chart-followers" style="height: 16rem"></div>
+	</div>
+</div>
+
+<script>
+    require(['c3', 'jquery'], function (c3, $) {
+        $(document).ready(function () {
+            var chart = c3.generate({
+                bindto: '#chart-followers',
+                padding: {
+                    bottom: 24,
+                    top: 0
+                },
+                data: {
+                    names: {
+                        data1: 'Gained followers',
+                        data2: 'Lost followers',
+                        data3: 'Posts',
+                    },
+                    colors: {
+                        data1: '{{ site.colors.blue }}',
+                        data2: '{{ site.colors.gray }}',
+                        data3: '{{ site.colors.lime }}',
+                    },
+                    columns: [
+                        ['data1', 200, 290, 110, 80, 300, 90, 120],
+                        ['data2', 0, -35, -20, -10, -50, -10, 0],
+                        ['data3', 1, 2, 2, 0, 1, 1, 0]
+                    ],
+                    type: 'bar',
+                    types: {
+                        data3: 'line'
+                    },
+                    groups: [
+                        ['data1', 'data2']
+                    ],
+                    axes: {
+                        data3: 'y2'
+                    }
+                },
+                bar: {
+                    width: 16
+                },
+                legend: {
+                    padding: 16
+                },
+                axis: {
+                    y: {
+                        min: -100,
+                        tick: {
+                            count: 5
+                        },
+                        padding: {
+                            bottom: 0,
+							top: 0
+                        }
+                    },
+                    y2: {
+                        min: -1,
+						max: 3,
+                        show: true,
+                        tick: {
+							format: d3.format('d')
+                        },
+                        padding: {
+                            bottom: 0,
+                            top: 0
+                        }
+                    }
+                },
+                grid: {
+                    y: {
+                        show: true,
+                        lines: [
+                            {value: 0.0}
+                        ]
+                    }
+                }
+            });
+        });
+    });
+</script>
--- a/src/_includes/cards/chart-pie.html
+++ b/src/_includes/cards/chart-pie.html
@@ -0,0 +1,12 @@
+<div class="card">
+	<div class="card-header">
+		<h3 class="card-title">Pie chart</h3>
+	</div>
+	<div class="card-body">
+		<div id="chart-pie" style="height: 250px"></div>
+	</div>
+</div>
+
+{% contentfor scripts %}
+{% include js/pie.js %}
+{% endcontentfor %}
--- a/src/_includes/cards/chart-radar.html
+++ b/src/_includes/cards/chart-radar.html
@@ -0,0 +1,11 @@
+<div class="card">
+	<div class="card-header">
+		<h3 class="card-title">Radar chart</h3>
+	</div>
+	<div class="card-body">
+		<canvas id="canvas1" height="200"></canvas>
+	</div>
+</div>
+
+{% contentfor scripts %}
+{% endcontentfor %}
--- a/src/_includes/cards/chart-revenue.html
+++ b/src/_includes/cards/chart-revenue.html
@@ -0,0 +1,60 @@
+<div class="card">
+	<div class="card-header">
+		<h3 class="card-title">Total Revenue</h3>
+	</div>
+	<div class="card-body">
+		<div id="chart-revenue" style="height: 20rem"></div>
+	</div>
+</div>
+
+<script>
+	require(['c3', 'jquery'], function(c3) {
+	   $(document).ready(function(){
+           var chart = c3.generate({
+               bindto: '#chart-revenue',
+               data: {
+                   columns: [
+					   ['data1', 39, 44, 47, 50, 55, 66, 79, 84, 86, 87, 92, 95],
+                       ['data2', 65, 73, 83, 95, 96, 97, 99, 100, 103, 116, 138, 143],
+                       ['data3', 101, 104, 119, 125, 132, 143, 145, 161, 167, 187, 191, 194]
+                   ],
+                   type: 'bar',
+                   groups: [
+                       ['data1', 'data2', 'data3']
+                   ],
+				   colors: {
+                     	'data1': tabler.colors.red,
+                     	'data2': tabler.colors.green,
+                     	'data3': tabler.colors.blue,
+				   },
+				   names: {
+                       'data1': '2015',
+                       'data2': '2016',
+                       'data3': '2017',
+				   }
+               },
+               axis : {
+                   x: {
+                       type: 'category',
+                       categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+                   },
+                   y: {
+                       tick: {
+                           format: d3.format("$")
+                       }
+                   }
+               },
+               bar: {
+                   width: 32
+               },
+               padding: {
+                   bottom: 24,
+                   top: 0
+               },
+               legend: {
+                   padding: 16
+               }
+           });
+	   });
+	});
+</script>
--- a/src/_includes/cards/chart-visitors.html
+++ b/src/_includes/cards/chart-visitors.html
@@ -0,0 +1,120 @@
+<div class="card">
+	<div class="card-tabs">
+		<div class="card-tabs-item">
+			<div class="row">
+				<div class="col-auto align-self-center">
+					<div class="chart-circle chart-circle-xs" data-value="0.8" data-thickness="4" data-color="#fca328"></div>
+				</div>
+				<div class="col">
+					<div class="text-muted">Projects</div>
+					<div class="h3 m-0">11,164</div>
+				</div>
+			</div>
+		</div>
+		<div class="card-tabs-item">
+			<div class="row">
+				<div class="col-auto align-self-center">
+					<div class="chart-circle chart-circle-xs" data-value="0.2" data-thickness="4" data-color="#7bd235"></div>
+				</div>
+				<div class="col">
+					<div class="text-muted">Calls</div>
+					<div class="h3 m-0">986</div>
+				</div>
+			</div>
+		</div>
+		<div class="card-tabs-item">
+			<div class="row">
+				<div class="col-auto align-self-center">
+					<div class="chart-circle chart-circle-xs" data-value="0.45" data-thickness="4" data-color="#76befe"></div>
+				</div>
+				<div class="col">
+					<div class="text-muted">Referrals</div>
+					<div class="h3 m-0">1,986</div>
+				</div>
+			</div>
+		</div>
+		<div class="card-tabs-item">
+			<div class="row">
+				<div class="col-auto align-self-center">
+					<div class="chart-circle chart-circle-xs" data-value="0.6" data-thickness="4" data-color="#f90049"></div>
+				</div>
+				<div class="col">
+					<div class="text-muted">Revenue</div>
+					<div class="h3 m-0">$640</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="card-body">
+		<div id="chart-visitors" style="min-height: 18rem"></div>
+	</div>
+</div>
+
+<script>
+    require(['c3', 'jquery'], function (c3) {
+        $(document).ready(function() {
+            var chart = c3.generate({
+                bindto: '#chart-visitors',
+                padding: {
+                    bottom: 24
+                },
+                data: {
+                    x: 'x',
+                    names: {
+                        data1: 'Referral',
+                        data2: 'Calls',
+                        data3: 'Prospects',
+                    },
+                    columns: [
+                        ['x', '2013-07-12', '2013-07-13', '2013-07-14', '2013-07-15', '2013-07-16', '2013-07-17', '2013-07-18', '2013-07-19', '2013-07-20', '2013-07-21', '2013-07-22'],
+                        ['data1', 22, 28, 21, 46, 48, 38, 48, 52, 28, 57, 32],
+                        ['data2', 72, 61, 102, 104, 132, 86, 74, 108, 78, 106, 144],
+                        ['data3', 125, 100, 72, 132, 154, 141, 178, 142, 146, 72, 186],
+                    ],
+                    types: {
+                        data1: 'area',
+                    }
+                },
+                point: {
+                    show: false
+                },
+                legend: {
+                    position: 'top',
+                    padding: 16
+                },
+                transition: {
+                    duration: 0
+                },
+                axis: {
+                    y: {
+                        tick: {
+                            fit: true
+                        }
+                    },
+                    x: {
+                        type: 'timeseries',
+                        tick: {
+                            format: '%d %b'
+                        },
+                        padding: {
+                            top: 10,
+                            bottom: 0
+                        }
+                    }
+                },
+                grid: {
+                    y: {
+                        show: true
+                    }
+                },
+                color: {
+                    pattern: [
+                        '#fca328',
+                        '#7bd235',
+                        '#76befe',
+                    ]
+                }
+            });
+        });
+    });
+</script>
--- a/src/_includes/cards/chat.html
+++ b/src/_includes/cards/chat.html
@@ -0,0 +1,18 @@
+<div class="card">
+	<div class="card-header">
+		<h3 class="card-title">Chat</h3>
+	</div>
+	<div class="card-body card-body-scrollable">
+		{% include chat-content.html %}
+	</div>
+	<div class="card-footer">
+		<div class="row xs-gutters">
+			<div class="col">
+				<input type="text" class="form-control" placeholder="Message to Bob&hellip;">
+			</div>
+			<div class="col-auto">
+				<button class="btn btn-primary"><i class="si si-arrow-right"></i></button>
+			</div>
+		</div>
+	</div>
+</div>
--- a/src/_includes/cards/chips.html
+++ b/src/_includes/cards/chips.html
@@ -0,0 +1,13 @@
+<div class="card">
+	<div class="card-body">
+		<div>
+			<div class="chips">
+				{% for user in site.data.users limit: 10 %}
+				<a href="javascript:void(0)" class="chip">
+					<span class="avatar" style="background-image: url({{ user.photo }})"></span> {{ user.name }}
+				</a>
+				{% endfor %}
+			</div>
+		</div>
+	</div>
+</div>
--- a/src/_includes/cards/classroom.html
+++ b/src/_includes/cards/classroom.html
@@ -0,0 +1,88 @@
+<form class="card" action="">
+	<div class="card-header">
+		<h3 class="card-title">Create new classroom</h3>
+	</div>
+	<div class="card-body">
+		<div class="row">
+			<div class="col-sm-6">
+				<div class="form-group">
+					<label class="form-label">Name of Class</label>
+					<input type="text" class="form-control" placeholder="e.g. English Class" />
+				</div>
+			</div>
+			<div class="col-sm-6">
+				<div class="form-group">
+					<label class="form-label">Section</label>
+					<input type="text" class="form-control" placeholder="e.g. English" />
+				</div>
+			</div>
+			<div class="col-sm-6">
+				<div class="form-group">
+					<label class="form-label">Target Language (L1)</label>
+					<select class="form-control custom-select">
+						<option value="english">English</option>
+					</select>
+				</div>
+			</div>
+			<div class="col-sm-6">
+				<div class="form-group">
+					<label class="form-label">Target Language (L2)</label>
+					<select class="form-control custom-select">
+						<option value="french">French</option>
+					</select>
+				</div>
+			</div>
+			<div class="col-sm-6">
+				<div class="form-group">
+					<label class="form-label">Home Country</label>
+					<select class="form-control custom-select">
+						<option value="french">United States</option>
+					</select>
+				</div>
+			</div>
+			<div class="col-sm-6">
+				<div class="form-group">
+					<label class="form-label">School</label>
+					<input type="text" class="form-control" placeholder="Where do you teach?" />
+				</div>
+			</div>
+			<div class="col-sm-12">
+				<div class="form-group">
+					<label class="form-label">What kind of classroom would you like to connect with?</label>
+					<input type="text" class="form-control" placeholder="Where do you teach?" />
+				</div>
+			</div>
+			<div class="col-sm-6">
+				<div class="form-group">
+					<label class="form-label">Which tools would you like to use?</label>
+					<select class="form-control custom-select">
+						<option value="french">Blogging, Video Chat, Quizzes, +3 Others</option>
+					</select>
+				</div>
+			</div>
+			<div class="col-sm-6">
+				<div class="form-group">
+					<label class="form-label">What Age Group are you going to teach?</label>
+					<div>
+						<label class="custom-control custom-radio">
+							<input type="radio" name="classroom-age" class="custom-control-input" checked>
+							<span class="custom-control-indicator"></span>
+							<span class="custom-control-description">K-12</span>
+						</label>
+						<label class="custom-control custom-radio">
+							<input type="radio" name="classroom-age" class="custom-control-input">
+							<span class="custom-control-indicator"></span>
+							<span class="custom-control-description">Value</span>
+						</label>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="card-footer">
+		<div class="d-flex align-items-center">
+			<a href="javascript:void(0)" class="text-muted">Cancel</a>
+			<button type="submit" class="btn btn-primary ml-auto">Create classroom</button>
+		</div>
+	</div>
+</form>
--- a/src/_includes/cards/client.html
+++ b/src/_includes/cards/client.html
@@ -0,0 +1,61 @@
+<div class="card">
+	<div class="card-header">
+		<h3 class="card-title">Client card</h3>
+		<div class="card-options">
+			<button type="button" class="btn btn-option" data-toggle="tooltip" title="Edit">
+				<i class="si si-pencil"></i>
+			</button>
+			<div class="dropdown card-options-dropdown">
+				<button type="button" class="btn btn-option dropdown-toggle" data-toggle="dropdown"><i class="si si-options"></i></button>
+				<div class="dropdown-menu dropdown-menu-right">
+					<a class="dropdown-item" href="javascript:void(0)">
+						<i class="si si-bell mr-3"></i>News
+					</a>
+					<a class="dropdown-item" href="javascript:void(0)">
+						<i class="si si-envelope mr-3"></i>Messages
+					</a>
+					<div class="dropdown-divider"></div>
+					<a class="dropdown-item" href="javascript:void(0)">
+						<i class="si si-pencil mr-3"></i>Edit Profile
+					</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="card-map card-map-placeholder"></div>
+
+	<div class="card-body">
+		<div class="media mb-5">
+			<img class="d-flex mr-5 rounded" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2264%22%20height%3D%2264%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ec911398e%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ec911398e%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2213.84375%22%20y%3D%2236.65%22%3E64x64%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Generic placeholder image">
+			<div class="media-body">
+				<h5>Axa Global Group</h5>
+				<address class="text-muted small">
+					1290 Avenua of The Americas<br>
+					New York, NY 101040105
+				</address>
+			</div>
+		</div>
+
+		<div class="row">
+			<div class="col-6">
+				<div class="h6">Relationship</div>
+				<p>Client</p>
+			</div>
+			<div class="col-6">
+				<div class="h6">Business Type</div>
+				<p>Insurance Company</p>
+			</div>
+			<div class="col-6">
+				<div class="h6">Website</div>
+				<p><a href="javascript:void(0)">http://www.axa.com</a></p>
+			</div>
+			<div class="col-6">
+				<div class="h6">Office Phone</div>
+				<p>+123456789</p>
+			</div>
+		</div>
+
+		<div class="h6">Description</div>
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur dignissimos doloribus eum fugiat itaque laboriosam maiores nisi nostrum perspiciatis vero.</p>
+	</div>
+</div>
--- a/src/_includes/cards/color.html
+++ b/src/_includes/cards/color.html
@@ -0,0 +1,8 @@
+<div class="card text-white bg-{{ include.color }}">
+	<div class="card-body">
+		<h4 class="card-title">
+			{{ include.color | capitalize }} card title
+		</h4>
+		<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+	</div>
+</div>
--- a/src/_includes/cards/colors.html
+++ b/src/_includes/cards/colors.html
@@ -0,0 +1,12 @@
+<div class="card">
+	<div class="card-body">
+		<h4 class="card-title">
+			Colors
+		</h4>
+		<div>
+			{% for color in site.colors %}
+				<div class="d-inline-block bg-{{ color[0] }} w-6 h-6 rounded mr-1"></div>
+			{% endfor %}
+		</div>
+	</div>
+</div>
--- a/src/_includes/cards/company-lookup.html
+++ b/src/_includes/cards/company-lookup.html
@@ -0,0 +1,196 @@
+<div class="card">
+	<div class="card-body">
+		<div class="row align-items-center mb-6">
+			<div class="col-auto">
+				<div class="avatar avatar-lg rounded d-block" style="background-image: url(https://logo.clearbit.com/amazon.com?size=100)"></div>
+			</div>
+			<div class="col">
+				<div class="h3 m-0 font-weight-normal">amazon.com</div>
+			</div>
+		</div>
+
+		<div class="row">
+			<div class="col">
+				<h5 class="mb-1">Name</h5>
+				<div class="text-muted-dark">Amazon.com</div>
+			</div>
+			<div class="col">
+				<h5 class="mb-1">Legal Name</h5>
+				<div class="text-muted-dark">Amazon.com, Inc.</div>
+			</div>
+			<div class="col">
+				<h5 class="mb-1">Ticker</h5>
+				<div class="text-muted-dark">AMZN</div>
+			</div>
+			<div class="col">
+				<h5 class="mb-1">Founded Year</h5>
+				<div class="text-muted-dark">1995</div>
+			</div>
+			<div class="col">
+				<h5 class="mb-1">Type</h5>
+				<div class="text-muted-dark">Public</div>
+			</div>
+			<div class="col">
+				<h5 class="mb-1">Employees</h5>
+				<div class="text-muted-dark">341,400</div>
+			</div>
+			<div class="col">
+				<h5 class="mb-1">Annual Revenue</h5>
+				<div class="text-muted-dark">$135B</div>
+			</div>
+		</div>
+	</div>
+	<div class="card-body">
+		<div class="row lg-gutters">
+			<div class="col-7">
+				<div class="row mb-5">
+					<div class="col">
+						<h5 class="mb-1">Location</h5>
+						<div class="text-muted-dark">207 Boren Ave, Seattle, WA 98109, USA</div>
+					</div>
+					<div class="col">
+						<h5 class="mb-1">Timezone</h5>
+						<div class="text-muted-dark">America/Los_Angeles</div>
+					</div>
+				</div>
+
+				<div class="map-static"
+				     style="background-image: url(https://maps.googleapis.com/maps/api/staticmap?center=47.620057,-122.3362675&size=640x120&scale=2&zoom=13&markers=color:blue|47.620057,-122.3362675&key={{ site.google-maps-key }});"></div>
+
+				<hr>
+
+				<h5 class="mb-4">Recent News</h5>
+
+				<ul class="list-unstyled">
+					<li class="mb-5">
+						<a href="#">Amazons Super Bowl commercial might contain a clue about where HQ2 will be</a>
+						<p class="mb-1">Eagleeyed viewers of the Super Bowl spotted something most people missed in Amazons commercial for its Alexa voice assistant Before Alexa lo…</p>
+						<div class="row">
+							<div class="col text-muted">businessinsider.com</div>
+							<div class="col text-muted text-right">2 days ago</div>
+						</div>
+					</li>
+					<li class="mb-5">
+						<a href="#">Holiday performance propels Amazon to stellar quarter results</a>
+						<p>This story was delivered to BI Intelligence ECommerce Briefing subscribers hours before appearing on Business Insider To be the first to kno…</p>
+						<div class="row">
+							<div class="col text-muted">businessinsider.com</div>
+							<div class="col text-muted text-right">2 days ago</div>
+						</div>
+					</li>
+					<li class="mb-5">
+						<a href="#">12 highpaying jobs Amazons HQ2 will likely bring to its future city</a>
+						<p class="mb-1">These Amazon jobs all earn over 90000tanleimagesShutterstock</p>
+						<div class="row">
+							<div class="col text-muted">businessinsider.com</div>
+							<div class="col text-muted text-right" title="2018-02-02T12:32:00.000Z">4 days ago</div>
+						</div>
+					</li>
+					<li class="mb-5">
+						<a href="http://businessinsider.com/amazon-dominates-online-shopping-2018-2">Amazon is tightening its iron grip online</a>
+						<p class="mb-1">ReutersLindsey Wasson To say Amazon is doing well would be an understatement In its latest earnings report the company reported 6045 billion…</p>
+						<div class="row">
+							<div class="col text-muted">businessinsider.com</div>
+							<div class="col text-muted text-right" title="2018-02-02T10:45:00.000Z">5 days ago</div>
+						</div>
+					</li>
+					<li class="mb-4">
+						<a href="http://businessinsider.com/tough-amazon-interview-questions-you-should-be-prepared-to-answer-2018-1">21 tough interview questions you may have to answer if you want to work at Amazon</a>
+						<p class="mb-1">How would you answer Amazon is a peculiar company whats peculiar about youAlex WongGetty Images</p>
+						<div class="row">
+							<div class="col text-muted">businessinsider.com</div>
+							<div class="col text-muted text-right" title="2018-02-01T11:25:00.000Z">6 days ago</div>
+						</div>
+					</li>
+				</ul>
+			</div>
+			<div class="col-5">
+				<ul class="list-unstyled list-separated">
+					<li class="list-separated-item">
+						<h5>Description</h5>
+						<div class="text-muted-dark">
+							Online shopping from the earth's biggest selection of books, magazines, music, DVDs, videos, electronics, computers, software, apparel & acc…
+						</div>
+					</li>
+					<li class="list-separated-item">
+						<h5>Tags</h5>
+						<div>
+							<span class="tag">E-Commerce &amp; Marketplaces</span>
+							<span class="tag">E-commerce</span>
+							<span class="tag">B2C</span>
+							<span class="tag">Internet</span>
+							<span class="tag">Consumer Discretionary</span>
+							<span class="tag">Technology</span>
+						</div>
+					</li>
+					<li class="list-separated-item">
+						<h5 class="mb-1">Industry</h5>
+						<div>Internet Software &amp; Services</div>
+					</li>
+					<li class="list-separated-item">
+						<h5 class="mb-1">Sector</h5>
+						<div>Information Technology</div>
+					</li>
+					<li class="list-separated-item">
+						<h5 class="mb-1">SIC Code</h5>
+						<div>59</div>
+					</li>
+					<li class="list-separated-item">
+						<h5 class="mb-1">NAICS Code</h5>
+						<div>45</div>
+					</li>
+					<li class="list-separated-item">
+						<h5 class="mb-1">EIN</h5>
+						<div>911646860</div>
+					</li>
+					<li class="list-separated-item">
+						<h5 class="mb-1">Technologies</h5>
+						<div>
+							<span class="tag text-uppercase">amazon associates</span>
+							<span class="tag text-uppercase">amazon ses</span>
+							<span class="tag text-uppercase">dyn dns</span>
+							<span class="tag text-uppercase">omniture adobe analytics</span>
+							<span class="tag text-uppercase">typekit by adobe</span>
+						</div>
+					</li>
+					<li class="list-separated-item">
+						<h5 class="mb-1">Alexa US Rank</h5>
+						<div>5</div>
+					</li>
+					<li class="list-separated-item">
+						<h5 class="mb-1">Alexa Global Rank</h5>
+						<div>10</div>
+					</li>
+					<li class="list-separated-item">
+						<h5 class="mb-1">Fiscal Year End</h5>
+						<div>End of December</div>
+					</li>
+					<li class="list-separated-item">
+						<h5 class="mb-1">Phone</h5>
+						<div>
+							<a href="tel:+1 206-266-1000">+1 206-266-1000</a>
+						</div>
+					</li>
+					<li class="list-separated-item">
+						<h5 class="mb-1">Crunchbase</h5>
+						<div>
+							<a href="#">crunchbase.com/organization/amazon</a>
+						</div>
+					</li>
+					<li class="list-separated-item">
+						<h5 class="mb-1">Twitter</h5>
+						<div>
+							<a href="#">twitter.com/amazon</a>
+						</div>
+					</li>
+					<li class="list-separated-item">
+						<h5 class="mb-1">Facebook</h5>
+						<div>
+							<a href="#">facebook.com/amazon</a>
+						</div>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+</div>
--- a/src/_includes/cards/countries.html
+++ b/src/_includes/cards/countries.html
@@ -0,0 +1,69 @@
+<div class="card">
+	<div class="card-body">
+		<h4 class="card-title">Top Countries</h4>
+	</div>
+	<table class="table card-table">
+		<tbody>
+		<tr>
+			<td width="1"><i class="flag flag-us"></i></td>
+			<td>
+				USA
+				<div class="progress progress-xs mt-2">
+					<div class="progress-bar" style="width: 78%"></div>
+				</div>
+			</td>
+			<td width="1" class="text-right"><span class="text-muted">$6425</span></td>
+		</tr>
+		<tr>
+			<td><i class="flag flag-pl"></i></td>
+			<td>
+				Poland
+				<div class="progress progress-xs mt-2">
+					<div class="progress-bar" style="width: 62%"></div>
+				</div>
+			</td>
+			<td class="text-right"><span class="text-muted">$5582</span></td>
+		</tr>
+		<tr>
+			<td><i class="flag flag-de"></i></td>
+			<td>
+				Germany
+				<div class="progress progress-xs mt-2">
+					<div class="progress-bar" style="width: 48%"></div>
+				</div>
+			</td>
+			<td class="text-right"><span class="text-muted">$4587</span></td>
+		</tr>
+		<tr>
+			<td><i class="flag flag-ru"></i></td>
+			<td>
+				Russia
+				<div class="progress progress-xs mt-2">
+					<div class="progress-bar" style="width: 35%"></div>
+				</div>
+			</td>
+			<td class="text-right"><span class="text-muted">$2520</span></td>
+		</tr>
+		<tr>
+			<td><i class="flag flag-au"></i></td>
+			<td>
+				Australia
+				<div class="progress progress-xs mt-2">
+					<div class="progress-bar" style="width: 30%"></div>
+				</div>
+			</td>
+			<td class="text-right"><span class="text-muted">$1899</span></td>
+		</tr>
+		<tr>
+			<td><i class="flag flag-gb"></i></td>
+			<td>
+				Great Britain
+				<div class="progress progress-xs mt-2">
+					<div class="progress-bar" style="width: 22%"></div>
+				</div>
+			</td>
+			<td class="text-right"><span class="text-muted">$1056</span></td>
+		</tr>
+		</tbody>
+	</table>
+</div>
--- a/src/_includes/cards/credit-card.html
+++ b/src/_includes/cards/credit-card.html
@@ -0,0 +1,60 @@
+<!-- Creadit Card component -->
+<div class="card">
+	<div class="card-body">
+		<div class="form-group">
+			<label class="form-label">Cardholder's name</label>
+			<input type="text" class="form-control">
+		</div>
+		<div class="form-group">
+			<label class="form-label">Card number</label>
+			<input type="text" class="form-control">
+		</div>
+		<div class="form-group">
+			<div class="row sm-gutters">
+				<div class="col">
+					<label class="form-label">Expiry Date</label>
+					<div class="row sm-gutters">
+						<div class="col">
+							<select name="" class="form-control custom-select">
+								<option value="">January</option>
+								<option value="">February</option>
+								<option value="">March</option>
+								<option value="">April</option>
+								<option value="">May</option>
+								<option value="">June</option>
+								<option value="">Juli</option>
+								<option value="">August</option>
+								<option value="">September</option>
+								<option value="">October</option>
+								<option value="">November</option>
+								<option value="">December</option>
+							</select>
+						</div>
+						<div class="col-auto">
+							<select name="" class="form-control custom-select">
+								<option value="">2017</option>
+								<option value="">2018</option>
+								<option value="">2019</option>
+								<option value="">2020</option>
+								<option value="">2021</option>
+								<option value="">2022</option>
+								<option value="">2023</option>
+								<option value="">2024</option>
+							</select>
+						</div>
+					</div>
+				</div>
+				<div class="col-3">
+					<label class="form-label">CVV</label>
+					<input type="text" class="form-control">
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="card-footer">
+		<div class="d-flex">
+			<a href="" class="btn btn-link">Cancel</a>
+			<button class="btn btn-primary ml-auto">Complete Order</button>
+		</div>
+	</div>
+</div>
--- a/src/_includes/cards/digit.html
+++ b/src/_includes/cards/digit.html
@@ -0,0 +1,13 @@
+{% assign width = include.width | default: '54%' %}
+{% assign color = include.color | default: 'blue' %}
+{% assign title = include.title | default: 'Today Expenses' %}
+{% assign digit = include.digit | default: '$8500' %}
+<div class="card">
+	<div class="card-body text-center">
+		<div class="h5">{{ title }}</div>
+		<div class="display-4 font-weight-bold mb-4">{{ digit }}</div>
+		<div class="progress progress-sm">
+			<div class="progress-bar bg-{{ color }}" style="width: {{ width }}"></div>
+		</div>
+	</div>
+</div>
--- a/src/_includes/cards/email-stats.html
+++ b/src/_includes/cards/email-stats.html
@@ -0,0 +1,14 @@
+<div class="card">
+	<div class="card-body">
+		<h3 class="card-title">Email Statistics</h3>
+		<div>
+			<div id="chart-emails" style="height: 15rem"></div>
+
+			{% include js/chart-circle.js id="chart-emails" data='{"Open": [30, "blue"], "Bounce": [50, "red"], "Unsubscribe": [25, "yellow"]}' type="donut" %}
+		</div>
+	</div>
+	<div class="card-footer">
+		<i class="fa fa-clock-o"></i> Campaign sent 2 days ago
+	</div>
+</div>
+
--- a/src/_includes/cards/empty.html
+++ b/src/_includes/cards/empty.html
@@ -0,0 +1,6 @@
+<div class="card">
+	<div class="card-body">
+		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi asperiores atque beatae commodi, deserunt dolores eligendi esse est harum maxime nesciunt non nostrum quibusdam quisquam ratione repudiandae saepe soluta sunt.
+		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi asperiores atque beatae commodi, deserunt dolores eligendi esse est harum maxime nesciunt non nostrum quibusdam quisquam ratione repudiandae saepe soluta sunt.
+	</div>
+</div>
--- a/src/_includes/cards/feed.html
+++ b/src/_includes/cards/feed.html
@@ -0,0 +1,62 @@
+<div class="card">
+	<header class="card-header">
+		<h4 class="card-title">Feeds</h4>
+		<div class="card-options">
+			<button type="button" class="btn btn-option" data-toggle="tooltip" title="Edit">
+				<i class="si si-pencil"></i>
+			</button>
+			<div class="dropdown card-options-dropdown">
+				<button type="button" class="btn btn-option dropdown-toggle" data-toggle="dropdown"><i class="si si-options"></i></button>
+				<div class="dropdown-menu dropdown-menu-right">
+					<a class="dropdown-item" href="javascript:void(0)">
+						<i class="si si-bell mr-3"></i>News
+					</a>
+					<a class="dropdown-item" href="javascript:void(0)">
+						<i class="si si-envelope mr-3"></i>Messages
+					</a>
+					<div class="dropdown-divider"></div>
+					<a class="dropdown-item" href="javascript:void(0)">
+						<i class="si si-pencil mr-3"></i>Edit Profile
+					</a>
+				</div>
+			</div>
+		</div>
+	</header>
+	<div class="card-body">
+		<div class="media mb-3">
+			<div class="media-object mr-4"><span class="avatar avatar-md" style="background-image: url({{ site.data.users[4].photo }})"></span></div>
+			<div class="media-body">
+				<h5 class="mb-0"><a href="javascript:void(0)" class="text-color">Some of the fantastic things people have had to say about Ooooh</a></h5>
+				<small class="text-muted">2 days ago</small>
+			</div>
+		</div>
+		<div class="media mb-3">
+			<div class="media-object mr-4"><span class="avatar avatar-md" style="background-image: url({{ site.data.users[5].photo }})"></span></div>
+			<div class="media-body">
+				<h5 class="mb-0"><a href="javascript:void(0)" class="text-color">Here are just some of the magazine reviews we have had</a></h5>
+				<small class="text-muted">1 day ago</small>
+			</div>
+		</div>
+		<div class="media mb-3">
+			<div class="media-object mr-4"><span class="avatar avatar-md" style="background-image: url({{ site.data.users[6].photo }})"></span></div>
+			<div class="media-body">
+				<h5 class="mb-0"><a href="javascript:void(0)" class="text-color">Lorem ipsum dolor amet, consectetur adipisicing elit.</a></h5>
+				<small class="text-muted">2 days ago</small>
+			</div>
+		</div>
+		<div class="media mb-3">
+			<div class="media-object mr-4"><span class="avatar avatar-md" style="background-image: url({{ site.data.users[7].photo }})"></span></div>
+			<div class="media-body">
+				<h5 class="mb-0"><a href="javascript:void(0)" class="text-color">“It’s just brilliant. I will recommend it to everyone!”</a></h5>
+				<small class="text-muted">2 mins ago</small>
+			</div>
+		</div>
+		<div class="media">
+			<div class="media-object mr-4"><span class="avatar avatar-md" style="background-image: url({{ site.data.users[8].photo }})"></span></div>
+			<div class="media-body">
+				<h5 class="mb-0"><a href="javascript:void(0)" class="text-color">John has just started working on the project</a></h5>
+				<small class="text-muted">right now</small>
+			</div>
+		</div>
+	</div>
+</div>
--- a/src/_includes/cards/finance.html
+++ b/src/_includes/cards/finance.html
@@ -0,0 +1,63 @@
+<div class="card">
+	<div class="card-header">
+		<h3 class="card-title">
+			Finance Stats
+		</h3>
+	</div>
+	<div class="card-body">
+		<ul class="list-unstyled">
+			<li>
+				<div class="row align-items-center">
+					<div class="col-auto">
+						<div class="h5 mb-0">
+							IPO Margin
+						</div>
+						<span class="small text-muted">Awerage IPO Margin</span>
+					</div>
+					<div class="col text-right">
+						<span class="h4 text-primary font-weight-bold">+24%</span>
+					</div>
+				</div>
+			</li>
+			<li class="mt-4">
+				<div class="row align-items-center">
+					<div class="col-auto">
+						<div class="h5 mb-0">
+							Payments
+						</div>
+						<span class="small text-muted">Yearly Expenses</span>
+					</div>
+					<div class="col text-right">
+						<span class="h4 text-info font-weight-bold">+$560,800</span>
+					</div>
+				</div>
+			</li>
+			<li class="mt-4">
+				<div class="row align-items-center">
+					<div class="col-auto">
+						<div class="h5 mb-0">
+							Logistics
+						</div>
+						<span class="small text-muted">Overall Regional Logistics</span>
+					</div>
+					<div class="col text-right">
+						<span class="h4 text-warning font-weight-bold">-10%</span>
+					</div>
+				</div>
+			</li>
+			<li class="mt-4">
+				<div class="row align-items-center">
+					<div class="col-auto">
+						<div class="h5 mb-0">
+							Expenses
+						</div>
+						<span class="small text-muted">Balance</span>
+					</div>
+					<div class="col text-right">
+						<span class="h4 text-danger font-weight-bold">$345,000</span>
+					</div>
+				</div>
+			</li>
+		</ul>
+	</div>
+</div>
--- a/src/_includes/cards/follow.html
+++ b/src/_includes/cards/follow.html
@@ -0,0 +1,50 @@
+<div class="card">
+	<div class="card-body">
+		<h4 class="card-title">Follow</h4>
+	</div>
+
+	<table class="table card-table">
+		<tr>
+			<td class="align-middle" width="1">
+				<span class="avatar avatar-md" style="background-image: url({{ site.data.users[38].photo }})"></span>
+			</td>
+			<td>
+				<strong>Jacob Thornton</strong>
+				<small class="d-block text-muted">@fat</small>
+			</td>
+			<td class="align-middle" width="1">
+				<button class="btn btn-outline-primary btn-sm">
+					<span class="fa fa-twitter"></span> Follow
+				</button>
+			</td>
+		</tr>
+		<tr>
+			<td class="align-middle" width="1">
+				<span class="avatar avatar-md" style="background-image: url({{ site.data.users[39].photo }})"></span>
+			</td>
+			<td>
+				<strong>Dave Gamache</strong>
+				<small class="d-block text-muted">@dhg</small>
+			</td>
+			<td class="align-middle" width="1">
+				<button class="btn btn-outline-primary btn-sm">
+					<span class="fa fa-twitter"></span> Follow
+				</button>
+			</td>
+		</tr>
+		<tr>
+			<td class="align-middle" width="1">
+				<span class="avatar avatar-md" style="background-image: url({{ site.data.users[40].photo }})"></span>
+			</td>
+			<td>
+				<strong>Mark Otto</strong>
+				<small class="d-block text-muted">@mdo</small>
+			</td>
+			<td class="align-middle" width="1">
+				<button class="btn btn-outline-primary btn-sm">
+					<span class="fa fa-twitter"></span> Follow
+				</button>
+			</td>
+		</tr>
+	</table>
+</div>
--- a/src/_includes/cards/footer.html
+++ b/src/_includes/cards/footer.html
@@ -0,0 +1,8 @@
+<div class="card">
+	<div class="card-body">
+		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquid architecto commodi dolorum nam odio perspiciatis quo sapiente vitae voluptatem? Accusamus beatae distinctio dolores laborum nobis, obcaecati odio quia reprehenderit.
+	</div>
+	<div class="card-footer">
+		Card with footer content
+	</div>
+</div>
--- a/src/_includes/cards/forgot.html
+++ b/src/_includes/cards/forgot.html
@@ -0,0 +1,19 @@
+<form class="card" action="./" method="get">
+
+
+	<div class="card-body">
+		<div class="card-title">Forgot password</div>
+
+		<p class="text-muted">Enter your email address and your password will be reset and emailed to you.</p>
+		<div class="form-group">
+			<label class="form-label" for="exampleInputEmail1">Email address</label>
+			<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
+		</div>
+		<div class="form-footer">
+			<button type="submit" class="btn btn-primary btn-block">Send me new password</button>
+		</div>
+	</div>
+	<div class="card-footer">
+		<a href="./login.html"><i class="mdi mdi-arrow-left"></i> Back to login form</a>
+	</div>
+</form>
--- a/src/_includes/cards/form-all-elements.html
+++ b/src/_includes/cards/form-all-elements.html
@@ -0,0 +1,660 @@
+<form action="https://httpbin.org/post" method="post" class="card">
+	<div class="card-header">
+		<h3 class="card-title">Form elements</h3>
+	</div>
+	<div class="card-body">
+		<div class="row">
+			<div class="col-md-6 col-lg-4">
+				<div class="form-group">
+					<label class="form-label">Static</label>
+					<div class="form-control-plaintext">Username</div>
+				</div>
+				<div class="form-group">
+					<label class="form-label" for="example-text-input">Text</label>
+					<input type="text" class="form-control" name="example-text-input" placeholder="Text..">
+				</div>
+				<div class="form-group">
+					<label class="form-label" for="example-disabled-input">Disabled</label>
+					<input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.."
+					       value="Well, she turned me into a newt."
+					       disabled>
+				</div>
+				<div class="form-group">
+					<label class="form-label" for="example-disabled-input">Readonly</label>
+					<input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.."
+					       value="Well, how'd you become king, then?"
+					       readonly>
+				</div>
+				<div class="form-group">
+					<label class="form-label" for="example-textarea-input">Textarea <span class="form-label-small">56/100</span></label>
+					<textarea class="form-control" name="example-textarea-input" rows="6" placeholder="Content..">Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! We shall say 'Ni' again to you, if you do not appease us. I'm not a witch. I'm not a witch. Camelot!</textarea>
+				</div>
+
+				{% include parts/input-image.html %}
+
+				{% include parts/input-color.html %}
+
+				<div class="form-group">
+					<label class="form-label">Input group</label>
+					<div class="input-group">
+						<input type="text" class="form-control" placeholder="Search for...">
+						<span class="input-group-append">
+							<button class="btn btn-primary" type="button">Go!</button>
+						</span>
+					</div>
+				</div>
+				<div class="form-group">
+					<label class="form-label">Input group buttons</label>
+					<div class="input-group">
+						<input type="text" class="form-control">
+						<div class="input-group-append">
+							<button type="button" class="btn btn-primary">Action</button>
+							<button data-toggle="dropdown" type="button" class="btn btn-primary dropdown-toggle"></button>
+							<div class="dropdown-menu dropdown-menu-right">
+								<a class="dropdown-item" href="javascript:void(0)">
+									News
+								</a>
+								<a class="dropdown-item" href="javascript:void(0)">
+									Messages
+								</a>
+								<div class="dropdown-divider"></div>
+								<a class="dropdown-item" href="javascript:void(0)">
+									Edit Profile
+								</a>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				{% include parts/input-icon.html %}
+
+				<div class="form-group">
+					<label class="form-label">Separated inputs</label>
+					<div class="row xs-gutters">
+						<div class="col">
+							<input type="text" class="form-control" placeholder="Search for...">
+						</div>
+						<span class="col-auto">
+							<button class="btn btn-secondary" type="button"><i class="fe fe-search"></i></button>
+						</span>
+					</div>
+				</div>
+				<div class="form-group">
+					<label class="form-label">ZIP Code</label>
+					<div class="row sm-gutters">
+						<div class="col">
+							<input type="text" class="form-control" placeholder="Search for...">
+						</div>
+						<span class="col-auto align-self-center">
+							<span class="form-help" data-toggle="popover" data-placement="top" data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href=''>USP ZIP codes lookup tools</a></p>">?</span>
+						</span>
+					</div>
+				</div>
+			</div>
+			<div class="col-md-6 col-lg-4">
+				<div class="form-group">
+					<label class="form-label" for="example-password-input">Password</label>
+					<input type="password" class="form-control" name="example-password-input" placeholder="Password..">
+				</div>
+
+				<div class="form-group">
+					<label class="form-label" for="example-text-input-valid">Valid State</label>
+					<input type="text" class="form-control is-valid" name="example-text-input-valid" placeholder="Valid State..">
+
+					<input type="text" class="form-control mt-3 state-valid" value="Valid state">
+				</div>
+
+				<div class="form-group">
+					<label class="form-label" for="example-text-input-invalid">Invalid State</label>
+					<input type="text" class="form-control is-invalid" name="example-text-input-invalid"
+					       placeholder="Invalid State..">
+					<div class="invalid-feedback">Invalid feedback</div>
+
+					<input type="text" class="form-control mt-3 state-invalid" value="Invalid state">
+				</div>
+
+				<div class="form-group">
+					<label class="form-label">Country</label>
+					<select class="form-control custom-select">
+						<option value="">Germany</option>
+					</select>
+				</div>
+				<div class="form-group">
+					<label class="form-label">Ratios</label>
+					<div class="row align-items-center">
+						<div class="col">
+							<input type="range" class="form-control custom-range" step="5" min="0" max="50">
+						</div>
+						<div class="col-auto">
+							<input type="number" class="form-control w-8" value="45">
+						</div>
+					</div>
+				</div>
+				<div class="form-group">
+					<label class="form-label">Size</label>
+					<div class="selectgroup w-100">
+						<label class="selectgroup-item">
+							<input type="radio" name="value" value="50" class="selectgroup-input" checked="">
+							<span class="selectgroup-button">S</span>
+						</label>
+						<label class="selectgroup-item">
+							<input type="radio" name="value" value="100" class="selectgroup-input">
+							<span class="selectgroup-button">M</span>
+						</label>
+
+						<label class="selectgroup-item">
+							<input type="radio" name="value" value="150" class="selectgroup-input">
+							<span class="selectgroup-button">L</span>
+						</label>
+						<label class="selectgroup-item">
+							<input type="radio" name="value" value="200" class="selectgroup-input">
+							<span class="selectgroup-button">XL</span>
+						</label>
+					</div>
+				</div>
+				<div class="form-group">
+					<label class="form-label">Icons input</label>
+					<div class="selectgroup w-100">
+						<label class="selectgroup-item">
+							<input type="radio" name="transportation" value="2" class="selectgroup-input">
+							<span class="selectgroup-button selectgroup-button-icon"><i class="fe fe-smartphone"></i></span>
+						</label>
+						<label class="selectgroup-item">
+							<input type="radio" name="transportation" value="1" class="selectgroup-input" checked="">
+							<span class="selectgroup-button selectgroup-button-icon"><i class="fe fe-tablet"></i></span>
+						</label>
+						<label class="selectgroup-item">
+							<input type="radio" name="transportation" value="6" class="selectgroup-input">
+							<span class="selectgroup-button selectgroup-button-icon"><i class="fe fe-monitor"></i></span>
+						</label>
+						<label class="selectgroup-item">
+							<input type="radio" name="transportation" value="6" class="selectgroup-input">
+							<span class="selectgroup-button selectgroup-button-icon"><i class="fe fe-x"></i></span>
+						</label>
+					</div>
+				</div>
+				<div class="form-group">
+					<label class="form-label">Icons input</label>
+					<div class="selectgroup selectgroup-pills">
+						<label class="selectgroup-item">
+							<input type="radio" name="icon-input" value="1" class="selectgroup-input" checked="">
+							<span class="selectgroup-button selectgroup-button-icon"><i class="fa fa-male"></i></span>
+						</label>
+						<label class="selectgroup-item">
+							<input type="radio" name="icon-input" value="2" class="selectgroup-input">
+							<span class="selectgroup-button selectgroup-button-icon"><i class="fa fa-female"></i></span>
+						</label>
+					</div>
+				</div>
+				<div class="form-group">
+					<label class="form-label">Your skills</label>
+					<div class="selectgroup selectgroup-pills">
+						<label class="selectgroup-item">
+							<input type="checkbox" name="value" value="HTML" class="selectgroup-input" checked="">
+							<span class="selectgroup-button">HTML</span>
+						</label>
+						<label class="selectgroup-item">
+							<input type="checkbox" name="value" value="CSS" class="selectgroup-input">
+							<span class="selectgroup-button">CSS</span>
+						</label>
+						<label class="selectgroup-item">
+							<input type="checkbox" name="value" value="PHP" class="selectgroup-input">
+							<span class="selectgroup-button">PHP</span>
+						</label>
+						<label class="selectgroup-item">
+							<input type="checkbox" name="value" value="JavaScript" class="selectgroup-input">
+							<span class="selectgroup-button">JavaScript</span>
+						</label>
+						<label class="selectgroup-item">
+							<input type="checkbox" name="value" value="Ruby" class="selectgroup-input">
+							<span class="selectgroup-button">Ruby</span>
+						</label>
+						<label class="selectgroup-item">
+							<input type="checkbox" name="value" value="Ruby" class="selectgroup-input">
+							<span class="selectgroup-button">Ruby</span>
+						</label>
+						<label class="selectgroup-item">
+							<input type="checkbox" name="value" value="C++" class="selectgroup-input">
+							<span class="selectgroup-button">C++</span>
+						</label>
+					</div>
+				</div>
+
+				{% include parts/input-toggle.html %}
+
+				<div class="form-group">
+					<div class="form-label">Toggle switch single</div>
+					<label class="custom-switch">
+						<input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input">
+						<span class="custom-switch-indicator"></span>
+						<span class="custom-switch-description">I agree with terms and conditions</span>
+					</label>
+				</div>
+
+				{% include parts/form-fieldset.html %}
+			</div>
+			<div class="col-md-6 col-lg-4">
+				<div class="form-group">
+					<label class="form-label">Radios</label>
+					<div class="custom-controls-stacked">
+						<label class="custom-control custom-radio">
+							<input type="radio" class="custom-control-input" name="example-radios" value="option1" checked="">
+							<div class="custom-control-label">Option 1</div>
+						</label>
+						<label class="custom-control custom-radio">
+							<input type="radio" class="custom-control-input" name="example-radios" value="option2">
+							<div class="custom-control-label">Option 2</div>
+						</label>
+						<label class="custom-control custom-radio">
+							<input type="radio" class="custom-control-input" name="example-radios" value="option3" disabled>
+							<div class="custom-control-label">Option Disabled</div>
+						</label>
+						<label class="custom-control custom-radio">
+							<input type="radio" class="custom-control-input" name="example-radios2" value="option4" disabled checked>
+							<div class="custom-control-label">Option Disabled Checked</div>
+						</label>
+					</div>
+				</div>
+				<div class="form-group">
+					<div class="form-label">Inline Radios</div>
+					<div class="custom-control custom-radio">
+						<input type="radio" class="custom-control-input" name="example-inline-radios" value="option1" checked="">
+						<span class="custom-control-label">Option 1</span>
+					</div>
+					<div class="custom-control custom-radio">
+						<input type="radio" class="custom-control-input" name="example-inline-radios" value="option2">
+						<span class="custom-control-label">Option 2</span>
+					</div>
+					<div class="custom-control custom-radio">
+						<input type="radio" class="custom-control-input" name="example-inline-radios" value="option3">
+						<span class="custom-control-label">Option 3</span>
+					</div>
+				</div>
+				<div class="form-group">
+					<label class="form-label">Checkboxes</label>
+					<div class="custom-controls-stacked">
+						<div class="custom-control custom-checkbox">
+							<input type="checkbox" class="custom-control-input" name="example-checkbox1" value="option1" checked="">
+							<label class="custom-control-label">Option 1</label>
+						</div>
+						<div class="custom-control custom-checkbox">
+							<input type="checkbox" class="custom-control-input" name="example-checkbox2" value="option2">
+							<label class="custom-control-label">Option 2</label>
+						</div>
+						<div class="custom-control custom-checkbox">
+							<input type="checkbox" class="custom-control-input" name="example-checkbox3" value="option3" disabled>
+							<label class="custom-control-label">Option Disabled</label>
+						</div>
+						<div class="custom-control custom-checkbox">
+							<input type="checkbox" class="custom-control-input" name="example-checkbox4" value="option4" checked disabled>
+							<label class="custom-control-label">Option Disabled Checked</label>
+						</div>
+					</div>
+				</div>
+				<div class="form-group">
+					<div class="form-label">Inline Checkboxes</div>
+					<div class="custom-control custom-checkbox">
+						<input type="checkbox" class="custom-control-input" name="example-inline-checkbox1" value="option1"
+						       checked="">
+						<label class="custom-control-label">Option 1</label>
+					</div>
+					<div class="custom-control custom-checkbox">
+						<input type="checkbox" class="custom-control-input" name="example-inline-checkbox2" value="option2">
+						<label class="custom-control-label">Option 2</label>
+					</div>
+					<div class="custom-control custom-checkbox">
+						<input type="checkbox" class="custom-control-input" name="example-inline-checkbox3" value="option3">
+						<label class="custom-control-label">Option 3</label>
+					</div>
+				</div>
+				<div class="form-group">
+					<div class="form-label">Bootstrap's Custom File Input</div>
+					<div class="custom-file">
+						<input type="file" class="custom-file-input" name="example-file-input-custom">
+						<label class="custom-file-label">Choose file</label>
+					</div>
+				</div>
+
+				<div class="form-group">
+					<label class="form-label">Date of birth</label>
+					<div class="row xs-gutters">
+						<div class="col-5">
+							<select name="user[month]" class="form-control custom-select">
+								<option value="">Month</option>
+								<option value="1">January</option>
+								<option value="2">February</option>
+								<option value="3">March</option>
+								<option value="4">April</option>
+								<option value="5">May</option>
+								<option selected="selected" value="6">June</option>
+								<option value="7">July</option>
+								<option value="8">August</option>
+								<option value="9">September</option>
+								<option value="10">October</option>
+								<option value="11">November</option>
+								<option value="12">December</option>
+							</select>
+						</div>
+						<div class="col-3">
+							<select name="user[day]" class="form-control custom-select">
+								<option value="">Day</option>
+								<option value="1">1</option>
+								<option value="2">2</option>
+								<option value="3">3</option>
+								<option value="4">4</option>
+								<option value="5">5</option>
+								<option value="6">6</option>
+								<option value="7">7</option>
+								<option value="8">8</option>
+								<option value="9">9</option>
+								<option value="10">10</option>
+								<option value="11">11</option>
+								<option value="12">12</option>
+								<option value="13">13</option>
+								<option value="14">14</option>
+								<option value="15">15</option>
+								<option value="16">16</option>
+								<option value="17">17</option>
+								<option value="18">18</option>
+								<option value="19">19</option>
+								<option selected="selected" value="20">20</option>
+								<option value="21">21</option>
+								<option value="22">22</option>
+								<option value="23">23</option>
+								<option value="24">24</option>
+								<option value="25">25</option>
+								<option value="26">26</option>
+								<option value="27">27</option>
+								<option value="28">28</option>
+								<option value="29">29</option>
+								<option value="30">30</option>
+								<option value="31">31</option>
+							</select>
+						</div>
+						<div class="col-4">
+							<select name="user[year]" class="form-control custom-select">
+								<option value="">Year</option>
+								<option value="2014">2014</option>
+								<option value="2013">2013</option>
+								<option value="2012">2012</option>
+								<option value="2011">2011</option>
+								<option value="2010">2010</option>
+								<option value="2009">2009</option>
+								<option value="2008">2008</option>
+								<option value="2007">2007</option>
+								<option value="2006">2006</option>
+								<option value="2005">2005</option>
+								<option value="2004">2004</option>
+								<option value="2003">2003</option>
+								<option value="2002">2002</option>
+								<option value="2001">2001</option>
+								<option value="2000">2000</option>
+								<option value="1999">1999</option>
+								<option value="1998">1998</option>
+								<option value="1997">1997</option>
+								<option value="1996">1996</option>
+								<option value="1995">1995</option>
+								<option value="1994">1994</option>
+								<option value="1993">1993</option>
+								<option value="1992">1992</option>
+								<option value="1991">1991</option>
+								<option value="1990">1990</option>
+								<option selected="selected" value="1989">1989</option>
+								<option value="1988">1988</option>
+								<option value="1987">1987</option>
+								<option value="1986">1986</option>
+								<option value="1985">1985</option>
+								<option value="1984">1984</option>
+								<option value="1983">1983</option>
+								<option value="1982">1982</option>
+								<option value="1981">1981</option>
+								<option value="1980">1980</option>
+								<option value="1979">1979</option>
+								<option value="1978">1978</option>
+								<option value="1977">1977</option>
+								<option value="1976">1976</option>
+								<option value="1975">1975</option>
+								<option value="1974">1974</option>
+								<option value="1973">1973</option>
+								<option value="1972">1972</option>
+								<option value="1971">1971</option>
+								<option value="1970">1970</option>
+								<option value="1969">1969</option>
+								<option value="1968">1968</option>
+								<option value="1967">1967</option>
+								<option value="1966">1966</option>
+								<option value="1965">1965</option>
+								<option value="1964">1964</option>
+								<option value="1963">1963</option>
+								<option value="1962">1962</option>
+								<option value="1961">1961</option>
+								<option value="1960">1960</option>
+								<option value="1959">1959</option>
+								<option value="1958">1958</option>
+								<option value="1957">1957</option>
+								<option value="1956">1956</option>
+								<option value="1955">1955</option>
+								<option value="1954">1954</option>
+								<option value="1953">1953</option>
+								<option value="1952">1952</option>
+								<option value="1951">1951</option>
+								<option value="1950">1950</option>
+								<option value="1949">1949</option>
+								<option value="1948">1948</option>
+								<option value="1947">1947</option>
+								<option value="1946">1946</option>
+								<option value="1945">1945</option>
+								<option value="1944">1944</option>
+								<option value="1943">1943</option>
+								<option value="1942">1942</option>
+								<option value="1941">1941</option>
+								<option value="1940">1940</option>
+								<option value="1939">1939</option>
+								<option value="1938">1938</option>
+								<option value="1937">1937</option>
+								<option value="1936">1936</option>
+								<option value="1935">1935</option>
+								<option value="1934">1934</option>
+								<option value="1933">1933</option>
+								<option value="1932">1932</option>
+								<option value="1931">1931</option>
+								<option value="1930">1930</option>
+								<option value="1929">1929</option>
+								<option value="1928">1928</option>
+								<option value="1927">1927</option>
+								<option value="1926">1926</option>
+								<option value="1925">1925</option>
+								<option value="1924">1924</option>
+								<option value="1923">1923</option>
+								<option value="1922">1922</option>
+								<option value="1921">1921</option>
+								<option value="1920">1920</option>
+								<option value="1919">1919</option>
+								<option value="1918">1918</option>
+								<option value="1917">1917</option>
+								<option value="1916">1916</option>
+								<option value="1915">1915</option>
+								<option value="1914">1914</option>
+								<option value="1913">1913</option>
+								<option value="1912">1912</option>
+								<option value="1911">1911</option>
+								<option value="1910">1910</option>
+								<option value="1909">1909</option>
+								<option value="1908">1908</option>
+								<option value="1907">1907</option>
+								<option value="1906">1906</option>
+								<option value="1905">1905</option>
+								<option value="1904">1904</option>
+								<option value="1903">1903</option>
+								<option value="1902">1902</option>
+								<option value="1901">1901</option>
+								<option value="1900">1900</option>
+								<option value="1899">1899</option>
+								<option value="1898">1898</option>
+								<option value="1897">1897</option>
+							</select>
+						</div>
+					</div>
+				</div>
+
+
+				<div class="form-group">
+					<label class="form-label">Username</label>
+					<div class="input-group">
+						<span class="input-group-prepend" id="basic-addon1">
+							<span class="input-group-text">@</span>
+						</span>
+						<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
+					</div>
+				</div>
+
+				<div class="form-group">
+					<label class="form-label">Subdomain</label>
+					<div class="input-group">
+						<input type="text" class="form-control" placeholder="Your subdomain" aria-label="Recipient's username" aria-describedby="basic-addon2">
+						<span class="input-group-append" id="basic-addon2">
+							<span class="input-group-text">.example.com</span>
+						</span>
+					</div>
+				</div>
+
+				<div class="form-group">
+					<label class="form-label">Your vanity URL</label>
+					<div class="input-group">
+						<span class="input-group-prepend" id="basic-addon3">
+							<span class="input-group-text">https://example.com/users/</span>
+						</span>
+						<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
+					</div>
+				</div>
+
+				<div class="form-group">
+					<label class="form-label">Price</label>
+					<div class="input-group">
+						<span class="input-group-prepend">
+							<span class="input-group-text">$</span>
+						</span>
+						<input type="text" class="form-control text-right" aria-label="Amount (to the nearest dollar)">
+						<span class="input-group-append">
+							<span class="input-group-text">.00</span>
+						</span>
+					</div>
+				</div>
+
+				<div class="form-group">
+					<label class="form-label">Button input</label>
+					<div class="input-group">
+						<div class="input-group-prepend">
+							<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+								Action
+							</button>
+							<div class="dropdown-menu">
+								<a class="dropdown-item" href="javascript:void(0)">Action</a>
+								<a class="dropdown-item" href="javascript:void(0)">Another action</a>
+								<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
+								<div role="separator" class="dropdown-divider"></div>
+								<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
+							</div>
+						</div>
+						<input type="text" class="form-control" aria-label="Text input with dropdown button">
+					</div>
+				</div>
+
+				<div class="form-group">
+					<label class="form-label">Tags</label>
+					<input type="text" class="form-control" id="input-tags" value="aa,bb,cc,dd">
+				</div>
+
+				<div class="form-group">
+					<label class="form-label">Beast</label>
+					<select name="beast" id="select-beast" class="form-control custom-select">
+						<option value="1">Chuck Testa</option>
+						<option value="4">Sage Cattabriga-Alosa</option>
+						<option value="3">Nikola Tesla</option>
+					</select>
+				</div>
+
+				<div class="form-group">
+					<label class="form-label">Users list</label>
+					<select name="user" id="select-users" class="form-control custom-select">
+						{% for user in site.data.users %}
+						<option value="{{ forloop.index }}" data-data='{"image": "{{ user.photo }}"}'>{{ user.name }} {{ user.surname }}</option>
+						{% endfor %}
+					</select>
+				</div>
+
+				<div class="form-group">
+					<label class="form-label">Countries</label>
+					<select name="country" id="select-countries" class="form-control custom-select">
+						<option value="br" data-data='{"image": "./assets/images/flags/br.svg"}'>Brazil</option>
+						<option value="cz" data-data='{"image": "./assets/images/flags/cz.svg"}'>Czech Republic</option>
+						<option value="de" data-data='{"image": "./assets/images/flags/de.svg"}'>Germany</option>
+						<option value="pl" data-data='{"image": "./assets/images/flags/pl.svg"}' selected>Poland</option>
+					</select>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="card-footer text-right">
+		<div class="d-flex">
+			<a href="javascript:void(0)" class="btn btn-link">Cancel</a>
+			<button type="submit" class="btn btn-primary ml-auto">Send data</button>
+		</div>
+
+	</div>
+</form>
+
+{% contentfor js %}
+<script>
+	require(['jquery', 'selectize'], function ($, selectize) {
+		$(document).ready(function () {
+			$('#input-tags').selectize({
+				delimiter: ',',
+				persist: false,
+				create: function (input) {
+					return {
+						value: input,
+						text: input
+					}
+				}
+			});
+
+			$('#select-beast').selectize({});
+
+			$('#select-users').selectize({
+				render: {
+					option: function (data, escape) {
+						return '<div>' +
+							'<span class="image"><img src="' + data.image + '" alt=""></span>' +
+							'<span class="title">' + escape(data.text) + '</span>' +
+							'</div>';
+					},
+					item: function (data, escape) {
+						return '<div>' +
+							'<span class="image"><img src="' + data.image + '" alt=""></span>' +
+							escape(data.text) +
+							'</div>';
+					}
+				}
+			});
+
+			$('#select-countries').selectize({
+				render: {
+					option: function (data, escape) {
+						return '<div>' +
+							'<span class="image"><img src="' + data.image + '" alt=""></span>' +
+							'<span class="title">' + escape(data.text) + '</span>' +
+							'</div>';
+					},
+					item: function (data, escape) {
+						return '<div>' +
+							'<span class="image"><img src="' + data.image + '" alt=""></span>' +
+							escape(data.text) +
+							'</div>';
+					}
+				}
+			});
+		});
+	});
+</script>
+{% endcontentfor %}
--- a/src/_includes/cards/form-base.html
+++ b/src/_includes/cards/form-base.html
@@ -0,0 +1,447 @@
+<div class="card">
+	<div class="card-header card-header-default">
+		<h3 class="card-title">Default Elements</h3>
+	</div>
+	<div class="card-body">
+		<div class="form-group">
+			<label class="form-label">Static</label>
+			<div class="form-control-plaintext">Username</div>
+		</div>
+		<div class="form-group">
+			<label class="form-label" for="example-text-input">Text</label>
+			<input type="text" class="form-control" id="example-text-input" name="example-text-input" placeholder="Text..">
+			<div class="form-text text-muted">Further info about this input</div>
+		</div>
+		<div class="form-group">
+			<label class="form-label" for="example-email-input">Email</label>
+			<input type="email" class="form-control" id="example-email-input" name="example-email-input" placeholder="Email..">
+		</div>
+		<div class="form-group">
+			<label class="form-label" for="example-password-input">Password</label>
+			<input type="password" class="form-control" id="example-password-input" name="example-password-input" placeholder="Password..">
+		</div>
+		<div class="form-group">
+			<label class="form-label" for="example-text-input-valid">Valid State</label>
+			<input type="text" class="form-control is-valid" id="example-text-input-valid" name="example-text-input-valid" placeholder="Valid State..">
+		</div>
+		<div class="form-group">
+			<label class="form-label" for="example-text-input-invalid">Invalid State</label>
+			<input type="text" class="form-control is-invalid" id="example-text-input-invalid" name="example-text-input-invalid"
+			       placeholder="Invalid State..">
+			<div class="invalid-feedback">Invalid feedback</div>
+		</div>
+		<div class="form-group">
+			<label class="form-label" for="example-disabled-input">Disabled</label>
+			<input type="text" class="form-control" id="example-disabled-input" name="example-disabled-input" placeholder="Disabled.." disabled="">
+		</div>
+		<div class="form-group">
+			<label class="form-label" for="example-textarea-input">Textarea</label>
+			<textarea class="form-control" id="example-textarea-input" name="example-textarea-input" rows="6" placeholder="Content.."></textarea>
+		</div>
+		<div class="form-group">
+			<label class="form-label" for="example-select">Select</label>
+			<select class="form-control" id="example-select" name="example-select">
+				<option value="0">Please select</option>
+				<option value="1">Option #1</option>
+				<option value="2">Option #2</option>
+				<option value="3">Option #3</option>
+			</select>
+		</div>
+		<div class="form-group">
+			<label class="form-label" for="example-custom-select">Custom Select</label>
+			<select class="form-control custom-select" id="example-custom-select" name="example-custom-select">
+				<option value="0">Please select</option>
+				<option value="1">Option #1</option>
+				<option value="2">Option #2</option>
+				<option value="3">Option #3</option>
+			</select>
+		</div>
+		<div class="form-group">
+			<label class="form-label" for="example-multiple-select">Multiple Select</label>
+			<select class="form-control" id="example-multiple-select" name="example-multiple-select" size="7" multiple="">
+				<option value="1">Option #1</option>
+				<option value="2">Option #2</option>
+				<option value="3">Option #3</option>
+				<option value="4">Option #4</option>
+				<option value="5">Option #5</option>
+				<option value="6">Option #6</option>
+				<option value="7">Option #7</option>
+				<option value="8">Option #8</option>
+				<option value="9">Option #9</option>
+				<option value="10">Option #10</option>
+			</select>
+		</div>
+		<div class="form-group">
+			<label class="form-label">Radios</label>
+			<div class="custom-controls-stacked">
+				<label class="custom-control custom-radio">
+					<input type="radio" class="custom-control-input" id="example-radio1" name="example-radios" value="option1" checked="">
+					<span class="custom-control-indicator"></span>
+					<span class="custom-control-description">Option 1</span>
+				</label>
+				<label class="custom-control custom-radio">
+					<input type="radio" class="custom-control-input" id="example-radio2" name="example-radios" value="option2">
+					<span class="custom-control-indicator"></span>
+					<span class="custom-control-description">Option 2</span>
+				</label>
+				<label class="custom-control custom-radio">
+					<input type="radio" class="custom-control-input" id="example-radio3" name="example-radios" value="option3">
+					<span class="custom-control-indicator"></span>
+					<span class="custom-control-description">Option 3</span>
+				</label>
+			</div>
+		</div>
+		<div class="form-group">
+			<label class="form-label">Inline Radios</label>
+			<label class="custom-control custom-radio">
+				<input type="radio" class="custom-control-input" id="example-inline-radio1" name="example-inline-radios" value="option1" checked="">
+				<span class="custom-control-indicator"></span>
+				<span class="custom-control-description">Option 1</span>
+			</label>
+			<label class="custom-control custom-radio">
+				<input type="radio" class="custom-control-input" id="example-inline-radio2" name="example-inline-radios" value="option2">
+				<span class="custom-control-indicator"></span>
+				<span class="custom-control-description">Option 2</span>
+			</label>
+			<label class="custom-control custom-radio">
+				<input type="radio" class="custom-control-input" id="example-inline-radio3" name="example-inline-radios" value="option3">
+				<span class="custom-control-indicator"></span>
+				<span class="custom-control-description">Option 3</span>
+			</label>
+		</div>
+		<div class="form-group">
+			<label class="form-label">Checkboxes</label>
+			<div class="custom-controls-stacked">
+				<label class="custom-control custom-checkbox">
+					<input type="checkbox" class="custom-control-input" id="example-checkbox1" name="example-checkbox1" value="option1" checked="">
+					<span class="custom-control-indicator"></span>
+					<span class="custom-control-description">Option 1</span>
+				</label>
+				<label class="custom-control custom-checkbox">
+					<input type="checkbox" class="custom-control-input" id="example-checkbox2" name="example-checkbox2" value="option2">
+					<span class="custom-control-indicator"></span>
+					<span class="custom-control-description">Option 2</span>
+				</label>
+				<label class="custom-control custom-checkbox">
+					<input type="checkbox" class="custom-control-input" id="example-checkbox3" name="example-checkbox3" value="option3">
+					<span class="custom-control-indicator"></span>
+					<span class="custom-control-description">Option 3</span>
+				</label>
+			</div>
+		</div>
+		<div class="form-group">
+			<label class="form-label">Inline Checkboxes</label>
+			<label class="custom-control custom-checkbox">
+				<input type="checkbox" class="custom-control-input" id="example-inline-checkbox1" name="example-inline-checkbox1" value="option1"
+				       checked="">
+				<span class="custom-control-indicator"></span>
+				<span class="custom-control-description">Option 1</span>
+			</label>
+			<label class="custom-control custom-checkbox">
+				<input type="checkbox" class="custom-control-input" id="example-inline-checkbox2" name="example-inline-checkbox2" value="option2">
+				<span class="custom-control-indicator"></span>
+				<span class="custom-control-description">Option 2</span>
+			</label>
+			<label class="custom-control custom-checkbox">
+				<input type="checkbox" class="custom-control-input" id="example-inline-checkbox3" name="example-inline-checkbox3" value="option3">
+				<span class="custom-control-indicator"></span>
+				<span class="custom-control-description">Option 3</span>
+			</label>
+		</div>
+		<div class="form-group">
+			<label class="form-label" for="example-file-input">File Input</label>
+			<input type="file" id="example-file-input" name="example-file-input">
+		</div>
+		<div class="form-group">
+			<label class="form-label" for="example-file-multiple-input">File Input (Multiple)</label>
+			<input type="file" id="example-file-multiple-input" name="example-file-multiple-input" multiple="">
+		</div>
+		<div class="form-group">
+			<label class="form-label">Bootstrap's Custom File Input</label>
+			<label class="custom-file">
+				<input type="file" class="custom-file-input" id="example-file-input-custom" name="example-file-input-custom">
+				<span class="custom-file-control"></span>
+			</label>
+		</div>
+		<div class="form-group">
+			<label class="form-label">Bootstrap's Custom File Input (Multiple)</label>
+			<label class="custom-file">
+				<input type="file" class="custom-file-input" id="example-file-multiple-input-custom" name="example-file-multiple-input-custom" multiple="">
+				<span class="custom-file-control"></span>
+			</label>
+		</div>
+		<div class="form-group">
+			<label class="form-label" for="example-select-2">Selectize.js</label>
+			<select class="form-control custom-select" id="example-select-2" name="example-select" data-selectize>
+				<option value="0">Please select</option>
+				<option value="1">Option #1</option>
+				<option value="2">Option #2</option>
+				<option value="3">Option #3</option>
+			</select>
+		</div>
+		<div class="form-group">
+			<label class="form-label" for="example-select-2">Selectize.js</label>
+			<select class="form-control custom-select" id="example-select-3" name="example-select">
+				<option value="0">Please select</option>
+				<option value="1">Option #1</option>
+				<option value="2">Option #2</option>
+				<option value="3">Option #3</option>
+			</select>
+		</div>
+		<div class="form-group">
+			<label class="form-label">Country</label>
+			<select id="select-country" class="form-control custom-select" placeholder="Select a country..." data-selectize>
+				<option value="">Select a country...</option>
+				<option value="AF">Afghanistan</option>
+				<option value="AX">&Aring;land Islands</option>
+				<option value="AL">Albania</option>
+				<option value="DZ">Algeria</option>
+				<option value="AS">American Samoa</option>
+				<option value="AD">Andorra</option>
+				<option value="AO">Angola</option>
+				<option value="AI">Anguilla</option>
+				<option value="AQ">Antarctica</option>
+				<option value="AG">Antigua and Barbuda</option>
+				<option value="AR">Argentina</option>
+				<option value="AM">Armenia</option>
+				<option value="AW">Aruba</option>
+				<option value="AU">Australia</option>
+				<option value="AT">Austria</option>
+				<option value="AZ">Azerbaijan</option>
+				<option value="BS">Bahamas</option>
+				<option value="BH">Bahrain</option>
+				<option value="BD">Bangladesh</option>
+				<option value="BB">Barbados</option>
+				<option value="BY">Belarus</option>
+				<option value="BE">Belgium</option>
+				<option value="BZ">Belize</option>
+				<option value="BJ">Benin</option>
+				<option value="BM">Bermuda</option>
+				<option value="BT">Bhutan</option>
+				<option value="BO">Bolivia, Plurinational State of</option>
+				<option value="BA">Bosnia and Herzegovina</option>
+				<option value="BW">Botswana</option>
+				<option value="BV">Bouvet Island</option>
+				<option value="BR">Brazil</option>
+				<option value="IO">British Indian Ocean Territory</option>
+				<option value="BN">Brunei Darussalam</option>
+				<option value="BG">Bulgaria</option>
+				<option value="BF">Burkina Faso</option>
+				<option value="BI">Burundi</option>
+				<option value="KH">Cambodia</option>
+				<option value="CM">Cameroon</option>
+				<option value="CA">Canada</option>
+				<option value="CV">Cape Verde</option>
+				<option value="KY">Cayman Islands</option>
+				<option value="CF">Central African Republic</option>
+				<option value="TD">Chad</option>
+				<option value="CL">Chile</option>
+				<option value="CN">China</option>
+				<option value="CX">Christmas Island</option>
+				<option value="CC">Cocos (Keeling) Islands</option>
+				<option value="CO">Colombia</option>
+				<option value="KM">Comoros</option>
+				<option value="CG">Congo</option>
+				<option value="CD">Congo, the Democratic Republic of the</option>
+				<option value="CK">Cook Islands</option>
+				<option value="CR">Costa Rica</option>
+				<option value="CI">C&ocirc;te d'Ivoire</option>
+				<option value="HR">Croatia</option>
+				<option value="CU">Cuba</option>
+				<option value="CY">Cyprus</option>
+				<option value="CZ">Czech Republic</option>
+				<option value="DK">Denmark</option>
+				<option value="DJ">Djibouti</option>
+				<option value="DM">Dominica</option>
+				<option value="DO">Dominican Republic</option>
+				<option value="EC">Ecuador</option>
+				<option value="EG">Egypt</option>
+				<option value="SV">El Salvador</option>
+				<option value="GQ">Equatorial Guinea</option>
+				<option value="ER">Eritrea</option>
+				<option value="EE">Estonia</option>
+				<option value="ET">Ethiopia</option>
+				<option value="FK">Falkland Islands (Malvinas)</option>
+				<option value="FO">Faroe Islands</option>
+				<option value="FJ">Fiji</option>
+				<option value="FI">Finland</option>
+				<option value="FR">France</option>
+				<option value="GF">French Guiana</option>
+				<option value="PF">French Polynesia</option>
+				<option value="TF">French Southern Territories</option>
+				<option value="GA">Gabon</option>
+				<option value="GM">Gambia</option>
+				<option value="GE">Georgia</option>
+				<option value="DE">Germany</option>
+				<option value="GH">Ghana</option>
+				<option value="GI">Gibraltar</option>
+				<option value="GR">Greece</option>
+				<option value="GL">Greenland</option>
+				<option value="GD">Grenada</option>
+				<option value="GP">Guadeloupe</option>
+				<option value="GU">Guam</option>
+				<option value="GT">Guatemala</option>
+				<option value="GG">Guernsey</option>
+				<option value="GN">Guinea</option>
+				<option value="GW">Guinea-Bissau</option>
+				<option value="GY">Guyana</option>
+				<option value="HT">Haiti</option>
+				<option value="HM">Heard Island and McDonald Islands</option>
+				<option value="VA">Holy See (Vatican City State)</option>
+				<option value="HN">Honduras</option>
+				<option value="HK">Hong Kong</option>
+				<option value="HU">Hungary</option>
+				<option value="IS">Iceland</option>
+				<option value="IN">India</option>
+				<option value="ID">Indonesia</option>
+				<option value="IR">Iran, Islamic Republic of</option>
+				<option value="IQ">Iraq</option>
+				<option value="IE">Ireland</option>
+				<option value="IM">Isle of Man</option>
+				<option value="IL">Israel</option>
+				<option value="IT">Italy</option>
+				<option value="JM">Jamaica</option>
+				<option value="JP">Japan</option>
+				<option value="JE">Jersey</option>
+				<option value="JO">Jordan</option>
+				<option value="KZ">Kazakhstan</option>
+				<option value="KE">Kenya</option>
+				<option value="KI">Kiribati</option>
+				<option value="KP">Korea, Democratic People's Republic of</option>
+				<option value="KR">Korea, Republic of</option>
+				<option value="KW">Kuwait</option>
+				<option value="KG">Kyrgyzstan</option>
+				<option value="LA">Lao People's Democratic Republic</option>
+				<option value="LV">Latvia</option>
+				<option value="LB">Lebanon</option>
+				<option value="LS">Lesotho</option>
+				<option value="LR">Liberia</option>
+				<option value="LY">Libyan Arab Jamahiriya</option>
+				<option value="LI">Liechtenstein</option>
+				<option value="LT">Lithuania</option>
+				<option value="LU">Luxembourg</option>
+				<option value="MO">Macao</option>
+				<option value="MK">Macedonia, the former Yugoslav Republic of</option>
+				<option value="MG">Madagascar</option>
+				<option value="MW">Malawi</option>
+				<option value="MY">Malaysia</option>
+				<option value="MV">Maldives</option>
+				<option value="ML">Mali</option>
+				<option value="MT">Malta</option>
+				<option value="MH">Marshall Islands</option>
+				<option value="MQ">Martinique</option>
+				<option value="MR">Mauritania</option>
+				<option value="MU">Mauritius</option>
+				<option value="YT">Mayotte</option>
+				<option value="MX">Mexico</option>
+				<option value="FM">Micronesia, Federated States of</option>
+				<option value="MD">Moldova, Republic of</option>
+				<option value="MC">Monaco</option>
+				<option value="MN">Mongolia</option>
+				<option value="ME">Montenegro</option>
+				<option value="MS">Montserrat</option>
+				<option value="MA">Morocco</option>
+				<option value="MZ">Mozambique</option>
+				<option value="MM">Myanmar</option>
+				<option value="NA">Namibia</option>
+				<option value="NR">Nauru</option>
+				<option value="NP">Nepal</option>
+				<option value="NL">Netherlands</option>
+				<option value="AN">Netherlands Antilles</option>
+				<option value="NC">New Caledonia</option>
+				<option value="NZ">New Zealand</option>
+				<option value="NI">Nicaragua</option>
+				<option value="NE">Niger</option>
+				<option value="NG">Nigeria</option>
+				<option value="NU">Niue</option>
+				<option value="NF">Norfolk Island</option>
+				<option value="MP">Northern Mariana Islands</option>
+				<option value="NO">Norway</option>
+				<option value="OM">Oman</option>
+				<option value="PK">Pakistan</option>
+				<option value="PW">Palau</option>
+				<option value="PS">Palestinian Territory, Occupied</option>
+				<option value="PA">Panama</option>
+				<option value="PG">Papua New Guinea</option>
+				<option value="PY">Paraguay</option>
+				<option value="PE">Peru</option>
+				<option value="PH">Philippines</option>
+				<option value="PN">Pitcairn</option>
+				<option value="PL">Poland</option>
+				<option value="PT">Portugal</option>
+				<option value="PR">Puerto Rico</option>
+				<option value="QA">Qatar</option>
+				<option value="RE">R&eacute;union</option>
+				<option value="RO">Romania</option>
+				<option value="RU">Russian Federation</option>
+				<option value="RW">Rwanda</option>
+				<option value="BL">Saint Barth&eacute;lemy</option>
+				<option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>
+				<option value="KN">Saint Kitts and Nevis</option>
+				<option value="LC">Saint Lucia</option>
+				<option value="MF">Saint Martin (French part)</option>
+				<option value="PM">Saint Pierre and Miquelon</option>
+				<option value="VC">Saint Vincent and the Grenadines</option>
+				<option value="WS">Samoa</option>
+				<option value="SM">San Marino</option>
+				<option value="ST">Sao Tome and Principe</option>
+				<option value="SA">Saudi Arabia</option>
+				<option value="SN">Senegal</option>
+				<option value="RS">Serbia</option>
+				<option value="SC">Seychelles</option>
+				<option value="SL">Sierra Leone</option>
+				<option value="SG">Singapore</option>
+				<option value="SK">Slovakia</option>
+				<option value="SI">Slovenia</option>
+				<option value="SB">Solomon Islands</option>
+				<option value="SO">Somalia</option>
+				<option value="ZA">South Africa</option>
+				<option value="GS">South Georgia and the South Sandwich Islands</option>
+				<option value="ES">Spain</option>
+				<option value="LK">Sri Lanka</option>
+				<option value="SD">Sudan</option>
+				<option value="SR">Suriname</option>
+				<option value="SJ">Svalbard and Jan Mayen</option>
+				<option value="SZ">Swaziland</option>
+				<option value="SE">Sweden</option>
+				<option value="CH">Switzerland</option>
+				<option value="SY">Syrian Arab Republic</option>
+				<option value="TW">Taiwan, Province of China</option>
+				<option value="TJ">Tajikistan</option>
+				<option value="TZ">Tanzania, United Republic of</option>
+				<option value="TH">Thailand</option>
+				<option value="TL">Timor-Leste</option>
+				<option value="TG">Togo</option>
+				<option value="TK">Tokelau</option>
+				<option value="TO">Tonga</option>
+				<option value="TT">Trinidad and Tobago</option>
+				<option value="TN">Tunisia</option>
+				<option value="TR">Turkey</option>
+				<option value="TM">Turkmenistan</option>
+				<option value="TC">Turks and Caicos Islands</option>
+				<option value="TV">Tuvalu</option>
+				<option value="UG">Uganda</option>
+				<option value="UA">Ukraine</option>
+				<option value="AE">United Arab Emirates</option>
+				<option value="GB">United Kingdom</option>
+				<option value="US">United States</option>
+				<option value="UM">United States Minor Outlying Islands</option>
+				<option value="UY">Uruguay</option>
+				<option value="UZ">Uzbekistan</option>
+				<option value="VU">Vanuatu</option>
+				<option value="VE">Venezuela, Bolivarian Republic of</option>
+				<option value="VN">Viet Nam</option>
+				<option value="VG">Virgin Islands, British</option>
+				<option value="VI">Virgin Islands, U.S.</option>
+				<option value="WF">Wallis and Futuna</option>
+				<option value="EH">Western Sahara</option>
+				<option value="YE">Yemen</option>
+				<option value="ZM">Zambia</option>
+				<option value="ZW">Zimbabwe</option>
+			</select>
+		</div>
+		<div class="form-footer">
+			<button type="submit" class="btn btn-primary">Submit</button>
+		</div>
+	</div>
+</div>
--- a/src/_includes/cards/form-button-groups.html
+++ b/src/_includes/cards/form-button-groups.html
@@ -0,0 +1,43 @@
+<div class="card">
+	<div class="card-header">
+		<h3 class="card-title">Button Groups</h3>
+	</div>
+	<div class="card-body">
+		<div class="form-group">
+			<div class="input-group">
+				<div class="input-group-btn">
+					<button type="button" class="btn btn-secondary">
+						<i class="fa fa-search"></i> Search
+					</button>
+				</div>
+				<input type="text" class="form-control" id="example-input1-group2" name="example-input1-group2" placeholder="Username">
+			</div>
+		</div>
+		<div class="form-group ">
+			<div class="input-group">
+				<input type="email" class="form-control" id="example-input2-group2" name="example-input2-group2" placeholder="Email">
+				<div class="input-group-btn">
+					<button type="button" class="btn btn-secondary">Submit</button>
+				</div>
+			</div>
+		</div>
+		<div class="form-group">
+			<div class="input-group">
+				<div class="input-group-btn">
+					<button type="button" class="btn btn-secondary">
+						<i class="fa fa-facebook"></i>
+					</button>
+				</div>
+				<input type="text" class="form-control" id="example-input3-group2" name="example-input3-group2" placeholder="Search">
+				<div class="input-group-btn">
+					<button type="button" class="btn btn-secondary">
+						<i class="fa fa-twitter"></i>
+					</button>
+				</div>
+			</div>
+		</div>
+		<div class="form-footer">
+			<button type="submit" class="btn btn-primary">Submit</button>
+		</div>
+	</div>
+</div>
--- a/src/_includes/cards/form-dropdown-groups.html
+++ b/src/_includes/cards/form-dropdown-groups.html
@@ -0,0 +1,88 @@
+<div class="card">
+	<div class="card-header">
+		<h3 class="card-title">Dropdown Groups</h3>
+	</div>
+	<div class="card-body">
+		<div class="form-group">
+			<div class="input-group">
+				<div class="input-group-btn">
+					<button type="button" class="btn btn-secondary">Options</button>
+					<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
+					<div class="dropdown-menu">
+						<a class="dropdown-item" href="javascript:void(0)">
+							<i class="fa fa-fw fa-bell mr-5"></i>News
+						</a>
+						<a class="dropdown-item" href="javascript:void(0)">
+							<i class="fa fa-fw fa-envelope-o mr-5"></i>Messages
+						</a>
+						<div class="dropdown-divider"></div>
+						<a class="dropdown-item" href="javascript:void(0)">
+							<i class="fa fa-fw fa-pencil mr-5"></i>Edit Profile
+						</a>
+					</div>
+				</div>
+				<input type="text" class="form-control" id="example-input1-group3" name="example-input1-group3" placeholder="Username">
+			</div>
+		</div>
+		<div class="form-group ">
+			<div class="input-group">
+				<input type="email" class="form-control" id="example-input2-group3" name="example-input2-group3" placeholder="Email">
+				<div class="input-group-btn">
+					<button type="button" class="btn btn-secondary" data-toggle="dropdown" >
+						<i class="fa fa-angle-down"></i>
+					</button>
+					<div class="dropdown-menu dropdown-menu-right">
+						<a class="dropdown-item" href="javascript:void(0)">
+							<i class="fa fa-fw fa-bell mr-5"></i>News
+						</a>
+						<a class="dropdown-item" href="javascript:void(0)">
+							<i class="fa fa-fw fa-envelope-o mr-5"></i>Messages
+						</a>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="form-group ">
+			<div class="input-group">
+				<div class="input-group-btn dropup">
+					<button type="button" class="btn btn-secondary" data-toggle="dropdown" >
+						<i class="fa fa-angle-up"></i>
+					</button>
+					<div class="dropdown-menu">
+						<a class="dropdown-item" href="javascript:void(0)">
+							<i class="fa fa-fw fa-bell mr-5"></i>News
+						</a>
+						<a class="dropdown-item" href="javascript:void(0)">
+							<i class="fa fa-fw fa-envelope-o mr-5"></i>Messages
+						</a>
+						<div class="dropdown-divider"></div>
+						<a class="dropdown-item" href="javascript:void(0)">
+							<i class="fa fa-fw fa-pencil mr-5"></i>Edit Profile
+						</a>
+					</div>
+				</div>
+				<input type="text" class="form-control" id="example-input3-group3" name="example-input3-group3" placeholder="..">
+				<div class="input-group-btn dropup">
+					<button type="button" class="btn btn-secondary" data-toggle="dropdown" >
+						<i class="fa fa-angle-up"></i>
+					</button>
+					<div class="dropdown-menu dropdown-menu-right">
+						<a class="dropdown-item" href="javascript:void(0)">
+							<i class="fa fa-fw fa-bell mr-5"></i>News
+						</a>
+						<a class="dropdown-item" href="javascript:void(0)">
+							<i class="fa fa-fw fa-envelope-o mr-5"></i>Messages
+						</a>
+						<div class="dropdown-divider"></div>
+						<a class="dropdown-item" href="javascript:void(0)">
+							<i class="fa fa-fw fa-pencil mr-5"></i>Edit Profile
+						</a>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="form-footer">
+			<button type="submit" class="btn btn-primary">Submit</button>
+		</div>
+	</div>
+</div>
--- a/src/_includes/cards/form-states.html
+++ b/src/_includes/cards/form-states.html
@@ -0,0 +1,41 @@
+<div class="card">
+	<form class="card-body">
+
+		<div class="row">
+			<div class="col-md-6 mb-3">
+				<label for="validationServer01">First name</label>
+				<input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
+			</div>
+			<div class="col-md-6 mb-3">
+				<label for="validationServer02">Last name</label>
+				<input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
+			</div>
+		</div>
+		<div class="row">
+			<div class="col-md-6 mb-3">
+				<label for="validationServer03">City</label>
+				<input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required>
+				<div class="invalid-feedback">
+					Please provide a valid city.
+				</div>
+			</div>
+			<div class="col-md-3 mb-3">
+				<label for="validationServer04">State</label>
+				<input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
+				<div class="invalid-feedback">
+					Please provide a valid state.
+				</div>
+			</div>
+			<div class="col-md-3 mb-3">
+				<label for="validationServer05">Zip</label>
+				<input type="text" class="form-control is-invalid" id="validationServer05" placeholder="Zip" required>
+				<div class="invalid-feedback">
+					Please provide a valid zip.
+				</div>
+			</div>
+		</div>
+
+		<button class="btn btn-primary" type="submit">Submit form</button>
+
+	</form>
+</div>
--- a/src/_includes/cards/form-text-groups.html
+++ b/src/_includes/cards/form-text-groups.html
@@ -0,0 +1,29 @@
+<div class="card">
+	<div class="card-header">
+		<h3 class="card-title">Icon/Text Groups</h3>
+	</div>
+	<div class="card-body">
+		<div class="form-group">
+			<div class="input-group">
+				<span class="input-group-prepend"><i class="fa fa-user"></i></span>
+				<input type="text" class="form-control" id="example-input1-group1" name="example-input1-group1" placeholder="Username">
+			</div>
+		</div>
+		<div class="form-group">
+			<div class="input-group">
+				<input type="email" class="form-control" id="example-input2-group1" name="example-input2-group1" placeholder="Email">
+				<span class="input-group-append"><i class="fa fa-envelope-o"></i></span>
+			</div>
+		</div>
+		<div class="form-group">
+			<div class="input-group">
+				<span class="input-group-prepend"><i class="fa fa-euro"></i></span>
+				<input type="text" class="form-control" id="example-input3-group1" name="example-input3-group1" placeholder="..">
+				<span class="input-group-append">.00</span>
+			</div>
+		</div>
+		<div class="form-footer">
+			<button type="submit" class="btn btn-primary">Submit</button>
+		</div>
+	</div>
+</div>
--- a/src/_includes/cards/forms.html
+++ b/src/_includes/cards/forms.html
@@ -0,0 +1,117 @@
+<div class="card">
+	<div class="card-body">
+
+		<form>
+			<div class="form-group">
+				<label class="form-label">Email address</label>
+				<input type="email" class="form-control" placeholder="name@example.com">
+			</div>
+			<div class="form-group">
+				<label class="form-label">Example select</label>
+				<select class="form-control">
+					<option>1</option>
+					<option>2</option>
+					<option>3</option>
+					<option>4</option>
+					<option>5</option>
+				</select>
+			</div>
+			<div class="form-group">
+				<label class="form-label">Example select</label>
+				<select class="form-control">
+					<option>1</option>
+					<option>2</option>
+					<option>3</option>
+					<option>4</option>
+					<option>5</option>
+				</select>
+			</div>
+			<div class="form-group">
+				<label class="form-label">Example multiple select</label>
+				<select multiple class="form-control">
+					<option>1</option>
+					<option>2</option>
+					<option>3</option>
+					<option>4</option>
+					<option>5</option>
+				</select>
+			</div>
+			<div class="form-group">
+				<label class="form-label">Example textarea</label>
+				<textarea class="form-control" rows="3"></textarea>
+			</div>
+			<div class="form-group">
+				<label for="validationDefault03">City</label>
+				<input type="text" class="form-control" id="validationDefault03" placeholder="City" required>
+				<div class="invalid-feedback">
+					Please provide a valid city.
+				</div>
+			</div>
+			<div class="row">
+				<div class="col-sm-7 form-group">
+					<label for="validationDefault04">State</label>
+					<input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
+					<div class="invalid-feedback">
+						Please provide a valid state.
+					</div>
+				</div>
+				<div class="col-sm-5 form-group">
+					<label for="validationDefault05">Zip</label>
+					<input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required>
+					<div class="invalid-feedback">
+						Please provide a valid zip.
+					</div>
+				</div>
+			</div>
+			<div class="form-group">
+				<label class="form-label">Example file input</label>
+				<input type="file" class="form-control-file">
+			</div>
+			<div class="form-group">
+				<label class="form-label">Password</label>
+				<input type="password" class="form-control">
+				<small class="form-text text-muted">
+					Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
+				</small>
+			</div>
+			<div class="form-group">
+				<label class="form-label">Custom select</label>
+				<select class="">
+					<option selected>Open this select menu</option>
+					<option value="1">One</option>
+					<option value="2">Two</option>
+					<option value="3">Three</option>
+				</select>
+			</div>
+			<div class="form-group">
+				<label class="form-label">Custom file input</label>
+				<label class="custom-file custom-file-block">
+					<input type="file" id="file2" class="custom-file-input">
+					<span class="custom-file-control"></span>
+				</label>
+			</div>
+			<div class="form-group">
+				<div class="custom-controls-stacked">
+					<label class="custom-control custom-radio">
+						<input name="radio-stacked" type="radio" class="custom-control-input">
+						<span class="custom-control-indicator"></span>
+						<span class="custom-control-description">Toggle this custom radio</span>
+					</label>
+					<label class="custom-control custom-radio">
+						<input name="radio-stacked" type="radio" class="custom-control-input">
+						<span class="custom-control-indicator"></span>
+						<span class="custom-control-description">Or toggle this other custom radio</span>
+					</label>
+				</div>
+			</div>
+			<div class="form-group">
+				<label class="custom-control custom-checkbox">
+					<input name="radio-stacked" type="checkbox" class="custom-control-input">
+					<span class="custom-control-indicator"></span>
+					<span class="custom-control-description">Toggle this custom radio</span>
+				</label>
+			</div>
+		</form>
+
+	</div>
+</div>
--- a/src/_includes/cards/fullcalendar.html
+++ b/src/_includes/cards/fullcalendar.html
@@ -0,0 +1,96 @@
+<div class="card">
+	<div class="card-body">
+		<div id="fullcalendar"></div>
+	</div>
+</div>
+
+<script>
+    require(['fullcalendar', 'jquery'], function () {
+        $(document).ready(function () {
+            $('#fullcalendar').fullCalendar({
+                eventColor: tabler.colors.blue,
+                displayEventTime: true,
+                defaultDate: '2017-11-12',
+                editable: true,
+                eventLimit: true,
+                columnFormat: 'dddd',
+                timeFormat: 'H:mm',
+				header: {
+                    left:   'today',
+                    center: 'title',
+                    right:  'prev,next'
+				},
+                viewRender: function(view, element) {
+                    if(view.name === 'month') {
+                        element.find('.fc-head-container').addClass('table');
+                    }
+                },
+                events: [
+                    {
+                        title: 'All Day Event',
+                        start: '2017-11-01',
+                        color: tabler.colors.red
+                    },
+                    {
+                        title: 'Long Event',
+                        start: '2017-11-07',
+                        end: '2017-11-10'
+                    },
+                    {
+                        id: 999,
+                        title: 'Repeating Event',
+                        start: '2017-11-09T16:00:00',
+                        color: tabler.colors.yellow
+                    },
+                    {
+                        id: 999,
+                        title: 'Repeating Event',
+                        start: '2017-11-16T16:00:00',
+                        color: tabler.colors.yellow
+                    },
+                    {
+                        id: 999,
+                        title: 'Repeating Event',
+                        start: '2017-11-23T16:00:00',
+                        color: tabler.colors.yellow
+                    },
+                    {
+                        title: 'Conference',
+                        start: '2017-11-11',
+                        end: '2017-11-13'
+                    },
+                    {
+                        title: 'Meeting',
+                        start: '2017-11-12T10:30:00',
+                        end: '2017-11-12T12:30:00'
+                    },
+                    {
+                        title: 'Lunch',
+                        start: '2017-11-12T12:00:00'
+                    },
+                    {
+                        title: 'Meeting',
+                        start: '2017-11-12T14:30:00'
+                    },
+                    {
+                        title: 'Happy Hour',
+                        start: '2017-11-12T17:30:00'
+                    },
+                    {
+                        title: 'Dinner',
+                        start: '2017-11-12T20:00:00'
+                    },
+                    {
+                        title: 'Birthday Party',
+                        start: '2017-11-13T07:00:00'
+                    },
+                    {
+                        title: 'Click for Google',
+                        url: 'http://google.com/',
+                        start: '2017-11-28'
+                    }
+                ]
+            })
+        });
+    });
+</script>
--- a/src/_includes/cards/header.html
+++ b/src/_includes/cards/header.html
@@ -0,0 +1,10 @@
+<div class="card">
+	<div class="card-header">
+		<div class="card-title">
+			Card with header content
+		</div>
+	</div>
+	<div class="card-body">
+		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquid architecto commodi dolorum nam odio perspiciatis quo sapiente vitae voluptatem? Accusamus beatae distinctio dolores laborum nobis, obcaecati odio quia reprehenderit.
+	</div>
+</div>
--- a/src/_includes/cards/http-request.html
+++ b/src/_includes/cards/http-request.html
@@ -0,0 +1,167 @@
+<div class="card">
+	<div class="card-header">
+		<h3 class="card-title">HTTP Request</h3>
+	</div>
+	<div class="card-body">
+		<div class="row">
+			<div class="form-group col-sm-4 col-md-2">
+				<label class="form-label">
+					Method <span class="form-required">*</span>
+				</label>
+				<select class="custom-select">
+					<option value="GET">GET</option>
+					<option value="POST">POST</option>
+					<option value="PUT">PUT</option>
+					<option value="HEAD">HEAD</option>
+					<option value="DELETE">DELETE</option>
+					<option value="PATCH">PATCH</option>
+				</select>
+			</div>
+			<div class="form-group col-sm-8 col-md-10">
+				<label class="form-label">
+					URL <span class="form-required">*</span>
+				</label>
+				<input name="url" type="text" class="form-control" value="https://content.googleapis.com/discovery/v1/apis/surveys/v2/rest">
+			</div>
+		</div>
+
+		<div class="form-label">Assertions</div>
+		<div class="table-responsive">
+			<table class="table mb-0">
+				<thead>
+				<tr>
+					<th class="pl-0">Source</th>
+					<th>Property</th>
+					<th>Comparison</th>
+					<th class="pr-0">Target</th>
+				</tr>
+				</thead>
+				<tr>
+					<td class="pl-0">
+						<select class="custom-select">
+							<option value="STATUS_CODE" selected>Status code</option>
+							<option value="JSON_BODY">JSON body</option>
+							<option value="HEADERS">Headers</option>
+							<option value="TEXT_BODY">Text body</option>
+							<option value="RESPONSE_TIME">Response time</option>
+						</select>
+					</td>
+					<td>
+						<input type="text" class="form-control"></td>
+					<td>
+						<select class="custom-select">
+							<option value="EQUALS" selected>Equals</option>
+							<option value="NOT_EQUALS">Not equals</option>
+							<option value="HAS_KEY">Has key</option>
+							<option value="NOT_HAS_KEY">Not has key</option>
+							<option value="HAS_VALUE">Has value</option>
+							<option value="NOT_HAS_VALUE">Not has value</option>
+							<option value="IS_EMPTY">Is empty</option>
+							<option value="NOT_EMPTY">Is not empty</option>
+							<option value="GREATER_THAN">Greater than</option>
+							<option value="LESS_THAN">Less than</option>
+						</select>
+					</td>
+					<td class="pr-0">
+						<input type="text" class="form-control" value="200">
+					</td>
+				</tr>
+				<tr>
+					<td class="pl-0">
+						<select class="custom-select">
+							<option value="STATUS_CODE">Status code</option>
+							<option value="JSON_BODY" selected>JSON body</option>
+							<option value="HEADERS">Headers</option>
+							<option value="TEXT_BODY">Text body</option>
+							<option value="RESPONSE_TIME">Response time</option>
+						</select>
+					</td>
+					<td>
+						<input type="text" class="form-control" value="parameters.alt.type">
+					</td>
+					<td>
+						<select class="custom-select">
+							<option value="EQUALS">Equals</option>
+							<option value="NOT_EQUALS">Not equals</option>
+							<option value="HAS_KEY">Has key</option>
+							<option value="NOT_HAS_KEY">Not has key</option>
+							<option value="HAS_VALUE" selected>Has value</option>
+							<option value="NOT_HAS_VALUE">Not has value</option>
+							<option value="IS_EMPTY">Is empty</option>
+							<option value="NOT_EMPTY">Is not empty</option>
+							<option value="GREATER_THAN">Greater than</option>
+							<option value="LESS_THAN">Less than</option>
+						</select>
+					</td>
+					<td class="pr-0">
+						<input type="text" class="form-control" value="string">
+					</td>
+				</tr>
+				<tr>
+					<td class="pl-0">
+						<select class="custom-select">
+							<option value="STATUS_CODE">Status code</option>
+							<option value="JSON_BODY">JSON body</option>
+							<option value="HEADERS">Headers</option>
+							<option value="TEXT_BODY">Text body</option>
+							<option value="RESPONSE_TIME" selected>Response time</option>
+						</select>
+					</td>
+					<td>
+						<input type="text" class="form-control"></td>
+					<td>
+						<select class="custom-select">
+							<option value="EQUALS">Equals</option>
+							<option value="NOT_EQUALS">Not equals</option>
+							<option value="HAS_KEY">Has key</option>
+							<option value="NOT_HAS_KEY">Not has key</option>
+							<option value="HAS_VALUE">Has value</option>
+							<option value="NOT_HAS_VALUE">Not has value</option>
+							<option value="IS_EMPTY">Is empty</option>
+							<option value="NOT_EMPTY">Is not empty</option>
+							<option value="GREATER_THAN">Greater than</option>
+							<option value="LESS_THAN" selected>Less than</option>
+						</select>
+					</td>
+					<td class="pr-0">
+						<input type="text" class="form-control" value="500">
+					</td>
+				</tr>
+				<tr>
+					<td class="pl-0">
+						<select class="custom-select">
+							<option value="STATUS_CODE">Status code</option>
+							<option value="JSON_BODY">JSON body</option>
+							<option value="HEADERS" selected>Headers</option>
+							<option value="TEXT_BODY">Text body</option>
+							<option value="RESPONSE_TIME">Response time</option>
+						</select>
+					</td>
+					<td>
+						<input type="text" class="form-control" value="content-type">
+					</td>
+					<td>
+						<select class="custom-select">
+							<option value="EQUALS" selected>Equals</option>
+							<option value="NOT_EQUALS">Not equals</option>
+							<option value="HAS_KEY">Has key</option>
+							<option value="NOT_HAS_KEY">Not has key</option>
+							<option value="HAS_VALUE">Has value</option>
+							<option value="NOT_HAS_VALUE">Not has value</option>
+							<option value="IS_EMPTY">Is empty</option>
+							<option value="NOT_EMPTY">Is not empty</option>
+							<option value="GREATER_THAN">Greater than</option>
+							<option value="LESS_THAN">Less than</option>
+						</select>
+					</td>
+					<td class="pr-0">
+						<input type="text" class="form-control" value="application/json; charset=UTF-8">
+					</td>
+				</tr>
+			</table>
+		</div>
+	</div>
+	<div class="card-footer text-right">
+		<button type="submit" class="btn btn-primary">Make request</button>
+	</div>
+</div>
--- a/src/_includes/cards/icon-box.html
+++ b/src/_includes/cards/icon-box.html
@@ -0,0 +1,11 @@
+<div class="card p-3">
+	<div class="d-flex align-items-center">
+		<span class="stamp stamp-md bg-{{ include.color | default: 'red' }} mr-3">
+			<i class="{{ include.icon | default: 'fa fa-dollar' }}"></i>
+		</span>
+		<div>
+			<h4 class="m-0"><a href="javascript:void(0)">{{ include.value | default: '16' }} <small>{{ include.description | default: 'Sales' }}</small></a></h4>
+			<small class="text-muted">{{ include.subtitle | default: '6 waiting payments' }}</small>
+		</div>
+	</div>
+</div>
--- a/src/_includes/cards/icon-card.html
+++ b/src/_includes/cards/icon-card.html
@@ -0,0 +1,15 @@
+<div class="card {% if include.bg-color %}bg-{{ include.bg-color }} text-white{% endif %}">
+	<div class="card-body p-4">
+		<div class="row">
+			<div class="col-auto">
+				<div class="stamp stamp-md {% if include.icon-color %}bg-{{ include.icon-color }}{% endif %}">
+					<i class="{{ include.icon }}"></i>
+				</div>
+			</div>
+			<div class="col text-right">
+				<div class="small text-muted">{{ include.title }}</div>
+				<div class="h4 m-0">{{ include.value }}</div>
+			</div>
+		</div>
+	</div>
+</div>
--- a/src/_includes/cards/icons.html
+++ b/src/_includes/cards/icons.html
@@ -0,0 +1,26 @@
+<div class="card">
+	<div class="card-header">
+		<div class="card-title">{{ include.title }}</div>
+	</div>
+	<div class="card-body">
+
+		<div class="row">
+			<div class="col-3">
+				<p>{{ include.description }} For more info <a href="{{ include.url }}" target="_blank">click here</a>.</p>
+				<p><code>&lt;i class="{{ include.icon_class }} {{ include.icon_class }}-ICON_NAME"&gt;&lt;/i&gt;</code></p>
+			</div>
+			<div class="col-9">
+				<div class="icons-list-wrap">
+					<ul class="icons-list">
+						{% for icon in include.icons %}
+						<li class="icons-list-item"><i class="{{ include.icon_class }} {{ icon }}" data-toggle="tooltip" title="{{ include.icon_class }} {{ icon }}"></i></li>
+						{% endfor %}
+						{% for icon in (0..20) %}
+						<li></li>
+						{% endfor %}
+					</ul>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
--- a/src/_includes/cards/image-bg.html
+++ b/src/_includes/cards/image-bg.html
@@ -0,0 +1,7 @@
+<div class="card bg-dark text-white">
+	<img class="card-img" src="{{ site.data.photos[43].small }}" alt="Card image">
+	<div class="card-img-overlay justify-content-end">
+		<h4 class="card-title">Card title</h4>
+		<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+	</div>
+</div>
--- a/src/_includes/cards/image-info.html
+++ b/src/_includes/cards/image-info.html
@@ -0,0 +1,68 @@
+<div class="card">
+	<img src="{{ site.data.photos[1].small }}" class="card-img-top" alt="">
+	<div class="card-body">
+
+		<h4 class="mb-4">Girl & Lake</h4>
+
+		<div class="row mb-4">
+			<div class="col-5">
+				<i class="mdi mdi-camera mr-1"></i>ISO 200
+			</div>
+			<div class="col-7">
+				<i class="mdi mdi-camera-iris mr-1"></i>1/1000
+			</div>
+			<div class="col-5">3780 x 2984</div>
+			<div class="col-7">9.54 MB</div>
+		</div>
+
+		<div class="row">
+			<div class="col-5"><strong>Created:</strong></div>
+			<div class="col-7">09 Jun 2017 11:32AM</div>
+			<div class="col-5"><strong>Updated:</strong></div>
+			<div class="col-7">19 Jun 2017 9:43PM</div>
+			<div class="col-5"><strong>Bit Depth:</strong></div>
+			<div class="col-7">16 bit</div>
+			<div class="col-5"><strong>Creator:</strong></div>
+			<div class="col-7">{{ site.data.users[1].name }} {{ site.data.users[1].surname }}</div>
+			<div class="col-5"><strong>Used colors:</strong></div>
+			<div class="col-7">
+				<div class="colors-list">
+					<span class="colors-list-item" style="background-color: #646432"></span>
+					<span class="colors-list-item" style="background-color: #323232"></span>
+					<span class="colors-list-item" style="background-color: #c8c8fa"></span>
+					<span class="colors-list-item" style="background-color: #969696"></span>
+					<span class="colors-list-item" style="background-color: #6496c8"></span>
+					<span class="colors-list-item" style="background-color: #939f5f"></span>
+					<span class="colors-list-item" style="background-color: #3264c8"></span>
+				</div>
+			</div>
+		</div>
+
+		<hr>
+
+		<div class="row align-items-center mb-4">
+			<div class="col-5"><strong>Privacy</strong></div>
+			<div class="col-7">
+				<select class="custom-select custom-select-sm">
+					<option value="">Public</option>
+					<option value="">Private</option>
+					<option value="">Friends</option>
+				</select>
+			</div>
+		</div>
+		<div class="row align-items-center">
+			<div class="col-5"><strong>Collaborators</strong></div>
+			<div class="col-7">
+				<ul class="avatar-list avatar-list-stacked">
+					{% for user in site.data.users limit: 6 offset: 1 %}
+					<li class="avatar-list-item">
+						<span class="avatar avatar-sm" style="background-image: url({{ user.photo }})"></span>
+					</li>
+					{% endfor %}
+				</ul>
+			</div>
+		</div>
+	</div>
+</div>
+
+
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`for i in .jpg; do convert "$i" -resize 500x333^ -gravity center -crop 500x333+0+0 -quality 80 -monitor "${i%.}-500.jpg"; done`