File: /home/emblazeone/public_html/lyyt/backend/web/quantum/demo7/cards.basic-navigation.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>QuantumPro | Cards - Navigation</title>
<!-- ================== GOOGLE FONTS ==================-->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500" rel="stylesheet">
<!-- ======================= GLOBAL VENDOR STYLES ========================-->
<link rel="stylesheet" href="../assets/css/vendor/bootstrap.css">
<link rel="stylesheet" href="../assets/vendor/metismenu/dist/metisMenu.css">
<link rel="stylesheet" href="../assets/vendor/switchery-npm/index.css">
<link rel="stylesheet" href="../assets/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css">
<!-- ======================= LINE AWESOME ICONS ===========================-->
<link rel="stylesheet" href="../assets/css/icons/line-awesome.min.css">
<!-- ======================= DRIP ICONS ===================================-->
<link rel="stylesheet" href="../assets/css/icons/dripicons.min.css">
<!-- ======================= MATERIAL DESIGN ICONIC FONTS =================-->
<link rel="stylesheet" href="../assets/css/icons/material-design-iconic-font.min.css">
<!-- ======================= GLOBAL COMMON STYLES ============================-->
<link rel="stylesheet" href="../assets/css/common/main.bundle.css">
<!-- ======================= LAYOUT TYPE ===========================-->
<link rel="stylesheet" href="../assets/css/layouts/vertical/core/main.css">
<!-- ======================= MENU TYPE ===========================================-->
<link rel="stylesheet" href="../assets/css/layouts/vertical/menu-type/content.css">
<!-- ======================= THEME COLOR STYLES ===========================-->
<link rel="stylesheet" href="../assets/css/layouts/vertical/themes/theme-i.css">
</head>
<body class="content-menu">
<!-- CONTENT WRAPPER -->
<div id="app">
<!-- TOP TOOLBAR WRAPPER -->
<nav class="top-toolbar navbar navbar-mobile navbar-tablet">
<ul class="navbar-nav nav-left">
<li class="nav-item">
<a href="javascript:void(0)" data-toggle-state="aside-left-open">
<i class="icon dripicons-align-left"></i>
</a>
</li>
</ul>
<ul class="navbar-nav nav-center site-logo">
<li>
<a href="index.html">
<div class="logo_mobile">
<svg id="logo_mobile" width="30" height="30" viewBox="0 0 54.03 56.55">
<defs>
<linearGradient id="logo_background_mobile_color">
<stop class="stop1" offset="0%"/>
<stop class="stop2" offset="50%"/>
<stop class="stop3" offset="100%"/>
</linearGradient>
</defs>
<path id="logo_path_mobile" class="cls-2" d="M90.32,0c14.2-.28,22.78,7.91,26.56,18.24a39.17,39.17,0,0,1,1,4.17l.13,1.5A15.25,15.25,0,0,1,118.1,29v.72l-.51,3.13a30.47,30.47,0,0,1-3.33,8,15.29,15.29,0,0,1-2.5,3.52l.06.07c.57.88,1.43,1.58,2,2.41,1.1,1.49,2.36,2.81,3.46,4.3.41.55,1,1,1.41,1.56.68.92,1.16,1.89.32,3.06-.08.12-.08.24-.19.33a2.39,2.39,0,0,1-2.62.07,4.09,4.09,0,0,1-.7-.91c-.63-.85-1.41-1.61-2-2.48-1-1.42-2.33-2.67-3.39-4.1a16.77,16.77,0,0,1-1.15-1.37c-.11,0-.06,0-.13.07-.41.14-.65.55-1,.78-.72.54-1.49,1.08-2.24,1.56A29.5,29.5,0,0,1,97.81,53c-.83.24-1.6.18-2.5.39a16.68,16.68,0,0,1-3.65.26H90.58L88,53.36A36.87,36.87,0,0,1,82.71,52a27.15,27.15,0,0,1-15.1-14.66c-.47-1.1-.7-2.17-1.09-3.39-1-3-1.45-8.86-.51-12.38a29,29,0,0,1,2.56-7.36c3.56-6,7.41-9.77,14.08-12.57a34.92,34.92,0,0,1,4.8-1.3Zm.13,4.1c-.45.27-1.66.11-2.24.26a32.65,32.65,0,0,0-4.74,1.37A23,23,0,0,0,71,18.7,24,24,0,0,0,71.13,35c2.78,6.66,7.2,11.06,14.21,13.42,1.16.39,2.52.59,3.84.91l1.47.07a7.08,7.08,0,0,0,2.43,0H94c.89-.21,1.9-.28,2.75-.46V48.8A7.6,7.6,0,0,1,95.19,47c-.78-1-1.83-1.92-2.62-3s-1.86-1.84-2.62-2.87c-2-2.7-4.45-5.1-6.66-7.62-.57-.66-1.14-1.32-1.66-2-.22-.29-.59-.51-.77-.85a2.26,2.26,0,0,1,.58-2.61,2.39,2.39,0,0,1,2.24-.2,4.7,4.7,0,0,1,1.22,1.3l.51.46c.5.68,1,1.32,1.6,2,2.07,2.37,4.38,4.62,6.27,7.17.94,1.26,2.19,2.3,3.14,3.58l1,1c.82,1.1,1.8,2,2.62,3.13.26.35.65.6.9,1A23.06,23.06,0,0,0,105,45c.37-.27,1-.51,1.15-1h-.06c-.18-.51-.73-.83-1-1.24-.74-1-1.64-1.88-2.37-2.87-1.8-2.44-3.89-4.6-5.7-7-.61-.82-1.44-1.52-2-2.34-.85-1.16-3.82-3.73-1.54-5.41a2.27,2.27,0,0,1,1.86-.26c.9.37,2.33,2.43,2.94,3.26s1.27,1.31,1.79,2c1.44,1.95,3.11,3.66,4.54,5.6.41.55,1,1,1.41,1.56.66.89,1.46,1.66,2.11,2.54.29.39.61,1.06,1.09,1.24.54-1,1.34-1.84,1.92-2.8a25.69,25.69,0,0,0,2.5-6.32c1.27-4.51.32-10.37-1.15-13.81A22.48,22.48,0,0,0,100.75,5.94a35.12,35.12,0,0,0-6.08-1.69A20.59,20.59,0,0,0,90.45,4.11Z" transform="translate(-65.5)" fill="url(#logo_background_mobile_color)"/>
</svg>
</div>
<h1 class="brand-text">QuantumPro</h1>
</a>
</li>
</ul>
<ul class="navbar-nav nav-right">
<li class="nav-item">
<a href="javascript:void(0)" data-toggle-state="mobile-topbar-toggle">
<i class="icon dripicons-dots-3 rotate-90"></i>
</a>
</li>
</ul>
</nav>
<nav class="top-toolbar navbar navbar-desktop flex-nowrap">
<ul class="navbar-nav nav-left">
<li class="nav-item">
<a href="javascript:void(0)" data-toggle-state="content-menu-close">
<i class="icon dripicons-align-left"></i>
</a>
</li>
<li class="nav-item nav-text dropdown dropdown-menu-md">
<a href="javascript:void(0)" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span>
Dropdown
</span>
<i class="la la-angle-down menu-arrow-down"></i>
</a>
<div class="dropdown-menu menu-icons dropdown-menu-left">
<div class="form-group form-filter">
<input type="text" placeholder="Filter location..." class="form-control filter-input" data-search-trigger="open">
<i data-q-action="clear-filter" class="icon dripicons-cross clear-filter"></i>
<ul class="list-reset filter-list" data-scroll="minimal-dark">
<li><a class="dropdown-item" href="#">New York, N.Y.</a></li>
<li><a class="dropdown-item" href="#">Los Angeles, Calif.</a></li>
<li> <a class="dropdown-item" href="#">Chicago, Ill.</a></li>
<li> <a class="dropdown-item" href="#">Houston, Tex.</a></li>
<li> <a class="dropdown-item" href="#"> Philadelphia, Pa.</a></li>
<li> <a class="dropdown-item" href="#"> Phoenix, Ariz. </a></li>
<li> <a class="dropdown-item" href="#"> San Antonio, Tex.</a></li>
<li> <a class="dropdown-item" href="#">San Diego, Calif. </a></li>
<li> <a class="dropdown-item" href="#"> Dallas, Tex.</a></li>
<li> <a class="dropdown-item" href="#">San Jose, Calif. </a></li>
<li> <a class="dropdown-item" href="#"> Austin, Tex.</a></li>
<li> <a class="dropdown-item" href="#"> Jacksonville, Fla.</a></li>
<li> <a class="dropdown-item" href="#">San Francisco, Calif. </a></li>
<li> <a class="dropdown-item" href="#">Indianapolis, Ind. </a></li>
<li> <a class="dropdown-item" href="#"> Columbus, Ohio</a></li>
<li> <a class="dropdown-item" href="#">Fort Worth, Tex. </a></li>
<li> <a class="dropdown-item" href="#"> Charlotte, N.C.</a></li>
<li> <a class="dropdown-item" href="#"> Detroit, Mich.</a></li>
<li> <a class="dropdown-item" href="#">El Paso, Tex. </a></li>
<li> <a class="dropdown-item" href="#">Seattle, Wash.</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item nav-text dropdown dropdown-menu-xl">
<a href="javascript:void(0)" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span>
Mega Menu
</span>
<i class="la la-angle-down menu-arrow-down"></i>
</a>
<div class="dropdown-menu dropdown-menu-left">
<div class="row">
<div class="col">
<h3 class="menu-header">Shop Top Categories</h3>
<ul class="list-items">
<li>
<a href="javascript:void(0);">T-Shirts</a>
</li>
<li>
<a href="javascript:void(0);">Tank Tops & Fitted Tees</a>
</li>
<li>
<a href="javascript:void(0);">Polos & Button-Ups</a>
</li>
<li>
<a href="javascript:void(0);">Women's Tops</a>
</li>
<li>
<a href="javascript:void(0);">Dresses & Skirts</a>
</li>
<li>
<a href="javascript:void(0);">Sweaters & Cardigans</a>
</li>
<li>
<a href="javascript:void(0);">Hoodies</a>
</li>
<li>
<a href="javascript:void(0);">Jackets & Outerwear</a>
</li>
<li>
<a href="javascript:void(0);">Activewear & Swimwear</a>
</li>
<li>
<a href="javascript:void(0);">Men's Jeans</a>
</li>
</ul>
</div>
<div class="col">
<h3 class="menu-header">Accessories</h3>
<ul class="list-items">
<li>
<a href="javascript:void(0);">Footwear</a>
</li>
<li>
<a href="javascript:void(0);">Keychains & Bag Accessories</a>
</li>
<li>
<a href="javascript:void(0);">Wallets</a>
</li>
<li>
<a href="javascript:void(0);">Hats & Hair</a>
</li>
<li>
<a href="javascript:void(0);">Ties & Cufflinks</a>
</li>
<li>
<a href="javascript:void(0);">Belts & Suspenders</a>
</li>
<li>
<a href="javascript:void(0);">Scarves</a>
</li>
<li>
<a href="javascript:void(0);">Pouches & Coin Purses</a>
</li>
<li>
<a href="javascript:void(0);">Sunglasses</a>
</li>
<li>
<a href="javascript:void(0);">Other Accessories</a>
</li>
</ul>
</div>
<div class="col">
<figure class="tint">
<div class="promo">
<h3>Grand Opening Sale!</h3>
<h4>Save up to 30% off.</h4>
<button class="btn btn-primary btn-rounded">Shop Now</button>
</div>
<img src="../assets/img/demos/ecom-header.jpg" alt="">
</figure>
</div>
</div>
</div>
</li>
</ul>
<ul class="site-logo">
<li>
<!-- START LOGO -->
<a href="index.html">
<div class="logo">
<svg id="logo" width="25" height="25" viewBox="0 0 54.03 56.55">
<defs>
<linearGradient id="logo_background_color">
<stop class="stop1" offset="30%"/>
<stop class="stop2" offset="80%"/>
<stop class="stop3" offset="100%"/>
</linearGradient>
</defs>
<path id="logo_path" class="cls-2" d="M90.32,0c14.2-.28,22.78,7.91,26.56,18.24a39.17,39.17,0,0,1,1,4.17l.13,1.5A15.25,15.25,0,0,1,118.1,29v.72l-.51,3.13a30.47,30.47,0,0,1-3.33,8,15.29,15.29,0,0,1-2.5,3.52l.06.07c.57.88,1.43,1.58,2,2.41,1.1,1.49,2.36,2.81,3.46,4.3.41.55,1,1,1.41,1.56.68.92,1.16,1.89.32,3.06-.08.12-.08.24-.19.33a2.39,2.39,0,0,1-2.62.07,4.09,4.09,0,0,1-.7-.91c-.63-.85-1.41-1.61-2-2.48-1-1.42-2.33-2.67-3.39-4.1a16.77,16.77,0,0,1-1.15-1.37c-.11,0-.06,0-.13.07-.41.14-.65.55-1,.78-.72.54-1.49,1.08-2.24,1.56A29.5,29.5,0,0,1,97.81,53c-.83.24-1.6.18-2.5.39a16.68,16.68,0,0,1-3.65.26H90.58L88,53.36A36.87,36.87,0,0,1,82.71,52a27.15,27.15,0,0,1-15.1-14.66c-.47-1.1-.7-2.17-1.09-3.39-1-3-1.45-8.86-.51-12.38a29,29,0,0,1,2.56-7.36c3.56-6,7.41-9.77,14.08-12.57a34.92,34.92,0,0,1,4.8-1.3Zm.13,4.1c-.45.27-1.66.11-2.24.26a32.65,32.65,0,0,0-4.74,1.37A23,23,0,0,0,71,18.7,24,24,0,0,0,71.13,35c2.78,6.66,7.2,11.06,14.21,13.42,1.16.39,2.52.59,3.84.91l1.47.07a7.08,7.08,0,0,0,2.43,0H94c.89-.21,1.9-.28,2.75-.46V48.8A7.6,7.6,0,0,1,95.19,47c-.78-1-1.83-1.92-2.62-3s-1.86-1.84-2.62-2.87c-2-2.7-4.45-5.1-6.66-7.62-.57-.66-1.14-1.32-1.66-2-.22-.29-.59-.51-.77-.85a2.26,2.26,0,0,1,.58-2.61,2.39,2.39,0,0,1,2.24-.2,4.7,4.7,0,0,1,1.22,1.3l.51.46c.5.68,1,1.32,1.6,2,2.07,2.37,4.38,4.62,6.27,7.17.94,1.26,2.19,2.3,3.14,3.58l1,1c.82,1.1,1.8,2,2.62,3.13.26.35.65.6.9,1A23.06,23.06,0,0,0,105,45c.37-.27,1-.51,1.15-1h-.06c-.18-.51-.73-.83-1-1.24-.74-1-1.64-1.88-2.37-2.87-1.8-2.44-3.89-4.6-5.7-7-.61-.82-1.44-1.52-2-2.34-.85-1.16-3.82-3.73-1.54-5.41a2.27,2.27,0,0,1,1.86-.26c.9.37,2.33,2.43,2.94,3.26s1.27,1.31,1.79,2c1.44,1.95,3.11,3.66,4.54,5.6.41.55,1,1,1.41,1.56.66.89,1.46,1.66,2.11,2.54.29.39.61,1.06,1.09,1.24.54-1,1.34-1.84,1.92-2.8a25.69,25.69,0,0,0,2.5-6.32c1.27-4.51.32-10.37-1.15-13.81A22.48,22.48,0,0,0,100.75,5.94a35.12,35.12,0,0,0-6.08-1.69A20.59,20.59,0,0,0,90.45,4.11Z" transform="translate(-65.5)" fill="url(#logo_background_color)"/>
</svg>
</div>
<h1 class="brand-text">QuantumPro</h1>
</a>
<!-- END LOGO -->
</li>
</ul>
<ul class="navbar-nav nav-right">
<li class="nav-item">
<a href="javascript:void(0)" class="open-search-button" data-q-action="open-site-search">
<i class="icon dripicons-search"></i>
</a>
</li>
<li class="nav-item dropdown dropdown-menu-lg">
<a href="javascript:void(0)" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="icon dripicons-view-apps"></i>
</a>
<div class="dropdown-menu dropdown-menu-right p-0">
<div class="dropdown-menu-grid">
<div class="menu-grid-row">
<div><a class="dropdown-item border-bottom border-right" href="apps.mail.html"><i class="icon dripicons-mail"></i><span>Mail</span></a></div>
<div><a class="dropdown-item border-bottom" href="apps.messages.html"><i class="icon dripicons-message"></i><span>Messages</span></a></div>
</div>
<div class="menu-grid-row">
<div><a class="dropdown-item border-right" href="apps.contacts.html"><i class="icon dripicons-archive"></i><span>Contacts</span></a></div>
<div> <a class="dropdown-item" href="apps.calendar.html"><i class="icon dripicons-calendar"></i><span>Calendar</span></a></div>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown dropdown-notifications dropdown-menu-lg">
<a href="javascript:void(0)" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="icon dripicons-bell"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<div class="card card-notification">
<div class="card-header">
<h5 class="card-title">Notifications</h5>
<ul class="actions top-right">
<li>
<a href="javascript:void(0);" data-q-action="open-notifi-config">
<i class="icon dripicons-gear"></i>
</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="card-container-wrapper">
<div class="card-container">
<div class="timeline timeline-border">
<div class="timeline-list">
<div class="timeline-info">
<div>Prep for bi-weekly meeting with <a href="javascript:void(0)"><strong>Steven Weinberg</strong></a> </div>
<small class="text-muted">07/05/18, 2:00 PM</small>
</div>
</div>
<div class="timeline-list timeline-border timeline-primary">
<div class="timeline-info">
<div>Skype call with development team</div>
<small class="text-muted">07/07/18, 1:00 PM</small>
</div>
</div>
<div class="timeline-list timeline-border timeline-accent">
<div class="timeline-info">
<div>Programming control system</div>
<small class="text-muted">07/09/18, 10:00 AM - 6:00 PM</small>
</div>
</div>
<div class="timeline-list timeline-border timeline-success">
<div class="timeline-info">
<div>Lunch with Peter Higgs</div>
<small class="text-muted">07/10/18, 12:00 PM</small>
</div>
</div>
<div class="timeline-list timeline-border timeline-warning">
<div class="timeline-info">
<div><a href="#"><strong>Approve Request</strong></a> for new training material by</div>
<small class="text-muted">07/11/18, 9:00 AM</small>
</div>
</div>
<div class="timeline-list timeline-border timeline-info">
<div class="timeline-info">
<div><a href="#"><strong>RSVP</strong></a> for this year's hackathon.</div>
<small class="text-muted">07/11/18, 1:30 PM</small>
</div>
</div>
</div>
</div>
<div class="card-container">
<h6 class="p-0 m-0">
Show notifications from:
</h6>
<div class="row m-b-20 m-t-30">
<div class="col-10"><span class="title"><i class="icon dripicons-calendar"></i>Calendar</span></div>
<div class="col-2"><input type="checkbox" class="js-switch" checked /></div>
</div>
<div class="row m-b-20">
<div class="col-10"><span class="title"><i class="icon dripicons-mail"></i>Email</span></div>
<div class="col-2"><input type="checkbox" class="js-switch" checked/></div>
</div>
<div class="row m-b-20">
<div class="col-10"><span class="title"><i class="icon dripicons-message"></i>Messages</span></div>
<div class="col-2"><input type="checkbox" class="js-switch" /></div>
</div>
<div class="row m-b-20">
<div class="col-10"><span class="title"><i class="icon dripicons-stack"></i>Projects</span></div>
<div class="col-2"><input type="checkbox" class="js-switch" checked/></div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link nav-pill user-avatar" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<img src="../assets/img/avatars/1.jpg" class="w-35 rounded-circle" alt="Albert Einstein">
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-accout">
<div class="dropdown-header pb-3">
<div class="media d-user">
<img class="align-self-center mr-3 w-40 rounded-circle" src="../assets/img/avatars/1.jpg" alt="Albert Einstein">
<div class="media-body">
<h5 class="mt-0 mb-0">Albert Einstein</h5>
<span>support@authenticgoods.co</span>
</div>
</div>
</div>
<a class="dropdown-item" href="apps.messages.html"><i class="icon dripicons-mail"></i> Message <span class="badge badge-accent rounded-circle w-15 h-15 p-0 font-size-10">4</span></a>
<a class="dropdown-item" href="pages.profile.html"><i class="icon dripicons-user"></i> Profile</a>
<a class="dropdown-item" href="pages.my-account.html"><i class="icon dripicons-gear"></i> Account Settings </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><i class="icon dripicons-lock"></i> Lock Account</a>
<a class="dropdown-item" href="auth.sign-in.html"><i class="icon dripicons-lock-open"></i> Sign Out</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" data-toggle-state="aside-right-open">
<i class="icon dripicons-align-right"></i>
</a>
</li>
</ul>
<form role="search" action="pages.search.html" class="navbar-form">
<div class="form-group">
<input type="text" placeholder="Search and press enter..." class="form-control navbar-search" autocomplete="off">
<i data-q-action="close-site-search" class="icon dripicons-cross close-search"></i>
</div>
<button type="submit" class="d-none">Submit</button>
</form>
</nav>
<!-- END TOP TOOLBAR WRAPPER -->
<div class="content-wrapper">
<!-- MENU SIDEBAR WRAPPER -->
<aside class="sidebar sidebar-left">
<div class="sidebar-content">
<nav class="main-menu">
<ul class="nav metismenu">
<li class="sidebar-header"><span>NAVIGATION</span></li>
<li class="nav-dropdown">
<a class="has-arrow" href="#" aria-expanded="false"><i class="icon dripicons-meter"></i><span>Dashboard</span></a>
<ul class="collapse nav-sub" aria-expanded="true">
<li><a href="index.html"><span>Default</span></a></li>
<li><a href="dashboard.analytics.html"><span>Analytics</span></a></li>
<li><a href="dashboard.financials.html"><span>Financials</span></a></li>
<li><a href="dashboard.ecommerce.html"><span>Ecommerce</span></a></li>
</ul>
</li>
<li class="nav-dropdown">
<a class="has-arrow" href="#" aria-expanded="false"><i class="icon dripicons-article"></i><span>Page Layouts</span></a>
<ul class="collapse nav-sub" aria-expanded="false">
<li><a href="layout.blank.html"><span>Blank Page</span></a></li>
<li><a href="layout.1-column-wide.html"><span>1 Column Wide</span></a></li>
<li><a href="layout.1-column-boxed.html"><span>1 Column Boxed</span></a></li>
<li><a href="layout.tabbed-header.html"><span>Tabbed Header</span></a></li>
<li><a href="layout.left-sidebar.html"><span>Left Sidebar</span></a></li>
<li><a href="layout.right-sidebar.html"><span>Right Sidebar</span></a></li>
<li><a href="layout.left-right-sidebars.html"><span>Left & Right Sidebars</span></a></li>
</ul>
</li>
<li class="nav-dropdown">
<a class="has-arrow" href="#" aria-expanded="false"><i class="icon dripicons-browser"></i><span>Custom Pages</span></a>
<ul class="collapse nav-sub" aria-expanded="false">
<li><a href="pages.profile.html"><span>Profile</span></a></li>
<li><a href="pages.help-center.html"><span>Help Center</span></a></li>
<li><a href="pages.search.html"><span>Search</span></a></li>
<li><a href="pages.pricing-tables.html"><span>Pricing Tables</span></a></li>
<li><a href="pages.my-account.html"><span>My Account</span></a></li>
<li><a href="pages.invoice-template.html"><span>Invoice Template</span></a></li>
</ul>
</li>
<li class="nav-dropdown active">
<a class="has-arrow" href="#" aria-expanded="false"><i class="icon dripicons-view-thumb"></i><span>Cards</span></a>
<ul class="collapse in nav-sub">
<li><a href="cards.basic-content-types.html"><span>Content Types</span></a></li>
<li><a href="cards.basic-layouts.html"><span>Layouts</span></a></li>
<li class="active"><a href="cards.basic-navigation.html"><span>Navigation</span></a></li>
<li><a href="cards.basic-actions.html"><span>Actions</span></a></li>
</ul>
</li>
<li class="sidebar-header"><span>UI ELEMENTS</span></li>
<li class="nav-dropdown">
<a class="has-arrow" href="#" aria-expanded="false"><i class="icon dripicons-jewel"></i><span>UI Kit</span></a>
<ul class="collapse nav-sub" aria-expanded="false">
<li><a href="ui.alerts.html"><span>Alerts</span></a></li>
<li><a href="ui.badges.html"><span>Badges</span></a></li>
<li><a href="ui.buttons.html"><span>Buttons</span></a></li>
<li><a href="ui.colors.html"><span>Colors</span></a></li>
<li><a href="ui.icons.html"><span>Icons</span></a></li>
<li><a href="ui.list-groups.html"><span>List Groups</span></a></li>
<li><a href="ui.progress-bars.html"><span>Progress Bars</span></a></li>
<li><a href="ui.preloaders.html"><span>Preloaders</span></a></li>
<li><a href="ui.typography.html"><span>Typography</span></a></li>
</ul>
</li>
<li class="nav-dropdown">
<a class="has-arrow" href="#" aria-expanded="false"><i class="icon dripicons-stack"></i><span>Components</span></a>
<ul class="collapse nav-sub" aria-expanded="false">
<li><a href="components.carousels.html"><span>Carousels</span></a></li>
<li><a href="components.tabs-pills.html"><span>Tabs & Pills</span></a></li>
<li><a href="components.dropdowns.html"><span>Dropdowns</span></a></li>
<li><a href="components.modals.html"><span>Modals</span></a></li>
<li><a href="components.sweetalert2.html"><span>SweetAlert2</span></a></li>
<li><a href="components.scrollable.html"><span>Scrollable</span></a></li>
<li><a href="components.tooltips-popovers.html"><span>Tooltips & Popovers</span></a></li>
<li><a href="components.ui-blocking.html"><span>UI Blocking</span></a></li>
</ul>
</li>
<li class="nav-dropdown">
<a class="has-arrow" href="#" aria-expanded="false"><i class="icon dripicons-graph-bar"></i><span>Charts</span></a>
<ul class="collapse nav-sub" aria-expanded="false">
<li><a href="charts.chartjs.html"><span>Chart.js</span></a></li>
<li><a href="charts.c3charts.html"><span>C3 Charts</span></a></li>
<li><a href="charts.morrisjs.html"><span>Morris.js</span></a></li>
<li><a href="charts.chartist.html"><span>Chartist</span></a></li>
</ul>
</li>
<li class="nav-dropdown">
<a class="has-arrow" href="#" aria-expanded="false"><i class="icon dripicons-to-do"></i><span>Forms</span></a>
<ul class="collapse nav-sub">
<li class="nav-dropdown">
<a class="has-arrow" href="#">Basic Elements</a>
<ul class="collapse nav-sub">
<li><a href="forms.basic-inputs.html"><span>Basic Inputs</span></a></li>
<li><a href="forms.checkbox-radio.html"><span>Checkbox & Radio</span></a></li>
<li><a href="forms.input-groups.html"><span>Input Groups</span></a></li>
</ul>
</li>
<li class="nav-dropdown">
<a class="has-arrow" href="#">Form Layouts</a>
<ul class="collapse nav-sub">
<li><a href="forms.form-groups.html"><span>Form Groups</span></a></li>
<li><a href="forms.form-grid.html"><span>Form Grid</span></a></li>
</ul>
</li>
<li class="nav-dropdown">
<a class="has-arrow" href="#">Advanced Elements</a>
<ul class="collapse nav-sub">
<li><a href="forms.input-mask.html"><span>Input Mask</span></a></li>
<li><a href="forms.select2.html"><span>Select2</span></a></li>
<li><a href="forms.range-sliders.html"><span>Range Sliders</span></a></li>
<li><a href="forms.switches.html"><span>Switches</span></a></li>
<li><a href="forms.date-pickers.html"><span>Date Pickers</span></a></li>
<li><a href="forms.dropzone.html"><span>Dropzone</span></a></li> <li><a href="forms.wysiwyg.html"><span>WYSIWYG</span></a></li>
</ul>
</li>
<li class="nav-dropdown">
<a class="has-arrow" href="#">Form Validation</a>
<ul class="collapse nav-sub">
<li><a href="forms.basic-validation.html"><span>Basic Validation</span></a></li>
<li><a href="forms.jquery-validation.html"><span>jQuery Validation</span></a></li>
</ul>
</li>
<li class="nav-dropdown">
<a class="has-arrow" href="#">Form Wizards</a>
<ul class="collapse nav-sub">
<li><a href="forms.vertical-wizard.html"><span>Vertical Wizard</span></a></li>
<li><a href="forms.horizontal-wizard.html"><span>Horizontal Wizard</span></a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-dropdown">
<a class="has-arrow" href="#" aria-expanded="false"><i class="icon dripicons-blog"></i><span>Tables</span></a>
<ul class="collapse nav-sub" aria-expanded="false">
<li><a href="tables.basic.html"><span>Basic Tables</span></a></li>
<li><a href="tables.data.html"><span>Data Tables</span></a></li>
</ul>
</li>
<li class="sidebar-header"><span>APP VIEWS</span></li>
<li><a href="apps.mail.html"><i class="icon dripicons-mail"></i><span>Mail</span></a></li>
<li><a href="apps.messages.html"><i class="icon dripicons-message"></i><span>Messages</span></a></li>
<li><a href="apps.contacts.html"><i class="icon dripicons-archive"></i><span>Contacts</span></a></li>
<li><a href="apps.calendar.html"><i class="icon dripicons-calendar"></i><span>Calendar</span></a></li>
<li class="sidebar-header"><span>EXTRAS</span></li>
<li class="nav-dropdown">
<a class="has-arrow" href="#" aria-expanded="false"><i class="icon dripicons-lock"></i><span>Authentication</span></a>
<ul class="collapse nav-sub" aria-expanded="false">
<li><a href="auth.sign-in.html"><span>Sign In</span></a></li>
<li><a href="auth.register.html"><span>Register</span></a></li>
<li><a href="auth.forgot-password.html"><span>Forgot Password</span></a></li>
</ul>
</li>
<li class="nav-dropdown">
<a class="has-arrow" href="#" aria-expanded="false">
<i class="icon dripicons-folder"></i><span>Menu Levels</span></a>
<ul class="collapse nav-sub" aria-expanded="false">
<li>
<a href="javascript:;">
Level 1.1
</a>
</li>
<li>
<a href="javascript:;">
Level 1.2
</a>
</li>
<li class="nav-dropdown">
<a class="has-arrow" href="#" aria-expanded="false">
Level 1.3
</a>
<ul class="collapse nav-sub" aria-expanded="false">
<li>
<a href="javascript:;">
Level 2.1
</a>
</li>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="helper-classes.html"><i class="icon dripicons-help"></i><span>Helper Classes</span></a></li>
</ul>
</div>
</aside>
<!-- END MENU SIDEBAR WRAPPER -->
<div class="content container-fluid">
<header class="page-header">
<div class="d-flex align-items-center">
<div class="mr-auto">
<h1 class="separator">Card Navigation</h1>
<nav class="breadcrumb-wrapper" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html"><i class="icon dripicons-home"></i></a></li>
<li class="breadcrumb-item"><a href="javascript:void(0)">Cards</a></li>
<li class="breadcrumb-item active" aria-current="page">Card Navigation</li>
</ol>
</nav>
</div>
<ul class="actions top-right">
<li class="dropdown">
<a href="javascript:void(0)" class="btn btn-fab" data-toggle="dropdown" aria-expanded="false">
<i class="la la-ellipsis-h"></i>
</a>
<div class="dropdown-menu dropdown-icon-menu dropdown-menu-right">
<div class="dropdown-header">
Quick Actions
</div>
<a href="#" class="dropdown-item">
<i class="icon dripicons-clockwise"></i> Refresh
</a>
<a href="#" class="dropdown-item">
<i class="icon dripicons-gear"></i> Manage Widgets
</a>
<a href="#" class="dropdown-item">
<i class="icon dripicons-cloud-download"></i> Export
</a>
<a href="#" class="dropdown-item">
<i class="icon dripicons-help"></i> Support
</a>
</div>
</li>
</ul>
</div>
</header>
<section class="page-content container-fluid">
<div class="row">
<div class="col-md-6">
<div class="card card-tabs">
<div class="card-header">
<div class="card-title">
Card Tabs
</div>
<ul class="nav nav-tabs primary-tabs justify-content-end">
<li class="nav-item" role="presentation">
<a href="#tab-1" class="nav-link active show" data-toggle="tab" aria-expanded="true">Home</a>
</li>
<li class="nav-item" role="presentation">
<a href="#tab-2" class="nav-link" data-toggle="tab" aria-expanded="true">Profile</a>
</li>
<li class="nav-item" role="presentation">
<a href="#tab-3" class="nav-link" data-toggle="tab" aria-expanded="true">Contact</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fadeIn active" id="tab-1">
<p>Helvetica letterpress bicycle rights banh mi keffiyeh af. Food truck shabby chic actually mixtape twee. Pabst blog messenger bag, four loko vape post-ironic paleo freegan. Twee raw denim brooklyn cornhole, polaroid cardigan 8-bit cred pinterest
biodiesel. Seitan woke vinyl, hoodie fingerstache irony bicycle rights vape sustainable DIY skateboard. Quinoa tumeric venmo, af lyft fashion axe slow-carb.</p>
</div>
<div class="tab-pane fadeIn" id="tab-2">
<p>Schlitz enamel pin neutra succulents bespoke, dreamcatcher tattooed flannel man bun la croix YOLO readymade chicharrones poke. Selfies ramps brooklyn microdosing church-key sustainable, keytar next level chicharrones PBR&B. Mlkshk schlitz
whatever, twee wolf godard banh mi try-hard meh bitters irony. Cronut williamsburg shabby chic, typewriter vape skateboard post-ironic lo-fi YOLO shoreditch iceland.</p>
</div>
<div class="tab-pane fadeIn" id="tab-3">
<p>Hell of pork belly leggings kickstarter, taiyaki crucifix tacos flannel chia narwhal. Cornhole air plant la croix edison bulb health goth fingerstache beard cliche taxidermy man bun shaman cred typewriter squid. Fingerstache bicycle rights
tumblr, schlitz forage bushwick everyday carry mustache brooklyn. Tattooed chicharrones tofu normcore locavore roof party +1 vegan air plant keffiyeh kickstarter pitchfork ugh knausgaard. Taiyaki prism poutine microdosing. Hoodie bicycle rights
unicorn, single-origin coffee organic kitsch farm-to-table yuccie taxidermy direct trade tousled.</p>
</div>
</div>
</div>
</div>
<div class="card card-tabs card-primary">
<div class="card-header">
<ul class="nav nav-tabs primary-tabs">
<li class="nav-item" role="presentation">
<a href="#tab-10" class="nav-link active show" data-toggle="tab" aria-expanded="true">Home</a>
</li>
<li class="nav-item" role="presentation">
<a href="#tab-11" class="nav-link" data-toggle="tab" aria-expanded="true">Profile</a>
</li>
<li class="nav-item" role="presentation">
<a href="#tab-12" class="nav-link" data-toggle="tab" aria-expanded="true">Contact</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fadeIn active" id="tab-10">
<p>Helvetica letterpress bicycle rights banh mi keffiyeh af. Food truck shabby chic actually mixtape twee. Pabst blog messenger bag, four loko vape post-ironic paleo freegan. Twee raw denim brooklyn cornhole, polaroid cardigan 8-bit cred pinterest
biodiesel. Seitan woke vinyl, hoodie fingerstache irony bicycle rights vape sustainable DIY skateboard. Quinoa tumeric venmo, af lyft fashion axe slow-carb.</p>
</div>
<div class="tab-pane fadeIn" id="tab-11">
<p>Schlitz enamel pin neutra succulents bespoke, dreamcatcher tattooed flannel man bun la croix YOLO readymade chicharrones poke. Selfies ramps brooklyn microdosing church-key sustainable, keytar next level chicharrones PBR&B. Mlkshk schlitz
whatever, twee wolf godard banh mi try-hard meh bitters irony. Cronut williamsburg shabby chic, typewriter vape skateboard post-ironic lo-fi YOLO shoreditch iceland.</p>
</div>
<div class="tab-pane fadeIn" id="tab-12">
<p>Hell of pork belly leggings kickstarter, taiyaki crucifix tacos flannel chia narwhal. Cornhole air plant la croix edison bulb health goth fingerstache beard cliche taxidermy man bun shaman cred typewriter squid. Fingerstache bicycle rights
tumblr, schlitz forage bushwick everyday carry mustache brooklyn. Tattooed chicharrones tofu normcore locavore roof party +1 vegan air plant keffiyeh kickstarter pitchfork ugh knausgaard. Taiyaki prism poutine microdosing. Hoodie bicycle rights
unicorn, single-origin coffee organic kitsch farm-to-table yuccie taxidermy direct trade tousled.</p>
</div>
</div>
</div>
</div>
<div class="card card-tabs card-accent">
<div class="card-header">
<ul class="nav nav-tabs accent-tabs justify-content-end">
<li class="nav-item" role="presentation">
<a href="#tab-13" class="nav-link active show" data-toggle="tab" aria-expanded="true">Home</a>
</li>
<li class="nav-item" role="presentation">
<a href="#tab-14" class="nav-link" data-toggle="tab" aria-expanded="true">Profile</a>
</li>
<li class="nav-item" role="presentation">
<a href="#tab-15" class="nav-link" data-toggle="tab" aria-expanded="true">Contact</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fadeIn active" id="tab-13">
<p>Helvetica letterpress bicycle rights banh mi keffiyeh af. Food truck shabby chic actually mixtape twee. Pabst blog messenger bag, four loko vape post-ironic paleo freegan. Twee raw denim brooklyn cornhole, polaroid cardigan 8-bit cred pinterest
biodiesel. Seitan woke vinyl, hoodie fingerstache irony bicycle rights vape sustainable DIY skateboard. Quinoa tumeric venmo, af lyft fashion axe slow-carb.</p>
</div>
<div class="tab-pane fadeIn" id="tab-14">
<p>Schlitz enamel pin neutra succulents bespoke, dreamcatcher tattooed flannel man bun la croix YOLO readymade chicharrones poke. Selfies ramps brooklyn microdosing church-key sustainable, keytar next level chicharrones PBR&B. Mlkshk schlitz
whatever, twee wolf godard banh mi try-hard meh bitters irony. Cronut williamsburg shabby chic, typewriter vape skateboard post-ironic lo-fi YOLO shoreditch iceland.</p>
</div>
<div class="tab-pane fadeIn" id="tab-15">
<p>Hell of pork belly leggings kickstarter, taiyaki crucifix tacos flannel chia narwhal. Cornhole air plant la croix edison bulb health goth fingerstache beard cliche taxidermy man bun shaman cred typewriter squid. Fingerstache bicycle rights
tumblr, schlitz forage bushwick everyday carry mustache brooklyn. Tattooed chicharrones tofu normcore locavore roof party +1 vegan air plant keffiyeh kickstarter pitchfork ugh knausgaard. Taiyaki prism poutine microdosing. Hoodie bicycle rights
unicorn, single-origin coffee organic kitsch farm-to-table yuccie taxidermy direct trade tousled.</p>
</div>
</div>
</div>
</div>
<div class="card card-tabs">
<div class="card-header">
<ul class="nav nav-tabs primary-tabs justify-content-center">
<li class="nav-item" role="presentation">
<a href="#tab-4" class="nav-link active show" data-toggle="tab" aria-expanded="true">Home</a>
</li>
<li class="nav-item" role="presentation">
<a href="#tab-5" class="nav-link" data-toggle="tab" aria-expanded="true">Profile</a>
</li>
<li class="nav-item" role="presentation">
<a href="#tab-6" class="nav-link" data-toggle="tab" aria-expanded="true">Contact</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fadeIn active" id="tab-4">
<p>Helvetica letterpress bicycle rights banh mi keffiyeh af. Food truck shabby chic actually mixtape twee. Pabst blog messenger bag, four loko vape post-ironic paleo freegan. Twee raw denim brooklyn cornhole, polaroid cardigan 8-bit cred pinterest
biodiesel. Seitan woke vinyl, hoodie fingerstache irony bicycle rights vape sustainable DIY skateboard. Quinoa tumeric venmo, af lyft fashion axe slow-carb.</p>
</div>
<div class="tab-pane fadeIn" id="tab-5">
<p>Schlitz enamel pin neutra succulents bespoke, dreamcatcher tattooed flannel man bun la croix YOLO readymade chicharrones poke. Selfies ramps brooklyn microdosing church-key sustainable, keytar next level chicharrones PBR&B. Mlkshk schlitz
whatever, twee wolf godard banh mi try-hard meh bitters irony. Cronut williamsburg shabby chic, typewriter vape skateboard post-ironic lo-fi YOLO shoreditch iceland.</p>
</div>
<div class="tab-pane fadeIn" id="tab-6">
<p>Hell of pork belly leggings kickstarter, taiyaki crucifix tacos flannel chia narwhal. Cornhole air plant la croix edison bulb health goth fingerstache beard cliche taxidermy man bun shaman cred typewriter squid. Fingerstache bicycle rights
tumblr, schlitz forage bushwick everyday carry mustache brooklyn. Tattooed chicharrones tofu normcore locavore roof party +1 vegan air plant keffiyeh kickstarter pitchfork ugh knausgaard. Taiyaki prism poutine microdosing. Hoodie bicycle rights
unicorn, single-origin coffee organic kitsch farm-to-table yuccie taxidermy direct trade tousled.</p>
</div>
</div>
</div>
</div>
<div class="card card-tabs">
<div class="card-header">
<ul class="nav nav-tabs primary-tabs">
<li class="nav-item" role="presentation">
<a href="#tab-7" class="nav-link active show" data-toggle="tab" aria-expanded="true">Home</a>
</li>
<li class="nav-item" role="presentation">
<a href="#tab-8" class="nav-link" data-toggle="tab" aria-expanded="true">Profile</a>
</li>
<li class="nav-item" role="presentation">
<a href="#tab-9" class="nav-link" data-toggle="tab" aria-expanded="true">Contact</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fadeIn active" id="tab-7">
<p>Helvetica letterpress bicycle rights banh mi keffiyeh af. Food truck shabby chic actually mixtape twee. Pabst blog messenger bag, four loko vape post-ironic paleo freegan. Twee raw denim brooklyn cornhole, polaroid cardigan 8-bit cred pinterest
biodiesel. Seitan woke vinyl, hoodie fingerstache irony bicycle rights vape sustainable DIY skateboard. Quinoa tumeric venmo, af lyft fashion axe slow-carb.</p>
</div>
<div class="tab-pane fadeIn" id="tab-8">
<p>Schlitz enamel pin neutra succulents bespoke, dreamcatcher tattooed flannel man bun la croix YOLO readymade chicharrones poke. Selfies ramps brooklyn microdosing church-key sustainable, keytar next level chicharrones PBR&B. Mlkshk schlitz
whatever, twee wolf godard banh mi try-hard meh bitters irony. Cronut williamsburg shabby chic, typewriter vape skateboard post-ironic lo-fi YOLO shoreditch iceland.</p>
</div>
<div class="tab-pane fadeIn" id="tab-9">
<p>Hell of pork belly leggings kickstarter, taiyaki crucifix tacos flannel chia narwhal. Cornhole air plant la croix edison bulb health goth fingerstache beard cliche taxidermy man bun shaman cred typewriter squid. Fingerstache bicycle rights
tumblr, schlitz forage bushwick everyday carry mustache brooklyn. Tattooed chicharrones tofu normcore locavore roof party +1 vegan air plant keffiyeh kickstarter pitchfork ugh knausgaard. Taiyaki prism poutine microdosing. Hoodie bicycle rights
unicorn, single-origin coffee organic kitsch farm-to-table yuccie taxidermy direct trade tousled.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card card-pills">
<div class="card-header">
<div class="card-title">
Card Pills
</div>
<ul class="nav nav-pills nav-pills-primary float-right" id="pills-demo-1" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-1-tab" data-toggle="pill" href="#pills-1" role="tab" aria-controls="pills-1" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-2-tab" data-toggle="pill" href="#pills-2" role="tab" aria-controls="pills-2" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-3-tab" data-toggle="pill" href="#pills-3" role="tab" aria-controls="pills-3" aria-selected="false">Contact</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content" id="pills-tabContent-1">
<div class="tab-pane fade show active" id="pills-1" role="tabpanel" aria-labelledby="pills-1">
<p>Helvetica letterpress bicycle rights banh mi keffiyeh af. Food truck shabby chic actually mixtape twee. Pabst blog messenger bag, four loko vape post-ironic paleo freegan. Twee raw denim brooklyn cornhole, polaroid cardigan 8-bit cred pinterest
biodiesel. Seitan woke vinyl, hoodie fingerstache irony bicycle rights vape sustainable DIY skateboard. Quinoa tumeric venmo, af lyft fashion axe slow-carb.</p>
</div>
<div class="tab-pane fade" id="pills-2" role="tabpanel" aria-labelledby="pills-2">
<p>Schlitz enamel pin neutra succulents bespoke, dreamcatcher tattooed flannel man bun la croix YOLO readymade chicharrones poke. Selfies ramps brooklyn microdosing church-key sustainable, keytar next level chicharrones PBR&B. Mlkshk schlitz
whatever, twee wolf godard banh mi try-hard meh bitters irony. Cronut williamsburg shabby chic, typewriter vape skateboard post-ironic lo-fi YOLO shoreditch iceland.</p>
</div>
<div class="tab-pane fade" id="pills-3" role="tabpanel" aria-labelledby="pills-3">
<p>Green juice bushwick bicycle rights woke adaptogen portland. Retro occupy bushwick listicle palo santo normcore vape yuccie synth truffaut lyft quinoa polaroid salvia. Photo booth authentic taiyaki blog, jean shorts paleo wolf woke ennui bicycle
rights cornhole actually man braid synth fixie. Jean shorts raw denim bitters, hell of lomo 90's godard small batch intelligentsia VHS slow-carb wayfarers pok pok.</p>
</div>
</div>
</div>
</div>
<div class="card card-pills card-primary">
<div class="card-header">
<ul class="nav nav-pills nav-pills-primary" id="pills-demo-4" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-10-tab" data-toggle="pill" href="#pills-10" role="tab" aria-controls="pills-10" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-11-tab" data-toggle="pill" href="#pills-11" role="tab" aria-controls="pills-11" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-12-tab" data-toggle="pill" href="#pills-12" role="tab" aria-controls="pills-12" aria-selected="false">Contact</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content" id="pills-tabContent-4">
<div class="tab-pane fade show active" id="pills-10" role="tabpanel" aria-labelledby="pills-10">
<p>Helvetica letterpress bicycle rights banh mi keffiyeh af. Food truck shabby chic actually mixtape twee. Pabst blog messenger bag, four loko vape post-ironic paleo freegan. Twee raw denim brooklyn cornhole, polaroid cardigan 8-bit cred pinterest
biodiesel. Seitan woke vinyl, hoodie fingerstache irony bicycle rights vape sustainable DIY skateboard. Quinoa tumeric venmo, af lyft fashion axe slow-carb.</p>
</div>
<div class="tab-pane fade" id="pills-11" role="tabpanel" aria-labelledby="pills-11">
<p>Schlitz enamel pin neutra succulents bespoke, dreamcatcher tattooed flannel man bun la croix YOLO readymade chicharrones poke. Selfies ramps brooklyn microdosing church-key sustainable, keytar next level chicharrones PBR&B. Mlkshk schlitz
whatever, twee wolf godard banh mi try-hard meh bitters irony. Cronut williamsburg shabby chic, typewriter vape skateboard post-ironic lo-fi YOLO shoreditch iceland.</p>
</div>
<div class="tab-pane fade" id="pills-12" role="tabpanel" aria-labelledby="pills-12">
<p>Green juice bushwick bicycle rights woke adaptogen portland. Retro occupy bushwick listicle palo santo normcore vape yuccie synth truffaut lyft quinoa polaroid salvia. Photo booth authentic taiyaki blog, jean shorts paleo wolf woke ennui bicycle
rights cornhole actually man braid synth fixie. Jean shorts raw denim bitters, hell of lomo 90's godard small batch intelligentsia VHS slow-carb wayfarers pok pok.</p>
</div>
</div>
</div>
</div>
<div class="card card-pills card-accent">
<div class="card-header">
<ul class="nav nav-pills nav-pills-accent float-right" id="pills-demo-5" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-13-tab" data-toggle="pill" href="#pills-13" role="tab" aria-controls="pills-13" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-14-tab" data-toggle="pill" href="#pills-14" role="tab" aria-controls="pills-14" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-15-tab" data-toggle="pill" href="#pills-15" role="tab" aria-controls="pills-15" aria-selected="false">Contact</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content" id="pills-tabContent-5">
<div class="tab-pane fade show active" id="pills-13" role="tabpanel" aria-labelledby="pills-13">
<p>Helvetica letterpress bicycle rights banh mi keffiyeh af. Food truck shabby chic actually mixtape twee. Pabst blog messenger bag, four loko vape post-ironic paleo freegan. Twee raw denim brooklyn cornhole, polaroid cardigan 8-bit cred pinterest
biodiesel. Seitan woke vinyl, hoodie fingerstache irony bicycle rights vape sustainable DIY skateboard. Quinoa tumeric venmo, af lyft fashion axe slow-carb.</p>
</div>
<div class="tab-pane fade" id="pills-14" role="tabpanel" aria-labelledby="pills-14">
<p>Schlitz enamel pin neutra succulents bespoke, dreamcatcher tattooed flannel man bun la croix YOLO readymade chicharrones poke. Selfies ramps brooklyn microdosing church-key sustainable, keytar next level chicharrones PBR&B. Mlkshk schlitz
whatever, twee wolf godard banh mi try-hard meh bitters irony. Cronut williamsburg shabby chic, typewriter vape skateboard post-ironic lo-fi YOLO shoreditch iceland.</p>
</div>
<div class="tab-pane fade" id="pills-15" role="tabpanel" aria-labelledby="pills-15">
<p>Green juice bushwick bicycle rights woke adaptogen portland. Retro occupy bushwick listicle palo santo normcore vape yuccie synth truffaut lyft quinoa polaroid salvia. Photo booth authentic taiyaki blog, jean sho rts paleo wolf woke ennui bicycle
rights cornhole actually man braid synth fixie. Jean shorts raw denim bitters, hell of lomo 90's godard small batch intelligentsia VHS slow-carb wayfarers pok pok.</p>
</div>
</div>
</div>
</div>
<div class="card card-pills">
<div class="card-header">
<ul class="nav nav-pills nav-pills-primary justify-content-center" id="pills-demo-2" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-4-tab" data-toggle="pill" href="#pills-4" role="tab" aria-controls="pills-4" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-5-tab" data-toggle="pill" href="#pills-5" role="tab" aria-controls="pills-5" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-6-tab" data-toggle="pill" href="#pills-6" role="tab" aria-controls="pills-6" aria-selected="false">Contact</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content" id="pills-tabContent-2">
<div class="tab-pane fade show active" id="pills-4" role="tabpanel" aria-labelledby="pills-4">
<p>Helvetica letterpress bicycle rights banh mi keffiyeh af. Food truck shabby chic actually mixtape twee. Pabst blog messenger bag, four loko vape post-ironic paleo freegan. Twee raw denim brooklyn cornhole, polaroid cardigan 8-bit cred pinterest
biodiesel. Seitan woke vinyl, hoodie fingerstache irony bicycle rights vape sustainable DIY skateboard. Quinoa tumeric venmo, af lyft fashion axe slow-carb.</p>
</div>
<div class="tab-pane fade" id="pills-5" role="tabpanel" aria-labelledby="pills-5">
<p>Schlitz enamel pin neutra succulents bespoke, dreamcatcher tattooed flannel man bun la croix YOLO readymade chicharrones poke. Selfies ramps brooklyn microdosing church-key sustainable, keytar next level chicharrones PBR&B. Mlkshk schlitz
whatever, twee wolf godard banh mi try-hard meh bitters irony. Cronut williamsburg shabby chic, typewriter vape skateboard post-ironic lo-fi YOLO shoreditch iceland.</p>
</div>
<div class="tab-pane fade" id="pills-6" role="tabpanel" aria-labelledby="pills-6">
<p>Green juice bushwick bicycle rights woke adaptogen portland. Retro occupy bushwick listicle palo santo normcore vape yuccie synth truffaut lyft quinoa polaroid salvia. Photo booth authentic taiyaki blog, jean shorts paleo wolf woke ennui bicycle
rights cornhole actually man braid synth fixie. Jean shorts raw denim bitters, hell of lomo 90's godard small batch intelligentsia VHS slow-carb wayfarers pok pok.</p>
</div>
</div>
</div>
</div>
<div class="card card-pills">
<div class="card-header">
<ul class="nav nav-pills nav-pills-primary" id="pills-demo-3" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-7-tab" data-toggle="pill" href="#pills-7" role="tab" aria-controls="pills-7" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-8-tab" data-toggle="pill" href="#pills-8" role="tab" aria-controls="pills-8" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-9-tab" data-toggle="pill" href="#pills-9" role="tab" aria-controls="pills-9" aria-selected="false">Contact</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content" id="pills-tabContent-3">
<div class="tab-pane fade show active" id="pills-7" role="tabpanel" aria-labelledby="pills-7">
<p>Helvetica letterpress bicycle rights banh mi keffiyeh af. Food truck shabby chic actually mixtape twee. Pabst blog messenger bag, four loko vape post-ironic paleo freegan. Twee raw denim brooklyn cornhole, polaroid cardigan 8-bit cred pinterest
biodiesel. Seitan woke vinyl, hoodie fingerstache irony bicycle rights vape sustainable DIY skateboard. Quinoa tumeric venmo, af lyft fashion axe slow-carb.</p>
</div>
<div class="tab-pane fade" id="pills-8" role="tabpanel" aria-labelledby="pills-8">
<p>Schlitz enamel pin neutra succulents bespoke, dreamcatcher tattooed flannel man bun la croix YOLO readymade chicharrones poke. Selfies ramps brooklyn microdosing church-key sustainable, keytar next level chicharrones PBR&B. Mlkshk schlitz
whatever, twee wolf godard banh mi try-hard meh bitters irony. Cronut williamsburg shabby chic, typewriter vape skateboard post-ironic lo-fi YOLO shoreditch iceland.</p>
</div>
<div class="tab-pane fade" id="pills-9" role="tabpanel" aria-labelledby="pills-9">
<p>Green juice bushwick bicycle rights woke adaptogen portland. Retro occupy bushwick listicle palo santo normcore vape yuccie synth truffaut lyft quinoa polaroid salvia. Photo booth authentic taiyaki blog, jean shorts paleo wolf woke ennui bicycle
rights cornhole actually man braid synth fixie. Jean shorts raw denim bitters, hell of lomo 90's godard small batch intelligentsia VHS slow-carb wayfarers pok pok.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- SIDEBAR QUICK PANNEL WRAPPER -->
<aside class="sidebar sidebar-right">
<div class="sidebar-content">
<div class="tab-panel m-b-30" id="sidebar-tabs">
<ul class="nav nav-tabs primary-tabs">
<li class="nav-item" role="presentation"><a href="#sidebar-settings" class="nav-link active show" data-toggle="tab" aria-expanded="true">Settings</a></li>
<li class="nav-item" role="presentation"><a href="#sidebar-contact" class="nav-link" data-toggle="tab" aria-expanded="true">Contacts</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fadeIn active" id="sidebar-settings">
<div class="sidebar-settings-wrapper">
<h5 class="m-t-30 m-b-20">Colors with dark sidebar</h5>
<div class="row m-0">
<div class="col-6 col-md-3 p-5 m-b-10">
<div class="color-option-check">
<h6 class="title text-center">theme-a.css</h6><label data-load-css="../assets/css/layouts/vertical/themes/theme-a.css">
<input type="radio" name="setting-theme" checked="checked">
<span class="icon-check dark"></span>
<span class="split">
<span class="color bg-menu-dark"></span>
<span class="color bg-theme-a"></span>
</span>
</label>
</div>
</div>
<div class="col-6 col-md-3 p-5 m-b-10">
<div class="color-option-check">
<h6 class="title text-center">theme-b.css</h6><label data-load-css="../assets/css/layouts/vertical/themes/theme-b.css">
<input type="radio" name="setting-theme">
<span class="icon-check"></span>
<span class="split">
<span class="color bg-menu-dark"></span>
<span class="color bg-theme-b"></span>
</span>
</label>
</div>
</div>
<div class="col-6 col-md-3 p-5 m-b-10">
<div class="color-option-check">
<h6 class="title text-center">theme-c.css</h6><label data-load-css="../assets/css/layouts/vertical/themes/theme-c.css">
<input type="radio" name="setting-theme">
<span class="icon-check"></span>
<span class="split">
<span class="color bg-menu-dark"></span>
<span class="color bg-theme-c"></span>
</span>
</label>
</div>
</div>
<div class="col-6 col-md-3 p-5 m-b-10">
<div class="color-option-check">
<h6 class="title text-center">theme-d.css</h6><label data-load-css="../assets/css/layouts/vertical/themes/theme-d.css">
<input type="radio" name="setting-theme">
<span class="icon-check"></span>
<span class="split">
<span class="color bg-menu-dark"></span>
<span class="color bg-theme-d"></span>
</span>
</label>
</div>
</div>
<div class="col-6 col-md-3 p-5 m-b-10">
<div class="color-option-check">
<h6 class="title text-center">theme-e.css</h6><label data-load-css="../assets/css/layouts/vertical/themes/theme-e.css">
<input type="radio" name="setting-theme">
<span class="icon-check"></span>
<span class="split">
<span class="color bg-menu-dark"></span>
<span class="color bg-theme-e"></span>
</span>
</label>
</div>
</div>
<div class="col-6 col-md-3 p-5 m-b-10">
<div class="color-option-check">
<h6 class="title text-center">theme-f.css</h6><label data-load-css="../assets/css/layouts/vertical/themes/theme-f.css">
<input type="radio" name="setting-theme">
<span class="icon-check"></span>
<span class="split">
<span class="color bg-menu-dark"></span>
<span class="color bg-theme-f"></span>
</span>
</label>
</div>
</div>
<div class="col-6 col-md-3 p-5 m-b-10">
<div class="color-option-check">
<h6 class="title text-center">theme-g.css</h6><label data-load-css="../assets/css/layouts/vertical/themes/theme-g.css">
<input type="radio" name="setting-theme">
<span class="icon-check"></span>
<span class="split">
<span class="color bg-menu-dark"></span>
<span class="color bg-theme-g"></span>
</span>
</label>
</div>
</div>
<div class="col-6 col-md-3 p-5 m-b-10">
<div class="color-option-check">
<h6 class="title text-center">theme-h.css</h6><label data-load-css="../assets/css/layouts/vertical/themes/theme-h.css">
<input type="radio" name="setting-theme">
<span class="icon-check"></span>
<span class="split">
<span class="color bg-menu-dark"></span>
<span class="color bg-theme-h"></span>
</span>
</label>
</div>
</div>
</div>
<h5 class="m-t-30 m-b-20">Colors with light sidebar</h5>
<div class="row m-0">
<div class="col-6 col-md-3 p-5 m-b-10">
<div class="color-option-check">
<h6 class="title text-center">theme-i.css</h6><label data-load-css="../assets/css/layouts/vertical/themes/theme-i.css">
<input type="radio" name="setting-theme">
<span class="icon-check"></span>
<span class="split">
<span class="color bg-menu-light"></span>
<span class="color bg-menu-dark"></span>
</span>
</label>
</div>
</div>
<div class="col-6 col-md-3 p-5 m-b-10">
<div class="color-option-check">
<h6 class="title text-center">theme-j.css</h6><label data-load-css="../assets/css/layouts/vertical/themes/theme-j.css">
<input type="radio" name="setting-theme">
<span class="icon-check"></span>
<span class="split">
<span class="color bg-menu-light"></span>
<span class="color bg-theme-j"></span>
</span>
</label>
</div>
</div>
<div class="col-6 col-md-3 p-5 m-b-10">
<div class="color-option-check">
<h6 class="title text-center">theme-k.css</h6><label data-load-css="../assets/css/layouts/vertical/themes/theme-k.css">
<input type="radio" name="setting-theme">
<span class="icon-check"></span>
<span class="split">
<span class="color bg-menu-light"></span>
<span class="color bg-theme-k"></span>
</span>
</label>
</div>
</div>
<div class="col-6 col-md-3 p-5 m-b-10">
<div class="color-option-check">
<h6 class="title text-center">theme-l.css</h6><label data-load-css="../assets/css/layouts/vertical/themes/theme-l.css">
<input type="radio" name="setting-theme">
<span class="icon-check"></span>
<span class="split">
<span class="color bg-menu-light"></span>
<span class="color bg-theme-l"></span>
</span>
</label>
</div>
</div>
<div class="col-6 col-md-3 p-5 m-b-10">
<div class="color-option-check">
<h6 class="title text-center">theme-m.css</h6><label data-load-css="../assets/css/layouts/vertical/themes/theme-m.css">
<input type="radio" name="setting-theme">
<span class="icon-check"></span>
<span class="split">
<span class="color bg-menu-light"></span>
<span class="color bg-theme-m"></span>
</span>
</label>
</div>
</div>
<div class="col-6 col-md-3 p-5 m-b-10">
<div class="color-option-check">
<h6 class="title text-center">theme-n.css</h6><label data-load-css="../assets/css/layouts/vertical/themes/theme-n.css">
<input type="radio" name="setting-theme">
<span class="icon-check"></span>
<span class="split">
<span class="color bg-menu-light"></span>
<span class="color bg-theme-n"></span>
</span>
</label>
</div>
</div>
<div class="col-6 col-md-3 p-5 m-b-10">
<div class="color-option-check">
<h6 class="title text-center">theme-o.css</h6><label data-load-css="../assets/css/layouts/vertical/themes/theme-o.css">
<input type="radio" name="setting-theme">
<span class="icon-check"></span>
<span class="split">
<span class="color bg-menu-light"></span>
<span class="color bg-theme-o"></span>
</span>
</label>
</div>
</div>
<div class="col-6 col-md-3 p-5 m-b-10">
<div class="color-option-check">
<h6 class="title text-center">theme-p.css</h6><label data-load-css="../assets/css/layouts/vertical/themes/theme-p.css">
<input type="radio" name="setting-theme" />
<span class="icon-check"></span>
<span class="split">
<span class="color bg-menu-light"></span>
<span class="color bg-theme-p"></span>
</span>
</label>
</div>
</div>
</div>
</div>
<div>
<h5 class="m-t-30 m-b-20">Layouts</h5>
<ul class="list-reset">
<li>
<div class="custom-control custom-radio radio-primary form-check">
<input type="radio" id="layoutStatic" name="layoutMode" class="custom-control-input" checked="checked" value="">
<label class="custom-control-label" for="layoutStatic">Static Layout</label>
</div>
</li>
<li>
<div class="custom-control custom-radio radio-primary form-check">
<input type="radio" id="layoutFixed" name="layoutMode" class="custom-control-input" value="layout-fixed">
<label class="custom-control-label" for="layoutFixed">Fixed Layout</label>
</div>
</li>
</ul>
</div>
</div>
<div class="tab-pane" id="sidebar-contact">
<!--START SEARCH WRAPPER -->
<div class="search-wrapper m-b-30">
<button type="submit" class="search-button-submit"><i class="icon dripicons-search site-search-icon"></i></button>
<input type="text" class="form-control search-input no-focus-border" placeholder="Search contacts...">
<a href="javascript:void(0)" class="close-search-button" data-q-action="close-site-search">
<i class="icon dripicons-cross site-search-close-icon"></i>
</a>
</div>
<!--END START SEARCH WRAPPER -->
<!--START RIGHT SIDEBAR CONTACT LIST -->
<div class="qt-scroll" data-scroll="minimal-dark">
<div class="list-view-group-header">a</div>
<ul class="list-group p-0">
<li class="list-group-item" data-chat="open" data-chat-name="John Smith">
<span class="float-left"><img src="../assets/img/avatars/01.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Abby Pugh</div>
<div class="list-group-item-text">New York, NY</div>
</div>
</li>
<li class="list-group-item" data-chat="open" data-chat-name="Allison Grayce">
<span class="float-left"><img src="../assets/img/avatars/06.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Allison Selleck</div>
<div class="list-group-item-text">Seattle, WA</div>
</div>
</li>
</ul>
<div class="list-view-group-header">b</div>
<ul class="list-group p-0">
<li class="list-group-item" data-chat="open" data-chat-name="Ashley Ford">
<span class="float-left"><img src="../assets/img/avatars/07.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Bently Hinton</div>
<div class="list-group-item-text">Denver, CO</div>
</div>
</li>
<li class="list-group-item" data-chat="open" data-chat-name="Johanna Kollmann">
<span class="float-left"><img src="../assets/img/avatars/11.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Brad Friedman </div>
<div class="list-group-item-text">Palo Alto, Ca</div>
</div>
</li>
<li class="list-group-item" data-chat="open" data-chat-name="John Smith">
<span class="float-left"><img src="../assets/img/avatars/02.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Boston Nather</div>
<div class="list-group-item-text">New York, NY</div>
</div>
</li>
<li class="list-group-item" data-chat="open" data-chat-name="Allison Grayce">
<span class="float-left"><img src="../assets/img/avatars/16.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Brayan Bunnell</div>
<div class="list-group-item-text">Seattle, WA</div>
</div>
</li>
</ul>
<div class="list-view-group-header">c</div>
<ul class="list-group p-0">
<li class="list-group-item" data-chat="open" data-chat-name="Ashley Ford">
<span class="float-left"><img src="../assets/img/avatars/08.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Carter Titchen</div>
<div class="list-group-item-text">Denver, CO</div>
</div>
</li>
<li class="list-group-item" data-chat="open" data-chat-name="Johanna Kollmann">
<span class="float-left"><img src="../assets/img/avatars/13.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Carla Fraser </div>
<div class="list-group-item-text">Palo Alto, Ca</div>
</div>
</li>
</ul>
<div class="list-view-group-header">d</div>
<ul class="list-group p-0">
<li class="list-group-item" data-chat="open" data-chat-name="John Smith">
<span class="float-left"><img src="../assets/img/avatars/03.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">David Petrie</div>
<div class="list-group-item-text">New York, NY</div>
</div>
</li>
</ul>
<div class="list-view-group-header">e</div>
<ul class="list-group p-0">
<li class="list-group-item" data-chat="open" data-chat-name="Allison Grayce">
<span class="float-left"><img src="../assets/img/avatars/12.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Ellie Sweetser</div>
<div class="list-group-item-text">Seattle, WA</div>
</div>
</li>
<li class="list-group-item" data-chat="open" data-chat-name="Ashley Ford">
<span class="float-left"><img src="../assets/img/avatars/09.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Eric Eskridge</div>
<div class="list-group-item-text">Denver, CO</div>
</div>
</li>
</ul>
<div class="list-view-group-header">f</div>
<ul class="list-group p-0">
<li class="list-group-item" data-chat="open" data-chat-name="John Smith">
<span class="float-left"><img src="../assets/img/avatars/04.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Farrah Yulikova</div>
<div class="list-group-item-text">New York, NY</div>
</div>
</li>
<li class="list-group-item" data-chat="open" data-chat-name="Allison Grayce">
<span class="float-left"><img src="../assets/img/avatars/05.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Florence Buren</div>
<div class="list-group-item-text">Seattle, WA</div>
</div>
</li>
<li class="list-group-item" data-chat="open" data-chat-name="Johanna Kollmann">
<span class="float-left"><img src="../assets/img/avatars/14.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Francesca Koehn </div>
<div class="list-group-item-text">Palo Alto, Ca</div>
</div>
</li>
</ul>
<div class="list-view-group-header">g</div>
<ul class="list-group p-0">
<li class="list-group-item" data-chat="open" data-chat-name="Ashley Ford">
<span class="float-left"><img src="../assets/img/avatars/10.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Glynn Slade</div>
<div class="list-group-item-text">Denver, CO</div>
</div>
</li>
</ul>
<div class="list-view-group-header">h</div>
<ul class="list-group p-0">
<li class="list-group-item" data-chat="open" data-chat-name="Johanna Kollmann">
<span class="float-left"><img src="../assets/img/avatars/14.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Haley Molaroni </div>
<div class="list-group-item-text">Palo Alto, Ca</div>
</div>
</li>
</ul>
<div class="list-view-group-header">i</div>
<ul class="list-group p-0">
<li class="list-group-item" data-chat="open" data-chat-name="John Smith">
<span class="float-left"><img src="../assets/img/avatars/07.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Isaac Seldin</div>
<div class="list-group-item-text">New York, NY</div>
</div>
</li>
<li class="list-group-item" data-chat="open" data-chat-name="Allison Grayce">
<span class="float-left"><img src="../assets/img/avatars/13.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Ivy Dancelli</div>
<div class="list-group-item-text">Seattle, WA</div>
</div>
</li>
</ul>
<div class="list-view-group-header">j</div>
<ul class="list-group p-0">
<li class="list-group-item" data-chat="open" data-chat-name="Ashley Ford">
<span class="float-left"><img src="../assets/img/avatars/18.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Jax Scharf</div>
<div class="list-group-item-text">Denver, CO</div>
</div>
</li>
<li class="list-group-item" data-chat="open" data-chat-name="Johanna Kollmann">
<span class="float-left"><img src="../assets/img/avatars/17.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Jen Pritsinas </div>
<div class="list-group-item-text">Palo Alto, Ca</div>
</div>
</li>
</ul>
<div class="list-view-group-header">m</div>
<ul class="list-group p-0">
<li class="list-group-item" data-chat="open" data-chat-name="Ashley Ford">
<span class="float-left"><img src="../assets/img/avatars/20.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Marco Heginbotham</div>
<div class="list-group-item-text">Denver, CO</div>
</div>
</li>
<li class="list-group-item" data-chat="open" data-chat-name="Johanna Kollmann">
<span class="float-left"><img src="../assets/img/avatars/21.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Marisa Gelber </div>
<div class="list-group-item-text">Palo Alto, Ca</div>
</div>
</li>
</ul>
<div class="list-view-group-header">p</div>
<ul class="list-group p-0">
<li class="list-group-item" data-chat="open" data-chat-name="Ashley Ford">
<span class="float-left"><img src="../assets/img/avatars/22.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Penny Withka</div>
<div class="list-group-item-text">Denver, CO</div>
</div>
</li>
<li class="list-group-item" data-chat="open" data-chat-name="Johanna Kollmann">
<span class="float-left"><img src="../assets/img/avatars/23.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Pixie Clayborne </div>
<div class="list-group-item-text">Palo Alto, Ca</div>
</div>
</li>
</ul>
<div class="list-view-group-header">s</div>
<ul class="list-group p-0">
<li class="list-group-item" data-chat="open" data-chat-name="Ashley Ford">
<span class="float-left"><img src="../assets/img/avatars/25.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Sheldon Luntz</div>
<div class="list-group-item-text">Denver, CO</div>
</div>
</li>
<li class="list-group-item" data-chat="open" data-chat-name="Johanna Kollmann">
<span class="float-left"><img src="../assets/img/avatars/26.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Sam Kendall </div>
<div class="list-group-item-text">Palo Alto, Ca</div>
</div>
</li>
</ul>
<div class="list-view-group-header">z</div>
<ul class="list-group p-0">
<li class="list-group-item" data-chat="open" data-chat-name="Ashley Ford">
<span class="float-left"><img src="../assets/img/avatars/27.jpg" alt="" class="rounded-circle max-w-50 m-r-10"></span>
<i class="badge mini success status"></i>
<div class="list-group-item-body">
<div class="list-group-item-heading">Zack Mohanram</div>
<div class="list-group-item-text">Denver, CO</div>
</div>
</li>
</ul>
</div>
<!--END RIGHT SIDEBAR CONTACT LIST -->
</div>
</div>
</div>
</div>
</aside>
<!-- END SIDEBAR QUICK PANNEL WRAPPER -->
</div>
</div>
<!-- END CONTENT WRAPPER -->
<!-- ================== GLOBAL VENDOR SCRIPTS ==================-->
<script src="../assets/vendor/modernizr/modernizr.custom.js"></script>
<script src="../assets/vendor/jquery/dist/jquery.min.js"></script>
<script src="../assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../assets/vendor/js-storage/js.storage.js"></script>
<script src="../assets/vendor/js-cookie/src/js.cookie.js"></script>
<script src="../assets/vendor/pace/pace.js"></script>
<script src="../assets/vendor/metismenu/dist/metisMenu.js"></script>
<script src="../assets/vendor/switchery-npm/index.js"></script>
<script src="../assets/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
<!-- ================== GLOBAL APP SCRIPTS ==================-->
<script src="../assets/js/global/app.js"></script>
</body>
</html>