Kaart met laatste nieuws New

Card with three dated "latest news" lines and a "recent projects" tab next to a short company intro: shows the business is active. Tabs with arrow keys; demo buttons show loading (skeleton), empty and error with retry, as with a CMS feed.

Bouwbedrijf Van Rijswijk · Gorinchem · sinds 1964

Wij bouwen scholen, woningen en bedrijfshallen in de Alblasserwaard en de Betuwe.

Familiebedrijf in de derde generatie, met 86 eigen mensen op de bouwplaats. Wij werken het liefst binnen 40 kilometer van de werf, zodat onze ploegen elke avond thuis zijn.

Opgeleverd in 2025: 214 woningen
Certificering: VCA** · ISO 9001
Eigen mensen: 86

Bijgewerkt di 6 okt

Alle 48 berichten

Demo, staat van de feed:

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.

<!-- Kaart met laatste nieuws · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="lnk">
  <div class="lnk__in">
    <div class="lnk__intro">
      <p class="lnk__eyebrow">Bouwbedrijf Van Rijswijk · Gorinchem · sinds 1964</p>
      <h2 class="lnk__h">Wij bouwen scholen, woningen en bedrijfshallen in de Alblasserwaard en de Betuwe.</h2>
      <p class="lnk__lead">Familiebedrijf in de derde generatie, met 86 eigen mensen op de bouwplaats. Wij werken het liefst binnen 40 kilometer van de werf, zodat onze ploegen elke avond thuis zijn.</p>
      <dl class="lnk__kpi"><div><dt>Opgeleverd in 2025</dt><dd>214 woningen</dd></div><div><dt>Certificering</dt><dd>VCA** · ISO 9001</dd></div><div><dt>Eigen mensen</dt><dd>86</dd></div></dl>
    </div>
    <div class="lnk__card">
      <div class="lnk__tabs" role="tablist" aria-label="Laatste berichten">
        <button class="lnk__tab" role="tab" id="lnk-t0" aria-selected="true" aria-controls="lnk-p" data-k="nieuws">Laatste nieuws</button>
        <button class="lnk__tab" role="tab" id="lnk-t1" aria-selected="false" aria-controls="lnk-p" tabindex="-1" data-k="projecten">Recente projecten</button>
        <span class="lnk__upd"><i aria-hidden="true"></i>Bijgewerkt di 6 okt</span>
      </div>
      <div class="lnk__panel" id="lnk-p" role="tabpanel" aria-labelledby="lnk-t0" aria-live="polite"></div>
      <a class="lnk__all" href="#">Alle 48 berichten <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8h9M8 4l4 4-4 4"/></svg></a>
    </div>
  </div>
  <div class="lnk__demo" role="group" aria-label="Demo: staat van de feed"><span>Demo, staat van de feed:</span><button type="button" data-s="ok" aria-pressed="true">Gevuld</button><button type="button" data-s="load" aria-pressed="false">Laden</button><button type="button" data-s="leeg" aria-pressed="false">Leeg</button><button type="button" data-s="fout" aria-pressed="false">Fout</button></div>
</div>
</div>

/* Kaart met laatste nieuws · NedDev · eigen werk. */
/* fonts (Fontshare): epilogue@400,600,800 */
.lnk{--ink:#1a1c1e;--mut:#5d6267;--bg:#f1f0ec;--line:#d9d7d0;--steel:#26425f;--yel:#e3a400;background:var(--bg);color:var(--ink);font-family:'Epilogue','Switzer',sans-serif;box-sizing:border-box}
.lnk *,.lnk *::before{box-sizing:border-box}
.lnk__in{max-width:1160px;margin:0 auto;padding:50px 32px 26px;display:grid;grid-template-columns:1fr 1.05fr;gap:52px;align-items:start}
.lnk__eyebrow{margin:0 0 14px;font:500 11px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.lnk__h{margin:0 0 14px;font-weight:800;font-size:clamp(24px,2.8vw,34px);line-height:1.12;letter-spacing:-.02em}
.lnk__lead{margin:0 0 22px;font-size:15px;line-height:1.6;color:var(--mut);max-width:50ch}
.lnk__kpi{margin:0;display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:4px 28px}
.lnk__kpi div{border-left:3px solid var(--yel);padding-left:10px}
.lnk__kpi dt{font-size:12px;color:var(--mut)}
.lnk__kpi dd{margin:2px 0 0;font-weight:800;font-size:17px;font-variant-numeric:tabular-nums}
.lnk__card{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.lnk__tabs{display:flex;align-items:stretch;border-bottom:1px solid var(--line);padding:0 8px}
.lnk__tab{position:relative;padding:15px 12px 13px;border:0;background:transparent;font:600 14px 'Epilogue',sans-serif;color:var(--mut);cursor:pointer;transition:color .15s ease}
.lnk__tab:hover{color:var(--ink)}
.lnk__tab[aria-selected="true"]{color:var(--ink)}
.lnk__tab[aria-selected="true"]::after{content:'';position:absolute;left:12px;right:12px;bottom:-1px;height:3px;background:var(--steel)}
.lnk__tab:focus-visible{outline:2px solid var(--steel);outline-offset:-4px}
.lnk__upd{margin-left:auto;display:flex;align-items:center;gap:7px;font:500 11px 'JetBrains Mono',monospace;color:var(--mut);padding-right:8px}
.lnk__upd i{width:7px;height:7px;border-radius:50%;background:#2f8a4f}
.lnk__panel{min-height:246px}
.lnk__row{display:grid;grid-template-columns:96px 1fr 18px;gap:4px 16px;align-items:start;padding:16px 20px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;transition:background-color .15s ease}
.lnk__row time{grid-row:1/3;font:500 12px/1.5 'JetBrains Mono',monospace;color:var(--steel);font-variant-numeric:tabular-nums;padding-top:1px}
.lnk__row b{font-weight:600;font-size:15.5px;line-height:1.3}
.lnk__row span{grid-column:2;font-size:13.5px;line-height:1.45;color:var(--mut)}
.lnk__row svg{grid-column:3;grid-row:1/3;align-self:center;width:16px;height:16px;fill:none;stroke:var(--mut);stroke-width:1.6;transition:transform .15s ease,stroke .15s ease}
.lnk__row:hover{background:#f7f6f2}
.lnk__row:hover b{text-decoration:underline;text-underline-offset:3px}
.lnk__row:hover svg{transform:translateX(3px);stroke:var(--ink)}
.lnk__row:focus-visible{outline:2px solid var(--steel);outline-offset:-2px}
.lnk__sk{display:grid;grid-template-columns:96px 1fr;gap:8px 16px;padding:18px 20px;border-bottom:1px solid var(--line)}
.lnk__sk i{display:block;height:12px;border-radius:2px;background:linear-gradient(90deg,#ecebe6 0%,#f6f5f1 50%,#ecebe6 100%);background-size:200% 100%;animation:lnk-sh 1.2s linear infinite}
.lnk__sk i:nth-child(2){height:15px;width:80%}.lnk__sk i:nth-child(3){grid-column:2;width:60%}
@keyframes lnk-sh{to{background-position:-200% 0}}
.lnk__msg{padding:30px 22px;font-size:14.5px;line-height:1.55;color:var(--mut)}
.lnk__msg b{display:block;color:var(--ink);margin-bottom:4px}
.lnk__msg--err b{color:#9b2a1d}
.lnk__retry{margin-top:12px;font:600 14px 'Epilogue',sans-serif;color:#fff;background:var(--steel);border:0;border-radius:3px;padding:9px 14px;cursor:pointer}
.lnk__retry:hover{background:#1b3149}
.lnk__retry:focus-visible{outline:2px solid var(--yel);outline-offset:2px}
.lnk__all{display:flex;align-items:center;gap:8px;padding:14px 20px;font-weight:600;font-size:14px;color:var(--steel);text-decoration:none}
.lnk__all svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .15s ease}
.lnk__all:hover svg{transform:translateX(3px)}
.lnk__all:focus-visible{outline:2px solid var(--steel);outline-offset:-2px}
.lnk__demo{max-width:1160px;margin:0 auto;padding:6px 32px 22px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font:500 11px 'JetBrains Mono',monospace;color:var(--mut)}
.lnk__demo button{font:500 11px 'JetBrains Mono',monospace;color:var(--mut);background:transparent;border:1px solid var(--line);border-radius:3px;padding:5px 8px;cursor:pointer}
.lnk__demo button:hover{color:var(--ink);border-color:var(--ink)}
.lnk__demo button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.lnk__demo button:focus-visible{outline:2px solid var(--steel);outline-offset:2px}
@media (max-width:860px){
  .lnk__in{grid-template-columns:1fr;gap:26px;padding:32px 14px 18px}
  .lnk__kpi{grid-template-columns:1fr 1fr}
  .lnk__upd{display:none}
  .lnk__row{grid-template-columns:1fr 16px;padding:14px 14px}
  .lnk__row time{grid-row:auto;grid-column:1}
  .lnk__row b,.lnk__row span{grid-column:1}
  .lnk__row svg{grid-column:2;grid-row:1/4}
  .lnk__demo{padding:6px 14px 18px}
}
@media (prefers-reduced-motion:reduce){.lnk *{transition:none!important}.lnk__sk i{animation:none}}

// Kaart met laatste nieuws · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
const w=root.querySelector('.lnk'); if(!w) return;
const D={nieuws:[['2026-09-30','wo 30 sep 2026','Eerste paal voor 42 huurwoningen in de Lingewijk','Voor woningstichting De Linge. Oplevering in fasen vanaf voorjaar 2028.'],['2026-09-18','vr 18 sep 2026','VCA**-hercertificering zonder afwijkingen','De audit liep over drie bouwplaatsen; het certificaat is geldig tot september 2029.'],['2026-08-28','vr 28 aug 2026','Vacature: uitvoerder utiliteitsbouw','32 tot 40 uur, standplaats Gorinchem, eigen bus van de zaak.']],
 projecten:[['2026-10-06','di 6 okt 2026','Opgeleverd: basisschool De Wielewaal, Hardinxveld','Gasloos, 1.650 m², BENG-eisen gehaald met 14% marge.'],['2026-09-17','do 17 sep 2026','Gestart: renovatie 64 portiekwoningen Molenvliet','Bewoners blijven wonen tijdens de werkzaamheden; per woning 8 werkdagen.'],['2026-09-02','wo 2 sep 2026','Ruwbouw klaar: bedrijfshal Avelingen-West','3.200 m² staalbouw met kantoor op de verdieping, dak klaar voor 900 zonnepanelen.']]};
const arrow='<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8h9M8 4l4 4-4 4"/></svg>';
const tabs=[...w.querySelectorAll('.lnk__tab')], p=w.querySelector('.lnk__panel');
let k='nieuws', st='ok';
const render=()=>{p.setAttribute('aria-busy',st==='load'?'true':'false');
  if(st==='load'){p.innerHTML='<div class="lnk__sk" aria-hidden="true"><i></i><i></i><i></i></div>'.repeat(3)+'<span class="lnk__msg" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)">Berichten worden geladen</span>'; return;}
  if(st==='leeg'){p.innerHTML='<div class="lnk__msg"><b>Nog geen '+(k==='nieuws'?'nieuwsberichten':'projecten')+' dit kwartaal.</b>Bekijk het archief voor eerdere berichten.</div>'; return;}
  if(st==='fout'){p.innerHTML='<div class="lnk__msg lnk__msg--err" role="alert"><b>Berichten konden niet worden geladen.</b>Controleer je verbinding of probeer het zo nog eens.<br><button type="button" class="lnk__retry">Opnieuw proberen</button></div>'; return;}
  p.innerHTML=D[k].map(r=>'<a class="lnk__row" href="#"><time datetime="'+r[0]+'">'+r[1]+'</time><b>'+r[2]+'</b><span>'+r[3]+'</span>'+arrow+'</a>').join('');
};
const sel=(i,f)=>{tabs.forEach((t,j)=>{t.setAttribute('aria-selected',j===i?'true':'false'); t.tabIndex=j===i?0:-1;}); k=tabs[i].dataset.k; p.setAttribute('aria-labelledby',tabs[i].id); if(f) tabs[i].focus(); render();};
tabs.forEach((t,i)=>{t.addEventListener('click',()=>sel(i)); t.addEventListener('keydown',e=>{if(e.key==='ArrowRight'||e.key==='ArrowLeft'){e.preventDefault(); sel((i+1)%2,true);} else if(e.key==='Home'){e.preventDefault(); sel(0,true);} else if(e.key==='End'){e.preventDefault(); sel(1,true);}});});
const demo=[...w.querySelectorAll('.lnk__demo button')];
const setSt=s=>{st=s; demo.forEach(b=>b.setAttribute('aria-pressed',b.dataset.s===s?'true':'false')); render();};
demo.forEach(b=>b.addEventListener('click',()=>setSt(b.dataset.s)));
p.addEventListener('click',e=>{if(e.target.closest('.lnk__retry')){setSt('load'); setTimeout(()=>{if(st==='load') setSt('ok');},900);} if(e.target.closest('a[href="#"]')) e.preventDefault();});
w.querySelector('.lnk__all').addEventListener('click',e=>e.preventDefault());
render();
}
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 →