Mono-labels en sectienummering New
Typographic system of mono labels in brackets: section numbering "[ 02 ] Process" with rule and counter, status labels and a section nav whose brackets move 3 px apart on hover and focus (180 ms). The active section is shown inverted via aria-current. Pure CSS, zero load cost.
[ 02 ]Werkwijze02 / 05
Van eerste schets tot oplevering, met één vaste projectleider.
Label · 10/1.2 mono · +0,08em · hoofdletters
How to use it
- Paste the HTML where the text animations should appear.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- No JavaScript needed.
<!-- Mono-labels en sectienummering · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="mlb"><div class="mlb__l">
<p class="mlb__eb"><span class="mlb__nr">[ 02 ]</span><span>Werkwijze</span><span class="mlb__lijn" aria-hidden="true"></span><span class="mlb__tel">02 / 05</span></p>
<h4 class="mlb__h">Van eerste schets tot oplevering, met één vaste projectleider.</h4>
<p class="mlb__tags"><span class="mlb__tag">( Nieuw )</span><span class="mlb__tag mlb__tag--ok">[ Offerte binnen 48 uur ]</span></p>
<p class="mlb__spec">Label · 10/1.2 mono · +0,08em · hoofdletters</p></div>
<nav class="mlb__r" aria-label="Secties"><a class="mlb__a" href="#"><span class="mlb__b">[</span><span class="mlb__n">01</span><span class="mlb__b">]</span><span class="mlb__t">Diensten</span></a><a class="mlb__a" href="#" aria-current="true"><span class="mlb__b">[</span><span class="mlb__n">02</span><span class="mlb__b">]</span><span class="mlb__t">Werkwijze</span></a><a class="mlb__a" href="#"><span class="mlb__b">[</span><span class="mlb__n">03</span><span class="mlb__b">]</span><span class="mlb__t">Projecten</span></a><a class="mlb__a" href="#"><span class="mlb__b">[</span><span class="mlb__n">04</span><span class="mlb__b">]</span><span class="mlb__t">Prijzen</span></a><a class="mlb__a" href="#"><span class="mlb__b">[</span><span class="mlb__n">05</span><span class="mlb__b">]</span><span class="mlb__t">Contact</span></a></nav></div>
</div>/* Mono-labels en sectienummering · NedDev · eigen werk. */
.mlb{position:absolute;inset:0;display:grid;grid-template-columns:1.5fr 1fr;gap:14px;padding:16px;box-sizing:border-box;background:#fff;color:#0a0a0a;font-family:'Switzer',system-ui,sans-serif;align-items:center;container-type:size}
.mlb__eb{display:flex;align-items:center;gap:8px;margin:0 0 10px;font:500 10px/1.2 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase}
.mlb__eb span{white-space:nowrap}
.mlb__nr{color:#b8330a;font-weight:700}
.mlb__lijn{flex:1;height:1px;background:rgba(10,10,10,.2);min-width:12px}
.mlb__tel{color:#777;font-variant-numeric:tabular-nums}
.mlb__h{margin:0 0 10px;font:700 clamp(15px,5cqi,30px)/1.1 'Switzer',sans-serif;letter-spacing:-.02em}
.mlb__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.mlb__tag{white-space:nowrap;font:500 9.5px/1 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;padding:5px 6px;border:1px solid rgba(10,10,10,.2);border-radius:2px;color:#333}
.mlb__tag--ok{border-color:#1f8a4c;color:#156a39}
.mlb__spec{margin:0;font:400 9.5px 'JetBrains Mono',monospace;color:#888}
.mlb__r{display:flex;flex-direction:column;border-top:1px solid rgba(10,10,10,.12)}
.mlb__a{display:flex;align-items:center;gap:0;padding:7px 2px;border-bottom:1px solid rgba(10,10,10,.12);color:#0a0a0a;text-decoration:none;font:500 10.5px/1 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase}
.mlb__b{display:inline-block;color:#999;transition:transform .18s ease,color .18s ease}
.mlb__n{display:inline-block;padding:0 4px;font-variant-numeric:tabular-nums;transition:color .18s,background .18s}
.mlb__t{margin-left:9px;transition:color .18s}
.mlb__a:hover .mlb__b:first-child,.mlb__a:focus-visible .mlb__b:first-child{transform:translateX(-3px);color:#F5480F}
.mlb__a:hover .mlb__b:nth-child(3),.mlb__a:focus-visible .mlb__b:nth-child(3){transform:translateX(3px);color:#F5480F}
.mlb__a:hover .mlb__t{color:#b8330a}
.mlb__a:focus-visible{outline:2px solid #F5480F;outline-offset:1px}
.mlb__a:active .mlb__n{background:#f4f3f1}
.mlb__a[aria-current] .mlb__n{background:#0a0a0a;color:#fff}
.mlb__a[aria-current] .mlb__b{color:#0a0a0a}
@container (max-width:360px){.mlb{gap:10px;padding:12px}.mlb__spec,.mlb__tel{display:none}.mlb__eb{gap:6px}.mlb__tag{font-size:8.5px;letter-spacing:.04em}.mlb__a{padding:6px 0;font-size:9.5px}.mlb__t{margin-left:5px}}
@media (prefers-reduced-motion: reduce){.mlb__b{transition:color .18s}}More text animations
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 →