Dwarsleet.nl — Website Design Guide & Voorbeeldpagina

Dwarsleet.nl
Design System

Stijlgids voor een warme, hoopvolle website over leven met een dwarslaesie. Platform: GoHighLevel / Voluit Suite.

01 — Kleurenpalet

Kleuren die hoop en warmte uitstralen

Geen klinisch blauw of medisch wit. Dit palet is gebaseerd op oceaan, zon en natuur. Het voelt als buiten zijn op een mooie dag. De primaire kleur (oceaan-teal) straalt rust en betrouwbaarheid uit zonder koud te worden.

Hoofdkleuren
#1A7A7A
Ocean
Primaire merkkleur. Knoppen, links, nav, iconen.
#0F5858
Ocean Deep
Hover states, donkere secties, headers.
#F5A623
Sunshine
CTA-accent, highlights, vrolijke elementen.
#E8725C
Coral
Secundair accent, waarschuwingen, energie.
#7FB069
Sage
Succes, positief, groei, tips.
#D4A574
Sand
Warmte-accent, strand-thema, decoratief.
Neutrals & achtergronden
#2D3436
Ink
Primaire tekst. Nooit pure zwart.
#556B6B
Ink Soft
Subtekst, beschrijvingen, captions.
#F7F3EE
Cloud
Pagina-achtergrond. Warmer dan wit.
#FFF8F2
Cloud Alt
Afwisselende secties, pull-quotes.
#E6F5F3
Ocean Light
Cards, info-blokken, code-achtergrond.
#FFFFFF
White
Cards, modals, content areas.
!
Kleurgebruik in GoHighLevel
Definieer deze kleuren als custom CSS variabelen in je GHL site header. Zo kun je ze overal consistent gebruiken in custom CSS-blokken, knoppen en secties. Kopieer het hele :root { ... } blok naar je site-wide CSS.
02 — Typografie

Twee lettertypes, helder onderscheid

Fraunces voor koppen: warm, menselijk, met karakter. Geen koude sans-serif, maar een serif die vertrouwen en persoonlijkheid uitstraalt. Nunito Sans voor lopende tekst: helder leesbaar, vriendelijk, goed op scherm. Laad beide via Google Fonts.

H1 — Hero kop / paginatitel
Er is leven na een dwarslaesie
font-family: 'Fraunces'   font-weight: 900   font-size: clamp(2.4rem, 5.5vw, 3.6rem)
Gebruik voor de hoofdkop op elke pagina. Maximaal 8-10 woorden. Altijd in var(--ink) met een var(--ocean) accent woord.
H2 — Sectietitel
Hoe werkt je lichaam na een dwarslaesie?
font-weight: 700   font-size: clamp(1.8rem, 4vw, 2.6rem)
Elke sectie begint met een H2. Gebruik <em> in var(--ocean) voor nadruk. Altijd gevolgd door een korte beschrijving.
H3 — Card titel / subsectie
Decubitus voorkomen en behandelen
font-weight: 700   font-size: 1.2rem
Gebruikt in info-cards, content-cards en als tussenkop binnen secties.
Body tekst
Na een dwarslaesie verandert er heel veel. Maar er blijft ook heel veel mogelijk. Op deze pagina's vind je praktische informatie, ervaringsverhalen en tips van lotgenoten die al jaren in een rolstoel zitten en er het beste van maken.
font-family: 'Nunito Sans'   font-weight: 400   font-size: 1.02rem   line-height: 1.75
Maximale regelbreedte: 620px. Gebruik var(--ink-soft) als kleur. Kort en bondig houden, geen muren van tekst.
Tag / Label
Gezondheid Mobiliteit Belangrijk Ervaringsverhaal
font-weight: 700   font-size: 0.75rem   text-transform: uppercase   letter-spacing: 0.05em
Gebruik tags om content te categoriseren. Kies de kleur die past bij het onderwerp.
✓ Wel doen
Korte alinea's van max 3-4 zinnen. Wissel af tussen koppen, tips, quotes en visuals. Gebruik opsommingen met iconen in plaats van tekst-opsommingen. Schrijf direct en persoonlijk.
✗ Niet doen
Geen muren van tekst. Geen alinea's langer dan 5 regels op scherm. Geen jargon zonder uitleg. Nooit een pagina met alleen maar tekst zonder visuele onderbrekingen.
03 — Componenten

Bouwstenen voor elke pagina

Alle componenten hieronder zijn herbruikbaar. Copy-paste de HTML structuur en pas de content aan. Ze zijn zo ontworpen dat ze in GoHighLevel custom code blokken passen.

Knoppen
i
Knoppen in GHL
Gebruik btn--primary als standaard CTA. btn--accent alleen voor de allerbelangrijkste actie op de pagina (max 1x). btn--outline als secundaire actie. Altijd met een pijl (→) als de knop ergens naartoe leidt.
Info Cards

Gebruik info-cards om onderwerpen op te splitsen in hapklare stukken. De gekleurde rand links geeft visueel aan welke categorie het is. Altijd met een icoon.

Revalidatie

Gemiddelde opname in ziekenhuis en revalidatiecentrum is 12 maanden. De eerste weken zijn het zwaarst.

Mobiliteit

Van rolstoel tot handbike, van monoski tot quad. Er zijn veel meer mogelijkheden dan je denkt.

Ervaringen

Verhalen van lotgenoten. Hoe zij omgaan met hun laesie, wat ze hebben geleerd, en wat hen helpt.

Tip- en aandachtblokken

Vier varianten voor verschillende soorten berichten. Gebruik spaarzaam - max 2-3 per pagina.

💡
Praktische tip
Veel water drinken helpt tegen blaasontstekingen. Minimaal 1,5 tot 2,5 liter per dag. Koffie en thee tellen niet mee.
i
Wist je dat
Per jaar komen er 400 tot 500 nieuwe dwarslaesies bij in Nederland. De gemiddelde leeftijd is 39 jaar.
!
Let op
Bij de eerste tekenen van doorliggen direct actie ondernemen. Rode plekken die niet wegtrekken zijn een waarschuwingsteken.
Ervaringstip
Sinds ik meer vitaminen slik en dagelijks beweeg, heb ik geen last meer gehad van blaasontstekingen. Probeer het ook eens.
Quote blok

Gebruik voor citaten van lotgenoten, artsen of familieleden. Geeft de pagina persoonlijkheid en maakt de content menselijk.

Probeer wat je is overkomen te zien als een levensopdracht. Dat maakt het makkelijker te dragen. Leef zo dat je het halfvolle glas ziet, niet het halflege.

— Vriendin van Jan

Stappen indicator

Gebruik wanneer je een proces, tijdlijn of stappenplan uitlegd. De gradient-lijn geeft vooruitgang aan.

1
Ziekenhuis
Direct na het ongeluk. Operaties, stabilisatie en eerste diagnose van de dwarslaesie.
2
Revalidatiecentrum
Leren omgaan met de rolstoel, catheteriseren, transfers maken. Gemiddeld 7-12 maanden.
3
Naar huis
Woningaanpassingen, auto aanpassen, dagelijks leven weer oppakken. De echte uitdaging begint.
4
Nieuw leven opbouwen
Sporten, reizen, werken, relaties. Het leven gaat verder, met andere uitdagingen.
Accordion / FAQ

Gebruik voor veelgestelde vragen of om lange content opvouwbaar te maken. Houdt de pagina overzichtelijk.

Wat is een dwarslaesie precies?

Bij een dwarslaesie is het ruggenmerg beschadigd. De zenuwbanen die signalen van de hersenen naar het lichaam sturen zijn onderbroken. Alles onder het niveau van de beschadiging raakt verlamd: geen gevoel, geen controle over spieren.

Is een dwarslaesie te genezen?

Op dit moment niet volledig. Er wordt wereldwijd onderzoek gedaan naar stamceltherapie en andere behandelmethoden. Er zijn hoopvolle ontwikkelingen, maar een volledige genezing is er nog niet.

Hoe hoog is de levensverwachting?

In westerse landen is de levensverwachting hoog en wordt steeds hoger door betere medische zorg. Het hangt af van je conditie, levenshouding en medicijngebruik.

04 — Layout patronen

Pagina-opbouw en structuur

Elke pagina volgt een vast stramien. Dit maakt de website herkenbaar en voorkomt dat je per pagina opnieuw moet nadenken over de structuur.

1
Navbar (sticky)
Logo links, navigatie rechts. Altijd zichtbaar bovenaan. Wit met subtiele schaduw.
2
Hero sectie
Grote kop + korte intro + CTA knop + illustratie. Zachte gradient achtergrond. Dit is het eerste wat bezoekers zien.
3
Stats bar (optioneel)
4 kerngetallen in een witte kaart die de hero overlapt. Geeft direct context en geloofwaardigheid.
4
Content secties (afwisselend)
Wissel af: tekst-links/beeld-rechts, dan omgekeerd. Elke sectie begint met tag + H2 + korte beschrijving. Gebruik Cloud en Cloud-Alt achtergronden afwisselend.
5
CTA sectie
Ocean-gradient achtergrond. Korte boodschap + knop. Doel: de bezoeker naar de volgende stap leiden.
6
Footer
Donkere achtergrond. Logo, navigatie, contactgegevens, links naar Dwarslaesie Organisatie.
Kolom layouts
2 kolommen: tekst + beeld (standaard content blok)
Tekst zijde
Tag → H2 → beschrijving → opsomming of tip-box → CTA knop
Visuele zijde
Illustratie, foto, infographic, of video embed
3 kolommen: info cards (overzichtspagina's)
Card 1
Card 2
Card 3
4 kolommen: stat blokken (feiten & cijfers)
Stat 1
Stat 2
Stat 3
Stat 4
i
GoHighLevel implementatie
In GHL gebruik je "Custom Code" blokken of "Custom CSS/JS" elementen. Maak secties aan met de section builder, maar voeg de styling toe via een custom CSS blok bovenaan de pagina. De grid layouts werken met standaard CSS Grid - geen framework nodig.
05 — Illustraties & visuele elementen

Warm, menselijk, niet klinisch

Geen stockfoto's van lachende mensen in rolstoelen in een studio. Gebruik illustraties in een warme, schetsmatige stijl. Toon actieve mensen: handbikers, reizigers, zwemmers, skiërs. De illustraties moeten beweging en mogelijkheid uitstralen.

Illustratie richtlijnen

  • Gebruik de merkkleuren (ocean, sunshine, coral, sage) als basis
  • Stijl: warm, vlak, licht schetsmatig. Geen fotorealisme, geen stock
  • Toon altijd actie: bewegen, reizen, sporten, werken, genieten
  • Inclusief: variatie in leeftijd, geslacht, type rolstoel
  • Achtergronden: natuur, strand, bergen, stad. Niet binnen in een ziekenhuis
  • SVG formaat waar mogelijk voor schaalbaarheid

Infographic richtlijnen

  • Gebruik de stat-block component voor losse cijfers
  • Taart- en staafdiagrammen in merkkleuren
  • Iconen: lijn-stijl, 2px stroke, afgeronde hoeken
  • Labels altijd in Nunito Sans, getallen in Fraunces
  • Max 5-6 datapunten per infographic. Minder is meer
  • Altijd een korte uitleg onder de infographic
Voorbeeld: inline SVG illustratie
Illustratiestijl: warm, vlak, schetsmatig, merkkleuren
💡
Illustraties laten maken
Laat een illustrator een set van 15-20 basis-illustraties maken in deze stijl. Thema's: handbiken, zwemmen, reizen met bus, skiën, tennis, strand, koken, werken aan bureau, transfer rolstoel-auto. Met een consistente set kun je elke pagina voorzien van unieke visuals.
06 — Video, animatie & interactie

Leven in de content brengen

Subtiele animaties bij scrollen, video embeds voor ervaringsverhalen en interactieve elementen maken het verschil tussen een saaie informatiesite en een plek waar mensen graag terugkomen.

Animatie regels

  • Fade-up bij scrollen: elementen verschijnen met een zachte opwaartse beweging als ze in beeld komen. Gebruik de .animate-on-scroll class
  • Hover op cards: subtiele lift (translateY -3px) + grotere schaduw
  • Knoppen: lift omhoog bij hover (translateY -2px)
  • Geen: ronddraaiende elementen, knipperende tekst, auto-play video
  • Timing: alles via cubic-bezier(0.16, 1, 0.3, 1) voor een natuurlijk gevoel

Video richtlijnen

  • Embed via YouTube of Vimeo iframe. Nooit auto-play
  • Wrap in een container met border-radius: var(--radius-lg) en overflow: hidden
  • Voeg altijd een korte tekstbeschrijving toe onder de video
  • Gebruik een custom thumbnail waar mogelijk (screenshot uit de video)
  • Ondertiteling beschikbaar maken voor alle video's
Popup / Modal

Gebruik popups spaarzaam. Maximaal 1 per pagina. Goede toepassingen: nieuwsbrief-aanmelding, lotgenotencontact formulier, waarschuwing bij medische info. Nooit als reclame.

07 — Foto componenten

Foto's die het verhaal vertellen

Echte foto's van echte mensen. Geen stockbeelden. De foto's op deze site tonen Jan en Anneke in hun dagelijks leven: op het strand, op de fiets, op reis. Dat maakt de site persoonlijk en geloofwaardig.

Foto richtlijnen

  • Echte situaties: geen geposeerde studio-foto's. Liever een iets minder scherpe foto die echt is, dan een perfecte stockfoto
  • Actie en beweging: op de handbike, op het strand, op reis. Niet stilzittend in een kamer
  • Licht en warmte: buitenfoto's met natuurlijk licht werken het best bij dit kleurenpalet
  • Aspect ratio's: 16:9 voor banners en hero's, 4:3 of 1:1 voor cards en gallerij
  • Kwaliteit: minimaal 1200px breed voor full-width. 800px voor cards

Beschikbare componenten

  • Photo Hero: full-width beeld met tekst overlay. Voor subpagina-koppen
  • Photo Split: 50/50 tekst + foto. Afwisselend links/rechts
  • Photo Card: beeld met gradient overlay en tekst onderin
  • Photo Gallery: masonry-grid met hover-captions
  • Photo Testimonial: portret + citaat naast elkaar
  • Photo Banner: full-width beeld met parallax en overlay
✓ Wel doen
Gebruik altijd object-fit: cover op foto's. Voeg een lichte gradient overlay toe zodat tekst leesbaar blijft. Gebruik de foto als achtergrond, niet als los element. Geef foto's altijd border-radius.
✗ Niet doen
Geen foto's zonder overlay als er tekst overheen moet. Geen witte randen om foto's. Geen foto's kleiner dan 600px op desktop. Geen filters of kleurvervormingen op de foto's zelf.
↓   HIERONDER BEGINT DE VOORBEELDPAGINA   ↓
Informatie & ervaringen

Er is leven na een dwarslaesie

Praktische informatie, ervaringsverhalen en tips van lotgenoten. Voor iedereen die net een dwarslaesie heeft gekregen, of al jaren in een rolstoel zit.

400+
Nieuwe laesies per jaar
in Nederland
39jr
Gemiddelde leeftijd
op moment van laesie
35%
Door verkeer
meest voorkomende oorzaak
12mnd
Gem. revalidatie
ziekenhuis + reva centrum
De basis

Wat is een dwarslaesie?

Je hersenen sturen miljoenen signalen door je ruggenmerg naar je hele lichaam. Bij een dwarslaesie is dat ruggenmerg beschadigd. De signalen komen niet meer door.

Alles onder het niveau van de beschadiging raakt verlamd. Geen gevoel, geen controle over spieren, geen signalen naar organen. Hoe hoger de beschadiging in de wervelkolom, hoe meer van het lichaam aangedaan is.

i
Twee soorten
Totale laesie: alle verbinding is verbroken. Geen gevoel, geen functie. Partiële laesie: er zijn nog deels functies of gevoel aanwezig.
Nek (C1-C7) Tetraplegie Borst (T1-T12) Paraplegie Jan's laesie (T4) Lage rug (L1-L5) Heiligbeen Hoe hoger de laesie, hoe meer van het lichaam verlamd raakt
Mobiliteit

Het strand op met de rolstoel

Een betonpad naar het strand maakt het verschil tussen thuisblijven en genieten. Niet overal is het er, maar steeds meer gemeenten leggen ze aan.

Jan rijdt regelmatig over de boulevard in Scheveningen. Met een click-on wheeler of een handbike kun je verrassend ver komen over het strand. De zoute lucht en het geluid van de zee zijn het meer dan waard.

Meer over mobiliteit →
Sport

Elke dag een rondje fietsen

Met een handbike of click-on wheeler haal je makkelijk 12 tot 18 km per uur. Op een mooie dag een rondje van 30-40 km is geen uitzondering.

  • Handbike: snelheid tot 18 km/u, ideaal voor langere tochten
  • Click-on wheeler: klikt op je rolstoel, compact mee te nemen
  • Goed voor je conditie, bloedsomloop en humeur
Alle sportmogelijkheden →

Er is meer mogelijk dan je denkt

Van het strand tot de bergen. Van Nederland tot Zuid-Afrika. Het leven stopt niet bij een rolstoel.

Statistieken

Hoe ontstaat een dwarslaesie?

Elk jaar krijgen ruim 400 mensen in Nederland een dwarslaesie. Dit zijn de meest voorkomende oorzaken.

Verkeer 35% Ziekte 18% Sport 15% Werk 13% Val 9%
Onderwerpen

Wat wil je weten?

Van dagelijkse gezondheidszorg tot vakantie en sport. Klik door naar het onderwerp dat je nu nodig hebt.

Gezondheid

Decubitus voorkomen

Doorliggen is een sluipend gevaar. Tips voor preventie, herkenning en behandeling van drukplekken.

Lees verder →
Gezondheid

Blaas & incontinentie

Catheteriseren, de blaasstimulator, en hoe je blaasontstekingen voorkomt. Praktisch en eerlijk.

Lees verder →
Mobiliteit

Sport & bewegen

Tennis, handbiken, skiën, zwemmen. Welke sporten kun je doen vanuit een rolstoel?

Lees verder →
Vakantie

Reizen met een laesie

Van Griekenland tot Californië. Hoe je met een rolstoel toch overal heen kunt. Met camperbus of vliegtuig.

Lees verder →
Praktisch

PGB & financieel

Het persoonsgebonden budget uitgelegd. Hoe je het aanvraagt en waar je recht op hebt.

Lees verder →
Gezondheid

Uitleg dwarslaesie

Hoe werkt de wervelkolom? Wat is het verschil tussen totaal en partieel? Helder uitgelegd.

Lees verder →
Ervaringsverhaal

Het leven blijft een uitdaging

"Is er nog leven na een dwarslaesie? Nu, na al die jaren, denk ik: ja. Er is een hoop te ontdekken en vooral te genieten. Ik ben me meer bewust geworden van de kleine dingen. Een ijsje eten. De blauwe luchten."

— Jan de Boer, Scheveningen

Gezondheid

Fit blijven met een dwarslaesie

Je lichaam heeft extra aandacht nodig. Maar met de juiste aanpak kun je je goed voelen, ook als je je onderlichaam niet meer voelt.

  • Bewegen: dagelijks een rondje handbiken of wheelen. Zuurstof en bloedsomloop zijn je beste vrienden
  • Voeding: veel groente, fruit en water. Extra vitamine C (min. 4 gram per dag) helpt tegen ontstekingen
  • Huid: controleer dagelijks op rode plekken. Decubitus is makkelijker te voorkomen dan te genezen
  • Medicijnen: probeer zo min mogelijk. Bewegen en goede voeding doen vaak meer dan pillen
Alle gezondheidstips →
Veelvoorkomende klachten Spasmen 69% Pijn 61% Blaas 37% Decubitus 14% 94% van alle dwarslaesiepatiënten heeft gezondheidsklachten
Veelgestelde vragen

Wat je wilt weten

Kan ik met een dwarslaesie nog sporten?

Absoluut. Tennis, basketbal, handbiken, zwemmen, duiken, skiën (met monoski of swingbo), karten, boogschieten, zeilen - de lijst is lang. In veel steden zijn sportverenigingen die zich specifiek richten op rolstoelers.

Hoe zit het met reizen en vliegen?

Vliegen gaat verrassend goed. Je wordt behandeld als VIP - als eerste het vliegtuig in. Op Schiphol is er een aparte balie voor hulp. Met een aangepaste bus kun je heel Europa door. Campings met aangepaste voorzieningen zijn er in veel landen.

Wat is het PGB en hoe vraag ik het aan?

Het Persoonsgebonden Budget is een overheidsvergoeding waarmee je zelf je zorg kunt regelen. Je kunt er bijvoorbeeld je partner mee betalen voor dagelijkse hulp. Aanvragen gaat via het CIZ. Hoe beter je je zorgbehoefte verwoord, hoe hoger de vergoeding.

Hoe lang duurt de revalidatie?

Gemiddeld 12 maanden, inclusief ziekenhuis en revalidatiecentrum. Maar de echte revalidatie gaat door nadat je thuiskomt. Elk jaar leer je nog nieuwe dingen over wat je wel en niet kunt.

In beeld

Het leven van Jan & Anneke

Meer dan 30 jaar na het ongeluk. Reizen, sporten, genieten. Samen.

Over de partner

Altijd wordt er gevraagd naar degene die de laesie heeft. Weinig hoe het met de partner is. Elke dag weer de terugkomende rituelen van verzorging. Een ode aan de partners is zeker op z'n plaats.

Anneke de Boer
Partner van Jan, al meer dan 55 jaar samen
Voor partners
Ook als partner heb je recht op ondersteuning. Het PGB kan je partner vergoeden voor dagelijkse hulp. Je hoeft het niet alleen te doen.
Ervaringen

Verhalen die inspireren

Reizen

Met de bus door Zuid-Afrika

Twee auto's gehuurd, wildparken bezocht en geslapen in lodges. Het kan gewoon.

Sport

De kick van de wheelie

Op je achterwielen door de stad. Het is topsport, en het is geweldig.

Dagelijks leven

Gewoon naar het strand

Het klinkt simpel. Maar de eerste keer dat je er weer komt in je rolstoel is onvergetelijk.

Voorbeeld subpagina header

Sport & bewegen met een dwarslaesie

Van rolstoeltennis tot monoski. Van handbiken langs de kust tot zwemmen in de Middellandse Zee. Ontdek wat er allemaal mogelijk is.

Jan de Boer
30+
jaar in de rolstoel
Ervaringsverhaal

Jan de Boer, Scheveningen

Timmerman, deltavlieger, reiziger. Na een val met een deltavlieger in de Franse Alpen in 1991 raakte Jan verlamd. Sindsdien heeft hij meer landen bezocht dan de meeste valide mensen.

Van Griekenland tot Californië, van de Tafelberg tot Curaçao. Met een aangepaste bus, een handbike en een onverwoestbare Anneke naast zich. In 2019 brak hij zijn been op de handbike. In 2020 moest het geamputeerd worden. Hij ging door.

Lees het hele verhaal →

Wil je in contact komen?

Heb je net een dwarslaesie gekregen en wil je met iemand praten? Of heb je zelf een verhaal om te delen? Neem contact op.