<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.