Application Selector

HTML

<div class="kx-app-selector kx-shadow-3" style="opacity: 1; visibility:initial">
    <ul class="kx-app-list">
        <li class="kx-app-list__item" title="Vessel insight">
            <a class="kx-app-list__link" href="https://yoursite.com/yourapplication">

                <div class="kx-app-list__logo">
                    <img src="/assets/img/gfx/logo-vessel-insight.png" alt="Vessel Insight" />
                </div>

                <div class="kx-app-list__name">Vessel insight</div>
            </a>
        </li>
        <li class="kx-app-list__item" title="Data Analysis">
            <a class="kx-app-list__link" href="https://yoursite.com/yourapplication">

                <div class="kx-app-list__logo kx-app-list__logo--icon">
                    <i class="kx-icon kx-icon--size-large">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#charts"></use>
        </svg>
    </i>
                </div>

                <div class="kx-app-list__name">Data Analysis</div>
            </a>
        </li>
        <li class="kx-app-list__item" title="Customer Onboarding">
            <a class="kx-app-list__link" href="https://yoursite.com/yourapplication">

                <div class="kx-app-list__logo kx-app-list__logo--icon">
                    <i class="kx-icon kx-icon--size-large">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#support"></use>
        </svg>
    </i>
                </div>

                <div class="kx-app-list__name">Customer Onboarding</div>
            </a>
        </li>
        <li class="kx-app-list__item" title="Dashboard Builder">
            <a class="kx-app-list__link" href="https://yoursite.com/yourapplication">

                <div class="kx-app-list__logo kx-app-list__logo--icon">
                    <i class="kx-icon kx-icon--size-large">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#config"></use>
        </svg>
    </i>
                </div>

                <div class="kx-app-list__name">Dashboard Builder</div>
            </a>
        </li>
        <li class="kx-app-list__item" title="Test pages">
            <a class="kx-app-list__link" href="https://yoursite.com/yourapplication">

                <div class="kx-app-list__logo kx-app-list__logo--icon">
                    <i class="kx-icon kx-icon--size-large">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#text"></use>
        </svg>
    </i>
                </div>

                <div class="kx-app-list__name">Test pages</div>
            </a>
        </li>
        <li class="kx-app-list__item" title="Cost Optimazation">
            <a class="kx-app-list__link" href="https://yoursite.com/yourapplication">

                <div class="kx-app-list__logo kx-app-list__logo--placeholder">
                    <div class="kx-icon-placeholder__name">CO</div>
                </div>

                <div class="kx-app-list__name">Cost Optimazation</div>
            </a>
        </li>
        <li class="kx-app-list__item" title="Test App 7">
            <a class="kx-app-list__link" href="https://yoursite.com/yourapplication">

                <div class="kx-app-list__logo kx-app-list__logo--icon">
                    <i class="kx-icon kx-icon--size-large">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#box"></use>
        </svg>
    </i>
                </div>

                <div class="kx-app-list__name">Test App 7</div>
            </a>
        </li>
        <li class="kx-app-list__item" title="Test App 8">
            <a class="kx-app-list__link" href="https://yoursite.com/yourapplication">

                <div class="kx-app-list__logo kx-app-list__logo--icon">
                    <i class="kx-icon kx-icon--size-large">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#box"></use>
        </svg>
    </i>
                </div>

                <div class="kx-app-list__name">Test App 8</div>
            </a>
        </li>
        <li class="kx-app-list__item" title="Test App 9">
            <a class="kx-app-list__link" href="https://yoursite.com/yourapplication">

                <div class="kx-app-list__logo kx-app-list__logo--icon">
                    <i class="kx-icon kx-icon--size-large">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#box"></use>
        </svg>
    </i>
                </div>

                <div class="kx-app-list__name">Test App 9</div>
            </a>
        </li>
        <li class="kx-app-list__item" title="Dashboard Builder">
            <a class="kx-app-list__link" href="https://yoursite.com/yourapplication">

                <div class="kx-app-list__logo kx-app-list__logo--icon">
                    <i class="kx-icon kx-icon--size-large">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#config"></use>
        </svg>
    </i>
                </div>

                <div class="kx-app-list__name">Dashboard Builder</div>
            </a>
        </li>
        <li class="kx-app-list__item" title="Test pages">
            <a class="kx-app-list__link" href="https://yoursite.com/yourapplication">

                <div class="kx-app-list__logo kx-app-list__logo--icon">
                    <i class="kx-icon kx-icon--size-large">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#text"></use>
        </svg>
    </i>
                </div>

                <div class="kx-app-list__name">Test pages</div>
            </a>
        </li>
    </ul>
</div>

View

<div class="kx-app-selector kx-shadow-3" {% if visible %} style="opacity: 1; visibility:initial" {% endif %}>
    <ul class="kx-app-list">
        {% for item in items -%}
        <li class="kx-app-list__item" title="{{ item.name }}">
            <a class="kx-app-list__link" href="https://yoursite.com/yourapplication">
            {% if item.img %}
                <div class="kx-app-list__logo">
                    <img src="{{ item.img }}" alt="Vessel Insight" />
                </div>
            {% endif %}

            {% if item.icon %}
                <div class="kx-app-list__logo kx-app-list__logo--icon">
                    {% render '@icon', {type: 'icon', symbol: item.icon, size: 'large' } %}
                </div>
            {% endif %}

            {% if item.abr %}
                <div class="kx-app-list__logo kx-app-list__logo--placeholder">
                    <div class="kx-icon-placeholder__name">{{ item.abr }}</div>
                </div>
            {% endif %}
                <div class="kx-app-list__name">{{ item.name }}</div>
            </a>
        </li>
        {% endfor -%}
    </ul>
</div>