Menu Uno designsysteem 5.3.5

Utilities

De componenten library heeft een aantal generieke utility classes. Wees voorzichtig met het toepassen, omdat een utility class een component kan beschadigen.

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.

LET OP

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.