HOOFDSTUK 08 · LAYOUT EN GRID
Layout en grid¶
De layout van atlascorporation.org is Bootstrap 5.3 met de tokens van de canon. Alles hieronder is een token uit atlas-tokens.css, dus je kunt het rechtstreeks gebruiken.
Container en secties¶
Container
1180 px max
1180 px max
De inhoud staat in een container van maximaal 1180 px (--atlas-layout-container). Secties hebben 96 px verticale ruimte (--atlas-layout-section-padding), op kleine schermen minder.
| Onderdeel | Waarde | Token |
|---|---|---|
| Container | 1180 px | --atlas-layout-container |
| Sectie-ruimte | 96 px | --atlas-layout-section-padding |
| Grid | Bootstrap 12 kolommen, gutter 24 px | Bootstrap 5.3 |
| Header | Canvas op 86% dekking, blur 18 px, haarlijn eronder | canon header#top |
| Footer | Canvas met verloopstreep bovenaan | --atlas-gradient-footer-line |
Breekpunten¶
| Naam | Breedte |
|---|---|
| xs | 480 px |
| sm | 640 px |
| md | 768 px |
| lg | 1024 px |
| xl | 1280 px |
Ontwerp mobile first. De kitpagina's en dit handboek zijn getest op 1366 px en 390 px breed.
Ruimteschaal¶
Een vaste schaal van 4 tot 120 px. Gebruik alleen deze stappen.
space-1 · 4
space-2 · 8
space-3 · 12
space-4 · 16
space-5 · 24
space-6 · 32
space-7 · 48
space-8 · 64
space-9 · 96
space-10 · 120
Hoeken¶
Scherpe, kleine hoeken. De standaard is 4 px.
input · 4 px
kaart · 5 px
modal · 6 px
cta · 8 px
pill
Schaduwen en gloed¶
kaart · sm
menu · md
modal · lg
knop · glow
focus · ring
| Token | Waarde |
|---|---|
--atlas-shadow-sm |
0 8px 22px rgba(0,0,0,.36) (kaart) |
--atlas-shadow-md |
0 16px 44px rgba(0,0,0,.48) |
--atlas-shadow-lg |
0 20px 60px rgba(0,0,0,.55) |
--atlas-shadow-btn |
0 0 18px rgba(46,128,255,.28) |
--atlas-shadow-btn-hover |
0 0 28px rgba(46,128,255,.45) |
--atlas-shadow-glow |
0 0 0 3px rgba(46,128,255,.22) (focusring) |
Opbouw van een pagina¶
- Header: merkteken links, menu, rechts de zoekknop en de hoofdknop "Plan een intake".
- Hero: eyebrow in mono met een lijntje en pulserende stip, kop in Space Grotesk 900, lead, twee knoppen en drie vinkjes. De aarde bij nacht ligt eronder.
- Stat-trio: drie kerncijfers in grote Space Grotesk met een mono-label, gescheiden door haarlijnen.
- Secties met een eyebrow, een sectietitel met verloop in de tekst en kaarten (chip-cards met hoekmarkeringen).
- CTA-band en footer met de bedrijfsgegevens.
De echte uitwerking staat in de UI-kit: koppen, kaarten, secties en footers.