<div class="o-stack o-stack--vertical o-stack--32">
<header class="c-header">
<div class="c-header__main">
<div class="c-dropdown">
<div class="c-dropdown__trigger">
<button
type="transparent"
slot="trigger"
class="c-button c-button--transparent c-button--large c-button--icon-only c-button--inverted"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
</div>
<div class="c-dropdown__content">
<div class="c-menu">
<div class="c-menu__title">Overviews</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div
class="c-menu__icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-menu__text">
<div class="c-menu__label">
Organisation
</div>
<div class="c-menu__description">
Demo 012
</div>
</div>
<div class="c-menu__shortkey">
<kbd class="c-shortkey">200</kbd>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link c-menu__link--active"
>
<div
class="c-menu__icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-menu__text">
<div class="c-menu__label">Person</div>
<div class="c-menu__description">
Selina Decruse
</div>
</div>
<div class="c-menu__shortkey">
<kbd class="c-shortkey">300</kbd>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div
class="c-menu__icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-menu__text">
<div class="c-menu__label">Contract</div>
<div class="c-menu__description">
15/04/2024 - …
</div>
</div>
<div class="c-menu__shortkey">
<kbd class="c-shortkey">400</kbd>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div
class="c-menu__icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-menu__text">
<div class="c-menu__label">SOF</div>
<div class="c-menu__description">
Sof Name
</div>
</div>
<div class="c-menu__shortkey">
<kbd class="c-shortkey">500</kbd>
</div>
</a>
</div>
<div class="c-menu__divider"></div>
<div class="c-menu__title">Most recent</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-entity">
<div class="c-entity__line">
<div
class="c-entity__icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-entity__label">
Demo Stage 2020
</div>
<div class="c-entity__code">990014</div>
</div>
</div>
<div
class="c-menu__chevron c-icon c-icon--extra-small"
>
<!-- SVG element -->
</div>
</a>
<div class="c-dropdown">
<div class="c-dropdown__content">
<div class="c-menu">
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-entity">
<div class="c-entity__line">
<div
class="c-entity__icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-entity__label">
Gabi Hauck
</div>
<div class="c-entity__code">
100001
</div>
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-entity">
<div class="c-entity__line">
<div
class="c-entity__icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-entity__label">
Jan Verveck
</div>
<div class="c-entity__code">
100001
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-entity">
<div class="c-entity__line">
<div
class="c-entity__icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-entity__label">
Hrms BV
</div>
<div class="c-entity__code">990011</div>
</div>
</div>
<div
class="c-menu__chevron c-icon c-icon--extra-small"
>
<!-- SVG element -->
</div>
</a>
<div class="c-dropdown">
<div class="c-dropdown__content">
<div class="c-menu">
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-entity">
<div class="c-entity__line">
<div
class="c-entity__icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-entity__label">
Annick Peeters
</div>
<div class="c-entity__code">
100015
</div>
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-entity">
<div class="c-entity__line">
<div
class="c-entity__icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-entity__label">
Jan Janssens
</div>
<div class="c-entity__code">
100016
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="c-menu__content">
<div class="c-field-group">
<button class="c-button c-button--small">
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
<span class="c-button__label">
Show more
</span>
</button>
<button class="c-button c-button--small">
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
<span class="c-button__label">
Clear history
</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="c-header__breadcrumbs">
<div
class="c-field-group c-field-group--merged c-field-group--dark c-field-group--breadcrumbs"
>
<button
type="dark"
class="c-button c-button--dark c-button--large c-button--icon-only c-button--inverted"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
<div class="c-dropdown c-dropdown--hover">
<div class="c-dropdown__trigger">
<button
type="dark"
slot="trigger"
class="c-button c-button--dark c-button--large c-button--inverted"
>
<span class="c-button__label">
Demo 012
</span>
</button>
</div>
<div class="c-dropdown__content">
<div
class="c-popover c-popover--large c-popover--muted"
>
<div class="c-popover__header">
<h2 class="c-popover__title">
Demo 012 (100012)
</h2>
<div class="c-popover__toolbar">
<div class="o-toolbar">
<div class="o-toolbar__left">
<button
class="c-button c-button--small c-button--icon-only"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
</div>
<div class="o-toolbar__right">
<button
class="c-button c-button--small"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
<span class="c-button__label">
Add/edit note
</span>
</button>
</div>
</div>
</div>
</div>
<div class="c-popover__content">
<div class="c-notes">
<div class="c-note">
<div class="c-note__header">
<div class="c-note__info">
<div class="c-note__author">
Martine Jaspers
</div>
<div class="c-note__date">
15/04/2024 10:00
</div>
</div>
<div class="c-note__type">
Informative
</div>
</div>
<div class="c-note__content">
<div class="c-note__actions">
<div
class="o-stack o-stack--4 o-stack--align-center"
>
<div class="c-note__expand">
<button
type="transparent"
class="c-button c-button--transparent c-button--small c-button--icon-only"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
</div>
</div>
</div>
<div class="c-note__scroll">
<h1>
Arbeiders (PC 116.00) TWB: 40/40
</h1>
<p>
Maatpersoon RVA: 38u/week
<br />
Percentage Paid: 104,84
</p>
<h1>
Arbeiders (PC 116.00)
<em>
TWB: 24/24 weekend-werker
</em>
</h1>
<p>
Contracttype: Voltijds
<br />
Maatpersoon RVA:
<em>blanco laten</em>
<br />
Percentage Paid:
<em>0</em>
</p>
<h1>Maaltijdcheques</h1>
<p>
Pas na 6 mnd dienst (dag op
dag)! Interimperiode telt mee
voor berekening anc. voor MC
</p>
<h1>Bedragen</h1>
<p></p>
<ul>
<li>Vanaf 01.01.2019: 3,78</li>
<li>Vanaf 01.09.2019: 4,28</li>
<li>
vanaf 01.01.2021:
<em>7,00 weekend</em>
werkers, 5,28 gewone arbeiders
</li>
<li>
Vanaf 01.01.2022:
<em>7,30 weekend</em>
werkers, 6,28 gewone arbeiders
</li>
<li>
Vanaf 01.01.2023:
<em>7,60 weekend</em>
werkers, 7,28 gewone arbeiders
</li>
<li>
Vanaf 01.01.2024:
<em>8,00 weekend</em>
werkers, 8,00 gewone arbeiders
</li>
<li>
Vanaf 01.01.2023 wijziging
loonbeleid bedienden: MC €4
(archief 23.02.2023)
</li>
<li>
Vanaf 01.01.2024 wijziging MC
naar €5 voor bedienden
(archief 16.01.2024)
</li>
</ul>
<h1>Voorschotten</h1>
<p>
Voor nieuwe werknemers steeds de
voorschotten ingeven in
verloningsparameters!
<br />
(voor bedienden ingeven met '0')
</p>
<h1>Sociaal abonnement</h1>
<p>
Steeds ingeven als DAG-bedrag
(géén maandbedrag)!
</p>
</div>
</div>
</div>
<div class="c-note">
<div class="c-note__header">
<div class="c-note__info">
<div class="c-note__author">
Jan Janssens
</div>
<div class="c-note__date">
12/05/2024 12:00
</div>
</div>
<div class="c-note__type">
Informative
</div>
</div>
<div class="c-note__content">
<div class="c-note__actions">
<div
class="o-stack o-stack--4 o-stack--align-center"
>
<div class="c-note__expand">
<button
type="transparent"
class="c-button c-button--transparent c-button--small c-button--icon-only"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
</div>
</div>
</div>
<div class="c-note__scroll">
<p>
Lorem ipsum dolor sit amet
consectetur adipisicing elit.
Quisquam, quos.
</p>
</div>
</div>
</div>
<div class="c-note">
<div class="c-note__header">
<div class="c-note__info">
<div class="c-note__author">
Emma Thompson
</div>
<div class="c-note__date">
12/05/2024 12:00
</div>
</div>
<div class="c-note__type">
Regels voor nieuwe
werknemers/contracten
</div>
</div>
<div class="c-note__content">
<div class="c-note__actions">
<div
class="o-stack o-stack--4 o-stack--align-center"
>
<div class="c-note__expand">
<button
type="transparent"
class="c-button c-button--transparent c-button--small c-button--icon-only"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
</div>
</div>
</div>
<div class="c-note__scroll">
<p>
Lorem ipsum dolor sit amet
consectetur adipisicing elit.
Quisquam, quos.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="c-dropdown c-dropdown--hover">
<div class="c-dropdown__trigger">
<button
type="primary"
slot="trigger"
class="c-button c-button--primary c-button--large c-button--inverted"
>
<span class="c-button__label">
Selina Decruse
</span>
</button>
</div>
<div class="c-dropdown__content">
<div
class="c-popover c-popover--large c-popover--muted"
>
<div class="c-popover__header">
<h2 class="c-popover__title">
Selina Decruse (100012)
</h2>
<div class="c-popover__toolbar">
<div class="o-toolbar">
<div class="o-toolbar__left">
<div class="c-field-group">
<div
class="c-field-group c-field-group--merged"
>
<button
class="c-button c-button--small c-button--icon-only"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
<button
class="c-button c-button--small c-button--icon-only"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
<button
class="c-button c-button--small c-button--icon-only"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
<button
class="c-button c-button--small c-button--icon-only"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
</div>
<button
class="c-button c-button--small c-button--icon-only"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
</div>
</div>
<div class="o-toolbar__right">
<button
class="c-button c-button--small"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
<span class="c-button__label">
Add/edit note
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="c-dropdown c-dropdown--hover">
<div class="c-dropdown__trigger">
<button
type="dark"
slot="trigger"
class="c-button c-button--dark c-button--large c-button--inverted"
>
<span class="c-button__label">
15/04/2024 - …
</span>
</button>
</div>
<div class="c-dropdown__content">
<div
class="c-popover c-popover--large c-popover--muted"
>
<div class="c-popover__header">
<h2 class="c-popover__title">
Contract (5/04-2024 - …)
</h2>
<div class="c-popover__toolbar">
<div class="o-toolbar">
<div class="o-toolbar__left">
<div class="c-field-group">
<button
class="c-button c-button--small c-button--icon-only"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
</div>
</div>
<div class="o-toolbar__right">
<div
class="o-stack o-stack--8 o-stack--dotted o-text-md"
>
<span>Bediende PC200</span>
<span>010/495</span>
<span>5d 38/38u</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="c-header__tabs">
<div class="c-session-tabs">
<div class="c-session-tab c-session-tab--empty">
<a
href="#"
class="c-session-tab__link"
></a>
<div class="c-session-tab__empty">
<div
class="c-session-tab__empty-icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-session-tab__empty-label">
Session 1
</div>
</div>
</div>
<div class="c-session-tab c-session-tab--empty">
<a
href="#"
class="c-session-tab__link"
></a>
<div class="c-session-tab__empty">
<div
class="c-session-tab__empty-icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-session-tab__empty-label">
Session 2
</div>
</div>
</div>
<div class="c-session-tab c-session-tab--empty">
<a
href="#"
class="c-session-tab__link"
></a>
<div class="c-session-tab__empty">
<div
class="c-session-tab__empty-icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-session-tab__empty-label">
Session 3
</div>
</div>
</div>
</div>
</div>
<div class="c-header__actions">
<div class="c-stack">
<button
type="transparent"
class="c-button c-button--transparent c-button--icon-only c-button--inverted"
>
<span
class="c-button__icon c-icon c-icon--small c-icon--normal"
>
<!-- SVG element -->
</span>
</button>
<button
type="transparent"
class="c-button c-button--transparent c-button--icon-only c-button--inverted"
>
<span
class="c-button__icon c-icon c-icon--small c-icon--normal"
>
<!-- SVG element -->
</span>
</button>
<button
type="transparent"
class="c-button c-button--transparent c-button--icon-only c-button--inverted"
>
<span
class="c-button__icon c-icon c-icon--small c-icon--normal"
>
<!-- SVG element -->
</span>
</button>
</div>
</div>
<div class="c-header__menu-background"></div>
<div class="c-header__menu">
<div class="o-stack o-stack--12">
<div class="c-menu-bar">
<div class="c-field-group c-field-group--merged">
<div class="c-dropdown">
<div class="c-dropdown__trigger">
<button
slot="trigger"
class="c-button"
>
<span class="c-button__label">
Person
</span>
<span
class="c-button__chevron c-icon c-icon--extra-small"
>
<!-- SVG element -->
</span>
</button>
</div>
<div class="c-dropdown__content">
<div class="c-menu">
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Start
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Data
</div>
</div>
<div
class="c-menu__chevron c-icon c-icon--extra-small"
>
<!-- SVG element -->
</div>
</a>
<div class="c-dropdown">
<div class="c-dropdown__content">
<div class="c-menu">
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Child menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Child menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Child menu item
</div>
</div>
<div
class="c-menu__chevron c-icon c-icon--extra-small"
>
<!-- SVG element -->
</div>
</a>
<div class="c-dropdown">
<div
class="c-dropdown__content"
>
<div class="c-menu">
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div
class="c-menu__text"
>
<div
class="c-menu__label"
>
Child menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div
class="c-menu__text"
>
<div
class="c-menu__label"
>
Child menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div
class="c-menu__text"
>
<div
class="c-menu__label"
>
Child menu item
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Child menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Child menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Child menu item
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Other data
</div>
</div>
<div
class="c-menu__chevron c-icon c-icon--extra-small"
>
<!-- SVG element -->
</div>
</a>
<div class="c-dropdown">
<div class="c-dropdown__content">
<div class="c-menu">
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Child menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Child menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Child menu item
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Notes
</div>
</div>
</a>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Archive
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="c-dropdown">
<div class="c-dropdown__trigger">
<button
slot="trigger"
class="c-button"
>
<span class="c-button__label">
Employment
</span>
<span
class="c-button__chevron c-icon c-icon--extra-small"
>
<!-- SVG element -->
</span>
</button>
</div>
<div class="c-dropdown__content">
<div class="c-menu">
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Menu item
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="c-dropdown">
<div class="c-dropdown__trigger">
<button
slot="trigger"
class="c-button"
>
<span class="c-button__label">
Calendar
</span>
<span
class="c-button__chevron c-icon c-icon--extra-small"
>
<!-- SVG element -->
</span>
</button>
</div>
<div class="c-dropdown__content">
<div class="c-menu">
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Menu item
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="c-dropdown">
<div class="c-dropdown__trigger">
<button
slot="trigger"
class="c-button"
>
<span class="c-button__label">
Contracts
</span>
<span
class="c-button__chevron c-icon c-icon--extra-small"
>
<!-- SVG element -->
</span>
</button>
</div>
<div class="c-dropdown__content">
<div class="c-menu">
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Menu item
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="c-dropdown">
<div class="c-dropdown__trigger">
<button
slot="trigger"
class="c-button"
>
<span class="c-button__label">Other</span>
<span
class="c-button__chevron c-icon c-icon--extra-small"
>
<!-- SVG element -->
</span>
</button>
</div>
<div class="c-dropdown__content">
<div class="c-menu">
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Menu item
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="c-header__session c-header__session--inactive"
>
<div class="o-stack o-stack--justify-end">
<div class="c-field-group c-field-group--merged">
<button class="c-button c-button--icon-only">
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
<div
class="c-textfield c-textfield--icon c-textfield--width-small c-textfield--center"
>
<input
class="c-textfield__input"
type="text"
value="2024/09"
readonly
/>
<div class="c-textfield__icon c-icon">
<!-- SVG element -->
</div>
</div>
<button class="c-button c-button--icon-only">
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
</div>
</div>
</div>
</header>
<header class="c-header">
<div class="c-header__main">
<div class="c-dropdown">
<div class="c-dropdown__trigger">
<button
type="transparent"
slot="trigger"
class="c-button c-button--transparent c-button--large c-button--icon-only c-button--inverted"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
</div>
<div class="c-dropdown__content">
<div class="c-menu">
<div class="c-menu__title">Overviews</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div
class="c-menu__icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-menu__text">
<div class="c-menu__label">
Organisation
</div>
<div class="c-menu__description">
Demo 012
</div>
</div>
<div class="c-menu__shortkey">
<kbd class="c-shortkey">200</kbd>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link c-menu__link--active"
>
<div
class="c-menu__icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-menu__text">
<div class="c-menu__label">Person</div>
<div class="c-menu__description">
Selina Decruse
</div>
</div>
<div class="c-menu__shortkey">
<kbd class="c-shortkey">300</kbd>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div
class="c-menu__icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-menu__text">
<div class="c-menu__label">Contract</div>
<div class="c-menu__description">
15/04/2024 - …
</div>
</div>
<div class="c-menu__shortkey">
<kbd class="c-shortkey">400</kbd>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div
class="c-menu__icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-menu__text">
<div class="c-menu__label">SOF</div>
<div class="c-menu__description">
Sof Name
</div>
</div>
<div class="c-menu__shortkey">
<kbd class="c-shortkey">500</kbd>
</div>
</a>
</div>
<div class="c-menu__divider"></div>
<div class="c-menu__title">Most recent</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-entity">
<div class="c-entity__line">
<div
class="c-entity__icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-entity__label">
Demo Stage 2020
</div>
<div class="c-entity__code">990014</div>
</div>
</div>
<div
class="c-menu__chevron c-icon c-icon--extra-small"
>
<!-- SVG element -->
</div>
</a>
<div class="c-dropdown">
<div class="c-dropdown__content">
<div class="c-menu">
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-entity">
<div class="c-entity__line">
<div
class="c-entity__icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-entity__label">
Gabi Hauck
</div>
<div class="c-entity__code">
100001
</div>
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-entity">
<div class="c-entity__line">
<div
class="c-entity__icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-entity__label">
Jan Verveck
</div>
<div class="c-entity__code">
100001
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-entity">
<div class="c-entity__line">
<div
class="c-entity__icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-entity__label">
Hrms BV
</div>
<div class="c-entity__code">990011</div>
</div>
</div>
<div
class="c-menu__chevron c-icon c-icon--extra-small"
>
<!-- SVG element -->
</div>
</a>
<div class="c-dropdown">
<div class="c-dropdown__content">
<div class="c-menu">
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-entity">
<div class="c-entity__line">
<div
class="c-entity__icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-entity__label">
Annick Peeters
</div>
<div class="c-entity__code">
100015
</div>
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-entity">
<div class="c-entity__line">
<div
class="c-entity__icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-entity__label">
Jan Janssens
</div>
<div class="c-entity__code">
100016
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="c-menu__content">
<div class="c-field-group">
<button class="c-button c-button--small">
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
<span class="c-button__label">
Show more
</span>
</button>
<button class="c-button c-button--small">
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
<span class="c-button__label">
Clear history
</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="c-header__breadcrumbs">
<div
class="c-field-group c-field-group--merged c-field-group--dark c-field-group--breadcrumbs"
>
<button
type="dark"
class="c-button c-button--dark c-button--large c-button--icon-only c-button--inverted"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
<div class="c-dropdown c-dropdown--hover">
<div class="c-dropdown__trigger">
<button
type="dark"
slot="trigger"
class="c-button c-button--dark c-button--large c-button--inverted"
>
<span class="c-button__label">
Demo 012
</span>
</button>
</div>
<div class="c-dropdown__content">
<div
class="c-popover c-popover--large c-popover--muted"
>
<div class="c-popover__header">
<h2 class="c-popover__title">
Demo 012 (100012)
</h2>
<div class="c-popover__toolbar">
<div class="o-toolbar">
<div class="o-toolbar__left">
<button
class="c-button c-button--small c-button--icon-only"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
</div>
<div class="o-toolbar__right">
<button
class="c-button c-button--small"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
<span class="c-button__label">
Add/edit note
</span>
</button>
</div>
</div>
</div>
</div>
<div class="c-popover__content">
<div class="c-notes">
<div class="c-note">
<div class="c-note__header">
<div class="c-note__info">
<div class="c-note__author">
Martine Jaspers
</div>
<div class="c-note__date">
15/04/2024 10:00
</div>
</div>
<div class="c-note__type">
Informative
</div>
</div>
<div class="c-note__content">
<div class="c-note__actions">
<div
class="o-stack o-stack--4 o-stack--align-center"
>
<div class="c-note__expand">
<button
type="transparent"
class="c-button c-button--transparent c-button--small c-button--icon-only"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
</div>
</div>
</div>
<div class="c-note__scroll">
<h1>
Arbeiders (PC 116.00) TWB: 40/40
</h1>
<p>
Maatpersoon RVA: 38u/week
<br />
Percentage Paid: 104,84
</p>
<h1>
Arbeiders (PC 116.00)
<em>
TWB: 24/24 weekend-werker
</em>
</h1>
<p>
Contracttype: Voltijds
<br />
Maatpersoon RVA:
<em>blanco laten</em>
<br />
Percentage Paid:
<em>0</em>
</p>
<h1>Maaltijdcheques</h1>
<p>
Pas na 6 mnd dienst (dag op
dag)! Interimperiode telt mee
voor berekening anc. voor MC
</p>
<h1>Bedragen</h1>
<p></p>
<ul>
<li>Vanaf 01.01.2019: 3,78</li>
<li>Vanaf 01.09.2019: 4,28</li>
<li>
vanaf 01.01.2021:
<em>7,00 weekend</em>
werkers, 5,28 gewone arbeiders
</li>
<li>
Vanaf 01.01.2022:
<em>7,30 weekend</em>
werkers, 6,28 gewone arbeiders
</li>
<li>
Vanaf 01.01.2023:
<em>7,60 weekend</em>
werkers, 7,28 gewone arbeiders
</li>
<li>
Vanaf 01.01.2024:
<em>8,00 weekend</em>
werkers, 8,00 gewone arbeiders
</li>
<li>
Vanaf 01.01.2023 wijziging
loonbeleid bedienden: MC €4
(archief 23.02.2023)
</li>
<li>
Vanaf 01.01.2024 wijziging MC
naar €5 voor bedienden
(archief 16.01.2024)
</li>
</ul>
<h1>Voorschotten</h1>
<p>
Voor nieuwe werknemers steeds de
voorschotten ingeven in
verloningsparameters!
<br />
(voor bedienden ingeven met '0')
</p>
<h1>Sociaal abonnement</h1>
<p>
Steeds ingeven als DAG-bedrag
(géén maandbedrag)!
</p>
</div>
</div>
</div>
<div class="c-note">
<div class="c-note__header">
<div class="c-note__info">
<div class="c-note__author">
Jan Janssens
</div>
<div class="c-note__date">
12/05/2024 12:00
</div>
</div>
<div class="c-note__type">
Informative
</div>
</div>
<div class="c-note__content">
<div class="c-note__actions">
<div
class="o-stack o-stack--4 o-stack--align-center"
>
<div class="c-note__expand">
<button
type="transparent"
class="c-button c-button--transparent c-button--small c-button--icon-only"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
</div>
</div>
</div>
<div class="c-note__scroll">
<p>
Lorem ipsum dolor sit amet
consectetur adipisicing elit.
Quisquam, quos.
</p>
</div>
</div>
</div>
<div class="c-note">
<div class="c-note__header">
<div class="c-note__info">
<div class="c-note__author">
Emma Thompson
</div>
<div class="c-note__date">
12/05/2024 12:00
</div>
</div>
<div class="c-note__type">
Regels voor nieuwe
werknemers/contracten
</div>
</div>
<div class="c-note__content">
<div class="c-note__actions">
<div
class="o-stack o-stack--4 o-stack--align-center"
>
<div class="c-note__expand">
<button
type="transparent"
class="c-button c-button--transparent c-button--small c-button--icon-only"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
</div>
</div>
</div>
<div class="c-note__scroll">
<p>
Lorem ipsum dolor sit amet
consectetur adipisicing elit.
Quisquam, quos.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="c-dropdown c-dropdown--hover">
<div class="c-dropdown__trigger">
<button
type="primary"
slot="trigger"
class="c-button c-button--primary c-button--large c-button--inverted"
>
<span class="c-button__label">
Selina Decruse
</span>
</button>
</div>
<div class="c-dropdown__content">
<div
class="c-popover c-popover--large c-popover--muted"
>
<div class="c-popover__header">
<h2 class="c-popover__title">
Selina Decruse (100012)
</h2>
<div class="c-popover__toolbar">
<div class="o-toolbar">
<div class="o-toolbar__left">
<div class="c-field-group">
<div
class="c-field-group c-field-group--merged"
>
<button
class="c-button c-button--small c-button--icon-only"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
<button
class="c-button c-button--small c-button--icon-only"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
<button
class="c-button c-button--small c-button--icon-only"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
<button
class="c-button c-button--small c-button--icon-only"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
</div>
<button
class="c-button c-button--small c-button--icon-only"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
</div>
</div>
<div class="o-toolbar__right">
<button
class="c-button c-button--small"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
<span class="c-button__label">
Add/edit note
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="c-dropdown c-dropdown--hover">
<div class="c-dropdown__trigger">
<button
type="dark"
slot="trigger"
class="c-button c-button--dark c-button--large c-button--inverted"
>
<span class="c-button__label">
15/04/2024 - …
</span>
</button>
</div>
<div class="c-dropdown__content">
<div
class="c-popover c-popover--large c-popover--muted"
>
<div class="c-popover__header">
<h2 class="c-popover__title">
Contract (5/04-2024 - …)
</h2>
<div class="c-popover__toolbar">
<div class="o-toolbar">
<div class="o-toolbar__left">
<div class="c-field-group">
<button
class="c-button c-button--small c-button--icon-only"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
</div>
</div>
<div class="o-toolbar__right">
<div
class="o-stack o-stack--8 o-stack--dotted o-text-md"
>
<span>Bediende PC200</span>
<span>010/495</span>
<span>5d 38/38u</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="c-header__tabs">
<div class="c-session-tabs">
<div class="c-session-tab">
<a
href="#"
class="c-session-tab__link"
></a>
<div class="c-session-tab__lines">
<div class="c-session-tab__line">
<span class="c-session-tab__label">
<span class="c-session-tab__small-text">
999999
</span>
<span class="c-session-tab__large-text">
Demo Organisation
</span>
</span>
</div>
<div class="c-session-tab__line">
<span class="c-session-tab__label">
<span class="c-session-tab__small-text">
000000
</span>
<span class="c-session-tab__large-text">
Simon Wuyts
</span>
</span>
</div>
</div>
<div class="c-tooltip c-tooltip--bottom">
<div class="c-tooltip__trigger">
<button
type="button"
class="c-session-tab__action"
>
<div class="c-icon c-icon--small">
<!-- SVG element -->
</div>
</button>
</div>
<div class="c-tooltip__overlay">
<div class="c-tooltip__content">
Assign current organisation
</div>
</div>
</div>
</div>
<div class="c-session-tab">
<a
href="#"
class="c-session-tab__link"
></a>
<div class="c-session-tab__lines">
<div class="c-session-tab__line">
<span class="c-session-tab__label">
<span class="c-session-tab__small-text">
999999
</span>
<span class="c-session-tab__large-text">
Another Organisation
</span>
</span>
</div>
<div class="c-session-tab__line">
<span class="c-session-tab__label">
<span class="c-session-tab__small-text">
000000
</span>
<span class="c-session-tab__large-text">
Jan Janssens
</span>
</span>
</div>
</div>
<div class="c-tooltip c-tooltip--bottom">
<div class="c-tooltip__trigger">
<button
type="button"
class="c-session-tab__action"
>
<div class="c-icon c-icon--small">
<!-- SVG element -->
</div>
</button>
</div>
<div class="c-tooltip__overlay">
<div class="c-tooltip__content">
Assign current organisation
</div>
</div>
</div>
</div>
<div class="c-session-tab c-session-tab--empty">
<a
href="#"
class="c-session-tab__link"
></a>
<div class="c-session-tab__empty">
<div
class="c-session-tab__empty-icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-session-tab__empty-label">
Session 3
</div>
</div>
</div>
</div>
</div>
<div class="c-header__actions">
<div class="c-stack">
<button
type="transparent"
class="c-button c-button--transparent c-button--icon-only c-button--inverted"
>
<span
class="c-button__icon c-icon c-icon--small c-icon--normal"
>
<!-- SVG element -->
</span>
</button>
<button
type="transparent"
class="c-button c-button--transparent c-button--icon-only c-button--inverted"
>
<span
class="c-button__icon c-icon c-icon--small c-icon--normal"
>
<!-- SVG element -->
</span>
</button>
<button
type="transparent"
class="c-button c-button--transparent c-button--icon-only c-button--inverted"
>
<span
class="c-button__icon c-icon c-icon--small c-icon--normal"
>
<!-- SVG element -->
</span>
</button>
</div>
</div>
<div class="c-header__menu-background"></div>
<div class="c-header__menu">
<div class="o-stack o-stack--12">
<div class="c-menu-bar">
<div class="c-field-group c-field-group--merged">
<div class="c-dropdown">
<div class="c-dropdown__trigger">
<button
slot="trigger"
class="c-button"
>
<span class="c-button__label">
Person
</span>
<span
class="c-button__chevron c-icon c-icon--extra-small"
>
<!-- SVG element -->
</span>
</button>
</div>
<div class="c-dropdown__content">
<div class="c-menu">
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Start
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Data
</div>
</div>
<div
class="c-menu__chevron c-icon c-icon--extra-small"
>
<!-- SVG element -->
</div>
</a>
<div class="c-dropdown">
<div class="c-dropdown__content">
<div class="c-menu">
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Child menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Child menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Child menu item
</div>
</div>
<div
class="c-menu__chevron c-icon c-icon--extra-small"
>
<!-- SVG element -->
</div>
</a>
<div class="c-dropdown">
<div
class="c-dropdown__content"
>
<div class="c-menu">
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div
class="c-menu__text"
>
<div
class="c-menu__label"
>
Child menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div
class="c-menu__text"
>
<div
class="c-menu__label"
>
Child menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div
class="c-menu__text"
>
<div
class="c-menu__label"
>
Child menu item
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Child menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Child menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Child menu item
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Other data
</div>
</div>
<div
class="c-menu__chevron c-icon c-icon--extra-small"
>
<!-- SVG element -->
</div>
</a>
<div class="c-dropdown">
<div class="c-dropdown__content">
<div class="c-menu">
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Child menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Child menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Child menu item
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Notes
</div>
</div>
</a>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Archive
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="c-dropdown">
<div class="c-dropdown__trigger">
<button
slot="trigger"
class="c-button"
>
<span class="c-button__label">
Employment
</span>
<span
class="c-button__chevron c-icon c-icon--extra-small"
>
<!-- SVG element -->
</span>
</button>
</div>
<div class="c-dropdown__content">
<div class="c-menu">
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Menu item
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="c-dropdown">
<div class="c-dropdown__trigger">
<button
slot="trigger"
class="c-button"
>
<span class="c-button__label">
Calendar
</span>
<span
class="c-button__chevron c-icon c-icon--extra-small"
>
<!-- SVG element -->
</span>
</button>
</div>
<div class="c-dropdown__content">
<div class="c-menu">
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Menu item
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="c-dropdown">
<div class="c-dropdown__trigger">
<button
slot="trigger"
class="c-button"
>
<span class="c-button__label">
Contracts
</span>
<span
class="c-button__chevron c-icon c-icon--extra-small"
>
<!-- SVG element -->
</span>
</button>
</div>
<div class="c-dropdown__content">
<div class="c-menu">
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Menu item
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="c-dropdown">
<div class="c-dropdown__trigger">
<button
slot="trigger"
class="c-button"
>
<span class="c-button__label">Other</span>
<span
class="c-button__chevron c-icon c-icon--extra-small"
>
<!-- SVG element -->
</span>
</button>
</div>
<div class="c-dropdown__content">
<div class="c-menu">
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Menu item
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="c-header__session c-header__session--inactive"
>
<div class="o-stack o-stack--justify-end">
<div class="c-field-group c-field-group--merged">
<button class="c-button c-button--icon-only">
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
<div
class="c-textfield c-textfield--icon c-textfield--width-small c-textfield--center"
>
<input
class="c-textfield__input"
type="text"
value="2024/09"
readonly
/>
<div class="c-textfield__icon c-icon">
<!-- SVG element -->
</div>
</div>
<button class="c-button c-button--icon-only">
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
</div>
</div>
</div>
</header>
<header class="c-header">
<div class="c-header__main">
<div class="c-dropdown">
<div class="c-dropdown__trigger">
<button
type="transparent"
slot="trigger"
class="c-button c-button--transparent c-button--large c-button--icon-only c-button--inverted"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
</div>
<div class="c-dropdown__content">
<div class="c-menu">
<div class="c-menu__title">Overviews</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div
class="c-menu__icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-menu__text">
<div class="c-menu__label">
Organisation
</div>
<div class="c-menu__description">
Demo 012
</div>
</div>
<div class="c-menu__shortkey">
<kbd class="c-shortkey">200</kbd>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link c-menu__link--active"
>
<div
class="c-menu__icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-menu__text">
<div class="c-menu__label">Person</div>
<div class="c-menu__description">
Selina Decruse
</div>
</div>
<div class="c-menu__shortkey">
<kbd class="c-shortkey">300</kbd>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div
class="c-menu__icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-menu__text">
<div class="c-menu__label">Contract</div>
<div class="c-menu__description">
15/04/2024 - …
</div>
</div>
<div class="c-menu__shortkey">
<kbd class="c-shortkey">400</kbd>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div
class="c-menu__icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-menu__text">
<div class="c-menu__label">SOF</div>
<div class="c-menu__description">
Sof Name
</div>
</div>
<div class="c-menu__shortkey">
<kbd class="c-shortkey">500</kbd>
</div>
</a>
</div>
<div class="c-menu__divider"></div>
<div class="c-menu__title">Most recent</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-entity">
<div class="c-entity__line">
<div
class="c-entity__icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-entity__label">
Demo Stage 2020
</div>
<div class="c-entity__code">990014</div>
</div>
</div>
<div
class="c-menu__chevron c-icon c-icon--extra-small"
>
<!-- SVG element -->
</div>
</a>
<div class="c-dropdown">
<div class="c-dropdown__content">
<div class="c-menu">
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-entity">
<div class="c-entity__line">
<div
class="c-entity__icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-entity__label">
Gabi Hauck
</div>
<div class="c-entity__code">
100001
</div>
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-entity">
<div class="c-entity__line">
<div
class="c-entity__icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-entity__label">
Jan Verveck
</div>
<div class="c-entity__code">
100001
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-entity">
<div class="c-entity__line">
<div
class="c-entity__icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-entity__label">
Hrms BV
</div>
<div class="c-entity__code">990011</div>
</div>
</div>
<div
class="c-menu__chevron c-icon c-icon--extra-small"
>
<!-- SVG element -->
</div>
</a>
<div class="c-dropdown">
<div class="c-dropdown__content">
<div class="c-menu">
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-entity">
<div class="c-entity__line">
<div
class="c-entity__icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-entity__label">
Annick Peeters
</div>
<div class="c-entity__code">
100015
</div>
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-entity">
<div class="c-entity__line">
<div
class="c-entity__icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-entity__label">
Jan Janssens
</div>
<div class="c-entity__code">
100016
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="c-menu__content">
<div class="c-field-group">
<button class="c-button c-button--small">
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
<span class="c-button__label">
Show more
</span>
</button>
<button class="c-button c-button--small">
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
<span class="c-button__label">
Clear history
</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="c-header__breadcrumbs">
<div
class="c-field-group c-field-group--merged c-field-group--dark c-field-group--breadcrumbs"
>
<button
type="dark"
class="c-button c-button--dark c-button--large c-button--icon-only c-button--inverted"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
<div class="c-dropdown c-dropdown--hover">
<div class="c-dropdown__trigger">
<button
type="dark"
slot="trigger"
class="c-button c-button--dark c-button--large c-button--inverted"
>
<span class="c-button__label">
Demo 012
</span>
</button>
</div>
<div class="c-dropdown__content">
<div
class="c-popover c-popover--large c-popover--muted"
>
<div class="c-popover__header">
<h2 class="c-popover__title">
Demo 012 (100012)
</h2>
<div class="c-popover__toolbar">
<div class="o-toolbar">
<div class="o-toolbar__left">
<button
class="c-button c-button--small c-button--icon-only"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
</div>
<div class="o-toolbar__right">
<button
class="c-button c-button--small"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
<span class="c-button__label">
Add/edit note
</span>
</button>
</div>
</div>
</div>
</div>
<div class="c-popover__content">
<div class="c-notes">
<div class="c-note">
<div class="c-note__header">
<div class="c-note__info">
<div class="c-note__author">
Martine Jaspers
</div>
<div class="c-note__date">
15/04/2024 10:00
</div>
</div>
<div class="c-note__type">
Informative
</div>
</div>
<div class="c-note__content">
<div class="c-note__actions">
<div
class="o-stack o-stack--4 o-stack--align-center"
>
<div class="c-note__expand">
<button
type="transparent"
class="c-button c-button--transparent c-button--small c-button--icon-only"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
</div>
</div>
</div>
<div class="c-note__scroll">
<h1>
Arbeiders (PC 116.00) TWB: 40/40
</h1>
<p>
Maatpersoon RVA: 38u/week
<br />
Percentage Paid: 104,84
</p>
<h1>
Arbeiders (PC 116.00)
<em>
TWB: 24/24 weekend-werker
</em>
</h1>
<p>
Contracttype: Voltijds
<br />
Maatpersoon RVA:
<em>blanco laten</em>
<br />
Percentage Paid:
<em>0</em>
</p>
<h1>Maaltijdcheques</h1>
<p>
Pas na 6 mnd dienst (dag op
dag)! Interimperiode telt mee
voor berekening anc. voor MC
</p>
<h1>Bedragen</h1>
<p></p>
<ul>
<li>Vanaf 01.01.2019: 3,78</li>
<li>Vanaf 01.09.2019: 4,28</li>
<li>
vanaf 01.01.2021:
<em>7,00 weekend</em>
werkers, 5,28 gewone arbeiders
</li>
<li>
Vanaf 01.01.2022:
<em>7,30 weekend</em>
werkers, 6,28 gewone arbeiders
</li>
<li>
Vanaf 01.01.2023:
<em>7,60 weekend</em>
werkers, 7,28 gewone arbeiders
</li>
<li>
Vanaf 01.01.2024:
<em>8,00 weekend</em>
werkers, 8,00 gewone arbeiders
</li>
<li>
Vanaf 01.01.2023 wijziging
loonbeleid bedienden: MC €4
(archief 23.02.2023)
</li>
<li>
Vanaf 01.01.2024 wijziging MC
naar €5 voor bedienden
(archief 16.01.2024)
</li>
</ul>
<h1>Voorschotten</h1>
<p>
Voor nieuwe werknemers steeds de
voorschotten ingeven in
verloningsparameters!
<br />
(voor bedienden ingeven met '0')
</p>
<h1>Sociaal abonnement</h1>
<p>
Steeds ingeven als DAG-bedrag
(géén maandbedrag)!
</p>
</div>
</div>
</div>
<div class="c-note">
<div class="c-note__header">
<div class="c-note__info">
<div class="c-note__author">
Jan Janssens
</div>
<div class="c-note__date">
12/05/2024 12:00
</div>
</div>
<div class="c-note__type">
Informative
</div>
</div>
<div class="c-note__content">
<div class="c-note__actions">
<div
class="o-stack o-stack--4 o-stack--align-center"
>
<div class="c-note__expand">
<button
type="transparent"
class="c-button c-button--transparent c-button--small c-button--icon-only"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
</div>
</div>
</div>
<div class="c-note__scroll">
<p>
Lorem ipsum dolor sit amet
consectetur adipisicing elit.
Quisquam, quos.
</p>
</div>
</div>
</div>
<div class="c-note">
<div class="c-note__header">
<div class="c-note__info">
<div class="c-note__author">
Emma Thompson
</div>
<div class="c-note__date">
12/05/2024 12:00
</div>
</div>
<div class="c-note__type">
Regels voor nieuwe
werknemers/contracten
</div>
</div>
<div class="c-note__content">
<div class="c-note__actions">
<div
class="o-stack o-stack--4 o-stack--align-center"
>
<div class="c-note__expand">
<button
type="transparent"
class="c-button c-button--transparent c-button--small c-button--icon-only"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
</div>
</div>
</div>
<div class="c-note__scroll">
<p>
Lorem ipsum dolor sit amet
consectetur adipisicing elit.
Quisquam, quos.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="c-dropdown c-dropdown--hover">
<div class="c-dropdown__trigger">
<button
type="primary"
slot="trigger"
class="c-button c-button--primary c-button--large c-button--inverted"
>
<span class="c-button__label">
Selina Decruse
</span>
</button>
</div>
<div class="c-dropdown__content">
<div
class="c-popover c-popover--large c-popover--muted"
>
<div class="c-popover__header">
<h2 class="c-popover__title">
Selina Decruse (100012)
</h2>
<div class="c-popover__toolbar">
<div class="o-toolbar">
<div class="o-toolbar__left">
<div class="c-field-group">
<div
class="c-field-group c-field-group--merged"
>
<button
class="c-button c-button--small c-button--icon-only"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
<button
class="c-button c-button--small c-button--icon-only"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
<button
class="c-button c-button--small c-button--icon-only"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
<button
class="c-button c-button--small c-button--icon-only"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
</div>
<button
class="c-button c-button--small c-button--icon-only"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
</div>
</div>
<div class="o-toolbar__right">
<button
class="c-button c-button--small"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
<span class="c-button__label">
Add/edit note
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="c-dropdown c-dropdown--hover">
<div class="c-dropdown__trigger">
<button
type="dark"
slot="trigger"
class="c-button c-button--dark c-button--large c-button--inverted"
>
<span class="c-button__label">
15/04/2024 - …
</span>
</button>
</div>
<div class="c-dropdown__content">
<div
class="c-popover c-popover--large c-popover--muted"
>
<div class="c-popover__header">
<h2 class="c-popover__title">
Contract (5/04-2024 - …)
</h2>
<div class="c-popover__toolbar">
<div class="o-toolbar">
<div class="o-toolbar__left">
<div class="c-field-group">
<button
class="c-button c-button--small c-button--icon-only"
>
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
</div>
</div>
<div class="o-toolbar__right">
<div
class="o-stack o-stack--8 o-stack--dotted o-text-md"
>
<span>Bediende PC200</span>
<span>010/495</span>
<span>5d 38/38u</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="c-header__tabs">
<div class="c-session-tabs">
<div class="c-session-tab c-session-tab--active">
<a
href="#"
class="c-session-tab__link"
></a>
<div class="c-session-tab__lines">
<div class="c-session-tab__line">
<span class="c-session-tab__label">
<span class="c-session-tab__small-text">
999999
</span>
<span class="c-session-tab__large-text">
Demo Organisation
</span>
</span>
</div>
<div class="c-session-tab__line">
<span class="c-session-tab__label">
<span class="c-session-tab__small-text">
000000
</span>
<span class="c-session-tab__large-text">
Simon Wuyts
</span>
</span>
</div>
</div>
<div class="c-tooltip c-tooltip--bottom">
<div class="c-tooltip__trigger">
<button
type="button"
class="c-session-tab__action"
>
<div class="c-icon c-icon--small">
<!-- SVG element -->
</div>
</button>
</div>
<div class="c-tooltip__overlay">
<div class="c-tooltip__content">
Assign current organisation
</div>
</div>
</div>
</div>
<div class="c-session-tab">
<a
href="#"
class="c-session-tab__link"
></a>
<div class="c-session-tab__lines">
<div class="c-session-tab__line">
<span class="c-session-tab__label">
<span class="c-session-tab__small-text">
999999
</span>
<span class="c-session-tab__large-text">
Another Organisation
</span>
</span>
</div>
<div class="c-session-tab__line">
<span class="c-session-tab__label">
<span class="c-session-tab__small-text">
000000
</span>
<span class="c-session-tab__large-text">
Jan Janssens
</span>
</span>
</div>
</div>
<div class="c-tooltip c-tooltip--bottom">
<div class="c-tooltip__trigger">
<button
type="button"
class="c-session-tab__action"
>
<div class="c-icon c-icon--small">
<!-- SVG element -->
</div>
</button>
</div>
<div class="c-tooltip__overlay">
<div class="c-tooltip__content">
Assign current organisation
</div>
</div>
</div>
</div>
<div class="c-session-tab c-session-tab--empty">
<a
href="#"
class="c-session-tab__link"
></a>
<div class="c-session-tab__empty">
<div
class="c-session-tab__empty-icon c-icon c-icon--small"
>
<!-- SVG element -->
</div>
<div class="c-session-tab__empty-label">
Session 3
</div>
</div>
</div>
</div>
</div>
<div class="c-header__actions">
<div class="c-stack">
<button
type="transparent"
class="c-button c-button--transparent c-button--icon-only c-button--inverted"
>
<span
class="c-button__icon c-icon c-icon--small c-icon--normal"
>
<!-- SVG element -->
</span>
</button>
<button
type="transparent"
class="c-button c-button--transparent c-button--icon-only c-button--inverted"
>
<span
class="c-button__icon c-icon c-icon--small c-icon--normal"
>
<!-- SVG element -->
</span>
</button>
<button
type="transparent"
class="c-button c-button--transparent c-button--icon-only c-button--inverted"
>
<span
class="c-button__icon c-icon c-icon--small c-icon--normal"
>
<!-- SVG element -->
</span>
</button>
</div>
</div>
<div class="c-header__menu-background"></div>
<div class="c-header__menu">
<div class="o-stack o-stack--12">
<div class="c-menu-bar">
<div class="c-field-group c-field-group--merged">
<div class="c-dropdown">
<div class="c-dropdown__trigger">
<button
slot="trigger"
class="c-button"
>
<span class="c-button__label">
Person
</span>
<span
class="c-button__chevron c-icon c-icon--extra-small"
>
<!-- SVG element -->
</span>
</button>
</div>
<div class="c-dropdown__content">
<div class="c-menu">
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Start
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Data
</div>
</div>
<div
class="c-menu__chevron c-icon c-icon--extra-small"
>
<!-- SVG element -->
</div>
</a>
<div class="c-dropdown">
<div class="c-dropdown__content">
<div class="c-menu">
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Child menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Child menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Child menu item
</div>
</div>
<div
class="c-menu__chevron c-icon c-icon--extra-small"
>
<!-- SVG element -->
</div>
</a>
<div class="c-dropdown">
<div
class="c-dropdown__content"
>
<div class="c-menu">
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div
class="c-menu__text"
>
<div
class="c-menu__label"
>
Child menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div
class="c-menu__text"
>
<div
class="c-menu__label"
>
Child menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div
class="c-menu__text"
>
<div
class="c-menu__label"
>
Child menu item
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Child menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Child menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Child menu item
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Other data
</div>
</div>
<div
class="c-menu__chevron c-icon c-icon--extra-small"
>
<!-- SVG element -->
</div>
</a>
<div class="c-dropdown">
<div class="c-dropdown__content">
<div class="c-menu">
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Child menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Child menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Child menu item
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Notes
</div>
</div>
</a>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Archive
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="c-dropdown">
<div class="c-dropdown__trigger">
<button
slot="trigger"
class="c-button"
>
<span class="c-button__label">
Employment
</span>
<span
class="c-button__chevron c-icon c-icon--extra-small"
>
<!-- SVG element -->
</span>
</button>
</div>
<div class="c-dropdown__content">
<div class="c-menu">
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Menu item
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="c-dropdown">
<div class="c-dropdown__trigger">
<button
slot="trigger"
class="c-button"
>
<span class="c-button__label">
Calendar
</span>
<span
class="c-button__chevron c-icon c-icon--extra-small"
>
<!-- SVG element -->
</span>
</button>
</div>
<div class="c-dropdown__content">
<div class="c-menu">
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Menu item
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="c-dropdown">
<div class="c-dropdown__trigger">
<button
slot="trigger"
class="c-button"
>
<span class="c-button__label">
Contracts
</span>
<span
class="c-button__chevron c-icon c-icon--extra-small"
>
<!-- SVG element -->
</span>
</button>
</div>
<div class="c-dropdown__content">
<div class="c-menu">
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Menu item
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="c-dropdown">
<div class="c-dropdown__trigger">
<button
slot="trigger"
class="c-button"
>
<span class="c-button__label">Other</span>
<span
class="c-button__chevron c-icon c-icon--extra-small"
>
<!-- SVG element -->
</span>
</button>
</div>
<div class="c-dropdown__content">
<div class="c-menu">
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Menu item
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="c-header__session">
<div
class="o-stack o-stack--24 o-stack--justify-between o-stack--align-center"
>
<div
class="o-stack o-stack--align-center o-stack--16"
>
<div class="c-dropdown">
<div class="c-dropdown__trigger">
<button
slot="trigger"
class="c-button"
>
<span class="c-button__label">
Booking screens
</span>
<span
class="c-button__chevron c-icon c-icon--extra-small"
>
<!-- SVG element -->
</span>
</button>
</div>
<div class="c-dropdown__content">
<div class="c-menu">
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Overview
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Booker
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Report
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Docbatch
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Confirm
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="o-stack o-stack--12">
<span>F</span>
<span>B+VG</span>
<span>40%</span>
</div>
</div>
<div class="c-field-group c-field-group--merged">
<button class="c-button c-button--icon-only">
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
<div
class="c-textfield c-textfield--icon c-textfield--width-small c-textfield--center"
>
<input
class="c-textfield__input"
type="text"
value="2024/09"
readonly
/>
<div class="c-textfield__icon c-icon">
<!-- SVG element -->
</div>
</div>
<button class="c-button c-button--icon-only">
<span
class="c-button__icon c-icon c-icon--small"
>
<!-- SVG element -->
</span>
</button>
</div>
</div>
</div>
</header>
</div>