<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>
<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>
{
  "visible": true,
  "items": [
    {
      "name": "Vessel insight",
      "img": "/assets/img/gfx/logo-vessel-insight.png",
      "icon": null,
      "link": "#"
    },
    {
      "name": "Data Analysis",
      "img": null,
      "icon": "charts",
      "link": "#"
    },
    {
      "name": "Customer Onboarding",
      "img": null,
      "icon": "support",
      "link": "#"
    },
    {
      "name": "Dashboard Builder",
      "img": null,
      "icon": "config",
      "link": "#"
    },
    {
      "name": "Test pages",
      "img": null,
      "icon": "text",
      "link": "#"
    },
    {
      "name": "Cost Optimazation",
      "img": null,
      "icon": null,
      "abr": "CO",
      "link": "#"
    },
    {
      "name": "Test App 7",
      "img": null,
      "icon": "box",
      "link": "#"
    },
    {
      "name": "Test App 8",
      "img": null,
      "icon": "box",
      "link": "#"
    },
    {
      "name": "Test App 9",
      "img": null,
      "icon": "box",
      "link": "#"
    },
    {
      "name": "Dashboard Builder",
      "img": null,
      "icon": "config",
      "link": "#"
    },
    {
      "name": "Test pages",
      "img": null,
      "icon": "text",
      "link": "#"
    }
  ]
}

There are no notes for this item.