Naar hoofdinhoud

Componenten-bibliotheek

Een overzicht van herbruikbare Vendic-componenten, zodat pagina’s consistent blijven in ritme, typografie en interactie.

Thema

Atomics

Single-purpose primitives: buttons, arrow-pills, cta-links, slider-controls.

<x-atomics.button> (variants: primary / secondary / dark / outline-light · sizes: small / regular / large)

<x-atomics.arrow-pill>

<x-atomics.icon-tile> (tones: yellow / teal-tint / teal · sizes: sm / md / lg)

<x-atomics.cta-link> (caller levert het icoon via before:bg-* decoration-classes)

<x-atomics.slider-controls> (live demo met sample Alpine-state; counter + disabled-states werken)

/
Thema

Hero's & tekst

Page-openers en tekst/prose-blokken. De hero's zijn full-bleed; hier geclipt in een card zodat ze te beoordelen zijn.

<x-content.hero-default> (standaard home/service-hero met titel, teaser, CTA; optioneel DB-gedreven featured-case rechts. Full-bleed)

Een Hyvä-shop die snel laadt en soepel converteert

Van designconcept naar een nieuwe Magento-storefront op Hyvä. Gebouwd door senior consultants, versterkt door Vendic AI.

<x-content.hero-slim> (compacte hero voor secundaire pagina's: titel + teaser, geen featured case. Full-bleed)

Onze partners in de Magento-stack

Elke partner versterkt één specifieke laag van onze stack: frontend, platform, monitoring en payments. Geselecteerd op stabiliteit en bewezen samenwerking.

<x-content.hero-2-cols> (donkere 2-koloms service-hero met breadcrumbs, titel/teaser/CTA links en beeld rechts. Full-bleed, bg-teal-service)

Migreer van Shopware naar Magento Open Source

Meer schaalbaarheid, een rijker developer-ecosysteem en naadloze Hyvä-integratie.

<x-content.hero-case> (gecentreerde case-study-hero met tags, titel en groot browser-frame beeld. Full-bleed)

Case study

Een nieuwe storefront voor Voorbeeld-case

Hyvä / Magento / CRO
voorbeeld-case.nl
Voorbeeld-case storefront

<x-content.section-heading> (canonieke eyebrow + h2 + subtitle; centered of left)

Eyebrow label

Titel van de sectie

Optionele subtitle die de sectie in een of twee zinnen inleidt.

<x-content.text-simple> (centered narrow text section)

Sample sectie

Sample body-tekst in een gecentreerde, smalle layout. Wordt gebruikt voor introducties en korte uitleg-secties.

<x-content.text-two-columns> (intro / split-text 2-col)

Sample sectie-titel

Eerste kolom met sample tekst. Wordt vaak gebruikt voor intro-paragrafen op case-detail-pagina's.

Tweede kolom met sample tekst. Beide kolommen kunnen meerdere paragrafen bevatten.

<x-content.split-teaser-text> (headline links, teaser-paragrafen rechts)

Sample title

Sample headline aan de linker zijde

Eerste paragraph aan de rechter zijde, ter teaser van de sectie.

Tweede paragraph met meer context.

<x-content.case-rich-text> (prose wrapper voor case-detail body)

Sample h2 in case-rich-text

Sample paragraph met body-tekst. De prose-wrapper geeft automatische typografie-rules voor case-detail content.

Tweede paragraph om het ritme te tonen.

Thema

Proof & vertrouwen

Cijfers, stat-strips, trust-badges en partner-logo's: de verschillende proof-looks naast elkaar.

<x-content.stat-band> (canonieke hairline proof-strip; accepteert value/label of title/description; onDark-variant; size="default" voor cijfers, size="compact" voor tekst-frases)

Default — cijfers

30+
Hyvä shops live
100%
van onze Hyvä projecten haalt Core Web Vitals
25+
takeovers in 2 jaar
13 jaar
Magento, sinds 2013

Compact — tekst-frases

5 kansen
uit de quickscan op jouw shop
Binnen weken
tot eerste module live
30+ modules
onderbouwd met externe A/B-testdata
Vaste prijs
implementatie inbegrepen

<x-content.stat-tiles> (getinte, escalerende tiles met bottom-aligned cijfer; tone per item: light / muted / forest / pale / ink)

Onze cijfers
20+
Teamleden
100+
Projecten
13+
Jaar ervaring

<x-content.stats-cards-section> (proof-stats, default + teal-anchor card)

Ervaring
30+

Hyvä projecten gerealiseerd

100%

van onze Hyvä projecten halen Core Web Vitals

<x-content.card-stats> · variant="case"

42%
Conversie-uplift na implementatie van CRO-modules
6 dagen
Doorlooptijd van brief tot brandbook-oplevering
Gemiddeld over de laatste 10 AI Design projecten.
25+
Magento takeovers in de afgelopen 2 jaar

<x-content.card-stats> · variant="default"

100%

Hyvä-projecten halen Core Web Vitals

13+

jaar Magento, sinds 2013

30+

Hyvä shops live

<x-content.trust-strip> (rij van trust-badges met logo + label + omschrijving; align left/center)

Hyvä Platinum Partner Hyvä Platinum Partner
Eerste Hyvä Platinum Partner ter wereld.
Emerce 100 2026 Emerce 100 2026
Bij de beste 100 e-commercebedrijven van Nederland.

<x-content.partner-logos>

Official Partners

<x-content.partners-grid> (DB-gedreven: query't zelf de actieve Partner-records; rendert niets als er geen zijn)

Thema

Cases & portfolio

Case-showcases, portfolio-grids en de galerij: de manieren waarop we werk laten zien.

<x-content.featured-case-box>

My Hair Shop

AI design + build

25%
van de kosten van een maatwerktraject
6 weken
van start tot live
Screenshot My Hair Shop webshop
Bekijk case

<x-content.featured-case-spotlight> (editorial single-case: browser-scroll + hairline-stats)

AI design + build

My Hair Shop

Van designconcept naar een volledig nieuwe Hyvä-shop, ontworpen met Vendic AI en gebouwd door senior Magento-developers.

Bekijk de volledige case
myhairshop.nl
My Hair Shop
25%
van de kosten van een maatwerktraject
6 weken
van start tot live
90+
PageSpeed-score

<x-content.card-complex-grid> (case-cards grid met optionele eyebrow + h2)

<x-content.portfolio-quote-card> (quote-cel tussen case-cards op de portfolio-index)

Klant aan het woord

Vendic nam onze Magento-shop over en loste binnen twee weken de openstaande performance-issues op.

H
Huissteden
Sample klantnaam

<x-content.gallery> · variant="case"

Gallery sample

<x-content.cases-carousel> (rendert CaseStudy-modellen uit de DB)

Thema

Testimonials & reviews

Klantcitaten in verschillende dichtheden: enkel, slider en review-grid.

<x-content.testimonial-single>

Klant ervaring

Wat klanten zeggen

P
Sample Auteur
Sample Bedrijf
"Sample-testimonial met meerdere zinnen om het premium-quote-ritme te tonen. Vendic heeft uitstekend werk geleverd op dit project."

<x-content.testimonials-slider> (rendert vanuit DB; lege state als geen reviews)

Klanten over Vendic

Vendic heeft het technische onderhoud overgenomen en een Magento update uitgevoerd. Vanaf het begin heldere communicatie en soepele uitvoering. Support bleef uitstekend na go-live.
T Topa Verpakkingen
Wij ontvangen dagelijks duizenden bezoekers op de website die vliegensvlug en zonder problemen hun bestelling kunnen plaatsen. Dit dankzij de specialistische Magento/ Hyvä kennis die Vendic in huis heeft!
S Sweet Jewellery Eline Nouwen
Sinds 2016 klant bij Vendic. Volgens mij de beste partner voor Magento 2 webshops. Na meer dan 7 jaar nog steeds tevreden.
B Biogroei Mathias Vanduffel
Thema

Features & inhoudsblokken

Feature-grids, icon-cards, vergelijkingen en lijsten: de bouwstenen voor de body van een pagina.

<x-content.feature-grid>

Features

Inclusief features
die opleveren

Snelle bezorging

Sample description.

Slim zoeken

Sample description.

Voorraad realtime

Sample description.

Snelle bezorging

Sample description.

Slim zoeken

Sample description.

Voorraad realtime

Sample description.

<x-content.feature-list>

Features

Inclusief features
die opleveren

  • Nu besteld, [datum+tijd] bezorgd

    Sample description voor een feature-item.

  • Geoptimaliseerd voor zoekmachines

    Sample description voor een feature-item.

  • Aanvullen adresgegevens

    Sample description voor een feature-item.

  • Veelgestelde vragen

    Sample description voor een feature-item.

  • Alle merken in één overzicht

    Sample description voor een feature-item.

  • Hoge Google PageSpeed scores

    Sample description voor een feature-item.

<x-content.feature-grid-job-benefits> (gecentreerde headline + grid van features met gele icon-cirkel; icon = raw SVG-string)

Arbeidsvoorwaarden

Wat je krijgt
bij Vendic

Flexibel thuiswerken

Werk waar je het meest productief bent, met een vast teamritme.

Leerbudget

Ruimte om te groeien in Magento, Hyvä en AI-tooling.

Teamevents

Regelmatig samen offline, van hackdays tot borrels.

<x-content.topline-cards-section> (optionele per-item icon-key rendert een x-atomics.icon-tile; vervangt het oude icon-cards-section)

Eyebrow label

Sectie-headline

Card item 1

Sample content voor de eerste card.

Card item 2

Sample content voor de tweede card.

Card item 3

Sample content voor de derde card.

Waarom Vendic

Icon-variant met heroicons

Hyperfocus op Magento

Geen versnipperd stack-verhaal, alleen Magento en Hyvä, tot in de details.

Complete suite

Frontend, checkout en admin in één samenhangend geheel opgeleverd.

Voorspelbaar proces

Vaste fases met regressie-controle op elke release.

Meetbare groei

Snellere Core Web Vitals die zich vertalen naar conversie.

<x-content.card> (4 thema-varianten)

Label

Card headline smoke

Korte beschrijving van de card-content. Standaard ~2 zinnen lengte.

Lees meer
Label

Card headline porcelain

Korte beschrijving van de card-content. Standaard ~2 zinnen lengte.

Lees meer
Label

Card headline teal-service

Korte beschrijving van de card-content. Standaard ~2 zinnen lengte.

Lees meer
Label

Card headline teal

Korte beschrijving van de card-content. Standaard ~2 zinnen lengte.

Lees meer

<x-content.usp-grid>

USPs

Sample USP-section

USP 1

Sample beschrijving.

USP 2

Sample beschrijving.

USP 3

Sample beschrijving.

<x-content.comparison>

Vergelijking

Magento-development met meer regie en minder ruis

13+ jaar Magento-specialisme plus AI-agents in onze eigen development-omgeving. Voor snellere analyse, AI-assisted development en transparanter werk.

Veel voorkomende patronen

  • Cases zonder context of cijfers
  • Voortgang als black box
  • AI als shortcut, of helemaal niet
  • Grote releases op vaste momenten, met veel risico per release
  • Generieke hosting en processen die niet passen bij Magento
  • Onderhoud pas als er iets stuk gaat
  • Lage kwaliteit externe modules stapelen tot technische schuld
  • Elke conversie-verbetering vanaf nul testen
  • Support via tickets, traag heen-en-weer per e-mail
De Vendic manier
  • 30+ Hyvä-projecten in productie, 100% CWV-score behaald
  • Voortgang in Slack, code in GitHub, uren transparant per week
  • AI-versterkt op development, refactors, analyse en QA. Senior developer reviewt elke release.
  • Vaker een kleine release dan één grote, met minder risico per stap
  • Enterprise-grade Magento-hosting (Savvii), Vendic Pipeline met AI
  • Periodieke security-, performance- en CWV-checks, ingepland niet reactief
  • Bewezen Vendic modules en zorgvuldig gekozen externe modules, zonder onnodige complexiteit
  • Vendic CRO: bewezen Hyvä-patronen uit andere shops direct toepasbaar
  • Directe Slack-toegang voor klanten, korte lijnen met het team

<x-content.pros-and-cons>

Waar we sterk in zijn

Wat je van ons mag verwachten

  • Sterke operationele partner

    Het liefst bouwen we de hele dag. Tuurlijk, soms is er voorbereidend (inventariserend) werk nodig, maar we geloven sterk in learning by doing.

  • Focus op schaalbaarheid en onderhoud

    We adviseren graag over de (toekomstige) schaalbaarheid en onderhoudbaarheid van jouw webshop.

  • Directe en open communicatie

    Je kunt al onze communicatie over jouw project volgen en erin participeren.

Waar we niet van zijn

Wat je beter elders belegt

  • Marketing

    Marketing en branding laten we aan anderen, maar we implementeren uiteraard de technische implicaties van marketing in de webshop.

  • Strategisch advies

    Je zult van ons geen uitgewerkt strategisch advies van 50 pagina's ontvangen.

  • Non Magento werk

    Wij geloven sterk in specialisatie. Al het werk wat we doen, is binnen de Magento applicatie.

<x-content.dot-bullet-list> (dot: ink/muted/yellow · tone: muted/light)

  • Bewezen webshopfunctionaliteit uit veel Magento-projecten
  • Verkorte time-to-market vanuit een onderhouden basis
  • Ruimte voor maatwerk waar jouw processen dat vragen
  • Hosting en onderhoud in de maandprijs
  • Kwartaalupdates na regressie-controle
  • Geen eenmalige projectfee voor de basis

<x-content.bullet-point> (check-bullet voor lijsten)

Sample bullet-point item 1
Sample bullet-point item 2
Sample bullet-point item 3
Thema

Routes & services

Navigatie-blokken die de bezoeker naar de juiste service leiden: bento, route-grid en route-cards.

Thema

Proces & stappen

Manieren om een proces of stappenplan te tonen.

<x-content.process-steps> ("SAMEN → VENDIC" stappen-band met genummerde cards + badges eronder. Gebouwd voor 5 stappen)

Van designconcept naar live shop

Vijf stappen: de eerste drie doen we samen, de laatste twee neemt Vendic voor z'n rekening.

01
SAMEN

Intake & scope

We brengen je shop, doelen en knelpunten in kaart.

02
SAMEN

Designconcept

AI-gegenereerde designs, geregisseerd door senior consultants.

03
SAMEN

Akkoord

Je kiest de richting; wij zetten het om in een bouwplan.

04
VENDIC

Bouw op Hyvä

Vendic bouwt de storefront met regressie-controle.

05
VENDIC

Livegang

Oplevering, monitoring en overdracht.

Samen ontworpen AI-gedreven Vaste prijs

<x-content.steps-slider> (horizontale slider met stap-cards en prev/next-controls; child items met title/headline/content)

Ons proces

STAP 1

Intake

We brengen je shop, doelen en knelpunten in kaart.

STAP 2

Designconcept

AI-gegenereerde designs, geregisseerd door senior consultants.

STAP 3

Bouw op Hyvä

We bouwen de storefront met regressie-controle op elke release.

STAP 4

Livegang

Oplevering, monitoring en overdracht.
Thema

Prijzen & plannen

Pricing-tabellen en plan-cards.

<x-content.plans>

Opties

Projectvormen

Kies wat bij jouw project past: standaardisatie, maatwerk of een mix van de twee.

Vendic Elements

  • Voor een snel en goed gestandaardiseerd resultaat
  • Fixed maandelijkse kosten voor Elements, hosting & onderhoud
  • Snel up and running
  • Snel en afgewerkt Hyvä-frontend
  • Maatwerk in het thema (beperkt) en features (weinig/geen beperkingen) mogelijk

Vendic AI Design

  • Custom Magento design én Hyvä-implementatie, AI-versterkt
  • Aanzienlijk korter en goedkoper dan traditioneel maatwerk
  • Senior consultants regisseren ontwerp en uitvoering
  • Geschikt voor projecten die een unieke visuele brand ervaring willen

Maatwerk project

  • Voor een unieke visuele brand ervaring
  • Leunt volledig of grotendeels op een ontwerp op maat
  • Zeer geschikt voor projecten die een unieke visuele brand ervaring willen
  • Veel flexibiliteit in ontwerp en functionaliteit
  • Langere time to market
  • Hogere vereiste investering

<x-content.pricing-card> (default + highlight variant)

Maandelijkse Betaling

€1.099

per maand

  • Maandelijks opzegbaar
  • Inclusief hosting & onderhoud
  • Maatwerk wordt separaat afgerekend
Plan een Elements-intake

Jaarlijkse Betaling

€999 €1.200 besparing per jaar

per maand, jaarlijkse betaling

  • Jaarlijks opzegbaar
  • Inclusief hosting & onderhoud
  • Maatwerk wordt separaat afgerekend
Plan een Elements-intake
Thema

FAQ, tabs & lijsten

Uitklap- en filter-patronen: accordions, tabs en filterbare lijsten.

<x-content.faq>

FAQ

Veel gestelde vragen

Een sample-antwoord met meerdere zinnen om het accordion-ritme te tonen. De content wordt smooth onthuld via Alpine.

Met een kort antwoord.

<x-content.tabs-complex>

Sample tabs

Inhoud tab één

Sample-content voor de eerste tab. Twee à drie zinnen die laten zien hoe de tab-paneelinhoud uitlijnt naast de afbeeldingskolom.

Sample

Inhoud tab twee

Sample-content voor de tweede tab op een teal-achtergrond, om te zien hoe text-color en bi-border-menu zich verhouden.

Sample

<x-content.list-filterable>

Update 12 jun 2026

Sample update item één

Release 04 jun 2026

Sample release item twee

Note 28 mei 2026

Sample note item drie

Thema

Mockups & interactief

Device- en browser-frames om werk of CRO-modules in context te tonen.

<x-cro.phone-frame> (device-mockup voor CRO-modules; size sm/lg, brand-label, active-highlight)

size="lg"
vendic shop
size="sm"

<x-content.browser-frame> (browser-chrome frame rondom een screenshot; scrollt bij hover of met :autoplay. :expandable opent bij klik/tik de volledige capture in een scrollbare fullscreen-viewer — x-content.browser-lightbox, éénmalig per pagina gerenderd)

voorbeeld-case.nl
Voorbeeld-case storefront

<x-content.before-after> in <x-content.browser-frame> (sleepbare voor/na-slider; flush = zonder eigen card-chrome voor gebruik in een frame, :autoplay laat de divider rustig sweepen tot de bezoeker zelf sleept. Browser-frame zonder image-prop rendert slot-content; badge = gele pill rechts in de chrome-bar)

myhairshop.nl Powered by Vendic AI
MyHairShop voor en na de redesign
Oude huisstijl Nieuwe huisstijl

<x-content.browser-deck> (kaartendeck van browser-frames dat per interval rustig doorshuffelt; URL-pill wisselt mee. Pauzeert op hover, statisch bij prefers-reduced-motion)

shogun.nl
Shogun.nl storefront
plasmavisie.nl
Plasmavisie.nl storefront
verlichtingspecialist.nl
Verlichtingspecialist.nl productserie

<x-content.phase-timeline> (levende fase-tijdlijn: indicator vordert door de fases, gele voortgangslijn groeit mee. Pauzeert op hover, statisch op de initial-fase bij prefers-reduced-motion. Gebruikt in de /overname-magento2-onderhoud hero)

Vendic Takeover

van overname tot vast ritme

Live shop draait door
  1. Code review rapport in management-taal
  2. Afstemming korte lijn met je huidige beheerder
  3. Parallelle setup wij bouwen naast je live omgeving
  4. Switch live DNS-switch van circa 5 minuten
  5. Onderhoudsritme vaste updates, monitoring en sprints

<x-cro.module-morph> (Vendic Library-screenplay in één browser-frame: library-rail links met klikbare module-rijen, rechts een shop-stage die per module van layout wisselt (checkout / cart / PDP / categorie) zodat de module in z'n echte context landt. Auto-cycle tot de bezoeker zelf kiest. Gebruikt in de /vendic-cro hero)

jouwshop.nl
Jouw Shop
Afrekenen
Vendic

Checkout

"Free"-label op betaalmethoden

#195 · 25 tests · 56% win

Totaal € 138 Betalen

<x-content.maintenance-console> (levende onderhouds-console: proces-events schuiven rustig binnen in een feed, status-pill met puls. Pauzeert op hover, statisch bij prefers-reduced-motion. Events = commitments van de dienst, geen fake metrics. Gebruikt in de /magento-onderhoud hero)

Magento Onderhoud

vast ritme · senior regie

Monitoring actief

Doorlopend onderhoudsritme: security patches binnen 48 uur beoordeeld, updates getest op staging vóór livegang, 24/7 error-monitoring en twee Magento- en PHP-upgrades per jaar, onder senior regie.

<x-content.storefront-morph> (interactieve mini-storefront: assembleert zichzelf bij load en wisselt merkstijlen via swatches of auto-cycle; demonstreert theming op één basis. tone="light|dark" voor donkere/lichte achtergronden)

elements.vendic.nl
Gratis verzending vanaf €50
Elements

Voor 22:00 besteld, morgen in huis 100 dagen retour
€ 49
€ 89
€ 129
Ons verhaal
Kies een merkstijl
Flexibele layout Powered by Hyvä CMS
Thema

CTA & conversie

Page-end CTA's, crosslink-cards en modal-popups.

<x-cta.contact-fat>

Wil je vrijblijvend meer weten?

Neem contact op met Niek om over jullie project te praten.

Plan een intake
Portretfoto van Niek Verkoelen van Vendic

<x-content.inline-cta> (soft CTA-block met eyebrow + h3 + primary/secondary buttons)

Volgende stap

Sample inline-CTA titel

Sample beschrijvende tekst voor de inline CTA. Compact en op-context.

<x-cta.section-followup> (quiet mid-page conversie-moment: lead + arrow-link, geen card-chrome; op het beslispunt van een sectie)

Weten wat dit voor jouw shop betekent?

Plan een intake

<x-cta.crosslink-card variant="dark"> (mid-page heroic, max 1× per pagina)

<x-cta.crosslink-card variant="subtle"> (reminder, no card-frame)

<x-cta.takeover-code-review-popup> (modal-popup voor code-review-aanvraag; luistert op het 'takeover-code-review:open' Custom Event)

Trigger-button (sample; dispatcht het Custom Event waar de popup op luistert):

<x-cta.cro-quickscan-popup> (modal-popup voor CRO-quickscan-aanvraag; luistert op het 'cro-quickscan:open' Custom Event)

Trigger-button (sample; dispatcht het Custom Event waar de popup op luistert):

<x-cta.intake-interest-popup> (modal-popup: e-mail + context vóór het plannen van een kennismaking; luistert op 'intake-interest:open')

Trigger-button (sample; dispatcht het Custom Event waar de popup op luistert):

Out of scope

Niet showcased

Components die niet als losse showcase werken: geen visuele staat of gebonden aan een specifieke data-context.

  • Case-blocks (case-detail context, per-case uit de DB gerenderd, niet algemeen herbruikbaar)
  • SEO / layout / plumbing components (data-only, geen visuele showcase nodig)