Afstand & Positionering
- .mt-auto
Zet margin-top: auto;. Handig om een element naar beneden te duwen binnen een flex-container. - .mw-12
Stelt een maximale breedte van 12rem in en schuift het element naar rechts met margin-left: auto.
Borders & Schaduwen
- .has-border-bottom
Binnen .o2lab__container krijgen alle directe kinderen (> div) een grijze onderrand en extra ruimte onder (padding-bottom: 4rem). - .shadow
Geeft een gelaagde drop-shadow voor subtiele diepte. - .line-red
Rand rondom (geen bovenrand) in de kleur $clr-primary. - .line-blue
Rand rondom (geen bovenrand) in de kleur $clr-alternating. - .line-mint
Rand rondom (geen bovenrand) in de kleur $clr-secondary. - .line-blue-grey
Rand rondom (geen bovenrand) in de kleur $clr-tertiary. - .section-border
Zet een rand in $clr-alternating rondom .o2lab__layout-columns.
Binnenin krijgt .block--o2lab-content-text een linker scheidingslijn, maar die verdwijnt op tablet.
Tekstuitlijning
- .align-left
Tekst links uitgelijnd. - .align-center
Tekst gecentreerd. - .align-right
Tekst rechts uitgelijnd.
Icons & Decoratie
- .title-icon
Plaatst vóór h2 en h3 een SVG-icoon (links van de titel, absoluut gepositioneerd). - .custom-icon
Voegt vóór de inhoud een klein rood rond icoon toe (SVG via :before). - .intro-background
Grote decoratieve SVG-achtergrond via :before, linksboven buiten beeld gepositioneerd.
Wordt verborgen op kleinere schermen (notebook-max).
Layout & Flex
- .custom-align
Maakt het element een flex-container en centreert items verticaal. - .section-small-image
Beperkt afbeeldingen binnen .drimage tot maximaal 60% breed (minimaal 20rem) en centreert ze.
Buttons & Hero-sectie
- .hero-buttons
Trekt de knoppenbalk omhoog met een negatieve bovenmarge.- Op tablet krijgt de balk een achtergrond in $clr-secondary en normale marge.
- Binnen p staan knoppen naast elkaar met display:flex; op tablet stapelen ze onder elkaar.
- Links (a) hebben geen marge, flexen mee, grotere tekst (2.2rem), en zijn op tablet 100% breed.