<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 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">
<ul class="list-group list-group-flush h-100 -spacing">
<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 mr-2">
<strong>De Vliethorst</strong>
<span class="text-muted limit-lines-1">Friesland</span>
</div>
</div>
<div class="progress-wrap">
<div class="progress -medium mt-1 mb-1">
<div class="progress-bar" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="text-muted limit-lines-1">Welstand</div>
</div>
</div>
<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 mr-2">
<strong>Havenkade</strong>
<span class="text-muted limit-lines-1">Groningen</span>
</div>
</div>
<div class="progress-wrap">
<div class="progress -medium mt-1 mb-1">
<div class="progress-bar" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="text-muted limit-lines-1">Bestelling</div>
</div>
</div>
<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 mr-2">
<strong>De Vliethorst</strong>
<span class="text-muted limit-lines-1">Flevoland</span>
</div>
</div>
<div class="progress-wrap">
<div class="progress -medium mt-1 mb-1">
<div class="progress-bar" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="text-muted limit-lines-1">Offerte</div>
</div>
</div>
</ul>
</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 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="card-text px-2">
<strong>Veelgestelde vragen over</strong>
<div class="mt-2">
<div class="m-badgeGroup js-badgeGroup -lines-1">
<div class="m-badgeGroup__inner d-flex ">
<span class="badge -border rounded-pill -left">Inloggen</span>
<span class="badge -border rounded-pill -left">Bestanden</span>
<span class="badge -border rounded-pill -left">Notificaties</span>
<span class="badge -border rounded-pill -left">Ontwikkelingen</span>
<span class="badge -border rounded-pill -left">CRM</span>
<span class="badge -border rounded-pill -left">Configurator</span>
</div>
</div>
</div>
</div>
<div class="card-text px-2 mt-45">
<strong>Een probleem melden</strong>
<div class="mt-2">
<div class="m-badgeGroup js-badgeGroup -lines-1">
<div class="m-badgeGroup__inner d-flex ">
<span class="badge -border rounded-pill -left"><i class="icon-mail-alt"></i>Support@fijn.com</span>
<span class="badge -border rounded-pill -left"><i class="icon-question-mark"></i>Topdesk</span>
</div>
</div>
</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 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">
<ul class="list-group list-group-flush h-100 -spacing">
<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">
<strong>Communiceren via taak</strong>
<span class="text-muted limit-lines-1">Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet</span>
</div>
</div>
</div>
<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">
<strong>Notificaties via pop-ups</strong>
<span class="text-muted limit-lines-1">Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet</span>
</div>
</div>
</div>
<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">
<strong>Fijn Coach</strong>
<span class="text-muted limit-lines-1">Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet</span>
</div>
</div>
</div>
</ul>
</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": false
}
No notes defined.