Marges
Unset marges / padding
.spacing-none geeft een marge van 0.
.spacing-inner-none geeft een padding van 0.
Marge-bottom
.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.
.spacing-bottom-xxl geeft een marge-bottom van 48px.
Breaking change in Uno versie 6 of hoger
De class.spacing-top-l wordt aangepast in Uno versie 6 en hoger. De spacing veranderd van 30px naar 20px zodat de styling generiek is
Marge-top
.spacing-top-xxs geeft een marge-top van 4px.
.spacing-top-xs geeft een marge-top van 8px.
.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.
.spacing-top-xl geeft een marge-top van 32px.
.spacing-top-xxl geeft een marge-top van 48px.
Marge-left
.spacing-left-xxs geeft een marge-left van 4px.
.spacing-left-xs geeft een marge-left van 8px.
.spacing-left-s geeft een marge-left van 12px.
.spacing-left-m geeft een marge-left van 16px.
.spacing-left-l geeft een marge-left van 20px.
.spacing-left-xl geeft een marge-left van 32px.
.spacing-left-xxl geeft een marge-left van 48px.
Marge-right
.spacing-right-xxs geeft een marge-right van 4px.
.spacing-right-xs geeft een marge-right van 8px.
.spacing-right-s geeft een marge-right van 12px.
.spacing-right-m geeft een marge-right van 16px.
.spacing-right-l geeft een marge-right van 20px.
.spacing-right-xl geeft een marge-right van 32px.
.spacing-right-xxl geeft een marge-right van 48px.
Padding
.spacing-inner-xxs geeft een padding van 4px.
.spacing-inner-xs geeft een padding van 8px.
.spacing-inner-s geeft een padding van 12px.
.spacing-inner-m geeft een padding van 16px.
.spacing-inner-l geeft een padding van 20px.
.spacing-inner-xl geeft een padding van 32px.
.spacing-inner-xxl geeft een padding van 48px.
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.
.nowrap zorgt ervoor dat lange teksten niet onderbroken 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.