@travlrcom/uikit
Version:
TRAVLR UiKit
1,577 lines • 85.1 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/">
<meta charset="<%= htmlWebpackPlugin.options.contentManagement.head.meta.charset %>"/>
<meta name="theme-color" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.themeColor %>"/>
<meta name="viewport" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.viewport %>"/>
<meta name="robots" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.robots %>">
<meta http-equiv="X-UA-Compatible" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.httpEquiv %>">
<link rel="canonical" href="<%= htmlWebpackPlugin.options.contentManagement.head.meta.canonical %>">
<link rel="manifest" href="<%= htmlWebpackPlugin.options.contentManagement.head.meta.manifest %>">
<title><%= htmlWebpackPlugin.options.titlePage %></title>
<meta name="description" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.description %>">
<!-- Facebook -->
<meta property="og:title" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.title %>">
<meta property="og:description" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.description %>">
<meta property="og:type" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.markup.facebook.type %>" />
<meta property="og:url" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.markup.facebook.url %>">
<meta property="og:image" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.markup.facebook.image %>">
<meta property="fb:app_id" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.markup.facebook.appId %>" />
<meta property="og:site_name" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.title %>">
<!-- Twitter -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.markup.twitter.site %>" />
<meta name="twitter:title" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.title %>">
<meta name="twitter:description" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.description %>">
<meta property="twitter:image" content="<%= htmlWebpackPlugin.options.contentManagement.head.meta.markup.twitter.image %>">
<!-- Favicon -->
<link rel="shortcut icon" href="<%= htmlWebpackPlugin.options.contentManagement.head.favicon %>">
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700">
<!-- Vendors -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/color-brewer.min.css" rel="stylesheet"/>
<!-- Google Tag Manager -->
</head>
<body class="travlr-ui">
<div id="app">
<!-- core nav top -->
<header class="t-navbar-top t-background-white t-position-fixed">
<div class="t-container t-clearfix">
<div class="t-navbar-top-left t-float-left t-display-table">
<div class="t-navbar-top-left-logo t-display-table-cell t-v-align-middle t-p-r-16">
<a href="/">
<img
src="<%= require('./../../src/assets/images/statics/travlr-uikit-logo.svg') %>"
alt="TRAVLR Logo"
title="TRAVLR Logo"
class="t-navbar-top-left-logo-image">
</a>
</div>
<nav class="t-navbar-top-left-menus t-display-table-cell t-v-align-middle t-hidden-mobile">
<ul class="t-navbar-top-left-menus-list t-no-margin t-clearfix">
<% for (itemMenu of htmlWebpackPlugin.options.listMenu) { %>
<li class="t-navbar-top-left-menus-list-item t-float-left">
<a
href="<%= itemMenu.url %>"
class="t-navbar-top-left-menus-list-item-link t-color-grey-darkest t-text-callout"
title="<%= itemMenu.label %>">
<%= itemMenu.label %>
</a>
<%
if (Array.isArray(itemMenu.child)) {
%>
<!-- Begin Has Child -->
<ul class="t-navbar-top-left-menus-list-item-child t-background-white t-position-absolute t-primary-box-shadow">
<% for (itemChild of itemMenu.child) { %>
<li class="t-navbar-top-left-menus-list-item-child-item">
<a
href="<%= itemChild.url %>"
class="t-navbar-top-left-menus-list-item-child-item-link t-color-grey-darkest t-display-block t-body-text"
title="<%= itemChild.label %>">
<%= itemChild.label %>
<i class="t-icon icon-angle-right-small"></i>
</a>
<%
if (Array.isArray(itemChild.child)) {
%>
<!-- Begin Has Second Child -->
<ul class="t-navbar-top-left-menus-list-item-child-item-grandchild t-background-white t-position-absolute t-primary-box-shadow">
<% for (itemSecondChild of itemChild.child) { %>
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="<%= itemSecondChild.url %>"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="<%= itemSecondChild.label %>">
<%= itemSecondChild.label %>
</a>
</li>
<% } %>
</ul>
<!-- End Has Second Child -->
<%
}
%>
</li>
<% } %>
</ul>
<!-- End Has Child -->
<%
}
%>
</li>
<% } %>
</ul>
</nav>
</div>
<div class="t-navbar-top-right t-float-right t-display-table">
<nav class="t-navbar-top-right-auth-container t-display-table-cell t-v-align-middle">
<ul class="t-navbar-top-right-menus-list t-clearfix t-no-margin t-display-table t-p-l-20">
<li class="t-navbar-top-right-menus-list-item t-display-table-cell t-hidden-mobile">
<a
href="http://"
class="t-btn t-btn-small t-btn-tertiary"
title="Download v1.0.0">Download v1.0.0
</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<!-- core nav top end -->
<!-- Begin Main Content -->
<main class="t-main-content">
<!-- section hero main -->
<section class=" t-section-small">
<div class="t-container">
<div class="t-columns t-columns-with-gap">
<div class="t-col-12">
<ul class="t-breadcrumb">
<% for (itemBreadcrumbIndex in htmlWebpackPlugin.options.breadcrumbs) { %>
<% if (parseInt(itemBreadcrumbIndex) === htmlWebpackPlugin.options.breadcrumbs.length -1) { %>
<li class="t-breadcrumb-item">
<a href="<%= htmlWebpackPlugin.options.breadcrumbs[itemBreadcrumbIndex].url %>">
<%= htmlWebpackPlugin.options.breadcrumbs[itemBreadcrumbIndex].label %>
</a>
</li>
<% } else { %>
<li class="t-breadcrumb-item active">
<a href="<%= htmlWebpackPlugin.options.breadcrumbs[itemBreadcrumbIndex].url %>">
<%= htmlWebpackPlugin.options.breadcrumbs[itemBreadcrumbIndex].label %>
</a>
</li>
<% } %>
<% } %>
</ul>
</div>
</div>
</div>
</section>
<!-- section hero main end -->
<!-- Begin Getting Started -->
<section class="t-p-b-32">
<div class="t-container">
<div class="t-columns t-columns-with-gap">
<!-- Begin Left Description -->
<div class="t-col-4 t-col-mobile-12 t-col-with-gap">
<% for (itemMenuSidebar of htmlWebpackPlugin.options.listMenu[0].child) { %>
<div class="t-box t-box-with-shadow">
<h2 class="t-heading-4 t-m-b-16 t-color-grey-darkest"><%= itemMenuSidebar.label %></h2>
<ul class="t-accordion t-no-padding">
<% for (itemMenuSidebarChild of itemMenuSidebar.child) { %>
<li class="t-accordion-item">
<div class="t-accordion-item-header">
<a
href="<%= itemMenuSidebarChild.url %>"
class="t-accordion-title"
title="Theme Colours"><%= itemMenuSidebarChild.label %></a>
<i class="t-accordion-icon t-icon icon-angle-right-small"></i>
</div>
</li>
<% } %>
</ul>
</div>
<% } %>
</div>
<!-- End Left Description -->
<!-- Begin Right Description -->
<div class="t-col-8 t-col-mobile-12">
<div class="t-box t-box-with-shadow">
<h2 class="t-heading-4 t-color-grey-darkest">UI Icons</h2>
<p class="t-body-text t-m-t-32 t-m-b-32">
TRAVLR UI Kit uses UI Icons font icons which are composed of some 250+ icons. Easily style icons using border color classes, background color classes and size classes. Highlight icons using the <span class="t-label-code">.t-icon</span> class.
</p>
<div class="t-panel t-primary-box-shadow t-no-margin">
<div class="t-panel-header t-p-t-0 t-background-grey-lightest">
<div class="t-panel-header-title">
Example
</div>
</div>
<div class="t-panel-body">
<div class="t-columns t-columns-with-gap">
<div class="t-col-10">
<pre>
<code class="xml hljs" id="uiIcons-1">
<span class="t-icon icon-love"></span>
</code>
</pre>
</div>
<div class="t-col-2 t-text-align-right">
<button data-clipboard-action="copy" data-clipboard-target="#uiIcons-1" class="copyText t-btn t-btn-tertiary t-btn-small t-hidden-mobile">Copy</button>
</div>
</div>
</div>
</div>
<div class="t-m-t-32 t-color-grey-darkest">
<span class="t-icon icon-heart"></span>
</div>
<div class="t-separator t-m-t-32 t-m-b-32"></div>
<h2 class="t-heading-4 t-color-grey-darkest">Icon Colour</h2>
<p class="t-body-text t-m-t-32 t-m-b-32">
Add color classes in combination with the feature icon class to draw attention to an icon. <span class="t-label-code">.icon-color-primary</span>
</p>
<div class="t-panel t-primary-box-shadow t-no-margin">
<div class="t-panel-header t-p-t-0 t-background-grey-lightest">
<div class="t-panel-header-title">
Example
</div>
</div>
<div class="t-panel-body">
<div class="t-columns t-columns-with-gap">
<div class="t-col-10">
<pre>
<code class="xml hljs" id="uiIcons-2">
<span class="t-icon icon-love t-color-primary"></span>
<span class="t-icon icon-love t-color-secondary"></span>
<span class="t-icon icon-love t-color-tertiary"></span>
</code>
</pre>
</div>
<div class="t-col-2 t-text-align-right">
<button data-clipboard-action="copy" data-clipboard-target="#uiIcons-2" class="copyText t-btn t-btn-tertiary t-btn-small t-hidden-mobile">Copy</button>
</div>
</div>
</div>
</div>
<div class="t-m-t-32 t-color-grey-darkest">
<span class="t-icon icon-heart t-color-primary t-m-r-16"></span>
<span class="t-icon icon-heart t-color-secondary t-m-r-16"></span>
<span class="t-icon icon-heart t-color-tertiary "></span>
</div>
<div class="t-separator t-m-t-32 t-m-b-32"></div>
<h2 class="t-heading-4 t-color-grey-darkest">Icon Size</h2>
<p class="t-body-text t-m-t-32 t-m-b-32">
To alter size use one of the four existing size classes: <span class="t-label-code">.icon-small</span> , <span class="t-label-code">.icon-medium</span>x
</p>
<div class="t-panel t-primary-box-shadow t-no-margin">
<div class="t-panel-header t-p-t-0 t-background-grey-lightest">
<div class="t-panel-header-title">
Example
</div>
</div>
<div class="t-panel-body">
<div class="t-columns t-columns-with-gap">
<div class="t-col-10">
<pre>
<code class="xml hljs" id="uiIcons-3">
<span class="t-icon icon-love icon-small"></span>
<span class="t-icon icon-love"></span>
<span class="t-icon icon-love icon-large"></span>
</code>
</pre>
</div>
<div class="t-col-2 t-text-align-right">
<button data-clipboard-action="copy" data-clipboard-target="#uiIcons-3" class="copyText t-btn t-btn-tertiary t-btn-small t-hidden-mobile">Copy</button>
</div>
</div>
</div>
</div>
<div class="t-m-t-32 t-color-grey-darkest">
<span class="t-icon icon-heart icon-small t-m-r-16"></span>
<span class="t-icon icon-heart t-m-r-16"></span>
<span class="t-icon icon-heart icon-large"></span>
</div>
<div class="t-separator t-m-t-32 t-m-b-32"></div>
<h2 class="t-heading-4 t-color-grey-darkest">UI Icons List</h2>
<p class="t-body-text t-m-t-32 t-m-b-32">
Rollover any icon to see icon class name.
</p>
<div class="t-columns t-columns-with-gap t-m-t-32 t-color-grey-darkest">
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-error" flow="down">
<i class="t-icon icon-error"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-error-o" flow="down">
<i class="t-icon icon-error-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-help" flow="down">
<i class="t-icon icon-help"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-help-o" flow="down">
<i class="t-icon icon-help-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-info" flow="down">
<i class="t-icon icon-info"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-info-o" flow="down">
<i class="t-icon icon-info-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-angle-down" flow="down">
<i class="t-icon icon-angle-down"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-angle-down-small" flow="down">
<i class="t-icon icon-angle-down-small"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-angle-left" flow="down">
<i class="t-icon icon-angle-left"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-angle-left-small" flow="down">
<i class="t-icon icon-angle-left-small"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-angle-right" flow="down">
<i class="t-icon icon-angle-right"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-angle-right-small" flow="down">
<i class="t-icon icon-angle-right-small"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-angle-up" flow="down">
<i class="t-icon icon-angle-up"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-angle-up-small" flow="down">
<i class="t-icon icon-angle-up-small"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-arrow-down-left" flow="down">
<i class="t-icon icon-arrow-down-left"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-arrow-down-right" flow="down">
<i class="t-icon icon-arrow-down-right"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-arrow-up-left" flow="down">
<i class="t-icon icon-arrow-up-left"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-arrow-up-right" flow="down">
<i class="t-icon icon-arrow-up-right"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-arrow-down" flow="down">
<i class="t-icon icon-arrow-down"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-arrow-down-long" flow="down">
<i class="t-icon icon-arrow-down-long"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-arrow-left" flow="down">
<i class="t-icon icon-arrow-left"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-arrow-left-long" flow="down">
<i class="t-icon icon-arrow-left-long"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-arrow-right" flow="down">
<i class="t-icon icon-arrow-right"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-arrow-right-long" flow="down">
<i class="t-icon icon-arrow-right-long"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-arrow-up" flow="down">
<i class="t-icon icon-arrow-up"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-arrow-up-long" flow="down">
<i class="t-icon icon-arrow-up-long"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-arrows" flow="down">
<i class="t-icon icon-arrows"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-arrows-alt" flow="down">
<i class="t-icon icon-arrows-alt"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-arrows-compress" flow="down">
<i class="t-icon icon-arrows-compress"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-arrows-expand" flow="down">
<i class="t-icon icon-arrows-expand"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-arrows-h" flow="down">
<i class="t-icon icon-arrows-h"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-arrows-v" flow="down">
<i class="t-icon icon-arrows-v"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-recycle" flow="down">
<i class="t-icon icon-recycle"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-renew" flow="down">
<i class="t-icon icon-renew"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-sync" flow="down">
<i class="t-icon icon-sync"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-attachment" flow="down">
<i class="t-icon icon-attachment"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-bookmark" flow="down">
<i class="t-icon icon-bookmark"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-bookmark-o" flow="down">
<i class="t-icon icon-bookmark-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-cadet-down" flow="down">
<i class="t-icon icon-cadet-down"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-cadet-down-circle" flow="down">
<i class="t-icon icon-cadet-down-circle"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-cadet-down-circle-o" flow="down">
<i class="t-icon icon-cadet-down-circle-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-cadet-down-small" flow="down">
<i class="t-icon icon-cadet-down-small"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-cadet-down-square" flow="down">
<i class="t-icon icon-cadet-down-square"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-cadet-down-square-o" flow="down">
<i class="t-icon icon-cadet-down-square-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-cadet-up" flow="down">
<i class="t-icon icon-cadet-up"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-cadet-up-circle" flow="down">
<i class="t-icon icon-cadet-up-circle"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-cadet-up-circle-o" flow="down">
<i class="t-icon icon-cadet-up-circle-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-cadet-up-small" flow="down">
<i class="t-icon icon-cadet-up-small"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-cadet-up-square" flow="down">
<i class="t-icon icon-cadet-up-square"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-cadet-up-square-o" flow="down">
<i class="t-icon icon-cadet-up-square-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-calendar" flow="down">
<i class="t-icon icon-calendar"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-call" flow="down">
<i class="t-icon icon-call"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-cart" flow="down">
<i class="t-icon icon-cart"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-cart-add" flow="down">
<i class="t-icon icon-cart-add"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-cart-o" flow="down">
<i class="t-icon icon-cart-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-cart-remove" flow="down">
<i class="t-icon icon-cart-remove"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-bubble" flow="down">
<i class="t-icon icon-bubble"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-bubble-o" flow="down">
<i class="t-icon icon-bubble-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-conversation" flow="down">
<i class="t-icon icon-conversation"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-conversation-o" flow="down">
<i class="t-icon icon-conversation-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-message" flow="down">
<i class="t-icon icon-message"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-message-o" flow="down">
<i class="t-icon icon-message-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-check" flow="down">
<i class="t-icon icon-check"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-check-circle" flow="down">
<i class="t-icon icon-check-circle"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-check-circle-o" flow="down">
<i class="t-icon icon-check-circle-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-check-small" flow="down">
<i class="t-icon icon-check-small"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-check-square" flow="down">
<i class="t-icon icon-check-square"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-check-square-o" flow="down">
<i class="t-icon icon-check-square-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-checkbox" flow="down">
<i class="t-icon icon-checkbox"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-close" flow="down">
<i class="t-icon icon-close"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-close-circle" flow="down">
<i class="t-icon icon-close-circle"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-close-circle-o" flow="down">
<i class="t-icon icon-close-circle-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-close-small" flow="down">
<i class="t-icon icon-close-small"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-close-square" flow="down">
<i class="t-icon icon-close-square"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-close-square-o" flow="down">
<i class="t-icon icon-close-square-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-comment" flow="down">
<i class="t-icon icon-comment"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-comment-o" flow="down">
<i class="t-icon icon-comment-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-delete" flow="down">
<i class="t-icon icon-delete"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-delete-o" flow="down">
<i class="t-icon icon-delete-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-direction" flow="down">
<i class="t-icon icon-direction"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-cloud-down" flow="down">
<i class="t-icon icon-cloud-down"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-cloud-down-o" flow="down">
<i class="t-icon icon-cloud-down-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-cloud-up" flow="down">
<i class="t-icon icon-cloud-up"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-cloud-up-o" flow="down">
<i class="t-icon icon-cloud-up-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-download" flow="down">
<i class="t-icon icon-download"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-upload" flow="down">
<i class="t-icon icon-upload"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-edit" flow="down">
<i class="t-icon icon-edit"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-edit-o" flow="down">
<i class="t-icon icon-edit-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-ellipsis-h" flow="down">
<i class="t-icon icon-ellipsis-h"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-ellipsis-v" flow="down">
<i class="t-icon icon-ellipsis-v"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-compress" flow="down">
<i class="t-icon icon-compress"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-expand" flow="down">
<i class="t-icon icon-expand"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-external" flow="down">
<i class="t-icon icon-external"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-eye" flow="down">
<i class="t-icon icon-eye"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-eye-o" flow="down">
<i class="t-icon icon-eye-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-file" flow="down">
<i class="t-icon icon-file"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-filter" flow="down">
<i class="t-icon icon-filter"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-flag" flow="down">
<i class="t-icon icon-flag"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-flag-o" flow="down">
<i class="t-icon icon-flag-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-forward" flow="down">
<i class="t-icon icon-forward"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-funnel" flow="down">
<i class="t-icon icon-funnel"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-gift" flow="down">
<i class="t-icon icon-gift"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-globe" flow="down">
<i class="t-icon icon-globe"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-grid" flow="down">
<i class="t-icon icon-grid"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-heart" flow="down">
<i class="t-icon icon-heart"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-heart-o" flow="down">
<i class="t-icon icon-heart-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-home" flow="down">
<i class="t-icon icon-home"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-home-o" flow="down">
<i class="t-icon icon-home-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-image" flow="down">
<i class="t-icon icon-image"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-image-library" flow="down">
<i class="t-icon icon-image-library"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-image-library-o" flow="down">
<i class="t-icon icon-image-library-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-image-o" flow="down">
<i class="t-icon icon-image-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-location" flow="down">
<i class="t-icon icon-location"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-locked" flow="down">
<i class="t-icon icon-locked"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-locked-o" flow="down">
<i class="t-icon icon-locked-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-unlocked" flow="down">
<i class="t-icon icon-unlocked"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-unlocked-o" flow="down">
<i class="t-icon icon-unlocked-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-login" flow="down">
<i class="t-icon icon-login"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-logout" flow="down">
<i class="t-icon icon-logout"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-mail" flow="down">
<i class="t-icon icon-mail"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-mail-o" flow="down">
<i class="t-icon icon-mail-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-mail-open" flow="down">
<i class="t-icon icon-mail-open"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-mail-open-o" flow="down">
<i class="t-icon icon-mail-open-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-map" flow="down">
<i class="t-icon icon-map"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-map-o" flow="down">
<i class="t-icon icon-map-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-menu" flow="down">
<i class="t-icon icon-menu"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-minus" flow="down">
<i class="t-icon icon-minus"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-minus-circle" flow="down">
<i class="t-icon icon-minus-circle"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-minus-circle-o" flow="down">
<i class="t-icon icon-minus-circle-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-minus-small" flow="down">
<i class="t-icon icon-minus-small"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-minus-square" flow="down">
<i class="t-icon icon-minus-square"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-minus-square-o" flow="down">
<i class="t-icon icon-minus-square-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-navigation-45" flow="down">
<i class="t-icon icon-navigation-45"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-navigation-90" flow="down">
<i class="t-icon icon-navigation-90"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-notification" flow="down">
<i class="t-icon icon-notification"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-notification-o" flow="down">
<i class="t-icon icon-notification-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-pinpoint" flow="down">
<i class="t-icon icon-pinpoint"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-plus" flow="down">
<i class="t-icon icon-plus"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-plus-circle" flow="down">
<i class="t-icon icon-plus-circle"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-plus-circle-o" flow="down">
<i class="t-icon icon-plus-circle-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-plus-small" flow="down">
<i class="t-icon icon-plus-small"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-plus-square" flow="down">
<i class="t-icon icon-plus-square"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-plus-square-o" flow="down">
<i class="t-icon icon-plus-square-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-print" flow="down">
<i class="t-icon icon-print"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-selected" flow="down">
<i class="t-icon icon-selected"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-unselected" flow="down">
<i class="t-icon icon-unselected"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-refresh" flow="down">
<i class="t-icon icon-refresh"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-reply" flow="down">
<i class="t-icon icon-reply"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-reply-all" flow="down">
<i class="t-icon icon-reply-all"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-save" flow="down">
<i class="t-icon icon-save"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-search" flow="down">
<i class="t-icon icon-search"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-send" flow="down">
<i class="t-icon icon-send"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-setting" flow="down">
<i class="t-icon icon-setting"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-share" flow="down">
<i class="t-icon icon-share"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-share-o" flow="down">
<i class="t-icon icon-share-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-star" flow="down">
<i class="t-icon icon-star"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-star-o" flow="down">
<i class="t-icon icon-star-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-star-rating-empty" flow="down">
<i class="t-icon icon-star-rating-empty"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-star-rating-filled" flow="down">
<i class="t-icon icon-star-rating-filled"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-star-rating-half" flow="down">
<i class="t-icon icon-star-rating-half"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-chart" flow="down">
<i class="t-icon icon-chart"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-trend-flat" flow="down">
<i class="t-icon icon-trend-flat"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-trend-down" flow="down">
<i class="t-icon icon-trend-down"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-trend-up" flow="down">
<i class="t-icon icon-trend-up"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-time" flow="down">
<i class="t-icon icon-time"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-time-o" flow="down">
<i class="t-icon icon-time-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-tool" flow="down">
<i class="t-icon icon-tool"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-trophy" flow="down">
<i class="t-icon icon-trophy"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-user-add" flow="down">
<i class="t-icon icon-user-add"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-user-add-o" flow="down">
<i class="t-icon icon-user-add-o"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-user-group" flow="down">
<i class="t-icon icon-user-group"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-user-single" flow="down">
<i class="t-icon icon-user-single"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-wifi" flow="down">
<i class="t-icon icon-wifi"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-zoom-in" flow="down">
<i class="t-icon icon-zoom-in"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-zoom-out" flow="down">
<i class="t-icon icon-zoom-out"></i>
</span>
</div>
</div>
</div>
<%= require('html-loader!./../components/footer-documentation.html') %>
</div>
</div>
<!-- End Right Description -->
</div>
</div>
</section>
<!-- End Getting Started -->
</main>
<!-- End Main Content -->
<!-- core nav bottom -->
<%= require('html-loader!./../components/footer.html') %>
<!-- core nav bottom -->
</div>
<!-- core nav bottom script -->
<%= require('html-loader!./../components/footer-script.html') %>
<!-- core nav bottom script -->
</body>
</html>