Klassieke splitsing: groot statement links, visueel paneel rechts met badge en parallax.
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.
Niets gevonden.
Awwwards-stijl: enorme gecentreerde display-typografie met monospace kader en kinetische reveal.
Hero met cijferbalk onderaan; tellers animeren bij in-view.
Drie kaarten met monospace-index, hover-lift en accent-rand.
Asymmetrisch bento-raster met donkere hoofdtegel, beton-tegels en accentkaart.
Twee zigzag-rijen beeld+tekst met scroll-reveal en genummerde stappen.
Drie prijsplannen met uitgelichte middelste tier en maand/jaar-toggle.
Feature-vergelijking over drie plannen met sticky koprij en check/streep.
Grote quote-carousel met dots, auto-play en swipe; reduced-motion stopt auto-play.
Oneindige logo-marquee met centrale quote; pauzeert bij hover en reduced-motion.
Donkere CTA-band met groot statement, dubbele actie en inline nieuwsbrief-validatie.
Brede beton-band met vier grote animerende tellers en monospace labels.
Vier genummerde stappen met voortgangslijn die meegroeit bij scroll.
Toegankelijke accordeon met één-open-tegelijk, smooth height en accent-plus.
Donkere footer met linkkolommen, status-regel en gigantisch NedDev-wordmark onderaan.
Symmetrische navbar: logo gecentreerd, links aan beide kanten en het telefoonnummer als knop; mobiel klapt een paneel open. Past bij horeca en winkels met een sterk woordmerk.
Navbar waarvan "Diensten" een megamenu opent (hover of klik) met linkkolommen, vanafprijzen en een uitgelichte klantcase met beeldvlak. Voor dienstverleners met veel diensten.
Volle header die bij scrollen krimpt tot een zwevende pil met alleen logo en afspraakknop. Scroll in het demovlak om het te zien.
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.
Smalle balk met doorlopende USP's (verzending, reviewscore, levertijd) boven een compacte webshopheader. Pauzeert bij hover, staat stil bij reduced motion.
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.
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.
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.
Kop van een blogartikel: categorie, datum, leestijd, auteur met initialen-avatar, deelknop en een groot beeldvlak. Voor kennisbanken en blogs van mkb-sites.
Cookiekaart in de hoek met schakelaars per categorie. "Alles accepteren" en "Alleen noodzakelijk" zijn gelijkwaardig vormgegeven, zoals de AP vraagt. Keuze is later te wijzigen via de knop linksonder.
Smalle cookiebalk onderin; "Instellingen" opent een zijlade met uitleg, schakelaar en cookielijst per categorie. Weigeren en accepteren zijn even zichtbaar.
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.
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.
Footer met alles wat een Nederlands mkb-bedrijf nodig heeft: linkkolommen, adres, openingstijden, KvK en btw, keurmerken, reviewscore en socials. Op mobiel klappen de kolommen in.
CTA en footer in één blok: grote vraag, belknop en mailknop (met kopieerknop voor het adres), daaronder compacte footerlinks. Voor sites waar elk contact telt, zoals makelaars en adviseurs.
Projecten in een masonry-raster met werkende filterchips per type; bij hover schuift het resultaatcijfer van het project in beeld.
Case-overzicht als strakke tabel (klant, jaar, dienst, resultaat); bij hover volgt een beeldvoorbeeld de cursor. Voor bureaus met veel projecten.
Gestileerde SVG-kaart van het werkgebied met pins; klik op een pin en het project verschijnt ernaast. Voor installateurs en aannemers die lokaal werken.
Teamkaarten met naam, rechtsgebied en een eigen "bel direct"-knop per advocaat, zodat de bezoeker meteen de juiste persoon spreekt.
Team als weekrooster met per dag of er nog plek is; vandaag wordt automatisch gemarkeerd. Voor praktijken waar patiënten een vaste behandelaar kiezen.
Teamfoto's als licht gedraaide polaroids met een persoonlijke regel; bij hover trekt de foto recht en komt naar voren. Voor kleine, persoonlijke bedrijven.
Horizontaal scrollbare jaartallen-tijdlijn met mijlpalen, voortgangsbalk en pijlknoppen. Voor familiebedrijven die hun geschiedenis willen laten zien.
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.
Contactformulier naast tabbladen per vestiging met adres, telefoon, openingstijden en een kaartvlak; de gekozen vestiging vult ook het formulier. Voor bedrijven met meerdere locaties.
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.
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.
Blogoverzicht als redactionele lijst zonder kaarten: één uitgelicht stuk bovenaan, daaronder regels met datum, categorie en leestijd. Voor bedrijven die echt schrijven.
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.
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.
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.
Hero voor een installateur waarin de bezoeker zijn postcode invult en direct ziet of het bedrijf bij hem langskomt.
Hero in de vorm van een krantenvoorpagina met kop, datum en drie artikelen, voor kantoren die met kennis willen overtuigen.
Hero voor een schildersbedrijf met een calculator (m², binnen of buiten, aantal lagen) die live een prijsbandbreedte toont.
Hero voor een aannemer met een stapel projectkaarten die rouleert en een live label van het project waar het team nu aan werkt.
Totaalscore met verdeling per ster als balkjes; klik op een ster om de recente reviews daarop te filteren.
Grote klantquote met daarnaast het meetbare resultaat dat optelt en een minigrafiek voor en na, voor cases en referenties.
Terugbelformulier waarin de bezoeker dag en dagdeel als knoppen kiest, met fotovlak en de gemiddelde reactietijd van de adviseur.
Afsluitende CTA over volle breedte met grote typografie waarin de zin zelf de link is, met een kleurvulling en pijl bij hover.
Schuifregelaar voor het aantal uren per week die de maandprijs live berekent en laat zien bij welke grens een voordeliger tarief ingaat.
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.
Restaurantmenu per gang met prijzen en filters op glutenvrij, vegan en notenvrij die niet-passende gerechten wegfilteren.
Openingstijdenblok dat vandaag markeert, live zegt of de zaak open is en de eerstvolgende afwijkende feestdagen toont.
Uitklapbare lijst behandelingen met duur, prijs en een duidelijke vergoedingsindicatie, voor fysio-, tandarts- en zorgpraktijken.
Webshopgrid met snelle filters op categorie en prijs, sorteren en een winkelwagenknop met tellende animatie.
Demo van een mobiele pagina waarin na een stukje scrollen een vaste onderbalk met Bellen, WhatsApp en Offerte verschijnt.
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 →