Naar Core

Utilities

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

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.