# Ruleset for spacings
# Component types
De componenten zijn op te delen drie types:
- Brick (gaan op desktop over de gehele breedte, dus ook buiten de container)
- Media (interactieve componenten zonder background, content valt ook buiten de container)
- Tekst (overige componenten, vallen in het geheel binnen de container).
# Component spacings
Een component past zijn bovenste marge aan op basis van het component dat daarboven ligt. Een Brick component onder een Text component geeft een XL top margin aan de Brick. Staat de Brick onder een Media component, dan krijgt de Brick en L (Large) top marge.
# Bricks
- Text + Brick = XL
- Media + Brick = L
- Brick + Brick = N
- Hero + Brick = L
# Media
- Text + Media = XL
- Media + Media = L
- Brick + Media = L
- Hero + Media = L
- Media + Footer = XL
# Text
- Text + Text = L
- Media + Text = L
- Brick + Text = XL
- Hero + Text = XL
- Text + Footer = XL
# Values
# Desktop
- XXL=160px
- XL=120px
- L=80px
- N=None
# Tablet
- XXL=120px
- XL=80px
- L=56px
- N=None
# Mobile
- XXL=80px
- XL=64px
- L=48px
- N=None
# Element spacings
Spacings binnen een component.
# Values
# Desktop
- M=48px
- S=40px
- XS=24px
- XXS=16px
# Tablet
- M=40px
- S=32px
- XS=24px
- XXS=16px
# Mobile
- M=32px
- S=24px
- S=16px
- XXS=8px
← Grid Principles →