<div class="o-widget -loading card bg-white">
<div class="card-header px-3 px-xl-4 d-flex justify-content-between">
<div class="d-flex align-items-center">
<div class="a-circle -sm -hover bg-green cursor-default">
<i class="icon-user"></i>
</div>
<div class="ml-3">
<h4 class="mb-0 limit-lines-1">Widget titel</h4>
<small class="text-muted align-items-center limit-lines-1">Widget subtitel</small>
</div>
</div>
<div class="o-widget__action ml-3 d-none d-md-block js-widgetDrag">
<div class="a-circle -move -sm -hover -border -pointer cursor-default">
<i class="icon-move"></i>
</div>
</div>
</div>
<div class="card-body py-4 px-3 px-sm-4">
<div class="d-flex align-items-center h-100 justify-content-center">
<div class="a-loader -wave">
<svg class="a-loader__animation" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: rgba(255, 255, 255, 0);" width="75px" viewBox="12.5 38 75 22" preserveAspectRatio="xMidYMid">
<circle cx="70" cy="50" r="10" fill="#69d2c2">
<animate attributeName="r" repeatCount="indefinite" dur="0.5319148936170213s" calcMode="spline" keyTimes="0;1" values="5;0" keySplines="0 0.5 0.5 1" begin="0s"></animate>
<animate attributeName="fill" repeatCount="indefinite" dur="2.127659574468085s" calcMode="discrete" keyTimes="0;0.25;0.5;0.75;1" values="#69d2c2;#0f8d38;#ff85bb;#e3000f;#69d2c2" begin="0s"></animate>
</circle>
<circle cx="30" cy="50" r="5" fill="#69d2c2">
<animate attributeName="r" repeatCount="indefinite" dur="2.127659574468085s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="0;0;5;5;5" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="0s"></animate>
<animate attributeName="cx" repeatCount="indefinite" dur="2.127659574468085s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="30;30;30;50;70" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="0s"></animate>
</circle>
<circle cx="50" cy="50" r="5" fill="#e3000f">
<animate attributeName="r" repeatCount="indefinite" dur="2.127659574468085s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="0;0;5;5;5" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.5319148936170213s"></animate>
<animate attributeName="cx" repeatCount="indefinite" dur="2.127659574468085s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="30;30;30;50;70" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.5319148936170213s"></animate>
</circle>
<circle cx="70" cy="50" r="5" fill="#ff85bb">
<animate attributeName="r" repeatCount="indefinite" dur="2.127659574468085s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="0;0;5;5;5" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-1.0638297872340425s"></animate>
<animate attributeName="cx" repeatCount="indefinite" dur="2.127659574468085s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="30;30;30;50;70" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-1.0638297872340425s"></animate>
</circle>
<circle cx="30" cy="50" r="5" fill="#0f8d38">
<animate attributeName="r" repeatCount="indefinite" dur="2.127659574468085s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="0;0;5;5;5" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-1.5957446808510638s"></animate>
<animate attributeName="cx" repeatCount="indefinite" dur="2.127659574468085s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="30;30;30;50;70" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-1.5957446808510638s"></animate>
</circle>
</svg>
</div>
</div>
</div>
<a href="" class="card-footer d-flex justify-content-center align-items-center">
<span class="mb-0 pr-2">Widget link</span>
<i class="icon-arrow-right"></i>
</a>
</div>
<div class="o-widget{% if loading %} -loading{% endif %} card bg-white">
<div class="card-header px-3 px-xl-4{% if action %} d-flex justify-content-between{% endif %}">
<div class="d-flex align-items-center">
{% render '@circle', {icon:icon, color:icon_color, size:icon_size, pointer:false}, true %}
<div class="ml-3">
<h4 class="mb-0 limit-lines-1">{{ title }}</h4>
{% if subtitle %}
<small class="text-muted align-items-center limit-lines-1">{{ subtitle }}</small>
{% endif %}
</div>
</div>
{% if action %}
<div class="o-widget__action ml-3 d-none d-md-block js-widgetDrag">
{% render '@circle', {icon:'move', size:icon_size}, true %}
</div>
{% endif %}
</div>
<div class="card-body py-4 px-3 px-sm-4">
{% if loading %}
<div class="d-flex align-items-center h-100 justify-content-center">
{% render '@loader--rotate' %}
</div>
{% else %}
{% if content == 'my_orders' or content == 'updates' %}
<ul class="list-group list-group-flush h-100{% if content == 'my_orders' or content == 'updates' %} -spacing{% endif %}">
{% for i in range(0, 3) -%}
{% if content == 'my_orders' %}
{% if i == 0 %}
{% set list_item_title = "De Vliethorst" %}
{% set list_item_sub_title = "Friesland" %}
{% set progress = "65" %}
{% set sublabel = "Welstand" %}
{% elif i == 1 %}
{% set list_item_title = "Havenkade" %}
{% set list_item_sub_title = "Groningen" %}
{% set progress = "20" %}
{% set sublabel = "Bestelling" %}
{% elif i == 2 %}
{% set list_item_title = "De Vliethorst" %}
{% set list_item_sub_title = "Flevoland" %}
{% set progress = "30" %}
{% set sublabel = "Offerte" %}
{% endif %}
{% elif content == 'updates' %}
{% if i == 0 %}
{% set list_item_title = "Communiceren via taak" %}
{% set list_item_sub_title = "Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet" %}
{% elif i == 1 %}
{% set list_item_title = "Notificaties via pop-ups" %}
{% set list_item_sub_title = "Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet" %}
{% elif i == 2 %}
{% set list_item_title = "Fijn Coach" %}
{% set list_item_sub_title = "Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet" %}
{% endif %}
{% endif %}
<div class="list-group-item d-flex justify-content-between align-items-center cursor-pointer">
<div class="d-flex w-100">
<div class="w-100{% if content == 'my_orders' %} mr-2{% endif %}">
<strong>{{ list_item_title }}</strong>
{% if content == 'my_orders' or content == 'updates' %}
<span class="text-muted limit-lines-1">{{ list_item_sub_title }}</span>
{% endif %}
</div>
</div>
{% if content == 'my_orders' %}
{% render '@progress--medium', {progress:progress, label:false, sublabel:sublabel}, true %}
{% endif %}
</div>
{% endfor %}
</ul>
{% elif content == 'support' %}
{% for i in range(0, 2) -%}
{% if i == 0 %}
{% set lines = 1 %}
{% set list_item_title = "Veelgestelde vragen over" %}
{% set badges = ["Inloggen", "Bestanden", "Notificaties", "Ontwikkelingen", "CRM", "Configurator"] %}
{% elif i == 1 %}
{% set lines = 1 %}
{% set list_item_title = "Een probleem melden" %}
{% set badges = [{ title: "Support@fijn.com", icon: "mail-alt" }, { title: "Topdesk", icon: "question-mark"}] %}
{% endif %}
<div class="card-text px-2{% if i == 1 %} mt-45{% endif %}">
<strong>{{ list_item_title }}</strong>
<div class="mt-2">
{% render '@badge-group', {lines:lines, badges:badges}, true %}
</div>
</div>
{% endfor %}
{% endif %}
{% endif %}
</div>
{% if footer %}
<a href="" class="card-footer d-flex justify-content-center align-items-center">
<span class="mb-0 pr-2">{{ footer_text }}</span>
<i class="icon-arrow-right"></i>
</a>
{% endif %}
</div>
{
"title": "Widget titel",
"subtitle": "Widget subtitel",
"icon": "user",
"icon_color": "green",
"icon_size": "sm",
"footer": true,
"footer_text": "Widget link",
"action": true,
"content": "",
"loading": true
}
No notes defined.