Hopp til innhold

Spacing

Vi tilbyr Sass-variabler og utility-klasser for verdiene i spacing-skalaene til Jøkul.

Bruk

I Jøkul har vi en spacing-skala som er basert på t-skjorte størrelser. Du kan bruke skalaene ved hjelp av SASS-variabler som du kan sette inn i ditt eget stilark, eller bruke hjelpeklassene direkte på elementer i koden.

Variablene kan importeres fra ~@fremtind/jkl-core/jkl. Husk å bruke riktig importsyntaks for byggverktøyet ditt når du importerer. De kan da brukes slik:

@use "~@fremtind/jkl-core/jkl";

.jkl-your-component {
    padding-left: jkl.$spacing-s;
}

Utility-klassene setter en verdi fra spacingskalaene som margin på elementet som har klassen. Det finnes varianter for å sette margin på top, right, bottom og left, samt for alle sider. Klassene kan brukes slik:

<div class="jkl-spacing-xl--all">
    <span class="jkl-spacing-s--right">Hallo</span>
    verden
</div>

Skala

SpacingVariabelRemPixler
$spacing-3xsN/AremN/A
$spacing-2xsN/AremN/A
$spacing-xsN/AremN/A
$spacing-sN/AremN/A
$spacing-mN/AremN/A
$spacing-lN/AremN/A
$spacing-xlN/AremN/A
$spacing-2xlN/AremN/A
$spacing-3xlN/AremN/A
$spacing-4xlN/AremN/A

React API

Her finner du en oversikt over props på komponentene i pakken.