Käyttöliittymän eri osien välistykset vaikuttavat oleellisesti palvelun käytettävyyteen, saavutettavuuteen ja tiedon luettavuuteen. Varsinkin yleisimmissä elementeissä ja sisältötyypeissä on suositeltavaa noudattaa yhtenäisiä ja vakiintuneita välistyskäytäntöjä.
Kelan käyttöliittymissä ja Kela Design Systemin komponenteissa välistykset perustuvat ruudukkomalliin, jonka perusyksikkö on 8 px (0.5 rem).
Ohjeet ja esimerkit välistysarvojen soveltamisesta: Välistykset
| SASS | JS | CSS | Arvo (rem) | Arvo (px) | Esimerkki |
|---|---|---|---|---|---|
$spacing-0 | SPACING_0 | --kds-t-spacing-0 | 0 | 0 | |
$spacing-1 | SPACING_1 | --kds-t-spacing-1 | 0.25rem | 4px | |
$spacing-2 | SPACING_2 | --kds-t-spacing-2 | 0.5rem | 8px | |
$spacing-3 | SPACING_3 | --kds-t-spacing-3 | 0.75rem | 12px | |
$spacing-4 | SPACING_4 | --kds-t-spacing-4 | 1rem | 16px | |
$spacing-5 | SPACING_5 | --kds-t-spacing-5 | 1.25rem | 20px | |
$spacing-6 | SPACING_6 | --kds-t-spacing-6 | 1.5rem | 24px | |
$spacing-7 | SPACING_7 | --kds-t-spacing-7 | 1.75rem | 28px | |
$spacing-8 | SPACING_8 | --kds-t-spacing-8 | 2rem | 32px | |
$spacing-9 | SPACING_9 | --kds-t-spacing-9 | 2.25rem | 36px | |
$spacing-10 | SPACING_10 | --kds-t-spacing-10 | 2.5rem | 40px | |
$spacing-12 | SPACING_12 | --kds-t-spacing-12 | 3rem | 48px | |
$spacing-14 | SPACING_14 | --kds-t-spacing-14 | 3.5rem | 56px | |
$spacing-16 | SPACING_16 | --kds-t-spacing-16 | 4rem | 64px | |
$spacing-18 | SPACING_18 | --kds-t-spacing-18 | 4.5rem | 72px | |
$spacing-20 | SPACING_20 | --kds-t-spacing-20 | 5rem | 80px | |
$spacing-24 | SPACING_24 | --kds-t-spacing-24 | 6rem | 96px | |
$spacing-28 | SPACING_28 | --kds-t-spacing-28 | 7rem | 112px | |
$spacing-32 | SPACING_32 | --kds-t-spacing-32 | 8rem | 128px | |
$spacing-px | SPACING_PX | --kds-t-spacing-px | 1px | 1px | |
$spacing-auto | SPACING_AUTO | --kds-t-spacing-auto | auto | auto |