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.