Component Library

Eenvoudige navigatiebalk met logo, links en optionele CTA knop. Ingebouwde hamburger voor mobile.

Sticky nav die start als transparant en solid wordt na 40px scrollen.

Gecentreerde hero met headline, ondertitel, 1-2 CTA knoppen. 4 achtergrondvarianten.

Klassieke split-hero: tekst links, afbeelding rechts (of omgekeerd).

100vh hero met achtergrondafbeelding of -video + donkere overlay.

Genummerde USPs of pijlers. Sober en krachtig.

Feature kaarten grid met icon, titel en beschrijving. 3 visuele varianten.

Stappen-sectie voor werkwijze of onboarding. Horizontaal of verticaal.

Prijskaarten met highlighted plan en optionele badge.

Klantreviews in grid met sterrating en avatar.

Rij met klanten- of partnerlogo's. Grayscale optioneel.

Oneindige scrollende ticker. Pauzeert bij hover. Puur CSS.

Statistieken sectie met grote getallen. 3 achtergrondvarianten.

Call-to-action sectie. Center of split layout. 4 achtergrondvarianten.

Contactformulier met async submit. Werkt met Formspree, Netlify Forms of eigen API.

Compacte e-mail aanmeldbalk. Inline of gestapeld.

Compacte footer met logo, links, social icons en copyright.

Volledige footer met navigatiekolommen en optioneel groot achtergrondwoord.

Hero met zwevende testimonial card over de afbeelding. Split-layout, badge, accent-kleur.

Donkere hero met mosaic image grid rechts. Stats onderaan, accent kleur, vertikal uitlijning.

Drie-koloms asymmetrisch grid: afbeeldingen links+rechts, tekst gecentreerd. Badges op afbeeldingen.

Puur typografische centered hero. Geen afbeelding. 4 achtergrondvarianten. Ideaal voor SaaS.

Split hero omgekeerd: afbeelding links, tekst rechts. Met decoratief offset-frame, features-lijst en avatar trust-bar.

Navigatie met mega-menu dropdown — categorieën, beschrijvingen en featured item.

Elevated card CTA — hoge impact, rounded corners, optionele achtergrondafbeelding. 4 varianten.

Split CTA sectie — tekst + bullets links, afbeelding rechts. 3 achtergrond varianten.

Contact sectie met full-height coverfoto links en formulier rechts. Contactinfo overlay op foto.

Gecentreerd contactformulier met 2-koloms velden grid. Volledig gevalideerd met success state.

Uitgebreide footer met featured strip, newsletter, social icons, meerdere link-kolommen.

Alternerende horizontale feature rijen — afbeelding en tekst wisselen per rij.

Compact icon feature grid — 2/3/4 kolommen met icon, titel en beschrijving. 3 achtergrondvarianten.

Bento-grid layout met variabele cel-groottes — tekst, stats, quotes en afbeeldingen.

Masonry testimonial grid — variabele hoogtes, featured card in accent kleur.

Grote cover-foto testimonial — één highlighted quote, gradient overlay, rating sterren.

FAQ met tabbed categorieën en icon headers. Toegankelijk, keyboard-navigeerbaar.

Pricing met maandelijks/jaarlijks toggle. Highlighted plan, feature lijst, populair badge.

Menu-stijl prijslijst per categorie. Ideaal voor diensten en consultancy.

Blog overzicht met featured grote post + 3-koloms kaartgrid. Categorie badges, auteur info.

Team grid — foto, naam, rol, bio, socials. 3 visuele stijlen: card, minimal, photo.

Uitgebreide alternerende team-layout — grote foto + bio, feiten, quote overlay.

Oversized editorial headline links, full-bleed afbeelding rechts. Outline tekst effect via <strong>. Puur CSS animaties.

Editorial magazine layout: verticale meta-kolom, oversized headline, smalle afbeelding rechts, scrollende ticker onderaan.

Mesh/gradient achtergrond met animated blobs, glassmorphism badge, grote gecentreerde headline en social proof avatars.

Donkere hero met radiale gloed, grid achtergrond, gradient headline en optionele statistieken. Geen externe deps.

Premium donkere split hero: tekst op zwart, product/cover afbeelding rechts met luminosity blend en hover reveal.

Interactieve feature showcase: scrollbare lijst links, sticky preview panel rechts. Wisselt automatisch of via klik.

Testimonials slider met auto-advance, grote quote centraal, dot navigatie met voortgangsbalk. Pauzeer bij hover.

Grote statistieken met count-up animatie (IntersectionObserver). Twee layouts: row (horizontaal) of grid. Dark variant.

Verticale timeline met centrale lijn, genummerde nodes en afwisselende kaarten. IntersectionObserver reveal animaties.

Compacte horizontale pricing tabel — plannen als kolommen, features als rijen, check/cross symbolen.

Full-bleed gradient CTA met animated mesh blobs, noise texture overlay. Aanpasbare gradientkleuren.

Herbruikbare knop: 4 varianten, 3 groottes, als link of button element.

Pill badge voor status, labels en categorieën. 6 kleurvarianten.

Basis kaart component met slot voor flexibele content. 4 varianten.

FAQ accordion. Toegankelijk (ARIA), keyboard navigeerbaar.

Formulier input met label, helper tekst, error state, iconen en password toggle. Textarea variant inbegrepen.

Tabs met 3 varianten (underline, pill, boxed). Volledige keyboard navigatie en ARIA. Werkt met TabPanel.

Toggle switch (aan/uit). Toegankelijk met role="switch". 3 groottes, optioneel label.

Native <dialog> modal met backdrop blur, slide-in animatie en footer slot. Openen via data-modal-open attribuut.

Toast notificaties via window.toast(). 4 varianten (success, error, warning, info). Automatisch verdwijnen.

Avatar met foto of initialen fallback. Groepweergave met overlap. Status indicator (online/offline/away/busy).

Voortgangsbalk (horizontaal) en cirkel variant. Geanimeerd bij load. Label en percentage optioneel.

Navigatie broodkruimelpad. 3 separator stijlen. Aria-labeled, aria-current op huidig item.

Laad-placeholder met shimmer animatie. 5 preset varianten: text, card, avatar, image, custom.

Pure CSS tooltip. 4 posities. Optionele delay. Geen JS vereist.

Multi-stap indicator horizontaal of verticaal. Completed/active/upcoming states. Klikbaar optioneel.

Aftel-timer tot een datum. Blokken: dagen, uren, minuten, seconden. Donkere variant.

Ster-rating display of interactief. Half-sterren, review count, klikbaar input mode.

Responsive datatable. Klikbare sort per kolom, striped/bordered/minimal varianten, sticky header.

Lege staat component voor lege lijsten, zoekresultaten en errors. Icon, headline, sub en optionele CTA.

Full-viewport hero met twee lagen parallax scrolling. Achtergrond beweegt langzaam, voorgrond sneller. Diepte-effect zonder externe libs.

Editorial split hero: grote headline links, gestapelde case cards rechts. Hover lift animatie. Ideaal voor agency portfolios.

Pure typografie hero — geen afbeelding. Drie regelstijlen: gevuld, outline en gradient. CSS marquee ticker. Wit, licht en donker.

SaaS-stijl product hero. Pure CSS browser frame mockup met screenshot, feature bullets en optionele review sterren.

Tekst links + afbeelding rechts (of omgekeerd). IntersectionObserver slide-in. Ideaal voor dienst- of feature uitleg.

Tekst + grote statistieken naast elkaar. Cijfers in accent kleur, dunne scheidingslijn. Sterk voor social proof in context.

Alternerende tijdlijn met centrale lijn die vult bij scrollen. Jaar-labels op de knooppunten. Ideaal voor bedrijfshistorie of roadmap.

Krant-stijl meerdere kolommen. Drop cap optioneel. Verticale scheidingslijnen. 2 of 3 kolommen.

Full-width citaat als content break. Decoratief aanhalingsteken, auteur met avatar. 4 achtergrondvarianten.

CSS grid fotogalerij met hover caption overlay. 2-4 kolommen, staggered inlaadanimatie. Optioneel sectie headline.

Pinterest-achtig masonry grid via CSS columns. Variabele hoogtes, hover scale. 2 of 3 kolommen.

Afbeelding slider met auto-play, pijlen en dots. Pauzeert op hover. Caption gradient overlay.

Editoriaal beeld met gestyled onderschrift en optioneel fotocredits. Drie breedtemodi: full, contained, narrow.

Hero met grote thumbnail en play button. Klikken opent YouTube embed of direct video. Geen preload.

Responsive YouTube of Vimeo embed sectie. 16:9 aspect ratio. Optioneel headline en beschrijving erboven.

Grid van video testimonial kaarten. Klik opent native dialog met YouTube autoplay. Hover toont play overlay.

Grid van icoon + titel + beschrijving. 4 icoon stijlen (plain, circle, square, outlined). Staggered fade-in.

Verticale lijst met icoon + titel + beschrijving. Optionele scheidingslijnen, badges en compact mode.

Bento grid met icoon+tekst blokken. Wide en tall spans, accent en dark varianten. Mobiel: 1 kolom.

Gecentreerde sectie-aanhef: eyebrow, headline en sub. Optionele decoratieve lijn. 4 groottes.

Headline geflankeerd door animerende horizontale regels (scaleX op scroll). Links, rechts of beide kanten.

Sectie heading met prominente pill label. 3 label stijlen. Gestapeld of inline layout.

Feature checklist met vinkjes, accent of nummers. 1 of 2 kolommen. Optionele CTA eronder.

Drie-koloms vergelijking: wij vs. anderen. Vinkje/kruis per feature. Ons kolom geaccentueerd.

Gestyled genummerd lijst. 3 varianten: standaard, groot decoratief nummer en inline. Verbindingslijn in stack layout.

Editoriaal citaat als content break. 4 varianten: editorial, minimal, accent, bordered. Avatar + auteur.

Krant-stijl tekst in 2-3 kolommen. Drop cap, verticale scheidingslijnen, optioneel sectie headline.

Gestyled blockquote component. 4 varianten: default (border), large (centered), card (shadow), sidebar (compact).

Statisch CSS grid van klantlogo's. Grayscale met kleur op hover. 3-6 kolommen. Geen scrollanimatie.

Logo grid met rijke heading sectie. Above (headline boven grid) of split (headline links, logos rechts).

E-mail capture / nieuwsbrief aanmelding. Inline (pill met input+knop) of gestapeld. 4 achtergrondvarianten.

Minimale één-regel CTA. Tekst + geaccentueerde link. Geen box, geen knop. Ideaal als subtiele afsluiter.

Sticky bottom bar die omhoog schuift na X pixels scrollen. Sluitbaar. 3 achtergrondvarianten.