UI Elementen
In depth
- Elk element = een component. Modal, Table, Board en Paper zijn losse React-componenten met een strakke API. Op deze pagina zie je hun structuur, tokens en gedrag naast elkaar.
- Wat waar staat. Voor elk element leggen we vast: welke slots bestaan (head, body, foot), welke acties waar horen, en welke kleur welke rol dient.
- Kleur volgt intentie. Zelfde palette als de rest van het systeem — accent-green voor bevestigen, accent-blue voor navigatie, danger voor destructief, ink-schaal voor tekst en borders.
- Startpagina, dus onaf. Deze pagina groeit met specs per element — dit is de skeleton om verder op door te bouwen.
1 · Modals
Overlay met focus. Voor bevestigen, versturen, één-taak-flows. Nooit voor navigatie.
Offerte O2600512
Offerte versturen
Verstuur de offerte naar de klant. Kies of je een kopie in cc wil ontvangen.
Component<Modal head body foot />
Breedte440 / 520 / 720px
Headeyebrow + title + close
Footzones: back · breaking · primary
Scrimrgba(15,22,42,.45)
Radiusvar(--radius-lg)
2 · Tables
Default overzichtsformat. Rijen zijn klikbaar en openen een drawer of detailpagina. Standaard rij = 1 primaire tekstregel + 1 secundaire tekstregel. Inhoud van die regels is module-afhankelijk, de opbouw is universeel.
Nummer
Klant
Bedrag
Status
O2600512
12 jul 2026
Acme Industries B.V.
Voorbeeldhof 22, 3363HP Sliedrecht
€ 12.495,00
Definitief
O2600511
11 jul 2026
Bakker & Zn
Speltakker 22, 8141HT Heino
€ 3.240,00
Niet definitief
O2600510
10 jul 2026
Delta Techniek
Industrieweg 8, 3542AB Utrecht
€ 27.800,50
Verzonden
Component<Table columns rows />
Row min-height70px (2 tekstregels default)
Cel-opbouwprimary 13px ink-900 · secondary 11px ink-500
Header11px · uppercase · 0.6px tracking
Numberstabular-nums, right-aligned
Eerste kolom15px van linkerrand — gelijk aan zoekveld
Row border1px solid var(--border-soft)
Hovervar(--surface-alt)
3 · Boards
Kanban-weergave voor status-gedreven modules (Service, Planning). Kolommen = status, kaarten = records.
Geen status30
S26000065
de Jong, wesdfdfsf af
Scheur in standaard
S26000064
Testing, Test
hjhjh
In behandeling5
S26000062
Testing, Test
Hoi
S26000060
JKHBERLO, Team V
TeamV ERJKHBLO
Reparatie gepland
Bij leverancier7
S26000057
de Jong, wesdfdfsf af
Team iii jjhm
S26000056
de Jong, wesdfdfsf af
Lamp doet het niet team II GK BM LO MM
Afgehandeld2
S23000008
Andriessen, S.
Poot niet juist
S22000001
Zegers, M. (Zegers LogicTrade)
Motor defect
Reparatie gepland
Component<Board columns />
Kolomsurface · border 1px --border · radius --radius-md · gestapelde shadow
Kolom-gap16px · horizontaal scrollbaar
Kolom-minminmax(260px, 1fr)
Kolom-headbg --surface-alt · padding 14px 18px · border-bottom --border-line
Kolom-titel11px · 700 · uppercase · 0.6px tracking · met status-dot 8×8
Count-pill22×22 · --surface · border --border-line · --ink-500 · 11px 600
Cardflat rij — padding 14px 18px · border-bottom --border-line (geen radius/shadow)
Card-id12px 600 · --accent-blue
Card-klant13px 500 · --ink-900
Card-onderwerp12px · --ink-500 · line-height 1.5
Previewverkleind — echte fonts/spacing zie live Service · Board
4 · A4 papier (main content)
Het printbare document. Zelfde paper in drawer én detail — bewerkbaar of read-only afhankelijk van context. De opbouw is universeel; de invulling per zone is module-afhankelijk (offerte, service, planning, …).
A4 · 210 × 297 mm · max-width 794px @ 96dpi
'Hoofd' info van entiteit
Voor wie is de entiteit? Waar draait de entiteit om?
"Main" content — waar het om gaat
Artikel regelsOfferte, verkoop
MeldingService
AfspraakPlanning
Etc.
Ondersteunend aan main content
Geavanceerdere / gedetailleerdere informatie
Bestanden, opmerkingen, voorwaarden (instellingen) — waar mogelijk prefilled
Vaste opbouw
- Topbar. Links de titel (bv. offertenummer, meldingsnummer) met optioneel een dropdown/subregel voor additionele info. Rechts de status van de entiteit.
- Zone 1 · 'Hoofd' info. Voor wie is de entiteit en waar draait het om? Context-meta zoals contact, datum, referentie en soort staan hier op één regel.
- Zone 2 · Main content. Waar het om gaat — de daadwerkelijke inhoud van de module: artikelregels (offerte/verkoop), melding (service), afspraak (planning), enz.
- Zone 3 · Ondersteunend. Geavanceerdere/gedetailleerdere informatie: bestanden, opmerkingen, voorwaarden en instellingen. Waar mogelijk prefilled.
Component<Paper topbar zones />
Max-width794px (A4 @ 96dpi)
Padding56px 64px
Zone-gap16px
TopbarTitel + subregel · Status rechts
Zone 1Hoofd-info + meta-rij
Zone 2Main content (module-afh.)
Zone 3Ondersteunend / details
Shadow0 1px 3px + 0 12px 32px
Achtergrond--surface op --surface-alt canvas