Subpagina-hero met "In het kort" New

Heading left with breadcrumb and actions, right an "At a glance" box with four facts and a review date. Works well for legal and financial explainer pages.

Home
Arbeidsrecht
Ontslag op staande voet

Ontslag op staande voet gekregen?

Een ontslag op staande voet is de zwaarste maatregel die een werkgever kan nemen. U verliest direct uw loon en vaak uw recht op WW. Er gelden strenge regels, en de termijn om in actie te komen is kort.

Gratis eerste gesprek, 30 minuten 070 123 4567

How to use it

Paste the HTML where the page sections should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
Add the JavaScript and call init() with the element that contains the HTML.

<!-- Subpagina-hero met "In het kort" · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="sik">
  <div class="sik__main">
    <ol class="sik__crumb" aria-label="Kruimelpad"><li><a href="#">Home</a></li><li><a href="#">Arbeidsrecht</a></li><li aria-current="page">Ontslag op staande voet</li></ol>
    <p class="sik__title">Ontslag op staande voet gekregen?</p>
    <p class="sik__lead">Een ontslag op staande voet is de zwaarste maatregel die een werkgever kan nemen. U verliest direct uw loon en vaak uw recht op WW. Er gelden strenge regels, en de termijn om in actie te komen is kort.</p>
    <div class="sik__cta"><a href="#" class="sik__btn">Gratis eerste gesprek, 30 minuten</a><a href="tel:+31701234567" class="sik__tel">070 123 4567</a></div>
  </div>
  <div class="sik__box" role="complementary" aria-labelledby="sik-h">
    <p class="sik__boxh" id="sik-h">In het kort</p>
    <dl class="sik__facts">
      <div><dt>Termijn</dt><dd>U heeft <b>2 maanden</b> om de kantonrechter te vragen het ontslag te vernietigen.</dd></div>
      <div><dt>Bewijs</dt><dd>De werkgever moet de dringende reden aantonen, niet u.</dd></div>
      <div><dt>Direct</dt><dd>Het ontslag moet onverwijld zijn gegeven, met opgave van de reden.</dd></div>
      <div><dt>Gevolg</dt><dd>Is het onterecht, dan kunt u loon of een billijke vergoeding eisen.</dd></div>
    </dl>
    <p class="sik__check">Gecontroleerd door mr. L. Ploeg · 1 oktober 2026</p>
  </div>
</div>
</div>

/* Subpagina-hero met "In het kort" · NedDev · eigen werk. */
.sik{position:relative;width:100%;align-self:flex-start;flex:none;min-height:440px;background:#f8f5ef;color:#2a1418;font-family:'Switzer',sans-serif;overflow:hidden;box-sizing:border-box;display:grid;grid-template-columns:1.25fr 1fr;gap:56px;padding:40px 44px 48px;align-items:center}
.sik *{box-sizing:border-box}
.sik__crumb{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 30px;padding:0;font-size:13px;color:#7a5d62}
.sik__crumb li+li::before{content:'›';margin-right:6px}
.sik__crumb a{color:#5a1a24}
.sik__crumb [aria-current]{color:#2a1418}
.sik__title{font-family:Georgia,'Times New Roman',serif;font-size:clamp(32px,4.4vw,54px);line-height:1.04;letter-spacing:-.01em;margin:0 0 18px;color:#5a1a24}
.sik__lead{font-size:16px;line-height:1.65;color:#4a3236;margin:0 0 28px;max-width:54ch}
.sik__cta{display:flex;flex-wrap:wrap;gap:12px}
.sik__btn{background:#5a1a24;color:#fff;font-weight:600;font-size:15px;padding:13px 20px;border-radius:2px;text-decoration:none;transition:background .2s ease}
.sik__btn:hover{background:#7a2633}
.sik__tel{border:1px solid #5a1a24;color:#5a1a24;font-weight:600;font-size:15px;padding:12px 20px;border-radius:2px;text-decoration:none;font-variant-numeric:tabular-nums}
.sik__tel:hover{background:#efe6d8}
.sik__box{background:#fff;border:1px solid #e3d8c6;border-top:4px solid #b08d57;padding:26px 28px}
.sik__boxh{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8a6a35;margin:0 0 14px}
.sik__facts{margin:0}
.sik__facts>div{display:grid;grid-template-columns:76px 1fr;gap:14px;padding:12px 0;border-top:1px solid #efe7da}
.sik__facts>div:first-child{border-top:0;padding-top:0}
.sik__facts dt{font-weight:700;font-size:13px;color:#5a1a24;padding-top:2px}
.sik__facts dd{margin:0;font-size:15px;line-height:1.5}
.sik__check{margin:14px 0 0;font-size:12px;color:#7a5d62}
@media(max-width:820px){.sik{grid-template-columns:1fr;gap:28px;padding:24px 18px 32px}.sik__box{padding:20px}.sik__facts>div{grid-template-columns:64px 1fr}}

// Subpagina-hero met "In het kort" · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.sik');if(!w)return;
w.addEventListener('click',function(e){var a=e.target.closest('a[href="#"]');if(a)e.preventDefault();});
}
init(document.querySelector('.jouw-container'));

More page sections

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →