<div class="c-note">
  <div class="c-note__header">
    <div class="c-note__info">
      <span class="c-note__author">John Doe</span>
      <span class="c-note__date">2023-05-15</span>
    </div>
    <div class="c-note__type">Default</div>
  </div>
  <div class="c-note__content">
    <p>This is a default note component.</p>
  </div>
</div>

<div class="c-note c-note--info">
  <div class="c-note__header">
    <div class="c-note__info">
      <span class="c-note__author">Jane Smith</span>
      <span class="c-note__date">2023-05-16</span>
    </div>
    <div class="c-note__type">Info</div>
  </div>
  <div class="c-note__content">
    <p>This is an informational note component.</p>
  </div>
</div>

<div class="c-note c-note--success">
  <div class="c-note__header">
    <div class="c-note__info">
      <span class="c-note__author">Alice Johnson</span>
      <span class="c-note__date">2023-05-17</span>
    </div>
    <div class="c-note__type">Success</div>
  </div>
  <div class="c-note__content">
    <p>This is a success note component.</p>
  </div>
</div>

<div class="c-note c-note--warning">
  <div class="c-note__header">
    <div class="c-note__info">
      <span class="c-note__author">Bob Brown</span>
      <span class="c-note__date">2023-05-18</span>
    </div>
    <div class="c-note__type">Warning</div>
  </div>
  <div class="c-note__content">
    <p>This is a warning note component.</p>
  </div>
</div>

<div class="c-note c-note--danger">
  <div class="c-note__header">
    <div class="c-note__info">
      <span class="c-note__author">Charlie Davis</span>
      <span class="c-note__date">2023-05-19</span>
    </div>
    <div class="c-note__type">Danger</div>
  </div>
  <div class="c-note__content">
    <p>This is a danger note component.</p>
  </div>
</div>

<div class="c-note c-note--collapsible">
  <div class="c-note__header">
    <div class="c-note__info">
      <span class="c-note__author">David Smith</span>
      <span class="c-note__date">2023-05-20</span>
    </div>
    <div class="c-note__type">Info</div>
  </div>
  <div class="c-note__content">
    <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>