System
Menu

Bibliotheek

Componenten

49 componenten in drie niveaus. Elk component heeft instellingen, voorbeeldcode en toegankelijkheidsregels.

Basis

De bouwstenen: losse elementen die op elke pagina terugkomen. Klein, toegankelijk, zonder afhankelijkheden.

KnopPrimaire handeling, secundaire handeling of tekstknop. Witte pill is primair in GXJ, glazen haarlijn secundair.
LinkTekstlink in lopende tekst, losse link met pijl of een link met haarlijn eronder (zoals het mailadres op World).
Kop en tekstKoppen volgens de kleine GXJ-schaal, met payoff erboven en optioneel één accentwoord in het metaalverloop.
Label en payoffKleine tekstrollen: payoff (Aeroko, hoofdletters, punt), mono-label (Share Tech Mono) en sectielabel.
BadgeKorte status of categorie. Zacht, gevuld of omlijnd, met optionele stip.
TekstveldInvoerveld met zichtbaar label, hulptekst en foutmelding direct onder het veld.
TekstvakMeerregelige invoer die meegroeit met de inhoud (field-sizing waar de browser het kent).
KeuzelijstNative select met eigen pijl: werkt overal, ook met toetsenbord en op mobiel.
SelectievakjeEén of meer keuzes aan of uit. Eigen vinkje, native input eronder.
KeuzerondjesEén keuze uit een kleine groep, gegroepeerd in een fieldset met legend.
SchakelaarDirecte aan/uit-instelling, zoals geluid of meldingen. Checkbox met role=switch.
SchuifregelaarWaarde kiezen op een schaal, zoals volume. Gevuld deel volgt de waarde via --v.
AvatarPersoon of merk als rond of afgerond vlak, met foto of initialen.
ScheidingslijnHaarlijn, gestippelde lijn (het GXJ-stippenmotief) of verlooplijn die naar de randen vervaagt.
IconenLijniconen van 24px met lijndikte 1.5 in currentColor. Altijd SVG, nooit emoji.
TooltipKorte uitleg bij hover en focus. Alleen aanvullend: de info staat ook elders of is niet essentieel.
LadenLaadindicator als ring, stippen of de GXJ-golflijn. Stopt bij reduced motion.
BeeldBeeld met vaste verhouding (geen layout shift), afronding volgens het thema en optioneel bijschrift.

Uitgebreid

Samengestelde secties en patronen waar een pagina uit bestaat: navigatie, hero, kaarten, formulieren, footer.

Header en navigatieLockup links, menu en actie rechts. Mobiel een uitklapmenu met details/summary: werkt zonder JavaScript.
HeroOpening van een pagina: beeld groot in beeld, kop met payoff, één of twee acties. Loopt vloeiend over in de volgende sectie.
KaartInhoud met beeld, titel en één zin. Verticaal, horizontaal of tekst over beeld. Hele kaart klikbaar via de titel-link.
KenmerkenRaster met diensten of voordelen: icoon of nummer, titel en één zin.
StappenGenummerd proces in blokken, zoals op GXJ Beats. Geordende lijst.
AccordeonUitklapbare vragen met native details/summary. Optioneel exclusief (één tegelijk open) via het name-attribuut.
TabsWisselen tussen gelijkwaardige panelen. ARIA tabs met pijltoetsen via de runtime; zonder JS staan alle panelen onder elkaar.
DialoogvensterNative dialog-element: focus blijft erin, Escape sluit, achtergrond is inert. Ook als zijpaneel (sheet).
ContactformulierCompleet formulier met native validatie, foutoverzicht en Netlify Forms-attributen (werkt zonder backend).
TabelGegevens in rijen en kolommen met caption en kolomkoppen. Scrolt horizontaal binnen zijn vak op mobiel.
KruimelpadWaar ben ik: pad naar de huidige pagina.
PagineringDoor lijsten bladeren met vorige/volgende en paginanummers.
MeldingMededeling in de pagina: info, gelukt, waarschuwing of fout. Optioneel weg te klikken.
ToastKorte bevestiging na een handeling, verdwijnt na 4 seconden. Via de runtime: gx.toast('Tekst').
CitaatTestimonial of uitspraak. Alleen aangeleverde tekst gebruiken, nooit zelf quotes verzinnen.
CijfersKerncijfers in een rij, optioneel met rollende teller bij in beeld komen.
Call to actionAfsluitende oproep met één actie. Met amber gloed, beeld of rustig vlak.
MerkenwandRij beeldmerken van merken of klanten, rustig en monochroom.
CarrouselHorizontaal scrollende rij met scroll-snap. Swipen, scrollen en knoppen; geen automatisch doordraaien.
CookiemeldingToestemming volgens AVG: weigeren is even makkelijk als accepteren. Alleen nodig bij niet-essentiële cookies.
NieuwsbriefInschrijven met één veld en één knop op één regel (mobiel onder elkaar).
FooterAfsluiting met lockup, contact en links. Eenvoudig (één regel, zoals World) of in kolommen.

Maatwerk

Eigen GXJ-elementen met merkidentiteit: lockups, beeldmerken, merkkaarten, coming soon, GXJ Sound en de platenspeler.

LockupBeeldmerk + officieel GXJ-woordmerk + haarlijn + merknaam in Aeroko Wide Bold. Altijd GXJ vooraan.
BeeldmerkOfficiële beeldmerken per business line, vrijstaand met zachte schaduw. Nooit een cirkel of plaatje erachter.
MerkkaartHet World-vlak: beeld in een kaart met 50px hoeken, wit beeldmerk, payoff en merknaam in Munrolane, ronde pijlknop.
Coming soonDe vaste placeholder van elke GXJ-site: merkfoto in kaart, wit beeldmerk, COMING SOON., merknaam, payoff en hoeklabels.
GXJ Sound-knopGecentreerde knop bovenin: dunne golflijn + OFF/ON. Live op deze pagina, script /sound/gxj-sound.js.
PlatenspelerDraaiende plaat met spectrumring, seekbalk, play en volume. Bedient hetzelfde geluid als de knop bovenin (custom element gx-disc).
ArchieflijstGenummerde lijst met lockups en een korte notitie, zoals de index op GXJ World. Rij schuift in bij hover.
Hoek-chromeVaste labels in de vier hoeken (World/Portfolea): woordmerk + rol, menu, status met stip en een rollende teller.
MetaalwoordHet GXJ-kleurverloop metaal, amber, koper op één accentwoord per kop.