Tree
HTML
<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">
<i class="kx-icon kx-icon--size-small kx-tree__caret">
<svg focusable="false">
<use href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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">
<i class="kx-icon kx-icon--size-small kx-tree__caret">
<svg focusable="false">
<use href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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">
<i class="kx-icon kx-icon--size-small kx-tree__caret">
<svg focusable="false">
<use href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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">
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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">
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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">
<i class="kx-icon kx-icon--size-small kx-tree__caret">
<svg focusable="false">
<use href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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">
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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">
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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">
<i class="kx-icon kx-icon--size-small kx-tree__caret">
<svg focusable="false">
<use href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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">
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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">
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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">
<i class="kx-icon kx-icon--size-small kx-tree__caret">
<svg focusable="false">
<use href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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">
<i class="kx-icon kx-icon--size-small kx-tree__caret">
<svg focusable="false">
<use href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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">
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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">
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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">
<i class="kx-icon kx-icon--size-small kx-tree__caret">
<svg focusable="false">
<use href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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">
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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">
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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">
<i class="kx-icon kx-icon--size-small kx-tree__caret">
<svg focusable="false">
<use href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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">
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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">
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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">
<i class="kx-icon kx-icon--size-small kx-tree__caret">
<svg focusable="false">
<use href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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">
<i class="kx-icon kx-icon--size-small kx-tree__caret">
<svg focusable="false">
<use href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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">
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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">
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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">
<i class="kx-icon kx-icon--size-small kx-tree__caret">
<svg focusable="false">
<use href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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">
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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">
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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">
<i class="kx-icon kx-icon--size-small kx-tree__caret">
<svg focusable="false">
<use href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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">
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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">
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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">
<i class="kx-icon kx-icon--size-small kx-tree__caret">
<svg focusable="false">
<use href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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">
<i class="kx-icon kx-icon--size-small kx-tree__caret">
<svg focusable="false">
<use href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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">
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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">
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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">
<i class="kx-icon kx-icon--size-small kx-tree__caret">
<svg focusable="false">
<use href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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">
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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">
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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">
<i class="kx-icon kx-icon--size-small kx-tree__caret">
<svg focusable="false">
<use href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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">
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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">
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use 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>
View
<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">
{% render '@icon', {type: 'icon', symbol: 'caret-right', size: 'small', classes: ['kx-tree__caret'] } %}
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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">
{% render '@icon', {type: 'icon', symbol: 'caret-right', size: 'small', classes: ['kx-tree__caret'] } %}
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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">
{% render '@icon', {type: 'icon', symbol: 'caret-right', size: 'small', classes: ['kx-tree__caret'] } %}
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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">
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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">
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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">
{% render '@icon', {type: 'icon', symbol: 'caret-right', size: 'small', classes: ['kx-tree__caret'] } %}
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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">
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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">
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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">
{% render '@icon', {type: 'icon', symbol: 'caret-right', size: 'small', classes: ['kx-tree__caret'] } %}
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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">
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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">
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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">
{% render '@icon', {type: 'icon', symbol: 'caret-right', size: 'small', classes: ['kx-tree__caret'] } %}
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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">
{% render '@icon', {type: 'icon', symbol: 'caret-right', size: 'small', classes: ['kx-tree__caret'] } %}
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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">
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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">
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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">
{% render '@icon', {type: 'icon', symbol: 'caret-right', size: 'small', classes: ['kx-tree__caret'] } %}
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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">
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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">
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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">
{% render '@icon', {type: 'icon', symbol: 'caret-right', size: 'small', classes: ['kx-tree__caret'] } %}
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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">
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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">
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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">
{% render '@icon', {type: 'icon', symbol: 'caret-right', size: 'small', classes: ['kx-tree__caret'] } %}
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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">
{% render '@icon', {type: 'icon', symbol: 'caret-right', size: 'small', classes: ['kx-tree__caret'] } %}
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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">
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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">
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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">
{% render '@icon', {type: 'icon', symbol: 'caret-right', size: 'small', classes: ['kx-tree__caret'] } %}
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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">
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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">
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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">
{% render '@icon', {type: 'icon', symbol: 'caret-right', size: 'small', classes: ['kx-tree__caret'] } %}
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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">
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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">
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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">
{% render '@icon', {type: 'icon', symbol: 'caret-right', size: 'small', classes: ['kx-tree__caret'] } %}
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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">
{% render '@icon', {type: 'icon', symbol: 'caret-right', size: 'small', classes: ['kx-tree__caret'] } %}
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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">
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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">
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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">
{% render '@icon', {type: 'icon', symbol: 'caret-right', size: 'small', classes: ['kx-tree__caret'] } %}
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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">
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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">
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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">
{% render '@icon', {type: 'icon', symbol: 'caret-right', size: 'small', classes: ['kx-tree__caret'] } %}
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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">
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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">
{% render '@icon', {type: 'icon', symbol: 'box', size: 'base' } %}
<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>