<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="--15606" 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="--15606">
<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="--19178" 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="--19178">
<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="--32767" 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="--32767">
<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" aria-labelledby="--39351">
<h2 class="kx-nav__header kx-is-vishidden" id="--39351">Navigation header</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>
</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>
<body class="kx-page">
<div class="kx-page__canvas kx-flex kx-justify-content-start kx-align-items-start">
{# Header #}
{% render '@header' %}
{# Nav #}
<div class="kx-page__nav">
{% render '@nav', navContext, true %}
</div>
{# Main #}
<div class="kx-page__main">
<main class="kx-main" role="main">
{# Overlay #}
<button class="kx-page__overlay">
<span class="kx-is-vishidden">Close</span>
</button>
{# Breadcrumb #}
{% if breadcrumb %}
{% render '@breadcrumb', breadcrumb -%}
{% endif %}
{# Content #}
<div class="kx-page__content">
{% block main %}{% endblock %}
</div>
</main>
</div>
</div>
{% include '@scripts-foot' %}
{# Custom scripts in foot goes here: #}
{% block scripts_custom %}{% endblock %}
</body>
/* No context defined for this component. */
- Handle: @page
- Preview:
- Filesystem Path: src\components\02-page-templates\_page.njk
- References (4): @header, @nav, @breadcrumb, @scripts-foot
- Referenced by (2): @dashboard, @landing
There are no notes for this item.