👐 HAN-DS

# 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

← Principles →