<div id="header" class="main clearfix">
<nav class="navbar navbar-expand-xl navbar-light d-flex align-items-start">
<button class="navbar-toggler js-toggleMenu" type="button" aria-controls="navbarToggleMobileMenu" aria-label="Toggle navigation">
<svg width="22" height="14" viewBox="0 0 22 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="22" height="2" rx="1" fill="black" />
<rect y="6" width="22" height="2" rx="1" fill="black" />
<rect y="12" width="22" height="2" rx="1" fill="black" />
</svg>
</button>
<a href="index.html" class="navbar-brand"><img src="../../img/logos/logo-portaal.svg" alt="logo"></a>
<div class="component navigation navigation-title navbar-nav flex-column js-navigation">
<div class="component-content">
<nav>
<ul class="clearfix">
<li class="level1 item0 odd first rel-level1">
<div class="navigation-title field-navigationtitle">
<a class="-active" title="Overzicht" href="/">Overzicht</a>
</div>
</li>
<li class="level1 item1 even rel-level1">
<div class="navigation-title field-navigationtitle">
<a class="" title="Bestellingen" href="/">Bestellingen</a>
</div>
</li>
<li class="level1 item2 odd rel-level1">
<div class="navigation-title field-navigationtitle">
<a class="" title="Woningen" href="/">Woningen</a>
</div>
</li>
<li class="level1 item3 even rel-level1">
<div class="navigation-title field-navigationtitle">
<a class="" title="Bewoners" href="/">Bewoners</a>
</div>
</li>
</ul>
</nav>
</div>
</div>
</nav>
</div>
<div id="content" class="main clearfix">
<div class="component contentHeader o-contentHeader d-flex align-items-center">
<div class="component-content">
<div class="row no-gutters w-100 h-100">
<div class="o-contentHeader__left col col-md-6 d-flex align-items-center position-static">
<div class="d-flex align-items-center">
<a href="index.html" class="o-contentHeader__logoAction mr-2 mr-md-3 -action">
<img src="../../img/logos/logo-portaal.svg" alt="logo">
<div class="a-circle -button -hover -border"><i class="icon-arrow-round-left"></i></div>
</a>
<div class="d-flex flex-column justify-content-center">
<h1 class="o-contentHeader__title d-flex align-items-center">
<span class="o-contentHeader__titleText">Dashboard</span>
</h1>
<small class="text-muted">Dit is een subtitle</small>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content js-content">
<h2>Welkom, Marcella,</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur volutpat luctus.</p>
<div class="o-dashboard row gutters-20 js-sortable">
<div class="col-12 col-sm-6 col-lg-4 col-xxxxxl-3 mb-3">
<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-turquoise cursor-default">
<i class="icon-rocket"></i>
</div>
<div class="ml-3">
<h4 class="mb-0 limit-lines-1">Mijn bestellingen</h4>
<small class="text-muted align-items-center limit-lines-1">Laatste gewijzigde bestellingen</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">Naar bestellijst</span>
<i class="icon-arrow-right"></i>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-4 col-xxxxxl-3 mb-3">
<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-orange cursor-default">
<i class="icon-question-mark"></i>
</div>
<div class="ml-3">
<h4 class="mb-0 limit-lines-1">Support</h4>
</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">Alle veelgestelde vragen</span>
<i class="icon-arrow-right"></i>
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-4 col-xxxxxl-3 mb-3">
<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-cyaan cursor-default">
<i class="icon-megaphone"></i>
</div>
<div class="ml-3">
<h4 class="mb-0 limit-lines-1">Updates</h4>
<small class="text-muted align-items-center limit-lines-1">Nieuwste updates</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">Naar updates</span>
<i class="icon-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="footer" class="main clearfix">
<div tabindex="0" class="a-avatar bg-brown rounded-circle d-inline-flex justify-content-center align-items-center" data-toggle="popover" data-placement="top" data-trigger="click" data-html="true" title="" data-custom-class="-menu" ">
MV
</div>
<div class=" popover-content">
<div class='dropdown-item'>Account instellingen</div>
<div class='dropdown-item'>Uitloggen</div>
</div>
<ul class="m-iconMenu text-secondary mb-0 d-flex flex-xl-column align-items-center list-unstyled">
<li><i class="icon-chat1"></i></li>
<li><i class="icon-bell"></i></li>
<li><i class="icon-question-mark"></i></li>
</ul>
</div>
{% extends '@layout' %}
{% block content %}
<h2>Welkom, Marcella,</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur volutpat luctus.</p>
<div class="o-dashboard row gutters-20 js-sortable">
<div class="col-12 col-sm-6 col-lg-4 col-xxxxxl-3 mb-3">
{% render '@widget', {title:'Mijn bestellingen', subtitle:'Laatste gewijzigde bestellingen', icon:'rocket', icon_color:'turquoise', footer_text:'Naar bestellijst', footer:footer, action:action, my_orders:true, content:'my_orders', loading:loading}, true %}
</div>
<div class="col-12 col-sm-6 col-lg-4 col-xxxxxl-3 mb-3">
{% render '@widget', {title:'Support', subtitle:false, icon:'question-mark', icon_color:'orange', footer_text:'Alle veelgestelde vragen', footer:footer, action:action, content:'support', loading:loading}, true %}
</div>
<div class="col-12 col-sm-6 col-lg-4 col-xxxxxl-3 mb-3">
{% render '@widget', {title:'Updates', subtitle:'Nieuwste updates', icon:'megaphone', icon_color:'cyaan', footer_text:'Naar updates', footer:footer, action:action, content:'updates', loading:loading}, true %}
</div>
</div>
{% endblock %}
{
"default_menu": "zakelijk",
"content_header": {
"title": "Dashboard",
"subtitle": "Dit is een subtitle"
},
"loading": true
}
No notes defined.