<body class="kx-page">
<div class="kx-page__canvas kx-flex kx-justify-content-start kx-align-items-start">
<div class="kx-page__header kx-flex">
<header class="kx-header kx-flex kx-align-items-center" role="banner">
<button class="kx-btn kx-hamburger kx-hamburger--spin kx-header__nav-toggle kx-js-header__nav-toggle">
<span class="kx-hamburger__inner">
<span class="kx-hamburger__icon"></span>
</span>
<span class="kx-hamburger__txt kx-is-vishidden">Menu</span>
</button>
<a class="kx-header__title" href="#">
My Company
</a>
<div class="kx-header__tools">
<!-- BUTTON-GROUP Component -->
<div class="kx-btngroup kx-flex kx-flex-wrap kx-btngroup--fit-tight kx-ui" role="group" aria-label="Tools and settings">
<!-- DROPDOWN Component -->
<div class="kx-dropdown" role="group">
<button id="--24077" class="kx-dropdown__toggle kx-btn kx-btn--size-base kx-btn--icon kx-js-dropdown__toggle" aria-haspopup="true" aria-expanded="false">
<span class="kx-btn__inner">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#user"></use>
</svg>
</i>
<span class="kx-btn__txt kx-is-vishidden">User</span>
</span>
</button>
<div class="kx-dropdown__menu kx-dropdown__menu--align-right kx-js-dropdown__menu" aria-labelledby="--24077">
<ul class="kx-dropdown__list">
<li class="kx-dropdown__item">
<a class="kx-dropdown__link" href="#">
<span class="kx-dropdown__item__txt">My profile</span>
</a>
</li>
<li class="kx-dropdown__item">
<a class="kx-dropdown__link" href="#">
<span class="kx-dropdown__item__txt">Notification settings</span>
</a>
</li>
<li class="kx-dropdown__item">
<a class="kx-dropdown__link" href="#">
<span class="kx-dropdown__item__txt">Security</span>
</a>
</li>
<li class="kx-dropdown__item">
<a class="kx-dropdown__link" href="#">
<span class="kx-dropdown__item__txt">Usage</span>
</a>
</li>
<li class="kx-divider kx-divider--size-mini" aria-hidden="true" tabindex="-1"></li>
<li class="kx-dropdown__item">
<a class="kx-dropdown__link" href="#">
<span class="kx-dropdown__item__txt">Logout</span>
</a>
</li>
</ul>
</div>
</div>
<!-- DROPDOWN Component -->
<div class="kx-dropdown" role="group">
<button id="--22581" class="kx-dropdown__toggle kx-btn kx-btn--size-base kx-btn--icon kx-js-dropdown__toggle" aria-haspopup="true" aria-expanded="false">
<span class="kx-btn__inner">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#cog"></use>
</svg>
</i>
<span class="kx-btn__txt kx-is-vishidden">Settings</span>
</span>
</button>
<div class="kx-dropdown__menu kx-dropdown__menu--align-right kx-js-dropdown__menu" aria-labelledby="--22581">
<ul class="kx-dropdown__list">
<li class="kx-dropdown__item">
<a class="kx-dropdown__link" href="#">
<span class="kx-dropdown__item__txt">Menu Editor</span>
</a>
</li>
<li class="kx-dropdown__item">
<a class="kx-dropdown__link" href="#">
<span class="kx-dropdown__item__txt">Unit of Measure</span>
</a>
</li>
</ul>
</div>
</div>
<!-- DROPDOWN Component -->
<div class="kx-dropdown" role="group">
<button id="--81143" class="kx-dropdown__toggle kx-btn kx-btn--size-base kx-js-dropdown__toggle" aria-haspopup="true" aria-expanded="false">
<span class="kx-btn__inner">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#dots-horizontal"></use>
</svg>
</i>
<span class="kx-btn__txt">More</span>
</span>
</button>
<div class="kx-dropdown__menu kx-dropdown__menu--align-right kx-js-dropdown__menu" aria-labelledby="--81143">
<ul class="kx-dropdown__list">
<li class="kx-dropdown__item">
<a class="kx-dropdown__link" href="#">
<span class="kx-dropdown__item__txt">Support</span>
</a>
</li>
<li class="kx-dropdown__item">
<a class="kx-dropdown__link" href="#">
<span class="kx-dropdown__item__txt">Give feedback</span>
</a>
</li>
<li class="kx-dropdown__item">
<a class="kx-dropdown__link" href="#">
<span class="kx-dropdown__item__txt">Community</span>
</a>
</li>
<li class="kx-dropdown__item">
<a class="kx-dropdown__link" href="#">
<span class="kx-dropdown__item__txt">Privacy policy</span>
</a>
</li>
<li class="kx-dropdown__item">
<a class="kx-dropdown__link" href="#">
<span class="kx-dropdown__item__txt">About Kognifai</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
</div>
<div class="kx-page__nav">
<nav class="kx-nav kx-nav--main" aria-labelledby="--42696">
<div class="kx-nav__search">
<div class="kx-inputgroup">
<!-- FIELD Component -->
<div class="kx-form__element">
<input class="kx-field kx-field--size-base" id="--49978" type="search" placeholder="Find component" />
<label class="kx-label kx-is-vishidden" for="--49978">
Find Component
</label>
</div>
<!-- BUTTON Component -->
<button class="kx-btn kx-btn--skin-primary kx-btn--size-base kx-btn--icon" aria-label="Search">
<span class="kx-btn__inner">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#search"></use>
</svg>
</i>
<span class="kx-btn__txt kx-is-vishidden">Search</span>
</span>
</button>
</div>
</div>
<h2 class="kx-nav__header kx-is-vishidden" id="--42696">Main Navigation</h2>
<ul class="kx-tree kx-is-root">
<li class="kx-tree__item kx-is-node kx-is-open" data-treedepth="0">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny kx-tree__caret">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 0</span>
</a>
<ul class="kx-tree">
<li class="kx-tree__item kx-is-node kx-is-open" data-treedepth="1">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny kx-tree__caret">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 1</span>
</a>
<ul class="kx-tree">
<li class="kx-tree__item kx-is-node kx-is-open" data-treedepth="2">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny kx-tree__caret">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 2</span>
</a>
<ul class="kx-tree">
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
</ul>
</li>
<li class="kx-tree__item kx-is-node" data-treedepth="2">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny kx-tree__caret">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 2</span>
</a>
<ul class="kx-tree">
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
</ul>
</li>
<li class="kx-tree__item kx-is-node" data-treedepth="2">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny kx-tree__caret">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 2</span>
</a>
<ul class="kx-tree">
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="kx-tree__item kx-is-node" data-treedepth="1">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny kx-tree__caret">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 1</span>
</a>
<ul class="kx-tree">
<li class="kx-tree__item kx-is-node kx-is-open" data-treedepth="2">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny kx-tree__caret">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 2</span>
</a>
<ul class="kx-tree">
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
</ul>
</li>
<li class="kx-tree__item kx-is-node" data-treedepth="2">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny kx-tree__caret">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 2</span>
</a>
<ul class="kx-tree">
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
</ul>
</li>
<li class="kx-tree__item kx-is-node" data-treedepth="2">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny kx-tree__caret">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 2</span>
</a>
<ul class="kx-tree">
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="kx-tree__item kx-is-node" data-treedepth="1">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny kx-tree__caret">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 1</span>
</a>
<ul class="kx-tree">
<li class="kx-tree__item kx-is-node kx-is-open" data-treedepth="2">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny kx-tree__caret">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 2</span>
</a>
<ul class="kx-tree">
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
</ul>
</li>
<li class="kx-tree__item kx-is-node" data-treedepth="2">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny kx-tree__caret">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 2</span>
</a>
<ul class="kx-tree">
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
</ul>
</li>
<li class="kx-tree__item kx-is-node" data-treedepth="2">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny kx-tree__caret">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 2</span>
</a>
<ul class="kx-tree">
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="kx-tree__item kx-is-node" data-treedepth="1">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny kx-tree__caret">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 1</span>
</a>
<ul class="kx-tree">
<li class="kx-tree__item kx-is-node kx-is-open" data-treedepth="2">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny kx-tree__caret">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 2</span>
</a>
<ul class="kx-tree">
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
</ul>
</li>
<li class="kx-tree__item kx-is-node" data-treedepth="2">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny kx-tree__caret">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 2</span>
</a>
<ul class="kx-tree">
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
</ul>
</li>
<li class="kx-tree__item kx-is-node" data-treedepth="2">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny kx-tree__caret">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 2</span>
</a>
<ul class="kx-tree">
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="kx-page__main">
<main class="kx-main" role="main">
<button class="kx-page__overlay">
<span class="kx-is-vishidden">Close</span>
</button>
<div class="kx-page__content">
<div class="kx-menubar kx-theme--foam">
<div class="kx-container">
<div class="kx-row kx-align-items-center">
<div class="kx-col">
<!-- TABS Component -->
<nav class="kx-tabs">
<ol class="kx-tabs__list">
<li class="kx-tabs__item kx-is-active">
<a href="#" class="kx-tabs__label">
<span class="kx-tabs__txt">Foo</span>
</a>
</li>
<li class="kx-tabs__item">
<a href="#" class="kx-tabs__label">
<span class="kx-tabs__txt">Bar</span>
</a>
</li>
<li class="kx-tabs__item">
<a href="#" class="kx-tabs__label">
<span class="kx-tabs__txt">Baz</span>
</a>
</li>
</ol>
</nav>
</div>
<div class="kx-col">
<!-- BUTTON-GROUP Component -->
<div class="kx-btngroup kx-flex kx-flex-wrap kx-justify-content-end" role="group" aria-label="A button group">
<!-- BUTTON Component -->
<button class="kx-btn kx-btn--skin-primary kx-btn--size-base">
<span class="kx-btn__inner">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#plus"></use>
</svg>
</i>
<span class="kx-btn__txt">New</span>
</span>
</button>
<!-- DROPDOWN Component -->
<div class="kx-dropdown" role="group">
<button id="--47090" class="kx-dropdown__toggle kx-btn kx-btn--skin-secondary kx-btn--size-base kx-js-dropdown__toggle" aria-haspopup="true" aria-expanded="false">
<span class="kx-btn__inner">
<span class="kx-btn__txt">Details</span>
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-small kx-dropdown__caret">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-down"></use>
</svg>
</i>
</span>
</button>
<div class="kx-dropdown__menu kx-dropdown__menu--align-right kx-js-dropdown__menu" aria-labelledby="--47090">
<ul class="kx-dropdown__list">
<li class="kx-dropdown__item">
<a class="kx-dropdown__link" href="#">
<span class="kx-dropdown__item__txt">Password</span>
</a>
</li>
<li class="kx-dropdown__item">
<a class="kx-dropdown__link" href="#">
<span class="kx-dropdown__item__txt">Caci</span>
</a>
</li>
<li class="kx-dropdown__item">
<a class="kx-dropdown__link" href="#">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#arrow-down"></use>
</svg>
</i><span class="kx-dropdown__item__txt">Download</span>
</a>
</li>
<li class="kx-dropdown__item">
<a class="kx-dropdown__link" href="#">
<span class="kx-dropdown__item__txt">Edit</span>
</a>
</li>
<li class="kx-dropdown__item">
<a class="kx-dropdown__link" href="#">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#papers"></use>
</svg>
</i><span class="kx-dropdown__item__txt">Notes</span>
</a>
</li>
<li class="kx-dropdown__item">
<a class="kx-dropdown__link" href="#">
<span class="kx-dropdown__item__txt">Server</span>
</a>
</li>
<li class="kx-dropdown__item">
<a class="kx-dropdown__link" href="#">
<span class="kx-dropdown__item__txt">Retire</span>
</a>
</li>
<li class="kx-dropdown__item">
<a class="kx-dropdown__link" href="#">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#cog"></use>
</svg>
</i><span class="kx-dropdown__item__txt">Tools</span>
</a>
</li>
<li class="kx-dropdown__item">
<a class="kx-dropdown__link" href="#">
<span class="kx-dropdown__item__txt">Deploy</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<header class="kx-app__header">
<h1 class="kx-app__title">Dashboard Title</h1>
</header>
<div class="kx-container">
<div class="kx-row kx-row--gutters">
<div class="kx-col kx-col--12">
<div class="kx-card kx-card--skin-default kx-p--small">
<div class="kx-row kx-row--gutters">
<div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@tab-l">
<div class="kx-row kx-row--gutters">
<div class="kx-col kx-col--12">
<!-- FIELD Component -->
<div class="kx-form__element">
<input class="kx-field kx-field--size-base" id="--61254" type="text" value="117" readonly />
<label class="kx-label" for="--61254">
Node ID
</label>
</div>
</div>
<div class="kx-col kx-col--12">
<!-- FIELD Component -->
<div class="kx-form__element">
<input class="kx-field kx-field--size-base" id="--93299" type="text" value="router" readonly />
<label class="kx-label" for="--93299">
Type
</label>
</div>
</div>
<div class="kx-col kx-col--12">
<!-- FIELD Component -->
<div class="kx-form__element">
<input class="kx-field kx-field--size-base" id="--60928" type="text" value="Development user" readonly />
<label class="kx-label" for="--60928">
Created by
</label>
</div>
</div>
</div>
</div>
<div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@tab-l">
<div class="kx-row kx-row--gutters">
<div class="kx-col kx-col--12">
<!-- FIELD Component -->
<div class="kx-form__element">
<input class="kx-field kx-field--size-base" id="--36989" type="text" value="N/a" readonly />
<label class="kx-label" for="--36989">
Last Latency
</label>
</div>
</div>
<div class="kx-col kx-col--12">
<!-- FIELD Component -->
<div class="kx-form__element">
<input class="kx-field kx-field--size-base" id="--88734" type="text" value="Pacific Drilling" readonly />
<label class="kx-label" for="--88734">
Logical Network
</label>
</div>
</div>
<div class="kx-col kx-col--12">
<!-- FIELD Component -->
<div class="kx-form__element">
<input class="kx-field kx-field--size-base" id="--10359" type="text" value="Cisco-TK421" readonly />
<label class="kx-label" for="--10359">
Device
</label>
</div>
</div>
</div>
</div>
<div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@tab-l">
<div class="kx-row kx-row--gutters">
<div class="kx-col kx-col--12">
<!-- FIELD Component -->
<div class="kx-form__element">
<input class="kx-field kx-field--size-base" id="--73018" type="text" value="2017.11.16 13:10:48" readonly />
<label class="kx-label" for="--73018">
Created
</label>
</div>
</div>
<div class="kx-col kx-col--12">
<!-- FIELD Component -->
<div class="kx-form__element">
<input class="kx-field kx-field--size-base" id="--70489" type="text" value="117" readonly />
<label class="kx-label" for="--70489">
Host Name
</label>
</div>
</div>
<div class="kx-col kx-col--12">
<!-- FIELD Component -->
<div class="kx-form__element">
<input class="kx-field kx-field--size-base" id="--30477" type="text" value="fn2187" readonly />
<label class="kx-label" for="--30477">
Description
</label>
</div>
</div>
</div>
</div>
<div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@tab-l">
<div class="kx-row kx-row--gutters">
<div class="kx-col kx-col--12">
<!-- FIELD Component -->
<div class="kx-form__element">
<input class="kx-field kx-field--size-base" id="--19216" type="text" value="N/A" readonly />
<label class="kx-label" for="--19216">
Last Seen
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="kx-row kx-row--gutters kx-align-items-stretch">
<div class="kx-col kx-col--12">
<div class="kx-card kx-card--skin-default">
<table class="kx-table kx-table--fit-tight kx-table--fluid kx-table--highlight kx-ui">
<thead class="kx-theme--foam">
<tr>
<th>Node ID</th>
<th>Logical Network</th>
<th>Host name</th>
<th>Type</th>
<th>Description</th>
<th>Created By</th>
<th>Created</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="">
<td><a href="#">16385</a></td>
<td>Floatel Test</td>
<td>n16386-nndf-001</td>
<td>Router</td>
<td>Cisco809-SupportRouter</td>
<td>Ola Normann</td>
<td>5 years ago</td>
<td>Edit</td>
</tr>
<tr class="">
<td><a href="#">16385</a></td>
<td>Noble Drilling</td>
<td>n16386-nndf-001</td>
<td>Router</td>
<td>Cisco809-Common</td>
<td>Ola Normann</td>
<td>1 year ago</td>
<td>Edit</td>
</tr>
<tr class="">
<td><a href="#">16385</a></td>
<td>Common</td>
<td>n16386-nndf-001</td>
<td>Router</td>
<td>Cisco881</td>
<td>Ola Normann</td>
<td>3 years ago</td>
<td>Edit</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="kx-col kx-col--12">
<div class="kx-card kx-card--skin-default">
<table class="kx-table kx-table--fit-tight kx-table--fluid kx-table--highlight kx-ui">
<thead class="kx-theme--foam">
<tr>
<th>Node ID</th>
<th>Logical Network</th>
<th>Host name</th>
<th>Type</th>
<th>Description</th>
<th>Created By</th>
<th>Created</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="">
<td><a href="#">16385</a></td>
<td>Floatel Test</td>
<td>n16386-nndf-001</td>
<td>Router</td>
<td>Cisco809-SupportRouter</td>
<td>Ola Normann</td>
<td>5 years ago</td>
<td>Edit</td>
</tr>
<tr class="">
<td><a href="#">16385</a></td>
<td>Noble Drilling</td>
<td>n16386-nndf-001</td>
<td>Router</td>
<td>Cisco809-Common</td>
<td>Ola Normann</td>
<td>1 year ago</td>
<td>Edit</td>
</tr>
<tr class="">
<td><a href="#">16385</a></td>
<td>Common</td>
<td>n16386-nndf-001</td>
<td>Router</td>
<td>Cisco881</td>
<td>Ola Normann</td>
<td>3 years ago</td>
<td>Edit</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
<script>
let buttons = document.querySelectorAll('.kx-btn');
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function(event) {
this.blur();
});
}
</script>
<script src="../../assets/scripts/js/helpers.js"></script>
<script src="../../assets/scripts/js/navigation.js"></script>
<script src="../../assets/scripts/js/object-fit-fallback.js"></script>
<script src="../../assets/scripts/js/components/dropdown.js"></script>
</body>
{% extends "@page" %}
{% block main %}
<div class="kx-menubar kx-theme--foam">
<div class="kx-container">
<div class="kx-row kx-align-items-center">
<div class="kx-col">
{% render '@tabs', tabs %}
</div>
<div class="kx-col">
{% render '@button-group',
{
ariaLabel: 'A button group',
align: ['kx-justify-content-end'],
buttons: [
{
context: {
text: 'New',
skin: 'primary',
size: 'base',
icon: {
symbol: 'plus',
size: 'base'
}
}
},
{
context: {
text: 'Details',
skin: 'secondary',
size: 'base',
'items': [
{
'text': 'Password',
'href': '#'
},
{
'text': 'Caci',
'href': '#'
},
{
'text': 'Download',
'href': '#',
icon: {
symbol: 'arrow-down',
size: 'base'
}
},
{
'text': 'Edit',
'href': '#'
},
{
'text': 'Notes',
'href': '#',
icon: {
symbol: 'papers',
size: 'base'
}
},
{
'text': 'Server',
'href': '#'
},
{
'text': 'Retire',
'href': '#'
},
{
'text': 'Tools',
'href': '#',
icon: {
symbol: 'cog',
size: 'base'
}
},
{
'text': 'Deploy',
'href': '#'
}
],
'caret': true,
'menuAlignment': 'right'
}
}
]
}
%}
</div>
</div>
</div>
</div>
<header class="kx-app__header">
<h1 class="kx-app__title">{{ pageTitle }}</h1>
</header>
<div class="kx-container">
<div class="kx-row kx-row--gutters">
<div class="kx-col kx-col--12">
<div class="kx-card kx-card--skin-default kx-p--small">
<div class="kx-row kx-row--gutters">
<div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@tab-l">
<div class="kx-row kx-row--gutters">
<div class="kx-col kx-col--12">
{% render '@field', { labelTxt: 'Node ID', element: 'input', type: 'text', value: '117', size: 'base', readonly: true } %}
</div>
<div class="kx-col kx-col--12">
{% render '@field', { labelTxt: 'Type', element: 'input', type: 'text', value: 'router', size: 'base', readonly: true} %}
</div>
<div class="kx-col kx-col--12">
{% render '@field', { labelTxt: 'Created by', element: 'input', type: 'text', value: 'Development user', size: 'base', readonly: true} %}
</div>
</div>
</div>
<div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@tab-l">
<div class="kx-row kx-row--gutters">
<div class="kx-col kx-col--12">
{% render '@field', { labelTxt: 'Last Latency', element: 'input', type: 'text', value: 'N/a', size: 'base', readonly: true} %}
</div>
<div class="kx-col kx-col--12">
{% render '@field', { labelTxt: 'Logical Network', element: 'input', type: 'text', value: 'Pacific Drilling', size: 'base', readonly: true } %}
</div>
<div class="kx-col kx-col--12">
{% render '@field', { labelTxt: 'Device', element: 'input', type: 'text', value: 'Cisco-TK421', size: 'base', readonly: true} %}
</div>
</div>
</div>
<div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@tab-l">
<div class="kx-row kx-row--gutters">
<div class="kx-col kx-col--12">
{% render '@field', { labelTxt: 'Created', element: 'input', type: 'text', value: '2017.11.16 13:10:48', size: 'base', readonly: true} %}
</div>
<div class="kx-col kx-col--12">
{% render '@field', { labelTxt: 'Host Name', element: 'input', type: 'text', value: '117', size: 'base', readonly: true } %}
</div>
<div class="kx-col kx-col--12">
{% render '@field', { labelTxt: 'Description', element: 'input', type: 'text', value: 'fn2187', size: 'base', readonly: true} %}
</div>
</div>
</div>
<div class="kx-col kx-col--12 kx-col--6@tab-s kx-col--3@tab-l">
<div class="kx-row kx-row--gutters">
<div class="kx-col kx-col--12">
{% render '@field', { labelTxt: 'Last Seen', element: 'input', type: 'text', value: 'N/A', size: 'base', readonly: true} %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="kx-row kx-row--gutters kx-align-items-stretch">
<div class="kx-col kx-col--12">
<div class="kx-card kx-card--skin-default">
{% render '@table', { fluid: true, theme: 'foam', highlight: true }, true %}
</div>
</div>
<div class="kx-col kx-col--12">
<div class="kx-card kx-card--skin-default">
{% render '@table', { fluid: true, theme: 'foam', highlight: true }, true %}
</div>
</div>
</div>
</div>
{% endblock %}
{
"pageTitle": "Dashboard Title",
"breadcrumbContext": {
"theme": "white",
"items": [
{
"txt": "Home",
"href": "#"
},
{
"txt": "Applications",
"href": "#"
},
{
"txt": "My App"
}
]
},
"navContext": {
"classes": [
"kx-nav--main"
],
"header": "Main Navigation",
"hideHeader": true,
"search": true,
"items": [
{
"text": "Home",
"href": "#"
},
{
"text": "Application",
"href": "#"
},
{
"text": "Item Link text",
"href": "#"
}
]
},
"tabs": {
"items": [
{
"txt": "Foo",
"href": "#",
"active": true
},
{
"txt": "Bar",
"href": "#"
},
{
"txt": "Baz",
"href": "#"
}
]
}
}
- Handle: @dashboard
- Preview:
- Filesystem Path: src\components\02-page-templates\01-dashboard\dashboard.njk
- References (5): @page, @tabs, @button-group, @field, @table
There are no notes for this item.