Home Werk
SaaS bouwenAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOWebshop bouwen
AI-oplossingenB2B-platformsE-commerceHorecaLead generationLogistiekOnderwijsProcesautomatiseringSaaS-platformsStartup MVPVastgoedZorg
JuridischZorgVastgoedFinanceHoreca
Den HaagRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
OverWerkwijzeLabBlogContact

Websitesecties.

Complete blokken waarmee je een pagina opbouwt: navigatie, hero, diensten, prijzen, reviews, team, contact, cookiebanner en footer. Elk voorbeeld is voor een andere branche ingevuld, zodat je ziet hoe het voelt met echte inhoud in plaats van opvultekst. Kies per onderdeel wat bij je past en wij bouwen er een samenhangende site van in jouw huisstijl.

60 items · Een deel van deze items bouwden we zelf, een deel komt uit open-source bibliotheken met een vrije licentie. Bij elk item staan de bron en de licentie.

Centered Big-Type Hero Paginasecties
Centered Big-Type Hero

Awwwards-stijl: enorme gecentreerde display-typografie met monospace kader en kinetische reveal.

eigeneigenCSS + JS
Bekijk live
Bento Feature Grid Paginasecties
Bento Feature Grid

Asymmetrisch bento-raster met donkere hoofdtegel, beton-tegels en accentkaart.

eigeneigenAlleen CSS
Bekijk live
CTA-band + nieuwsbrief Paginasecties
CTA-band + nieuwsbrief

Donkere CTA-band met groot statement, dubbele actie en inline nieuwsbrief-validatie.

eigeneigenCSS + JS
Bekijk live
Statistiek-band Paginasecties
Statistiek-band

Brede beton-band met vier grote animerende tellers en monospace labels.

eigeneigenCSS + JS
Bekijk live
Proces / stappen Paginasecties
Proces / stappen

Vier genummerde stappen met voortgangslijn die meegroeit bij scroll.

eigeneigenCSS + JS
Bekijk live
FAQ Accordion Paginasecties
FAQ Accordion

Toegankelijke accordeon met één-open-tegelijk, smooth height en accent-plus.

Hyper UIeigenCSS + JS
Bekijk live
Megamenu met uitgelichte case NieuwPaginasecties
Megamenu met uitgelichte case

Navbar waarvan "Diensten" een megamenu opent (hover of klik) met linkkolommen, vanafprijzen en een uitgelichte klantcase met beeldvlak. Voor dienstverleners met veel diensten.

eigeneigenCSS + JS
Bekijk live
Header die krimpt tot pil NieuwPaginasecties
Header die krimpt tot pil

Volle header die bij scrollen krimpt tot een zwevende pil met alleen logo en afspraakknop. Scroll in het demovlak om het te zien.

eigeneigenCSS + JS
Bekijk live
Volledig menupaneel met index NieuwPaginasecties
Volledig menupaneel met index

Menuknop opent een paneel over de hele sectie met grote genummerde links, vestigingsadres en openingstijden. Voor bureaus en ateliers die het menu als visitekaartje willen.

eigeneigenCSS + JS
Bekijk live
Doorlopende USP-balk NieuwPaginasecties
Doorlopende USP-balk

Smalle balk met doorlopende USP's (verzending, reviewscore, levertijd) boven een compacte webshopheader. Pauzeert bij hover, staat stil bij reduced motion.

eigeneigenCSS + JS
Bekijk live
Aankondigingsbalk met live openingsstatus

Balk die op basis van de echte klok (tijdzone Amsterdam) "Nu open tot 22:00" of "Morgen weer open om 11:00" toont, met weekoverzicht en wegklikknop. Voor horeca en winkels.

eigeneigenCSS + JS
Bekijk live
Subpagina-hero met kruimelpad en statistiek

Kop voor een dienstpagina: kruimelpad, titel, korte intro en één grote statistiek die optelt bij in beeld komen. Voor zakelijke dienstverleners die met één cijfer overtuigen.

eigeneigenCSS + JS
Bekijk live
Subpagina-hero met "In het kort"

Kop links met kruimelpad en actieknoppen, rechts een "In het kort"-kader met vier feiten en een controledatum. Werkt goed voor juridische en financiële uitlegpagina's.

eigeneigenCSS + JS
Bekijk live
Blogartikel-kop met auteur NieuwPaginasecties
Blogartikel-kop met auteur

Kop van een blogartikel: categorie, datum, leestijd, auteur met initialen-avatar, deelknop en een groot beeldvlak. Voor kennisbanken en blogs van mkb-sites.

eigeneigenCSS + JS
Bekijk live
404 met zoekveld en populaire pagina's

Foutpagina die bezoekers terugbrengt: zoekveld dat direct resultaten toont, de drie meest bezochte pagina's en een terugknop. Vervang de lijst door je eigen sitemap.

eigeneigenCSS + JS
Bekijk live
404 met branchegrap NieuwPaginasecties
404 met branchegrap

Foutpagina met een grap uit het vak ("Deze pagina is gesloopt") en een CSS-illustratie van een muur met gat, afzetting en losse stenen, plus doorverwijzingen. Laat zien dat een 404 bij het merk kan passen.

eigeneigenCSS + JS
Bekijk live
Cases masonry met filter NieuwPaginasecties
Cases masonry met filter

Projecten in een masonry-raster met werkende filterchips per type; bij hover schuift het resultaatcijfer van het project in beeld.

eigeneigenCSS + JS
Bekijk live
Case-index als tabel met preview

Case-overzicht als strakke tabel (klant, jaar, dienst, resultaat); bij hover volgt een beeldvoorbeeld de cursor. Voor bureaus met veel projecten.

eigeneigenCSS + JS
Bekijk live
Werkgebied-kaart met projectpins

Gestileerde SVG-kaart van het werkgebied met pins; klik op een pin en het project verschijnt ernaast. Voor installateurs en aannemers die lokaal werken.

eigeneigenCSS + JS
Bekijk live
Team met specialisme en bel-direct

Teamkaarten met naam, rechtsgebied en een eigen "bel direct"-knop per advocaat, zodat de bezoeker meteen de juiste persoon spreekt.

eigeneigenAlleen CSS
Bekijk live
Team-rooster met beschikbaarheid

Team als weekrooster met per dag of er nog plek is; vandaag wordt automatisch gemarkeerd. Voor praktijken waar patiënten een vaste behandelaar kiezen.

eigeneigenCSS + JS
Bekijk live
Team als polaroids NieuwPaginasecties
Team als polaroids

Teamfoto's als licht gedraaide polaroids met een persoonlijke regel; bij hover trekt de foto recht en komt naar voren. Voor kleine, persoonlijke bedrijven.

eigeneigenAlleen CSS
Bekijk live
Familiebedrijf-tijdlijn horizontaal

Horizontaal scrollbare jaartallen-tijdlijn met mijlpalen, voortgangsbalk en pijlknoppen. Voor familiebedrijven die hun geschiedenis willen laten zien.

eigeneigenCSS + JS
Bekijk live
Brief van de oprichter NieuwPaginasecties
Brief van de oprichter

Over-ons als persoonlijke brief op papier, met een handtekening die zichzelf tekent zodra het blok in beeld komt. Voor bedrijven waar de eigenaar het gezicht is.

eigeneigenCSS + JS
Bekijk live
Contact met vestiging-tabbladen NieuwPaginasecties
Contact met vestiging-tabbladen

Contactformulier naast tabbladen per vestiging met adres, telefoon, openingstijden en een kaartvlak; de gekozen vestiging vult ook het formulier. Voor bedrijven met meerdere locaties.

eigeneigenCSS + JS
Bekijk live
Getrapt contactformulier NieuwPaginasecties
Getrapt contactformulier

Formulier in drie stappen: eerst het soort vraag (offerte, storing, vraag), dan de velden die daarbij horen, dan contactgegevens. Met voortgang, validatie in de browser en een bevestiging.

eigeneigenCSS + JS
Bekijk live
Contact: nu bereikbaar of morgen

Contactblok dat op basis van de klok "Nu bereikbaar" of "Morgen vanaf 8:00" toont, met bellen, WhatsApp en mail als drie gelijke opties die hun verwachting aanpassen aan het tijdstip.

eigeneigenCSS + JS
Bekijk live
Redactionele blog-index NieuwPaginasecties
Redactionele blog-index

Blogoverzicht als redactionele lijst zonder kaarten: één uitgelicht stuk bovenaan, daaronder regels met datum, categorie en leestijd. Voor bedrijven die echt schrijven.

eigeneigenAlleen CSS
Bekijk live
Vacatures als filterbare tabel NieuwPaginasecties
Vacatures als filterbare tabel

Vacatures in een tabel met filter op afdeling en uren, en per rij een salarisband die meteen laat zien waar de functie zit. Voor werkgevers met veel openstaande functies.

eigeneigenCSS + JS
Bekijk live
Vergelijking: wij, zelf doen, groot bureau

Vergelijkingstabel "Met ons / Zelf doen / Groot bureau" met kosten in euro's, vinkjes en kruisjes, en een schakelaar per bedrijfsvorm die de bedragen bijwerkt. Voor dienstverleners die hun prijs willen uitleggen.

eigeneigenCSS + JS
Bekijk live
Integraties-raster met filter NieuwPaginasecties
Integraties-raster met filter

Raster van koppelingen als tekstlogo's (Exact, Mollie, Moneybird, Google Agenda, WhatsApp en meer) met filter per categorie en zoekveld. Voor software die laat zien waar het op aansluit.

eigeneigenCSS + JS
Bekijk live
Hero als krantenvoorpagina NieuwPaginasecties
Hero als krantenvoorpagina

Hero in de vorm van een krantenvoorpagina met kop, datum en drie artikelen, voor kantoren die met kennis willen overtuigen.

eigeneigenCSS + JS
Bekijk live
Hero met gestapelde projectstrip

Hero voor een aannemer met een stapel projectkaarten die rouleert en een live label van het project waar het team nu aan werkt.

eigeneigenCSS + JS
Bekijk live
Klantquote met resultaatgetal NieuwPaginasecties
Klantquote met resultaatgetal

Grote klantquote met daarnaast het meetbare resultaat dat optelt en een minigrafiek voor en na, voor cases en referenties.

eigeneigenCSS + JS
Bekijk live
Terugbelverzoek met tijdvakken NieuwPaginasecties
Terugbelverzoek met tijdvakken

Terugbelformulier waarin de bezoeker dag en dagdeel als knoppen kiest, met fotovlak en de gemiddelde reactietijd van de adviseur.

eigeneigenCSS + JS
Bekijk live
CTA met zin als link NieuwPaginasecties
CTA met zin als link

Afsluitende CTA over volle breedte met grote typografie waarin de zin zelf de link is, met een kleurvulling en pijl bij hover.

eigeneigenAlleen CSS
Bekijk live
Prijsschuif met pakketgrenzen NieuwPaginasecties
Prijsschuif met pakketgrenzen

Schuifregelaar voor het aantal uren per week die de maandprijs live berekent en laat zien bij welke grens een voordeliger tarief ingaat.

eigeneigenCSS + JS
Bekijk live
Pakketten met wel en niet NieuwPaginasecties
Pakketten met wel en niet

Drie pakketten waarin per pakket met vinkjes en kruisjes staat wat er wel en niet in zit, met een knop om alleen de verschillen te tonen.

eigeneigenCSS + JS
Bekijk live
Menukaart met allergenenfilter NieuwPaginasecties
Menukaart met allergenenfilter

Restaurantmenu per gang met prijzen en filters op glutenvrij, vegan en notenvrij die niet-passende gerechten wegfilteren.

eigeneigenCSS + JS
Bekijk live
Openingstijden met feestdagen NieuwPaginasecties
Openingstijden met feestdagen

Openingstijdenblok dat vandaag markeert, live zegt of de zaak open is en de eerstvolgende afwijkende feestdagen toont.

eigeneigenCSS + JS
Bekijk live
Behandelingen met vergoeding NieuwPaginasecties
Behandelingen met vergoeding

Uitklapbare lijst behandelingen met duur, prijs en een duidelijke vergoedingsindicatie, voor fysio-, tandarts- en zorgpraktijken.

eigeneigenCSS + JS
Bekijk live
Sticky mobiele belbalk NieuwPaginasecties
Sticky mobiele belbalk

Demo van een mobiele pagina waarin na een stukje scrollen een vaste onderbalk met Bellen, WhatsApp en Offerte verschijnt.

eigeneigenCSS + JS
Bekijk live

Iets gezien dat je mooi vindt?

Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.

Neem contact op →