W-H1
Gebruik voor hoofdtitel van een pagina
font family: w-font-heading
font size: w-size-h1
font weight: 700
line height: 1.10 em
letter spacing: -0.5 px
text color: w-color-text
margin: 0
padding: 0
W-H2
Voor hoofdonderdelen binnen de pagina
font family: w-font-heading
font size: w-size-h2
font weight: 700
line height: 1.15 em
letter spacing: -0.25 px
text color: w-color-text
margin: 0
padding: 0
W-H3
Voor titels binnen kaarten, programma onderdelen en kleinere onderdelen.
Font family: w-font-heading
font size: w-size-h3
font weight: 600
line height: 1.25 em
letter spacing: 0
text color: w-color-text
W-intro
Dit is de grotere introductietekst onder een H1 of soms onder een H2. Deze tekst moet duidelijk groter zijn dan een gewone bodytekst, maar niet concurreren met H1
Font family: w-font-body
font size: w-size-intro
font weight: 400
line-height: 1.55 em
letter spacing: 0
text color: w-color-text-soft
W-Body
Dit is de standaard lopende tekst op de website. Deze class gebruiken we heel veel.Bijvoorbeeld voor:normale alinea's;uitleg;programmabeschrijvingen;FAQ-antwoorden;productinformatie.
font family: w-font-body
font size: w-size-body
font weight: 400
line height: 1.65 em
letter spacing: 0
text color: w-color-text
margin: 0
padding: 0
W-Small
Voor secundaire informatie. Niet gebruiken voor belangrijke hoofdtekst
font family: w-font-body
font size: w-size-small
font weight: 400
line height: 1.5 em
letter spacing: 0
text color: w-color-text-soft
margin: 0
padding: 0
w-eyebrow
Dit is een klein label boven een titel
font family: w-font-heading
font size: w-size-eyebrow
font weight: 700
line height: 1.4 em
letter spacing: 0.8 px
text transform: uppercase
text color: w-color-primary
margin: 0
padding: 0
TRAINING
DISC & Communicatie
Introductietekst
Wat levert deze training op?
Beter communiceren
gewone voorbeeldtekst
kleine secundaire tekst
Dit blok is w-page
- dit blok gebruik je maar 1x per pagina.
display: flex
direction: column
width: 100%
align: stretch
background: w-color-background
Dit div-blok is w-section
- dit is de standaard horizontale sectie.
display: flex, column
width: 100%
align: center
padding 64-24-64-24 (desktop)
padding 48-24-48-24 (tablet)
padding 40-20-40-20 (mobile)
Binnen elke div w-section wordt deze div w-inner geplaatst.
Omdat W-Section zijn children centreert, wordt W-Inner automatisch gecentreerd.Dus hier hoeven we geen extra truc met margins toe te passen.
display: flex, column
width: 100%
max wide: 1200 px
align: stretch
gap: 24 px
Binnen elke div w-section
binnen elke div w-inner
komt deze w-content-narrow
width: 100%
max width: 780 px
zo kan de section 1200 px breed zijn, terwijl de tekst netjes compact blijft
Dit is de div w-stack
een universele verticale contentcontainer
display: flex, column
width: 100%
gap: 16 px
align: stretch
elementen hebben hierdoor 16 px tussenruimte
Dit is de div w-row
voor horizontale elementen
bijvoorbeeld voor knoppen naast elkaar
display: flex, row
gap: 12 px
align: center
wrap: wrap
width: 100%
hieronder is gemaakt:
-w-page
- w-section
-- w.inner
---w-content-narrow
----w-stack
-----w-eyebrow
-----w-h1
-----w-intro
-----w-body
Hieronder staat de w-grid-2
display: grid (raster)
columns: 1fr 1fr
rows: auto
columngap: 32 px (d), 24 px (t), 20 px (m)
rowgap: 32 px (d), 24 px (t), 20 px (m)
width: 100%
align: stretch
justify: stretch
Oefentekst A
Oefentekst B
Hieronder staat een w-grid-3
oefentekst 1
Oefentekst 2
oefentekst 3
Hieronder staat een w-grid-4
oefentekst A
oefentekst B
oefentekst C
oefentekst D
Hieronder staat een w-grid-2-hero
oefentekst A
Hieronder komt een websiteblok
Training
Professioneel communiceren met DISC
Leer communicatiestijlen herkennen, beter aansluiten bij anderen en effectiever samenwerken.