Marges
Marge-bottom
.spacing-none geeft een marge-bottom van 0.
.spacing-bottom-xxs geeft een marge-bottom van 4px.
.spacing-bottom-xs geeft een marge-bottom van 8px.
.spacing-bottom-s geeft een marge-bottom van 12px.
.spacing-bottom-m geeft een marge-bottom van 16px.
.spacing-bottom-l geeft een marge-bottom van 20px.
.spacing-bottom-xl geeft een marge-bottom van 32px.
Marge-top
.spacing-top-s geeft een marge-top van 12px.
.spacing-top-m geeft een marge-top van 16px.
.spacing-top-l geeft een marge-top van 30px.
Padding
.spacing-inner-m geeft een padding van 20px.
Typografie
Grootte
.is-h1 Kop xl
.is-h2 Kop l
.is-h3 Kop m
.is-h4 Kop s
.is-h5 Kop xs
.subheading Secundaire kop
.paragraph .paragraph--l Een paragraaf l met standaard meer marge
.paragraph .paragraph--s Een paragraaf s
.paragraph .paragraph--xs Een paragraaf xs
Kleur
.light Witte tekst
.dimmed Gedimt
Uitlijning
.text-left Links uitlijnen
.text-right Rechts uitlijnen
.text-center Centreren
.columns Om een lijst over 2 kolommen te verdelen.
kapitalen
.capitalize Klein kapitaal
.uppercase kapitalen
Afbreking
.break-all zorgt ervoor dat lange teksten die geen natuurlijke
breekpunten hebben (zoals automatisch gegenereerde bestandsnamen) toch onderbroken kunnen worden.
Interactie & accessibility
.screenreader-only Onzichtbare inhoud, alleen voor gebruikers van screenreaders.
.dont-speak De inhoud wordt niet voorgelezen door screenreaders.
.invisible-focusable De inhoud krijgt geen focus op screenreaders.
.is-hidden gebruik je om elementen te verbergen met display: none;.
.no-scroll In sommige gevallen wil je voorkomen dat de iets kan scrollen. Bijvoorbeeld de achtergrond van een modal.