Skip to main content

Component Library

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, aperiam necessitatibus optio pariatur vero voluptatibus.

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%
of the cost of a custom project
6 weeks
from start to live
Screenshot of My Hair Shop webshop
View 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)

Clients on Vendic

Vendic took over technical maintenance and performed a Magento update. Clear communication and smooth execution from the start. Support remained excellent after go-live.
T Topa Packaging
We receive thousands of visitors daily on the website who can place their orders lightning fast and without problems. This is thanks to the specialized Magento/Hyvä knowledge that Vendic has in-house!
S Sweet Jewellery Eline Nouwen
Customer at Vendic since 2016. In my opinion the best partner for Magento 2 webshops. Still satisfied after more than 7 years.
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.

Read more
Label

Card headline porcelain

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

Read more
Label

Card headline teal-service

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

Read more
Label

Card headline teal

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

Read more

<x-content.usp-grid>

USPs

Sample USP-section

USP 1

Sample beschrijving.

USP 2

Sample beschrijving.

USP 3

Sample beschrijving.

<x-content.comparison>

Comparison

Magento development with more control, less noise

13+ years of Magento expertise plus AI agents inside our own development environment. For faster analysis, AI-assisted development and more transparent work.

What you often see

  • Custom work as the default answer, even when it is not needed
  • Development as a black box, with little visibility into choices and progress
  • Using AI as a loose shortcut without process, context or ownership
  • Keeping everything manual, even where repetitive work can be accelerated reliably
  • Stacking low-quality external modules into technical debt
  • Large releases at fixed moments, with a lot of risk per release
  • Slowly allowing stores to become outdated
  • Generic hosting and processes that do not fit Magento
  • Support through tickets, slow email back-and-forth
The Vendic way
  • The right route per project: standardized, hybrid or fully custom
  • Open communication via Slack, code visibility through GitHub and clear updates on hours and decisions
  • AI as leverage on analysis, documentation and QA, for higher output per sprint. Senior developers stay owners of architecture, security and releases
  • Faster codebase analysis, better documentation, sharper test scenarios and controlled production acceleration on proven tasks such as refactors, component variants and QA preparation
  • Proven Vendic modules and carefully chosen external modules, without unnecessary complexity
  • Release early and often: small, controlled improvements as soon as they are ready
  • Active maintenance on performance, security, stability and technical sustainability
  • Vendic AI on top of enterprise-grade Magento hosting (Savvii): AI agents and a development pipeline fully tuned to Magento Hyvä
  • Direct Slack access for clients, short lines with the 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>

Options

Project Forms

Choose what fits your project: standardization, custom work or a mix of the two.

Vendic Elements

  • For a fast and well-standardized result
  • Fixed monthly costs for Elements, hosting & maintenance
  • Quick up and running
  • Mega fast, finished Hyvä frontend
  • Custom work in theme (limited) and features (few/no limitations) possible

Vendic AI Design

  • Custom Magento design and Hyvä implementation, AI-leveraged
  • Significantly faster and cheaper than traditional custom design
  • Senior consultants direct design and execution
  • Suitable for projects that want a unique visual brand experience

Custom project

  • For a unique visual brand experience
  • Relies completely or largely on a custom design
  • Very suitable for projects that want a unique visual brand experience
  • Extreme flexibility
  • Longer time to market
  • Higher required investment

<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)

yourshop.com
Your Shop
Checkout
Vendic

Checkout

"Free" label on payment methods

#195 · 25 tests · 56% win

Total € 138 Pay

<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 Maintenance

fixed rhythm · senior direction

Monitoring active

Continuous maintenance rhythm: security patches assessed within 48 hours, updates tested on staging before go-live, 24/7 error monitoring and two Magento and PHP upgrades per year, under senior direction.

<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
Free shipping from €50
Elements

Order by 10pm, next-day delivery 100-day returns
€ 49
€ 89
€ 129
Our story
Pick a brand style
Flexible 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.

Schedule an intake
Portrait of Niek Verkoelen of 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)