Hero met taakkaarten over de rand New
Hero for a physiotherapy practice where four task cards (book, complaints, reimbursement, directions) overlap the bottom edge of the photo, so the main visitor tasks sit above the fold. Cards are real links with calm hover (border and arrow, 180 ms) and visible focus; on mobile they become two by two. Strong for healthcare, culture, municipalities and schools.
Fysiotherapie in Utrecht-Oost
Weer zonder pijn bewegen, met een plan dat bij je past.
Afspraak makenBinnen 2 werkdagen terecht, ook 's avonds
Klachten en behandelingenRug, nek, knie, sport en na een operatie
Vergoeding checkenZonder verwijzing, contract met alle verzekeraars
Route en parkerenBiltstraat 140, gratis parkeren achter het pand
Sinds 1998 aan de Biltstraat. Zeven fysiotherapeuten, een eigen oefenzaal en korte lijnen met de huisartsen in de wijk.
- Wachttijd
- 2 werkdagen
- Specialisaties
- 6
- Vandaag open
- 7:30 tot 20:00
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.
- No JavaScript needed.
<!-- Hero met taakkaarten over de rand · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="tko">
<div class="tko__top"><span>Ma t/m vr 7:30 tot 20:00 · za 8:00 tot 13:00</span><span class="tko__tr">Rapportcijfer <b>9,1</b> uit 412 beoordelingen</span><a href="tel:0301234567">030 123 4567</a></div>
<div class="tko__nav" role="banner"><a class="tko__logo" href="#"><span class="tko__lm" aria-hidden="true"></span><span>De Linde<small>fysiotherapie · Utrecht</small></span></a>
<nav class="tko__links" aria-label="Hoofdmenu"><a href="#">Behandelingen</a><a href="#">Specialisaties</a><a href="#">Team</a><a href="#">Vergoedingen</a><a href="#">Contact</a></nav><a class="tko__btn" href="#">Afspraak maken</a></div>
<div class="tko__hero"><img src="https://neddev.com/lab-media/taakkaarten-over-hero-2.webp" alt="Praktijkpand van De Linde aan een rustige straat met fietsen ervoor" loading="lazy">
<div class="tko__over"><p class="tko__k">Fysiotherapie in Utrecht-Oost</p><h3 class="tko__h">Weer zonder pijn bewegen, met een plan dat bij je past.</h3></div></div>
<div class="tko__kaarten">
<a class="tko__kaart" href="#"><svg viewBox="0 0 48 48" aria-hidden="true"><rect x="7" y="10" width="34" height="30" rx="2"/><path d="M7 18h34M15 6v8M33 6v8M16 26h6v6h-6z"/></svg><span class="tko__kt">Afspraak maken</span><span class="tko__kd">Binnen 2 werkdagen terecht, ook 's avonds</span><svg class="tko__pijl" viewBox="0 0 20 20" aria-hidden="true"><path d="M4 10h11M11 5l5 5-5 5"/></svg></a>
<a class="tko__kaart" href="#"><svg viewBox="0 0 48 48" aria-hidden="true"><circle cx="24" cy="9" r="4"/><path d="M24 13v14M24 18l-9 5M24 18l9-4M24 27l-6 14M24 27l7 13"/></svg><span class="tko__kt">Klachten en behandelingen</span><span class="tko__kd">Rug, nek, knie, sport en na een operatie</span><svg class="tko__pijl" viewBox="0 0 20 20" aria-hidden="true"><path d="M4 10h11M11 5l5 5-5 5"/></svg></a>
<a class="tko__kaart" href="#"><svg viewBox="0 0 48 48" aria-hidden="true"><path d="M10 6h20l8 8v28H10z"/><path d="M30 6v8h8M16 24h16M16 31h16M16 38h9"/></svg><span class="tko__kt">Vergoeding checken</span><span class="tko__kd">Zonder verwijzing, contract met alle verzekeraars</span><svg class="tko__pijl" viewBox="0 0 20 20" aria-hidden="true"><path d="M4 10h11M11 5l5 5-5 5"/></svg></a>
<a class="tko__kaart" href="#"><svg viewBox="0 0 48 48" aria-hidden="true"><path d="M24 43s13-12 13-23a13 13 0 0 0-26 0c0 11 13 23 13 23z"/><circle cx="24" cy="20" r="5"/></svg><span class="tko__kt">Route en parkeren</span><span class="tko__kd">Biltstraat 140, gratis parkeren achter het pand</span><svg class="tko__pijl" viewBox="0 0 20 20" aria-hidden="true"><path d="M4 10h11M11 5l5 5-5 5"/></svg></a>
</div>
<div class="tko__onder"><p class="tko__intro">Sinds 1998 aan de Biltstraat. Zeven fysiotherapeuten, een eigen oefenzaal en korte lijnen met de huisartsen in de wijk.</p>
<dl class="tko__feiten"><div><dt>Wachttijd</dt><dd>2 werkdagen</dd></div><div><dt>Specialisaties</dt><dd>6</dd></div><div><dt>Vandaag open</dt><dd>7:30 tot 20:00</dd></div></dl></div>
</div>
</div>/* Hero met taakkaarten over de rand · NedDev · eigen werk. */
/* fonts (Fontshare): gambetta@400,500,600 */
.tko{--tko-g:#17372f;--tko-z:#f3eee4;--tko-a:#c4472a;background:var(--tko-z);color:#1b1b1b;font-family:'Switzer',system-ui,sans-serif;padding-bottom:36px;container-type:inline-size}
.tko a:focus-visible{outline:2px solid var(--tko-a);outline-offset:3px}
.tko__top{display:flex;gap:24px;justify-content:flex-end;align-items:center;padding:8px 32px;font-size:12px;color:#e9e4d8;background:var(--tko-g)}
.tko__top span:first-child{margin-right:auto}
.tko__top a{color:#fff;text-decoration:none;font-weight:600}
.tko__top a:hover{text-decoration:underline}
.tko__nav{display:flex;align-items:center;gap:28px;padding:16px 32px}
.tko__logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tko-g);font:600 22px/1 'Gambetta',Georgia,serif}
.tko__logo small{display:block;font:500 11px/1.4 'Switzer',sans-serif;color:#5b5b55;letter-spacing:.02em}
.tko__lm{width:30px;height:30px;border-radius:50% 50% 4px 50%;background:var(--tko-g);position:relative}
.tko__lm::after{content:'';position:absolute;left:13px;top:6px;width:2px;height:20px;background:var(--tko-z);box-shadow:-5px 6px 0 -0px var(--tko-z),5px 4px 0 0 var(--tko-z)}
.tko__links{display:flex;gap:22px;margin-left:auto}
.tko__links a{font-size:14px;color:#1b1b1b;text-decoration:none;padding:4px 0;border-bottom:1px solid transparent;transition:border-color .18s,color .18s}
.tko__links a:hover{border-color:var(--tko-a);color:var(--tko-g)}
.tko__btn{font:600 14px/1 'Switzer',sans-serif;background:var(--tko-a);color:#fff;text-decoration:none;padding:12px 18px;border-radius:3px;transition:background .18s}
.tko__btn:hover{background:#a63a21}
.tko__hero{position:relative;margin:0 32px;height:360px;border-radius:4px;overflow:hidden;background:#cfc7b6}
.tko__hero img{display:block;width:100%;height:100%;object-fit:cover;object-position:60% 55%}
.tko__over{position:absolute;inset:0;padding:34px 36px;background:linear-gradient(100deg,rgba(14,32,27,.78) 0%,rgba(14,32,27,.45) 38%,rgba(14,32,27,0) 62%);color:#fff;box-sizing:border-box}
.tko__k{margin:0 0 10px;font:500 12px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#e9e4d8}
.tko__h{margin:0;max-width:15ch;font:500 44px/1.06 'Gambetta',Georgia,serif;letter-spacing:-.01em}
.tko__kaarten{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);width:min(900px,74%);margin:-104px 60px 0 auto;background:#fff;border-radius:4px;box-shadow:0 14px 40px -18px rgba(23,55,47,.45)}
.tko__kaart{position:relative;display:flex;flex-direction:column;gap:6px;padding:20px 18px 46px;color:#1b1b1b;text-decoration:none;border-left:1px solid #e6e0d4;outline-offset:-3px!important;transition:background .18s}
.tko__kaart:first-child{border-left:0}
.tko__kaart svg:first-child{width:40px;height:40px;fill:none;stroke:var(--tko-g);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:8px}
.tko__kt{font:600 19px/1.15 'Gambetta',Georgia,serif;color:var(--tko-g)}
.tko__kd{font-size:13px;line-height:1.45;color:#4a4a45}
.tko__pijl{position:absolute;left:18px;bottom:16px;width:20px;height:20px;fill:none;stroke:var(--tko-a);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
.tko__kaart::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--tko-a);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.tko__kaart:hover{background:#fbf9f5}
.tko__kaart:hover::after,.tko__kaart:focus-visible::after{transform:scaleX(1)}
.tko__kaart:hover .tko__pijl{transform:translateX(4px)}
.tko__kaart:active{background:#f3eee4}
.tko__onder{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;padding:30px 32px 0;align-items:start}
.tko__intro{margin:0;font:400 20px/1.45 'Gambetta',Georgia,serif;color:#1b1b1b;max-width:36ch}
.tko__feiten{display:grid;grid-template-columns:repeat(3,1fr);margin:0;border-top:1px solid #d9d2c3}
.tko__feiten div{padding:12px 0}
.tko__feiten dt{font:500 11px 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:#5b5b55}
.tko__feiten dd{margin:4px 0 0;font:600 18px 'Switzer',sans-serif;color:var(--tko-g);font-variant-numeric:tabular-nums}
@container (max-width:1000px){.tko__links{display:none}.tko__btn{margin-left:auto}.tko__kaarten{width:auto;margin:-80px 32px 0 32px}.tko__h{font-size:36px}}
@container (max-width:680px){.tko__top{padding:8px 16px;gap:12px;font-size:11px}.tko__top span:first-child,.tko__tr{display:none}.tko__top a{margin-left:auto}
.tko__nav{padding:12px 16px;gap:12px}.tko__logo{font-size:19px}.tko__btn{padding:10px 12px;font-size:13px}
.tko__hero{margin:0 16px;height:300px}.tko__over{padding:20px;background:linear-gradient(180deg,rgba(14,32,27,.8) 0%,rgba(14,32,27,.35) 55%,rgba(14,32,27,0) 80%)}.tko__h{font-size:27px}
.tko__kaarten{grid-template-columns:1fr 1fr;margin:-70px 16px 0}.tko__kaart{padding:14px 12px 38px}.tko__kaart:nth-child(3){border-left:0}.tko__kaart:nth-child(n+3){border-top:1px solid #e6e0d4}
.tko__kaart svg:first-child{width:30px;height:30px;margin-bottom:2px}.tko__kt{font-size:16px}.tko__kd{font-size:12px}.tko__pijl{left:12px;bottom:12px}
.tko__onder{grid-template-columns:1fr;gap:16px;padding:22px 16px 0}.tko__intro{font-size:17px}.tko__feiten dd{font-size:15px}}
@media (prefers-reduced-motion: reduce){.tko *{transition:none!important}}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 →