Widget that should be dislayed on a an overview. It contains a header with a content block underneath. The content can contain any other component such as table, calendar or a list of notifications.
<div class="m-dashboard-widget ">
<header class="m-dashboard-widget__header">
<h4 class="m-dashboard-widget__title">Title</h4>
<a class="m-dashboard-widget__action" href="">action</a>
</header>
<div class="m-dashboard-widget__content">
<div class="m-datepicker s-flatpicker-inline js-datepicker ">
<input type="hidden" class="m-datepicker__input" id="datepicker-example-2" />
</div>
</div>
</div>
<div class="m-dashboard-widget ">
<header class="m-dashboard-widget__header">
<h4 class="m-dashboard-widget__title">Title</h4>
<a class="m-dashboard-widget__action" href="">action</a>
</header>
<div class="m-dashboard-widget__content">
<ul class="m-notification-list">
<li class="m-notification-list__item">
<article class="m-notification ">
<p class="m-notification__description">
Vergeet de evaluatie voor “Excel basis” niet in te vullen alvorens je volgende les start
</p>
<time class="m-notification__time" datetime="1:20 pm">1:20 pm</time>
<button class="m-notification__state">
Markeren als gelezen
</button>
</article>
</li>
<li class="m-notification-list__item">
<article class="m-notification is-read">
<p class="m-notification__description">
Vergeet de evaluatie voor “Excel basis” niet in te vullen alvorens je volgende les start
</p>
<time class="m-notification__time" datetime="1:20 pm">1:20 pm</time>
<button class="m-notification__state">
Gelezen
</button>
</article>
</li>
<li class="m-notification-list__item">
<article class="m-notification is-read">
<p class="m-notification__description">
Vergeet de evaluatie voor “Excel basis” niet in te vullen alvorens je volgende les start
</p>
<time class="m-notification__time" datetime="1:20 pm">1:20 pm</time>
<button class="m-notification__state">
Gelezen
</button>
</article>
</li>
<li class="m-notification-list__item">
<article class="m-notification is-read">
<p class="m-notification__description">
Vergeet de evaluatie voor “Excel basis” niet in te vullen alvorens je volgende les start
</p>
<time class="m-notification__time" datetime="1:20 pm">1:20 pm</time>
<button class="m-notification__state">
Gelezen
</button>
</article>
</li>
</ul>
</div>
</div>
<div class="m-dashboard-widget ">
<header class="m-dashboard-widget__header">
<h4 class="m-dashboard-widget__title">Title</h4>
<a class="m-dashboard-widget__action" href="">action</a>
</header>
<div class="m-dashboard-widget__content">
<div class="o-table ">
<table class="o-table__content">
<thead class="o-table__header">
<tr class="o-table__header-row">
<th class="o-table__title-4-12 o-table__title--sortable">Name</th>
<th class="o-table__title-4-12 o-table__title--sortable">Occupation</th>
<th class="o-table__title-4-12 o-table__title--sortable">Date of birth</th>
</tr>
</thead>
<tbody class="o-table__body">
<tr class="o-table__row">
<td class="o-table__col-4-12">John Doe</td>
<td class="o-table__col-4-12">Teacher</td>
<td class="o-table__col-4-12">01/12/1991</td>
</tr>
<tr class="o-table__row">
<td class="o-table__col-4-12">John Doe</td>
<td class="o-table__col-4-12">Teacher</td>
<td class="o-table__col-4-12">01/12/1991</td>
</tr>
<tr class="o-table__row">
<td class="o-table__col-4-12">John Doe</td>
<td class="o-table__col-4-12">Teacher</td>
<td class="o-table__col-4-12">01/12/1991</td>
</tr>
<tr class="o-table__row">
<td class="o-table__col-4-12">John Doe</td>
<td class="o-table__col-4-12">Teacher</td>
<td class="o-table__col-4-12">01/12/1991</td>
</tr>
<tr class="o-table__row">
<td class="o-table__col-4-12">John Doe</td>
<td class="o-table__col-4-12">Teacher</td>
<td class="o-table__col-4-12">01/12/1991</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>