Tree

<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>
<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', {symbol: 'caret-right', size: 'tiny', classes: ['kx-tree__caret'] } %}
            {% render '@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', {symbol: 'caret-right', size: 'tiny', classes: ['kx-tree__caret'] } %}
                    {% render '@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', {symbol: 'caret-right', size: 'tiny', classes: ['kx-tree__caret'] } %}
                            {% render '@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', {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', {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', {symbol: 'caret-right', size: 'tiny', classes: ['kx-tree__caret'] } %}
                            {% render '@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', {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', {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', {symbol: 'caret-right', size: 'tiny', classes: ['kx-tree__caret'] } %}
                            {% render '@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', {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', {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', {symbol: 'caret-right', size: 'tiny', classes: ['kx-tree__caret'] } %}
                    {% render '@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', {symbol: 'caret-right', size: 'tiny', classes: ['kx-tree__caret'] } %}
                            {% render '@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', {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', {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', {symbol: 'caret-right', size: 'tiny', classes: ['kx-tree__caret'] } %}
                            {% render '@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', {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', {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', {symbol: 'caret-right', size: 'tiny', classes: ['kx-tree__caret'] } %}
                            {% render '@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', {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', {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', {symbol: 'caret-right', size: 'tiny', classes: ['kx-tree__caret'] } %}
                    {% render '@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', {symbol: 'caret-right', size: 'tiny', classes: ['kx-tree__caret'] } %}
                            {% render '@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', {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', {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', {symbol: 'caret-right', size: 'tiny', classes: ['kx-tree__caret'] } %}
                            {% render '@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', {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', {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', {symbol: 'caret-right', size: 'tiny', classes: ['kx-tree__caret'] } %}
                            {% render '@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', {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', {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', {symbol: 'caret-right', size: 'tiny', classes: ['kx-tree__caret'] } %}
                    {% render '@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', {symbol: 'caret-right', size: 'tiny', classes: ['kx-tree__caret'] } %}
                            {% render '@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', {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', {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', {symbol: 'caret-right', size: 'tiny', classes: ['kx-tree__caret'] } %}
                            {% render '@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', {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', {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', {symbol: 'caret-right', size: 'tiny', classes: ['kx-tree__caret'] } %}
                            {% render '@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', {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', {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>
/* No context defined for this component. */
  • Content:
    // ==========================================================================
    // Component: tree
    // ==========================================================================
    $icon-size: rem-calc(18);
    
    // Elements (children)
    // ==========================================================================
    .kx-tree__link__txt {
        flex: 1 1 auto;
        margin-left: rem-calc(4);
    }
    
    .kx-tree__link {
        @include type-scale(small);
        @include p(tiny, none, tiny, none);
        @include flex;
        @include flex-nowrap;
        @include align-items-start;
        color: $color-gray-09;
        text-decoration: none;
    
        .kx-is-node > & {
            @include type-weight(extra-bold);
        }
    
        &:hover,
        &:focus {
            text-decoration: none;
        }
    
        &:hover {
            background-color: $color-teal-01;
        }
    }
    
    .kx-tree__item {
        .kx-tree {
            flex: 1 1 auto;
        }
    
        &.kx-is-open {
            > .kx-tree__link {
                .kx-tree__caret {
                    transform: rotateZ(90deg);
                }
    
                + {
                    .kx-tree {
                        display: block;
                    }
                }
            }
        }
    
        &[data-treedepth='1'] {
            .kx-tree__link {
                padding-left: calc(#{$icon-size});
            }
    
            &.kx-is-leaf {
                .kx-tree__link {
                    padding-left: calc(#{$icon-size} * 2);
                }
            }
        }
    
        &[data-treedepth='2'] {
            .kx-tree__link {
                padding-left: calc(#{$icon-size} * 2);
            }
    
            &.kx-is-leaf {
                .kx-tree__link {
                    padding-left: calc(#{$icon-size} * 3);
                }
            }
        }
    
        &[data-treedepth='3'] {
            .kx-tree__link {
                padding-left: calc(#{$icon-size} * 3);
            }
    
            &.kx-is-leaf {
                .kx-tree__link {
                    padding-left: calc(#{$icon-size} * 4);
                }
            }
        }
    
        &[data-treedepth='4'] {
            .kx-tree__link {
                padding-left: calc(#{$icon-size} * 4);
            }
    
            &.kx-is-leaf {
                .kx-tree__link {
                    padding-left: calc(#{$icon-size} * 5);
                }
            }
        }
    
        &[data-treedepth='5'] {
            .kx-tree__link {
                padding-left: calc(#{$icon-size} * 5);
            }
    
            &.kx-is-leaf {
                .kx-tree__link {
                    padding-left: calc(#{$icon-size} * 6);
                }
            }
        }
    
        &[data-treedepth='6'] {
            .kx-tree__link {
                padding-left: calc(#{$icon-size} * 6);
            }
    
            &.kx-is-leaf {
                .kx-tree__link {
                    padding-left: calc(#{$icon-size} * 7);
                }
            }
        }
    
        &[data-treedepth='7'] {
            .kx-tree__link {
                padding-left: calc(#{$icon-size} * 7);
            }
    
            &.kx-is-leaf {
                .kx-tree__link {
                    padding-left: calc(#{$icon-size} * 5);
                }
            }
        }
    
        &[data-treedepth='8'] {
            .kx-tree__link {
                padding-left: calc(#{$icon-size} * 8);
            }
    
            &.kx-is-leaf {
                .kx-tree__link {
                    padding-left: calc(#{$icon-size} * 9);
                }
            }
        }
    
        &[data-treedepth='9'] {
            .kx-tree__link {
                padding-left: calc(#{$icon-size} * 9);
            }
    
            &.kx-is-leaf {
                .kx-tree__link {
                    padding-left: calc(#{$icon-size} * 10);
                }
            }
        }
    
        &[data-treedepth='10'] {
            .kx-tree__link {
                padding-left: calc(#{$icon-size} * 10);
            }
    
            &.kx-is-leaf {
                .kx-tree__link {
                    padding-left: calc(#{$icon-size} * 11);
                }
            }
        }
    }
    
    // Block (parent)
    // ==========================================================================
    .kx-tree {
        @include reset-list;
    
        .kx-icon {
            margin-top: rem-calc(1);
            flex: 0 0 auto;
    
            + .kx-icon {
                @include ml(tiny);
            }
    
            + .kx-tree__link__txt {
                margin-left: rem-calc(6);
            }
        }
    
        .kx-tree__caret {
            margin: rem-calc(4 -1 0 0);
    
            + .kx-tree__link__txt {
                margin-left: rem-calc(10);
            }
        }
    }
    
    // Modifiers
    // ==========================================================================
    
    .kx-is-node {
        > .kx-tree {
            display: none;
        }
    
        &.kx-is-open {
            > .kx-tree {
                display: block;
            }
        }
    }
    
  • URL: /components/raw/tree/_tree.scss
  • Filesystem Path: src\components\01-tree\_tree.scss
  • Size: 4.6 KB

There are no notes for this item.