Component bibliotheek
Alle herbruikbare patterns in MV Blueprint, gegroepeerd per cluster. Elke component werkt 100% via design tokens — wijzig kleuren, typografie en spacing in Site Instellingen → Design system, en alle patterns updaten live mee.
Voor design tokens (kleuren, typografie, buttons, iconen) → /styleguide/
Hero secties
Categorie: mv-hero · 5 patterns
Hero — basic
mv-blueprint/hero-basic
Components
We Build Brands
Hero — cover image overlay
mv-blueprint/hero-cover-image
Components
We Build Brands
Hero — simpel (titel + subtitel + CTA, geen image)
mv-blueprint/hero-simple
Components
Hero — split met afbeelding
mv-blueprint/hero-split-image
Components
We Build Brands
Hero — split (tekst + afbeelding, 50/50)
mv-blueprint/hero-split
Components
We Build Brands
Call-to-action
Categorie: mv-cta · 9 patterns
Banner — simple announcement
mv-blueprint/banner-simple
Countdown timer — sale of event
mv-blueprint/countdown-timer
Aanbieding eindigt over
CTA Banner — accent
mv-blueprint/cta-banner
CTA — simple gecentreerd
mv-blueprint/cta-simple
Klaar om te starten?
We Build Brands
CTA — split met afbeelding
mv-blueprint/cta-split
Klaar voor de volgende stap?
We Build Brands
Newsletter signup
mv-blueprint/newsletter-signup
Newsletter — simpele inschrijfstrip
mv-blueprint/newsletter-simple
Promo banner — bovenaan strip
mv-blueprint/promo-banner
Referral program — vrienden uitnodigen
mv-blueprint/referral-program
Content
Categorie: mv-content · 105 patterns
About — simple intro
mv-blueprint/about-simple
Over ons
Dit is de eerste alinea van je verhaal. Vertel waar je vandaan komt en waarom je doet wat je doet.
About — story met groot heading
mv-blueprint/about-story
Hier komt de kop van je verhaal
Dit is de eerste alinea van je verhaal. Vertel waar je vandaan komt en waarom je doet wat je doet.
De tweede alinea komt rechts te staan. Een lege regel begint een nieuwe alinea, meer hoef je niet te doen.
About — team intro
mv-blueprint/about-team
Over ons
Dit is de eerste alinea van je verhaal. Vertel waar je vandaan komt en waarom je doet wat je doet.
Account dashboard
mv-blueprint/account-dashboard
Log in om je account te zien
App shell — minimal
mv-blueprint/app-shell-minimal
Components
App shell — sidebar layout
mv-blueprint/app-shell-sidebar
App shell — topbar layout
mv-blueprint/app-shell-topbar
Blog featured — uitgelicht artikel
mv-blueprint/blog-featured
Uitgelicht
Voorbeeld Bericht 1
Voorbeeld-samenvatting van bericht 1. Vervang deze zin door de echte samenvatting; hij is ook wat er in de zoekresultaten komt te staan.
10 augustus 2026 · 1 min lezen
Voorbeeld Bericht 2
9 augustus 2026 · 1 min lezen
Voorbeeld Bericht 3
23 juli 2026 · 3 min lezen
Waarom zoekmachineoptimalisatie het verschil maakt, deel 1
Blog grid — 6 posts
mv-blueprint/blog-grid
Recente artikelen
Voorbeeld Blog-categorie 1
Voorbeeld Bericht 1
Voorbeeld-samenvatting van bericht 1. Vervang deze zin door de echte samenvatting; hij is ook wat er in de zoekresultaten komt te staan.
Lees artikel →
Voorbeeld Blog-categorie 2
Voorbeeld Bericht 2
Voorbeeld-samenvatting van bericht 2. Vervang deze zin door de echte samenvatting; hij is ook wat er in de zoekresultaten komt te staan.
Lees artikel →
Voorbeeld Blog-categorie 3
Voorbeeld Bericht 3
Voorbeeld-samenvatting van bericht 3. Vervang deze zin door de echte samenvatting; hij is ook wat er in de zoekresultaten komt te staan.
Lees artikel →
Waarom zoekmachineoptimalisatie het verschil maakt, deel 1
De een met voor zodat omdat daarna vervolgens bovendien. Vervolgens bovendien praktijk aanpak resultaat klant website pagina bezoeker meting.
Lees artikel →
Waarom merkpositionering het verschil maakt, deel 2
Keuze balans basis kern werkwijze oplossing voorbeeld verschil waarde groei focus ritme. Verschil waarde groei focus ritme vraag antwoord team de een met voor zodat.
Lees artikel →
Waarom conversieoptimalisatie het verschil maakt, deel 3
Daarna vervolgens bovendien praktijk aanpak resultaat klant website pagina bezoeker meting verbetering test inzicht stap. Website pagina bezoeker meting verbetering test inzicht stap keuze balans basis kern werkwijze oplossing voorbeeld verschil.
Lees artikel →Blog header — featured cover
mv-blueprint/blog-header-featured
Blog
Blog header — grid achtergrond
mv-blueprint/blog-header-grid
Blog
Bladeren door categorie:
Blog header — simple
mv-blueprint/blog-header-simple
Blog
Blog list — verticale lijst
mv-blueprint/blog-list
Alle artikelen
Voorbeeld Bericht 1
Voorbeeld-samenvatting van bericht 1. Vervang deze zin door de echte samenvatting; hij is ook wat er in de zoekresultaten komt te staan.
Voorbeeld Bericht 2
Voorbeeld-samenvatting van bericht 2. Vervang deze zin door de echte samenvatting; hij is ook wat er in de zoekresultaten komt te staan.
Voorbeeld Bericht 3
Voorbeeld-samenvatting van bericht 3. Vervang deze zin door de echte samenvatting; hij is ook wat er in de zoekresultaten komt te staan.
Waarom zoekmachineoptimalisatie het verschil maakt, deel 1
De een met voor zodat omdat daarna vervolgens bovendien. Vervolgens bovendien praktijk aanpak resultaat klant website pagina bezoeker meting.
Waarom merkpositionering het verschil maakt, deel 2
Keuze balans basis kern werkwijze oplossing voorbeeld verschil waarde groei focus ritme. Verschil waarde groei focus ritme vraag antwoord team de een met voor zodat.
Waarom conversieoptimalisatie het verschil maakt, deel 3
Daarna vervolgens bovendien praktijk aanpak resultaat klant website pagina bezoeker meting verbetering test inzicht stap. Website pagina bezoeker meting verbetering test inzicht stap keuze balans basis kern werkwijze oplossing voorbeeld verschil.
Waarom contentstrategie het verschil maakt, deel 4
Voorbeeld verschil waarde groei focus ritme vraag antwoord team de. Antwoord team de een met voor zodat omdat daarna vervolgens bovendien.
Waarom webperformance het verschil maakt, deel 5
Klant website pagina bezoeker meting verbetering test inzicht stap keuze balans basis kern. Inzicht stap keuze balans basis kern werkwijze oplossing voorbeeld verschil waarde groei focus ritme.
Waarom toegankelijkheid het verschil maakt, deel 6
Vraag antwoord team de een met voor zodat omdat daarna vervolgens bovendien praktijk aanpak resultaat klant. Zodat omdat daarna vervolgens bovendien praktijk aanpak resultaat klant.
Waarom e-mailmarketing het verschil maakt, deel 7
Test inzicht stap keuze balans basis kern werkwijze oplossing voorbeeld verschil. Werkwijze oplossing voorbeeld verschil waarde groei focus ritme vraag antwoord team de.
Blog post header — gecentreerd
mv-blueprint/blog-post-header-centered
Components
28 april 2026 · 4 min lezen
Breadcrumbs
mv-blueprint/breadcrumbs
Card header — met actie-buttons
mv-blueprint/card-header-actions
Card titel
Card header — simple
mv-blueprint/card-header-simple
Card titel
Subtitel of context
Card header — met tabs
mv-blueprint/card-header-tabs
Bestellingen
Career detail — vacature pagina
mv-blueprint/career-detail
Careers — vacature grid
mv-blueprint/career-grid
Werken bij ons
Voorbeeld Vacature 3
Bekijk vacature →Voorbeeld Vacature 2
Bekijk vacature →Voorbeeld Vacature 1
Bekijk vacature →Frontend Developer (32-40u)
Bekijk vacature →Careers — vacature lijst
mv-blueprint/career-list
Open vacatures
Voorbeeld Vacature 3Voorbeeld Locatie 3 · vast Voorbeeld Vacature 2Voorbeeld Locatie 2 · vast Voorbeeld Vacature 1Voorbeeld Locatie 1 · vast Frontend Developer (32-40u)Cart items — winkelwagen lijst
mv-blueprint/cart-items
Cart summary — totalen + checkout
mv-blueprint/cart-summary
Category filters — facet bar
mv-blueprint/category-filters
Sorteer:
Category grid — 6 categorieën
mv-blueprint/category-grid
Category sidebar — verticale filters
mv-blueprint/category-sidebar
Coming soon — wachtlijst
mv-blueprint/coming-soon-content
Comparison cards — wij vs zij
mv-blueprint/comparison-cards
Comparison features — feature spotlight
mv-blueprint/comparison-features
Comparison table — features matrix
mv-blueprint/comparison-table
Vergelijk pakketten
| Pakket | Prijs | Wat er in zit |
|---|---|---|
| Voorbeeldpakket A | Op aanvraag |
|
| Voorbeeldpakket B | Op aanvraag |
|
| Voorbeeldpakket C | Op aanvraag |
|
Cookie banner — bottom strip
mv-blueprint/cookie-banner
Cookie banner — minimal
mv-blueprint/cookie-minimal
Cookie modal — gedetailleerd
mv-blueprint/cookie-modal
Description list — 2-col grid
mv-blueprint/desc-list-grid
Description list — simple
mv-blueprint/desc-list-simple
Description list — striped rows
mv-blueprint/desc-list-striped
Divider — section separator
mv-blueprint/divider
Downloads list
mv-blueprint/downloads-list
404 — page not found
mv-blueprint/error-404-content
404
Deze pagina bestaat niet
FAQ accordion
mv-blueprint/faq-accordion
Veelgestelde vragen
Voorbeeld FAQ 1
Dit is voorbeeld-content om te tonen wat mogelijk is. Vervang of verwijder via de knop Demo-content.
Voorbeeld FAQ 2
Dit is voorbeeld-content om te tonen wat mogelijk is. Vervang of verwijder via de knop Demo-content.
Voorbeeld FAQ 3
Dit is voorbeeld-content om te tonen wat mogelijk is. Vervang of verwijder via de knop Demo-content.
FAQ — 2-col grid
mv-blueprint/faq-grid
Veelgestelde vragen
Voorbeeld FAQ 1
Dit is voorbeeld-content om te tonen wat mogelijk is. Vervang of verwijder via de knop Demo-content.
Voorbeeld FAQ 2
Dit is voorbeeld-content om te tonen wat mogelijk is. Vervang of verwijder via de knop Demo-content.
Voorbeeld FAQ 3
Dit is voorbeeld-content om te tonen wat mogelijk is. Vervang of verwijder via de knop Demo-content.
FAQ — simple list
mv-blueprint/faq-simple
Veelgestelde vragen
Voorbeeld FAQ 1
Dit is voorbeeld-content om te tonen wat mogelijk is. Vervang of verwijder via de knop Demo-content.
Voorbeeld FAQ 2
Dit is voorbeeld-content om te tonen wat mogelijk is. Vervang of verwijder via de knop Demo-content.
Voorbeeld FAQ 3
Dit is voorbeeld-content om te tonen wat mogelijk is. Vervang of verwijder via de knop Demo-content.
Feature grid 3 columns
mv-blueprint/feature-grid-3col
Onze kernwaarden
Voorbeeld-USP een
Vervang deze regel door iets wat je zelf waarmaakt. Een USP is geen slogan maar een verschil dat de klant merkt.
Voorbeeld-USP twee
Schrijf op wat je anders doet dan de rest, in de woorden die je klant zelf gebruikt.
Voorbeeld-USP drie
Drie sterke punten werken beter dan zes zwakke. Haal weg wat niet waar is.
Features — alternating image + text
mv-blueprint/features-alternating
Wat het kan
Voorbeeld-USP een
Vervang deze regel door iets wat je zelf waarmaakt. Een USP is geen slogan maar een verschil dat de klant merkt.
Voorbeeld-USP twee
Schrijf op wat je anders doet dan de rest, in de woorden die je klant zelf gebruikt.
Voorbeeld-USP drie
Drie sterke punten werken beter dan zes zwakke. Haal weg wat niet waar is.
Features — cards (3 columns met card-style)
mv-blueprint/features-cards
Onze kernwaarden
Voorbeeld-USP een
Vervang deze regel door iets wat je zelf waarmaakt. Een USP is geen slogan maar een verschil dat de klant merkt.
Voorbeeld-USP twee
Schrijf op wat je anders doet dan de rest, in de woorden die je klant zelf gebruikt.
Voorbeeld-USP drie
Drie sterke punten werken beter dan zes zwakke. Haal weg wat niet waar is.
Features — grid (3 columns)
mv-blueprint/features-grid
Onze kernwaarden
Voorbeeld-USP een
Vervang deze regel door iets wat je zelf waarmaakt. Een USP is geen slogan maar een verschil dat de klant merkt.
Voorbeeld-USP twee
Schrijf op wat je anders doet dan de rest, in de woorden die je klant zelf gebruikt.
Voorbeeld-USP drie
Drie sterke punten werken beter dan zes zwakke. Haal weg wat niet waar is.
Features — icon list
mv-blueprint/features-icon-list
Footer — gecentreerd met tagline
mv-blueprint/footer-centered
Footer — 4 kolommen
mv-blueprint/footer-columns
Footer — simple centered
mv-blueprint/footer-simple
Grid list — cards (4 items)
mv-blueprint/grid-list-cards
Grid list — met icons
mv-blueprint/grid-list-icons
Header — simple page header
mv-blueprint/header-simple
Components
Header — met breadcrumbs
mv-blueprint/header-with-breadcrumbs
Components
Header — met tabs
mv-blueprint/header-with-tabs
Components
KB — artikel content
mv-blueprint/kb-article-content
Components
Bijgewerkt: 3 mei 2026 · 4 min lezen
KB — artikellijst
mv-blueprint/kb-article-list
Automatisering begrip 20
Voor zodat omdat daarna vervolgens bovendien praktijk aanpak resultaat klant. Aanpak resultaat klant website pagina bezoeker meting verbetering test inzicht stap.
Automatisering begrip 32
Voor zodat omdat daarna vervolgens bovendien praktijk aanpak resultaat klant website pagina bezoeker meting. Aanpak resultaat klant website pagina bezoeker meting verbetering test inzicht stap keuze balans basis kern.
Automatisering begrip 44
Voor zodat omdat daarna vervolgens bovendien praktijk aanpak resultaat klant. Aanpak resultaat klant website pagina bezoeker meting verbetering test inzicht stap.
Automatisering begrip 56
Voor zodat omdat daarna vervolgens bovendien praktijk aanpak resultaat klant website pagina bezoeker meting. Aanpak resultaat klant website pagina bezoeker meting verbetering test inzicht stap keuze balans basis kern.
Automatisering begrip 68
Voor zodat omdat daarna vervolgens bovendien praktijk aanpak resultaat klant. Aanpak resultaat klant website pagina bezoeker meting verbetering test inzicht stap.
Automatisering begrip 8
Voor zodat omdat daarna vervolgens bovendien praktijk aanpak resultaat klant website pagina bezoeker meting. Aanpak resultaat klant website pagina bezoeker meting verbetering test inzicht stap keuze balans basis kern.
KB — categorie grid
mv-blueprint/kb-category-grid
Kennisbank
Link page — link cards met thumbs
mv-blueprint/link-page-cards
Link page — simple link list
mv-blueprint/link-page-simple
Components
Link page — social icons grid
mv-blueprint/link-page-social
Components
Maintenance — onderhoud
mv-blueprint/maintenance-content
🔧
Even bezig met onderhoud
Dank voor je geduld.
Navbar — gecentreerd logo
mv-blueprint/navbar-centered
Navbar — simple links + CTA
mv-blueprint/navbar-simple
Onboarding — steps progress
mv-blueprint/onboarding-steps
Stap 1 van 3
Voorbeeldstap een
Beschrijf wat er als eerste gebeurt, vanuit de klant gezien. De nummering komt uit de volgorde.
Onboarding — survey vraag
mv-blueprint/onboarding-survey
Onboarding — welcome screen
mv-blueprint/onboarding-welcome
Order history — bestellingen tabel
mv-blueprint/order-history
Order summary — bestelling overzicht
mv-blueprint/order-summary
Bestelling niet gevonden
We konden deze bestelling niet openen. Log in om je bestellingen te zien, of gebruik de link uit je bevestigingsmail.
Order tracking — voortgang status
mv-blueprint/order-tracking
Portfolio detail — case study
mv-blueprint/portfolio-detail
Process steps — 4 horizontale stappen
mv-blueprint/process-steps
Zo werken we, in 3 stappen
1
Voorbeeldstap een
Beschrijf wat er als eerste gebeurt, vanuit de klant gezien. De nummering komt uit de volgorde.
2
Voorbeeldstap twee
Wat er daarna gebeurt, en wat jij daarvoor nodig hebt.
3
Voorbeeldstap drie
Waar het op uitloopt, en wanneer de klant iets terugziet.
Product grid — 4 producten
mv-blueprint/product-grid
Onze producten
Voorbeeld Product 3
Voorbeeld-samenvatting van product 3. Vervang deze zin door de echte samenvatting; hij is ook wat er in de zoekresultaten komt te staan.
79,00
Voorbeeld Product 1
Voorbeeld-samenvatting van product 1. Vervang deze zin door de echte samenvatting; hij is ook wat er in de zoekresultaten komt te staan.
59,00
Voorbeeld Product 2
Voorbeeld-samenvatting van product 2. Vervang deze zin door de echte samenvatting; hij is ook wat er in de zoekresultaten komt te staan.
69,00
Lichte aluminium tafellamp 1291
Keuze balans basis kern werkwijze oplossing voorbeeld verschil waarde groei focus ritme vraag antwoord team de. Verschil waarde groei focus ritme vraag antwoord team de.
142,95
Product header — split categorie + product
mv-blueprint/product-header-split
Product info — single product
mv-blueprint/product-info
Quick links — pill nav
mv-blueprint/quick-links
Quote block — pull quote
mv-blueprint/quote-block
Dit is voorbeeld-content om te tonen wat mogelijk is. Vervang of verwijder via de knop Demo-content.
Voorbeeld Review 1 · Voorbeeld functie 1, Voorbeeld bedrijf 1
Related products — 4 producten
mv-blueprint/related-products
Search box — groot
mv-blueprint/search-box
Wat zoek je?
Section header — titel + subtitel
mv-blueprint/section-header
Service cards — 3 cards met afbeelding
mv-blueprint/service-cards
Onze diensten
Webdesign & development
Wij bouwen WordPress-sites die snel laden, hoog scoren in Google en eenvoudig zelf te beheren zijn. Van strakke marketingsites tot WooCommerce-shops met…
Lees meer → Voorbeeld Dienst 3
Voorbeeld-samenvatting van dienst 3. Vervang deze zin door de echte samenvatting; hij is ook wat er in de zoekresultaten komt te staan.
Lees meer → Voorbeeld Dienst 2
Voorbeeld-samenvatting van dienst 2. Vervang deze zin door de echte samenvatting; hij is ook wat er in de zoekresultaten komt te staan.
Lees meer →Services cards — 3 cards
mv-blueprint/services-cards
Diensten
Webdesign & development
Wij bouwen WordPress-sites die snel laden, hoog scoren in Google en eenvoudig zelf te beheren zijn. Van strakke marketingsites tot WooCommerce-shops met…
Lees meer →Voorbeeld Dienst 3
Voorbeeld-samenvatting van dienst 3. Vervang deze zin door de echte samenvatting; hij is ook wat er in de zoekresultaten komt te staan.
Lees meer →Voorbeeld Dienst 2
Voorbeeld-samenvatting van dienst 2. Vervang deze zin door de echte samenvatting; hij is ook wat er in de zoekresultaten komt te staan.
Lees meer →Services grid — 6 diensten
mv-blueprint/services-grid
Onze diensten
Automatisering als dienst 20
Voor zodat omdat daarna vervolgens bovendien praktijk aanpak resultaat klant. Aanpak resultaat klant website pagina bezoeker meting verbetering test inzicht stap.
Automatisering als dienst 8
Voor zodat omdat daarna vervolgens bovendien praktijk aanpak resultaat klant website pagina bezoeker meting. Aanpak resultaat klant website pagina bezoeker meting verbetering test inzicht stap keuze balans basis kern.
Contentstrategie als dienst 16
Voorbeeld verschil waarde groei focus ritme vraag antwoord team de een met voor zodat. Antwoord team de een met voor zodat omdat daarna vervolgens bovendien praktijk aanpak resultaat klant.
Contentstrategie als dienst 4
Voorbeeld verschil waarde groei focus ritme vraag antwoord team de. Antwoord team de een met voor zodat omdat daarna vervolgens bovendien.
Conversieoptimalisatie als dienst 15
Daarna vervolgens bovendien praktijk aanpak resultaat klant website pagina bezoeker meting. Website pagina bezoeker meting verbetering test inzicht stap keuze balans basis kern.
Conversieoptimalisatie als dienst 3
Daarna vervolgens bovendien praktijk aanpak resultaat klant website pagina bezoeker meting verbetering test inzicht stap. Website pagina bezoeker meting verbetering test inzicht stap keuze balans basis kern werkwijze oplossing voorbeeld verschil.
Services timeline — werkwijze stappen
mv-blueprint/services-timeline
Onze aanpak
01
Voorbeeldstap een
Beschrijf wat er als eerste gebeurt, vanuit de klant gezien. De nummering komt uit de volgorde.
02
Voorbeeldstap twee
Wat er daarna gebeurt, en wat jij daarvoor nodig hebt.
03
Voorbeeldstap drie
Waar het op uitloopt, en wanneer de klant iets terugziet.
Sidebar — dashboard widgets
mv-blueprint/sidebar-dashboard
Sidebar — filters
mv-blueprint/sidebar-filters
Sidebar — navigation
mv-blueprint/sidebar-nav
Sidebar widget — generic block
mv-blueprint/sidebar-widget
Sitemap — alle links
mv-blueprint/sitemap-links
Sitemap
Algemene voorwaarden
App dashboard
Bedankt
Bestelling volgen
Binnenkort
Blog
Blog artikel
Case categorie
Case detail
Cases
Cookie instellingen
Demo aanvragen
Dienst detail
Diensten
Inloggen
Juridisch
Kennisbank
Kennisbank artikel
Landingspagina
Linkpagina
Onboarding
Onderhoud
Stats grid — 4 KPI’s
mv-blueprint/stats-grid
00
Voorbeeldcijfer
00
Voorbeeldcijfer
00
Voorbeeldcijfer
Table — cards layout (mobiel-friendly)
mv-blueprint/table-cards
Table — generic data table
mv-blueprint/table-section
Table — striped rows
mv-blueprint/table-striped
| Kolom 1 | Kolom 2 | Kolom 3 |
|---|---|---|
| A | 1 | X |
| B | 2 | Y |
| C | 3 | Z |
| D | 4 | W |
Team — ronde avatars
mv-blueprint/team-circles
Het team
Wouter Polman
Strateeg
Voorbeeld Teamlid 1
Voorbeeld functie / rol 1
Voorbeeld Teamlid 2
Voorbeeld functie / rol 2
Voorbeeld Teamlid 3
Voorbeeld functie / rol 3
Team grid (4 columns)
mv-blueprint/team-grid
Ons team
Team — lijst met functie
mv-blueprint/team-list
Het team
Wouter Polman
Strateeg
Voorbeeld Teamlid 1
Voorbeeld functie / rol 1
Voorbeeld Teamlid 2
Voorbeeld functie / rol 2
Voorbeeld Teamlid 3
Voorbeeld functie / rol 3
Text block — kop + body
mv-blueprint/text-block
Text + image — image links
mv-blueprint/text-image-left
Text + image — image rechts
mv-blueprint/text-image-right
Timeline — compacte horizontale steps
mv-blueprint/timeline-compact
Hoe we werken
01
Voorbeeldstap een
Beschrijf wat er als eerste gebeurt, vanuit de klant gezien. De nummering komt uit de volgorde.
02
Voorbeeldstap twee
Wat er daarna gebeurt, en wat jij daarvoor nodig hebt.
03
Voorbeeldstap drie
Waar het op uitloopt, en wanneer de klant iets terugziet.
Timeline — verticaal proces
mv-blueprint/timeline-vertical
Hoe het werkt
- Voorbeeldstap een Beschrijf wat er als eerste gebeurt, vanuit de klant gezien. De nummering komt uit de volgorde.
- Voorbeeldstap twee Wat er daarna gebeurt, en wat jij daarvoor nodig hebt.
- Voorbeeldstap drie Waar het op uitloopt, en wanneer de klant iets terugziet.
Topbar — met actie-buttons
mv-blueprint/topbar-actions
Topbar — met zoekbalk
mv-blueprint/topbar-search
Topbar — simple
mv-blueprint/topbar-simple
Wishlist grid — verlanglijst
mv-blueprint/wishlist-grid
Social proof
Categorie: mv-social-proof · 16 patterns
Logo cloud — klant logos
mv-blueprint/logo-cloud
Logo grid — partner/klant raster
mv-blueprint/logo-grid
Reviews list — verticale review-feed
mv-blueprint/reviews-list
Klant reviews
Dit is voorbeeld-content om te tonen wat mogelijk is. Vervang of verwijder via de knop Demo-content.
Voorbeeld Review 1 · Voorbeeld functie 1, Voorbeeld bedrijf 1 · 12 juli 2026
Dit is voorbeeld-content om te tonen wat mogelijk is. Vervang of verwijder via de knop Demo-content.
Voorbeeld Review 2 · Voorbeeld functie 2, Voorbeeld bedrijf 2 · 12 juni 2026
Dit is voorbeeld-content om te tonen wat mogelijk is. Vervang of verwijder via de knop Demo-content.
Voorbeeld Review 3 · Voorbeeld functie 3, Voorbeeld bedrijf 3 · 13 mei 2026
Stat card — simple widget
mv-blueprint/stat-card-simple
Voorbeeldcijfer
00
Vul een getal in dat je kunt onderbouwen.
Stats bar — horizontale KPI strip
mv-blueprint/stats-bar
Stats — 3 cards
mv-blueprint/stats-cards
00
Voorbeeldcijfer
Vul een getal in dat je kunt onderbouwen.
00
Voorbeeldcijfer
Zonder bron hoort een cijfer hier niet.
00
Voorbeeldcijfer
Laat weg wat je niet kunt navertellen.
Stats — gecentreerd grote nummer
mv-blueprint/stats-centered
00
Voorbeeldcijfer
Vul een getal in dat je kunt onderbouwen.
Stats grid — 4 KPI’s
mv-blueprint/stats-grid
00
Voorbeeldcijfer
00
Voorbeeldcijfer
00
Voorbeeldcijfer
Stats — section (4 KPIs in een hero-block)
mv-blueprint/stats-section
In cijfers
00
Voorbeeldcijfer
00
Voorbeeldcijfer
00
Voorbeeldcijfer
Testimonial — single quote groot
mv-blueprint/testimonial-single
“Dit is voorbeeld-content om te tonen wat mogelijk is. Vervang of verwijder via de knop Demo-content.”
Voorbeeld Review 3
Voorbeeld functie 3, Voorbeeld bedrijf 3
Testimonials — 3 kolommen
mv-blueprint/testimonials-3col
Dit is voorbeeld-content om te tonen wat mogelijk is. Vervang of verwijder via de knop Demo-content.
Voorbeeld Review 1 · Voorbeeld functie 1, Voorbeeld bedrijf 1
Dit is voorbeeld-content om te tonen wat mogelijk is. Vervang of verwijder via de knop Demo-content.
Voorbeeld Review 2 · Voorbeeld functie 2, Voorbeeld bedrijf 2
Dit is voorbeeld-content om te tonen wat mogelijk is. Vervang of verwijder via de knop Demo-content.
Voorbeeld Review 3 · Voorbeeld functie 3, Voorbeeld bedrijf 3
Testimonials — 3 cards met avatar
mv-blueprint/testimonials-cards
Wat klanten zeggen
“Dit is voorbeeld-content om te tonen wat mogelijk is. Vervang of verwijder via de knop Demo-content.”
“Dit is voorbeeld-content om te tonen wat mogelijk is. Vervang of verwijder via de knop Demo-content.”
“Dit is voorbeeld-content om te tonen wat mogelijk is. Vervang of verwijder via de knop Demo-content.”
Testimonials — 6 in grid
mv-blueprint/testimonials-grid
Wat klanten zeggen
Dit is voorbeeld-content om te tonen wat mogelijk is. Vervang of verwijder via de knop Demo-content.
Voorbeeld Review 1
Voorbeeld functie 1, Voorbeeld bedrijf 1
Dit is voorbeeld-content om te tonen wat mogelijk is. Vervang of verwijder via de knop Demo-content.
Voorbeeld Review 2
Voorbeeld functie 2, Voorbeeld bedrijf 2
Dit is voorbeeld-content om te tonen wat mogelijk is. Vervang of verwijder via de knop Demo-content.
Voorbeeld Review 3
Voorbeeld functie 3, Voorbeeld bedrijf 3
Testimonials — slider (CSS scroll-snap)
mv-blueprint/testimonials-slider
USP bar — 4 voordelen horizontaal
mv-blueprint/usp-bar
USP rij — 4 punten
mv-blueprint/usp-row
Voorbeeld-USP een
Vervang deze regel door iets wat je zelf waarmaakt. Een USP is geen slogan maar een verschil dat de klant merkt.
Voorbeeld-USP twee
Schrijf op wat je anders doet dan de rest, in de woorden die je klant zelf gebruikt.
Voorbeeld-USP drie
Drie sterke punten werken beter dan zes zwakke. Haal weg wat niet waar is.
Pricing
Categorie: mv-pricing · 5 patterns
Comparison table — features matrix
mv-blueprint/comparison-table
Vergelijk pakketten
| Pakket | Prijs | Wat er in zit |
|---|---|---|
| Voorbeeldpakket A | Op aanvraag |
|
| Voorbeeldpakket B | Op aanvraag |
|
| Voorbeeldpakket C | Op aanvraag |
|
Pricing — cards (3 tiers)
mv-blueprint/pricing-cards
Transparante prijzen
Voorbeeldpakket A
Op aanvraag
- Wat er in dit pakket zit
- Nog een regel
- En een derde
Voorbeeldpakket B
Op aanvraag
- Alles uit pakket A
- Plus wat dit pakket toevoegt
- En nog iets
Voorbeeldpakket C
Op aanvraag
- Alles uit pakket B
- Plus het onderscheid van dit pakket
- En een laatste regel
Voorbeeldvoorwaarde. Vul in wat er echt geldt, of laat dit veld leeg.
Pricing — simple 3 plans
mv-blueprint/pricing-simple
Tarieven
Voorbeeldpakket A
Op aanvraag
- Wat er in dit pakket zit
- Nog een regel
- En een derde
Voorbeeldpakket B
Op aanvraag
- Alles uit pakket A
- Plus wat dit pakket toevoegt
- En nog iets
Voorbeeldpakket C
Op aanvraag
- Alles uit pakket B
- Plus het onderscheid van dit pakket
- En een laatste regel
Voorbeeldvoorwaarde. Vul in wat er echt geldt, of laat dit veld leeg.
Pricing — comparison table
mv-blueprint/pricing-table
Pakketten
| Voorbeeldpakket A | Voorbeeldpakket B | Voorbeeldpakket C | |
|---|---|---|---|
| Prijs | Op aanvraag | Op aanvraag | Op aanvraag |
| Wat er in zit | Wat er in dit pakket zit Nog een regel En een derde |
Alles uit pakket A Plus wat dit pakket toevoegt En nog iets |
Alles uit pakket B Plus het onderscheid van dit pakket En een laatste regel |
| Kies | Kies | Kies |
Pricing tiers (3 columns)
mv-blueprint/pricing-tiers
Pakketten
Voorbeeldpakket A
Op aanvraag
- Wat er in dit pakket zit
- Nog een regel
- En een derde
Voorbeeldpakket B
Op aanvraag
- Alles uit pakket A
- Plus wat dit pakket toevoegt
- En nog iets
Voorbeeldpakket C
Op aanvraag
- Alles uit pakket B
- Plus het onderscheid van dit pakket
- En een laatste regel
Contact
Categorie: mv-contact · 13 patterns
Checkout form — bestelling afronden
mv-blueprint/checkout-form
Contact — kaarten per kanaal
mv-blueprint/contact-cards
Hoe kunnen we je helpen?
Contact — gecentreerd compact
mv-blueprint/contact-centered
Neem contact op
- hallo@monkeyvision.nl
- +31 24 123 4567
-
MV Test Pro22
Kerkenbos 1059
6546 BE Nijmegen
Contact info — adres + contact details
mv-blueprint/contact-info
Kom langs of bel
Adres
MV Test Pro22Kerkenbos 1059
6546 BE Nijmegen
Telefoon
- Maandag 09:00-17:00
- Dinsdag 09:00-17:00
- Woensdag 09:00-17:00
- Donderdag 09:00-17:00
- Vrijdag 09:00-17:00
- Zaterdag gesloten
- Zondag gesloten
Contact — simpel (info + form side-by-side)
mv-blueprint/contact-simple
Neem contact op
-
E-mail hallo@monkeyvision.nl
-
Telefoon +31 24 123 4567
-
Bezoek MV Test Pro22
Kerkenbos 1059
6546 BE Nijmegen
Demo request form
mv-blueprint/demo-request-form
Vraag een demo aan
Form — contact eenvoudig
mv-blueprint/form-contact
Stuur ons een bericht
Login form
mv-blueprint/login-form
Newsletter signup
mv-blueprint/newsletter-signup
Password reset
mv-blueprint/password-reset
Wachtwoord vergeten
Vul je e-mailadres of gebruikersnaam in. Als het account bestaat, sturen we een link om een nieuw wachtwoord in te stellen.
Register form
mv-blueprint/register-form
Review form — beoordeling indienen
mv-blueprint/review-form
Schrijf een review
Webinar signup form
mv-blueprint/webinar-signup
Media
Categorie: mv-media · 9 patterns
Gallery — horizontale carousel
mv-blueprint/gallery-carousel
← Sleep of swipe om te scrollen →
Gallery — grid 9 afbeeldingen
mv-blueprint/gallery-grid
Gallery — masonry mix
mv-blueprint/gallery-masonry
Grid list — met afbeeldingen
mv-blueprint/grid-list-images
Item 1
Korte beschrijving onder de afbeelding.
Item 2
Korte beschrijving onder de afbeelding.
Item 3
Korte beschrijving onder de afbeelding.
Item 4
Korte beschrijving onder de afbeelding.
Item 5
Korte beschrijving onder de afbeelding.
Item 6
Korte beschrijving onder de afbeelding.
Portfolio cards — met categorie tags
mv-blueprint/portfolio-cards
Geselecteerd werk
Voorbeeldcase
Voorbeeldcase. Vervang deze tekst door een project van jezelf: wie de opdrachtgever was, wat de vraag was en wat je hebt gemaakt. De uitdaging Beschrijf hier het probleem waarmee de opdrachtgever binnenkwam, in zijn eigen woorden. Een case leest het best als hij begint bij wat er niet werkte. Resultaat Wat er is opgeleverd Wat […]
Voorbeeld Klant 3
Voorbeeld Case 3
Voorbeeld-samenvatting van case 3. Vervang deze zin door de echte samenvatting; hij is ook wat er in de zoekresultaten komt te staan.
Portfolio grid — 6 projecten
mv-blueprint/portfolio-grid
Recent werk
Portfolio masonry — variërende heights
mv-blueprint/portfolio-masonry
Product gallery — main + thumbs
mv-blueprint/product-gallery
Video player — embedded
mv-blueprint/video-player
Einde van bibliotheek. Patterns toevoegen? Plaats een nieuw .php bestand in themes/mv-blueprint/patterns/ en run dit script opnieuw.