Design System

UI Showcase

Overzicht van herbruikbare componenten: KPI-kaarten, badges, formulieren, tabellen, modals, alerts en meer. Gebruikt in de Modulyx demo-omgeving.

KPI-kaarten

Stat cards met animaties en delta-indicatoren

12%

0

Omzet

5%

0

Klanten

2%

0

Facturen

0%

0

Medewerkers

Status badges

Badges voor klanten, werkbonnen, facturen en prioriteit

Klant

ActiefProspectInactief

Werkbon

OpenIn behandelingVoltooidGeannuleerd

Factuur

ConceptVerzondenBetaaldVerlopen

Prioriteit

laagnormaalhoogurgent

Alerts

Informatieve meldingen voor feedback

Informatie

Dit is een informatieve melding. Gebruik voor tips of context.

Succes

De actie is succesvol uitgevoerd.

Waarschuwing

Let op: controleer de invoer voordat je doorgaat.

Fout

Er is iets misgegaan. Probeer het opnieuw.

Tabs

Navigatie tussen secties

Algemene instellingen en profielgegevens.

Vul hier je bedrijfsnaam, adres en contactgegevens in.

Formulier

Inputvelden en knoppen

Voortgang

Projectvoortgang65%

Breadcrumbs

Empty state

Geen items gevonden

Er zijn nog geen items om weer te geven. Voeg een nieuw item toe om te beginnen.

Kaarten

Content cards met hover-effecten

Klanten

Beheer klantgegevens en contacten.

Facturatie

Facturen aanmaken en versturen.

Werkbonnen

Werkorders en planning.

Rapportages

Inzichten en statistieken.

Kanban

Kolommen voor taken of werkbonnen

Te doen

3

Item 1

Subtitel of beschrijving

Item 2

Subtitel of beschrijving

Bezig

2

Item 1

Subtitel of beschrijving

Item 2

Subtitel of beschrijving

Klaar

4

Item 1

Subtitel of beschrijving

Item 2

Subtitel of beschrijving

Loading skeletons

Placeholders tijdens het laden

Stat cards

Chart

Tabel

Tabel

Data grid met status badges

NaamTypeStatus
Vestia GroepKlantActief
WB-2024-001WerkbonOpen
F-2024-103FactuurBetaald

Modal

Dialoogvenster voor bevestigingen

Inputs & knoppen

Zoekveld en button-varianten