# Indeks Designsystem
> Felles retningslinjer og komponenter for SpareBank 1. Inneholder tokens, utility-klasser, React- og web components samt mønstre og maler.
## docs
### grunnleggende
- [Native](/docs/grunnleggende/native.md): Indeks brukes i hybridapper der webinnhold vises i native-appens WebView. For brukeren skal web-innholdet oppleves som en naturlig del av den native appen.
- [Border](/docs/grunnleggende/tokens/border.md): Komponentene vi tilbyr har riktig border-radius og border-width som standard. Hvis du skal lage noe eget, kan du bruke border-variablene vi tilbyr.
- [Farger for Native](/docs/grunnleggende/tokens/farger-native.md): Pakken @sb1/indeks-tokens inneholder fargetokens som kan bygges til forskjellige plattformer, inkludert native (iOS og Android).
- [Introduksjon](/docs/grunnleggende/tokens/introduksjon.md): Design tokens er de minste byggesteinene i designsystemet. De representerer visuelle verdier som farger, typografi, spacing, radius og skygger osv. definert som navngitte variabler i stedet for faste verdier.
- [Spacing](/docs/grunnleggende/tokens/spacing.md): Spacing-systemet i Indeks sikrer konsistente avstander mellom elementer på tvers av flater. Systemet er bygget på en skalerbar grunnverdi og kan justeres for ulike skjermstørrelser og behov for mer eller mindre kompakt visning.
- [Z Index](/docs/grunnleggende/tokens/z-index.md): Z-index er en CSS-egenskap som styrer stablingsrekkefølgen til elementer på en nettside. Med z-index kan du bestemme hvilke elementer som skal ligge over eller under andre, spesielt når de overlapper hverandre. For å sikre konsistens og forutsigbarhet i designet, har vi definert en rekke z-index tokens som dekker vanlige brukstilfeller i SpareBank 1 sitt designsystem.
- [Typografi](/docs/grunnleggende/typografi.md): Våre fonter
### hjem
Indeks er SpareBank 1 sitt designsystem - et verktøy for å lage helhetlige, brukervennlige og inkluderende løsninger.
- [Indeks](/docs/hjem.md): Indeks er SpareBank 1 sitt designsystem - et verktøy for å lage helhetlige, brukervennlige og inkluderende løsninger.
### kom-i-gang
- [Bidra](/docs/kom-i-gang/bidra.md): Enten du mangler en komponent, har forslag til forbedringer, eller har funnet noe som ikke fungerer som det skal, vil vi gjerne høre fra deg.
- [Designer](/docs/kom-i-gang/designer.md): Før du begynner
- [Introduksjon](/docs/kom-i-gang/grunnleggende.md): Visuell identitet
- [Kontakt](/docs/kom-i-gang/kontakt.md): Indeks blir best når vi snakker sammen. Vi setter stor pris på alle innspill, spørsmål og bidrag fra dere som bruker systemet.
- [Migrering fra FFE til Indeks](/docs/kom-i-gang/migrering.md): Indeks er et helt nytt designsystem, bygget opp fra grunnen med en annen arkitektur og struktur enn FFE. For deg som skal migrere fra FFE betyr dette at enkelte ting må gjøres litt annerledes enn før.
- [Utvikler](/docs/kom-i-gang/utvikler.md): Kom i gang med Indeks i prosjektet ditt. Velg teknologi under, så tilpasser guiden seg.
### komponenter
- [Stack](/docs/komponenter/primitives/stack.md): Stack er en layout-primitiv for å stable innhold i én dimensjon — vertikalt eller horisontalt. Den fungerer både som custom element (`) og som CSS-klasse (.ix-stack`).
- [TextArea](/docs/komponenter/textarea.md): TextArea lar brukeren skrive inn lengre fritekst over flere linjer, som beskrivelser, meldinger eller begrunnelser.
- [TextField](/docs/komponenter/textfield.md): TextField er et inputfelt for kortere tekst eller tall, som kontonummer, e-postadresse eller beløp.
- [Typografi](/docs/komponenter/typografi.md): Typografikomponenter i Indeks. Størrelse settes med data-size-attributtet — se oversikten på siden for riktig bruk.
### monstre-og-maler
- [Deaktiverte tilstander](/docs/monstre-og-maler/deaktiverte-tilstander.md): I Indeks anbefaler vi som hovedregel å unngå bruk av deaktiverte tilstander som disabled. Deaktiverte komponenter kan virke som en enkel løsning, men fører ofte til dårligere brukeropplevelse, lavere tilgjengelighet og mer frustrasjon enn nødvendig. Når en kontroll er deaktivert, fjernes den i praksis fra samspillet mellom bruker og grensesnitt – uten at det nødvendigvis blir tydelig hvorfor.
- [Layout](/docs/monstre-og-maler/layout.md): Indeks tilbyr et sett med layout-utilities for å hjelpe med oppsett av elementer på siden ved bruk av Flex og CSS Grid. Disse klassene kan brukes direkte i HTML for raskt å justere layout uten behov for egendefinert CSS.
- [Spacing](/docs/monstre-og-maler/spacing.md): For å sikre konsistente og forutsigbare layouter i applikasjoner bygget med Indeks følger vi et sett med retningslinjer for distribusjon av spacing. Klare mønstre for avstand mellom elementer hjelper oss med å skape en harmonisk og brukervennlig visuell struktur på tvers av applikasjoner. Oppsummert dreier det seg om disse prinsippene:
### retningslinjer
- [Designprinsipper](/docs/retningslinjer/designprinsipper.md): SpareBank 1 sine flater skal være lette å bruke for alle demografier.
- [Farger](/docs/retningslinjer/farger.md): I Indeks bruker vi semantiske farger. Det betyr at farger defineres og navngis ut fra hvordan de brukes, ikke hvordan de ser ut. For eksempel navngir vi en farge "Background" i stedet for å bruke det visuelle navnet (f.eks fjell) eller en hex-verdi.
- [Fargemodus (light og dark)](/docs/retningslinjer/farger/fargemodus.md): De semantiske fargevariablene i Indeks (--ix-color-*) har egne verdier for light og dark mode. Alle komponenter leser disse variablene, så de tilpasser seg automatisk.
### utility-klasser
- [Native](/docs/utility-klasser/native.md): Utility-klasser for å kontrollere tekstmarkering, berøring og dra-og-slipp-oppførsel i hybridapper der webinnhold vises i en native app sin WebView.
- [Utility-klasser](/docs/utility-klasser/oversikt.md): Utility-klasser er hjelpeklasser i CSS, designet for å enkelt kunne legge vanlige styling-properties til elementer ved behov. Hver klasse har sitt eget separate formål og består av én enkelt CSS-property, eller et mindre sett med properties for å oppnå en spesifikk effekt. Flere klasser kan brukes samtidig for å bygge opp komplette elementer. Komponentene i Indeks er i stor grad bygget med utility-klasser.
---
# Full Documentation Content
# Native
Indeks brukes i hybridapper der webinnhold vises i native-appens WebView. For brukeren skal web-innholdet oppleves som en naturlig del av den native appen.
Denne siden samler hensyn og verktøy som er relevante når Indeks-komponenter brukes i en native kontekst.
## WebView-oppførsel[](#webview-oppførsel "Direct link to WebView-oppførsel")
Uten tilpasning vil WebView-innhold oppføre seg som en vanlig nettside: tekst kan markeres ved langt trykk, elementer kan dras, og trykk har en merkbar forsinkelse. Dette bryter med forventningene til en native app.
Indeks tilbyr utility-klasser som gjør at webinnholdet oppfører seg som native UI — med mulighet for å slippe gjennom tekstmarkering der det trengs.
Se [Native (utility-klasser)](/docs/utility-klasser/native.md) for fullstendig oversikt over klassene `.ix-native`, `.ix-selectable` og `.ix-selectable-all`.
---
# Border
Komponentene vi tilbyr har riktig border-radius og border-width som standard. Hvis du skal lage noe eget, kan du bruke border-variablene vi tilbyr.
Bruk util-klassen `.ix-border-default` for å få standard border-stil, oftest brukt på kort. Klassen setter `--ix-border-width-default` og farge `--ix-color-border-main-default`.
## Border width[](#border-width "Direct link to Border width")
Vi har 2 forskjellige border-tykkelser. For fokus på skjemaelementer skal du bruke [outline](#outline).
| CSS custom property | Verdi | Beskrivelse |
| --------------------------- | ----- | ------------------------- |
| `--ix-border-width-default` | 1px | Standard border-width. |
| `--ix-border-width-bold` | 2px | Border-width for buttons. |
## Border radius[](#border-radius "Direct link to Border radius")
Vi har border radius i størrelsene xs, sm, md, lg og xl. Det er egne border radius for pilleformede elementer hvis man trenger det, samt checkbox, input og knapp. Bruk `ix-border-radius-circle` for helt runde elementer.
| CSS custom property | Verdi | Beskrivelse |
| ----------------------------- | ---------------------------- | --------------------------------------------------------- |
| `--ix-border-radius-circle` | 50% | Fullt avrundet border-radius. |
| `--ix-border-radius-pill` | 9999px | Border-radius for pille-formede elementer. Feks. knapper. |
| `--ix-border-radius-checkbox` | 4px | Border-radius for avkrysningsbokser. |
| `--ix-border-radius-input` | 8px | Border-radius for input-felt. |
| `--ix-border-radius-button` | var(--ix-border-radius-pill) | Border-radius for knapper. |
| `--ix-border-radius-xs` | 4px | Liten border-radius. |
| `--ix-border-radius-sm` | 8px | Medium border-radius. Brukes til input-felt. |
| `--ix-border-radius-md` | 16px | Stor border-radius. Brukes til kort. |
| `--ix-border-radius-lg` | 24px | Ekstra stor border-radius. Brukes til modaler. |
| `--ix-border-radius-xl` | 40px | Ekstra stor border-radius. |
## Outline[](#outline "Direct link to Outline")
Outline brukes ved fokus på skjemaelementer. Outline burde være satt til transparent når elementet ikke er i fokus for å unngå hopping i layouten. Bruk `--ix-outline-default` for standard outline-stil, og legg til outline-offset med `--ix-outline-offset-default`.
| CSS custom property | Verdi | Beskrivelse |
| ---------------------------- | ----- | ------------------------ |
| `--ix-outline-width-default` | 2px | Standard outline-bredde. |
| CSS custom property | Verdi | Beskrivelse |
| ----------------------------- | ----- | ------------------------ |
| `--ix-outline-offset-default` | 3px | Standard outline-offset. |
## Farger[](#farger "Direct link to Farger")
Se [farger](/docs/retningslinjer/farger/.md#border) for å finne riktige farger til border og outline.
---
# Farger for Native
Pakken `@sb1/indeks-tokens` inneholder fargetokens som kan bygges til forskjellige plattformer, inkludert native (iOS og Android).
For å bruke fargene i native-apper er det enkleste å bygge dem til den relevante plattformen ved hjelp av scripts som følger med pakken.
## Hvordan bygge fargene[](#hvordan-bygge-fargene "Direct link to Hvordan bygge fargene")
Scriptene som brukes for å bygge fargene til native ligger i `@sb1/indeks-tokens`-pakken under `scripts/build-colors/mobile`.
For å bruke scriptet kan du bruke `npx` som lar deg kjøre scripts fra pakker uten å installere dem. Du kan enten kjøre det i root og legge til riktig path, eller kjøre det i riktig mappe med path `.`
Versjonering
Vi anbefaler at dere commiter scriptet dere bruker for å bygge fargene, slik at dere har kontroll på når fargene endrer seg. Ved å ha dette committet blir det enklere å spore når fargene endrer seg og å vite hvilken versjon en er på.
## Android[](#android "Direct link to Android")
For å bygge farger til Android (Kotlin):
```
npx @sb1/indeks-tokens build-colors platform=android path=./android/colors
```
Dette genererer en `Colors.kt`-fil med semantiske farger for både light og dark mode.
### Output-eksempel[](#output-eksempel "Direct link to Output-eksempel")
```
object Colors {
object LightDefault {
val backgroundDefault = Color(0xFFFFFFFF)
val backgroundNeutral = Color(0xFFF4F5F6)
// ... flere farger
}
object DarkDefault {
val backgroundDefault = Color(0xFF1E2632)
val backgroundNeutral = Color(0xFF323B49)
// ... flere farger
}
}
```
### Parametere[](#parametere "Direct link to Parametere")
* `platform=android` - Spesifiserer at du vil bygge for Android
* `path=` - Hvor filene skal lagres (f.eks. `./android/colors`)
* `theme=` - (Valgfri) Sti til egen theme-fil (default: `sb1`)
## iOS[](#ios "Direct link to iOS")
For å bygge farger til iOS (Xcode Color Assets):
```
npx @sb1/indeks-tokens build-colors platform=ios path=./ios/colors
```
Dette genererer en `.xcassets`-mappe med semantiske farger for både light og dark mode.
### Output-struktur[](#output-struktur "Direct link to Output-struktur")
```
SemanticColors.xcassets/
├── Contents.json
├── README.md
└── default/
├── Contents.json
├── background.default.colorset/
│ └── Contents.json
├── background.neutral.colorset/
│ └── Contents.json
└── ... flere farger
```
### Parametere[](#parametere-1 "Direct link to Parametere")
* `platform=ios` - Spesifiserer at du vil bygge for iOS
* `path=` - Hvor filene skal lagres (f.eks. `./ios/colors`)
* `theme=` - (Valgfri) Sti til egen theme-fil (default: `sb1`)
## Egne themes[](#egne-themes "Direct link to Egne themes")
Du kan lage ditt eget theme ved å opprette en TypeScript-fil som eksporterer et theme-objekt. Scriptet vil da bruke dette themet i stedet for det innebygde sb1-themet.
### Eksempel på egen theme-fil[](#eksempel-på-egen-theme-fil "Direct link to Eksempel på egen theme-fil")
Lag en fil `my-theme.ts`:
```
import type { Theme } from '@sb1/indeks-tokens/themes/types';
export const myTheme: Theme = {
name: 'my-custom-theme',
identityColor: '#005aa4',
colors: {
brand: '#0078D8',
success: '#00885B',
info: '#467CA4',
danger: '#C94E4F',
warning: '#AF6500',
gray: '#6D7888',
neutral: '#AF6516',
},
themeable: {
'font-family': {
normal: 'System',
heading: 'System',
},
'font-weight': {
normal: 400,
bold: 600,
heading: 700,
},
border: {
radius: {
button: 25,
checkbox: 4,
input: 8,
},
},
},
};
```
### Bruke eget theme[](#bruke-eget-theme "Direct link to Bruke eget theme")
```
npx @sb1/indeks-tokens build-colors platform=android path=./android/colors theme=./my-theme.ts
```
Eller for iOS:
```
npx @sb1/indeks-tokens build-colors platform=ios path=./ios/colors theme=./my-theme.ts
```
## Fargeskalaer[](#fargeskalaer "Direct link to Fargeskalaer")
Alle farger bygges fra fargeskalaer med 20 steg (0-950) for hver basisfarge:
* **brand** - Merkevarefarge
* **success** - Suksess/positiv
* **info** - Informasjon
* **warning** - Advarsel
* **danger** - Feil/negativ
* **gray** - Nøytral grå
* **neutral** - Nøytral brun/beige
De semantiske fargene (f.eks. `background.default`, `foreground.main`) er mappet til disse fargeskalaene og justeres automatisk for light og dark mode.
## Oppdatere farger[](#oppdatere-farger "Direct link to Oppdatere farger")
For å oppdatere fargene i native-appen din:
1. Oppdater versjonen av `@sb1/indeks-tokens` i kommandoen
2. Kjør build-scriptet på nytt
3. Commit de nye filene til versjonskontroll
4. De nye fargene vil være tilgjengelige i appen
Dette sikrer at fargeendringer er sporbare og at teamet har kontroll over når oppdateringer skjer.
---
# Introduksjon
Design tokens er de minste byggesteinene i designsystemet. De representerer visuelle verdier som farger, typografi, spacing, radius og skygger osv. definert som navngitte variabler i stedet for faste verdier.
Ved å bruke tokens samler vi visuelle verdier på ett sted. Når en verdi endres, oppdateres den automatisk der tokenet er i bruk, uten behov for manuelle justeringer i hver enkelt komponent eller flate. Dette gjør designsystemet enklere å vedlikeholde, mindre sårbart for feil og mer robust over tid.
I stedet for å bruke konkrete verdier som 16px eller #002776, bruker vi tokens som for eksempel `ix-spacing-sm` eller `ix-color-foreground-main-default`. Dette gjør det mulig å skape konsistens på tvers av design og kode, og gjør endringer enklere å håndtere over tid.
## Hvorfor bruke tokens?[](#hvorfor-bruke-tokens "Direct link to Hvorfor bruke tokens?")
### Konsistens[](#konsistens "Direct link to Konsistens")
Samme verdier brukes på tvers av komponenter, flater og team.
### Skalerbarhet[](#skalerbarhet "Direct link to Skalerbarhet")
Endringer kan gjøres ett sted og slår gjennom overalt.
### Felles språk[](#felles-språk "Direct link to Felles språk")
Tokens fungerer som et felles språk mellom designere og utviklere.
### Tilpasning[](#tilpasning "Direct link to Tilpasning")
Gjør det mulig å støtte flere temaer, moduser eller merkevarer (f.eks. light/dark eller accent).
## Tokens i praksis[](#tokens-i-praksis "Direct link to Tokens i praksis")
* I Figma brukes tokens for å sikre at design følger systemets regler
* I kode eksponeres de som variabler (CSS, JSON, etc.)
* I komponenter brukes kun semantiske eller kontekstuelle tokens – aldri rå verdier
---
# Spacing
Spacing-systemet i Indeks sikrer konsistente avstander mellom elementer på tvers av flater. Systemet er bygget på en skalerbar grunnverdi og kan justeres for ulike skjermstørrelser og behov for mer eller mindre kompakt visning.
## Grunnverdier[](#grunnverdier "Direct link to Grunnverdier")
Spacing-systemet bruker følgende grunnverdier:
* **Mobil**: 16px (1rem)
* **Tablet**: 17px (1.063rem)
* **Desktop**: 18px (1.125)
Det betyr at størrelsen `md` fungerer som et referansepunkt i skalaen, og at øvrige størrelser beregnes relativt til denne. Typografi bruker `rem`, mens spacing er definert i `px`, men begge følger den samme underliggende skalaen for å sikre konsistente proporsjoner på tvers av systemet.
## Density-moduser[](#density-moduser "Direct link to Density-moduser")
Spacing-systemet i Indeks kan justeres basert på hvor kompakt eller romslig (desinsity) en flate skal være. Dette gjør det mulig å vise mer eller mindre innhold på samme flate, uten å gå på bekostning av lesbarhet. Indeks støtter tre ulike moduser som påvirker alle spacing-verdier.
* **Default**: Standard visning med balanserte spacing-verdier som gir god lesbarhet og tydelig struktur. Dette er anbefalt valg for de fleste flater og brukstilfeller.
* **Compact**: Kompakt visning med reduserte spacing-verdier. Er godt egnet for flater med behov for høy informasjonstetthet, som for eksempel rådgiverflater og andre interne systemer. Et kompakt område kan settes ved bruk av attributtet `data-density="compact"`.
* **Comfortable**: Komfortabel visning med økte spacing-verdier som gir et mer romslig uttrykk. Egner seg godt for åpne nettsider, salgskanaler og kampanjer, der innholdet skal få mer luft og oppmerksomhet. Et komfortabelt område kan settes ved bruk av attributtet `data-density="comfortable"`.
```
...
...
...
```
## Spacing-skala[](#spacing-skala "Direct link to Spacing-skala")
Spacing-tokens følger en konsistent, skalerbar skala fra `2xs` til `4xl`. Skalaen er bygget for å dekke både små justeringer og større avstander, og brukes konsekvent på tvers av komponenter og flater.
| Token | Beskrivelse | Default | Compact | Comfortable |
| ----- | -------------- | ------- | ------- | ----------- |
| `2xs` | Ekstra liten | 4px | 2px | 6px |
| `xs` | Liten | 7px | 4px | 9px |
| `sm` | Small | 11px | 9px | 14px |
| `md` | Medium | 16px | 13px | 20px |
| `lg` | Large | 23px | 18px | 29px |
| `xl` | Extra large | 32px | 26px | 41px |
| `2xl` | 2x extra large | 46px | 36px | 58px |
| `3xl` | 3x extra large | 66px | 52px | 83px |
| `4xl` | 4x extra large | 106px | 83px | 133px |
*Verdiene over er for mobil. På tablet og desktop økes alle verdier proporsjonalt.*
Bak kulissene er spacing-verdiene basert på en beregnet skala som strekker seg fra –13 til 19, med baseverdiene som utgangspunkt. De ulike density-modusene justerer verdiene ved å flytte seg opp eller ned i skalaen, noe som gjør det mulig å endre spacing konsekvent uten å definere nye verdier.
## Bruk[](#bruk "Direct link to Bruk")
### Utility-klasser[](#utility-klasser "Direct link to Utility-klasser")
Full oversikt over utility-klassene finner du [i oversikten over utility-klasser](/docs/utility-klasser/oversikt.md#spacing).
### CSS Custom Properties[](#css-custom-properties "Direct link to CSS Custom Properties")
Spacing finnes også i variabler: `--ix-spacing-{size}`. Variablene skiller ikke mellom padding, margin eller gap.
```
.min-komponent {
padding: var(--ix-spacing-md);
margin-bottom: var(--ix-spacing-lg);
gap: (var--ix-spacing-md);
}
```
## Migreringsguider[](#migreringsguider "Direct link to Migreringsguider")
### Migrere fra FFE[](#migrere-fra-ffe "Direct link to Migrere fra FFE")
Indeks sine verdier på spacing-variabler justerer seg etter skjermstørrelse og [density-modus](#density-moduser).
| FFE-token | Indeks-tokens | FFE verdi | Indeks verdi mobil | Indeks verdi desktop |
| ----------------- | ---------------- | --------- | ------------------ | -------------------- |
| `ffe-spacing-2xs` | `ix-spacing-2xs` | 4px | 4px | 4px |
| `ffe-spacing-xs` | `ix-spacing-xs` | 8px | 7px | 8px |
| | `ix-spacing-sm` | | 11px | 13px |
| `ffe-spacing-sm` | `ix-spacing-md` | 16px | 16px | 18px |
| `ffe-spacing-md` | `ix-spacing-lg` | 24px | 23px | 26px |
| `ffe-spacing-lg` | `ix-spacing-xl` | 32px | 32px | 36px |
| `ffe-spacing-xl` | `ix-spacing-xl` | 40px | 32px | 36px |
| `ffe-spacing-2xl` | `ix-spacing-2xl` | 48px | 46px | 52px |
| `ffe-spacing-3xl` | | 64px | | |
| `ffe-spacing-4xl` | `ix-spacing-3xl` | 80px | 66px | 74px |
| | `ix-spacing-4xl` | | 105px | 118px |
| `ffe-spacing-5xl` | | 160px | | |
Det er mulig å migrere til disse spacing-variablene ved bruk av search-replace-all, men det er viktig å dobbeltsjekke endringen (også på flere skjermstørrelser), da oversettelsen ikke er direkte for alle variablene.
### Migrere fra tailwind[](#migrere-fra-tailwind "Direct link to Migrere fra tailwind")
Hvis prosjektet ditt er satt opp med tailwind som bruker spacing-skalaen fra FFE slik som det her:
```
{ 0: 0,
0.5: spacing.spacing2xs,
1: spacing.spacing,
2: spacing.spacingSm,
3: spacing.spacingMd,
4: spacing.spacingLg,
5: spacing.spacingXl,
6: spacing.spacing2xl,
8: spacing.spacing3xl,
10: spacing.spacing4xl,
20: spacing.spacing5xl
}
```
Kan du ta utgangspunkt i disse tabellene:
### Padding[](#padding "Direct link to Padding")
Verdiene er de samme for `pt`, `pb`, `pl` og `pr`. Se [responsiv spacing](/docs/utility-klasser/oversikt.md#responsiv-spacing) for padding på forskjellige skjermstørrelser.
| Tailwind-token | Indeks Util-klasse | FFE/Tailwind verdi | Indeks verdi mobil | Indeks desktop |
| -------------- | ------------------ | ------------------ | ------------------ | -------------- |
| `p-0` | `ix-p-0` | 0px | 0px | 0px |
| `p-0.5` | `ix-p-2xs` | 4px | 4px | 4px |
| `p-1` | `ix-p-xs` | 8px | 7px | 8px |
| | `ix-p-sm` | | 11px | 13px |
| `p-2` | `ix-p-md` | 16px | 16px | 18px |
| `p-3` | `ix-p-lg` | 24px | 23px | 26px |
| `p-4` | `ix-p-xl` | 32px | 32px | 36px |
| `p-5` | `ix-p-xl` | 40px | 32px | 36px |
| `p-6` | `ix-p-2xl` | 48px | 46px | 52px |
| `p-8` | | 64px | | |
| `p-10` | `ix-p-3xl` | 80px | 66px | 74px |
| | `ix-p-4xl` | | 105px | 118px |
| `p-20` | | 160px | | |
### Margin[](#margin "Direct link to Margin")
Verdiene er de samme for `mt`, `mb`, `ml` og `mr`. Se [responsiv spacing](/docs/utility-klasser/oversikt.md#responsiv-spacing) for margin på forskjellige skjermstørrelser.
| Tailwind-token | Indeks Util-klasse | FFE/Tailwind verdi | Indeks verdi mobil | Indeks desktop |
| -------------- | ------------------ | ------------------ | ------------------ | -------------- |
| `m-0` | `ix-m-0` | 0px | 0px | 0px |
| `m-0.5` | `ix-m-2xs` | 4px | 4px | 4px |
| `m-1` | `ix-m-xs` | 8px | 7px | 8px |
| | `ix-m-sm` | | 11px | 13px |
| `m-2` | `ix-m-md` | 16px | 16px | 18px |
| `m-3` | `ix-m-lg` | 24px | 23px | 26px |
| `m-4` | `ix-m-xl` | 32px | 32px | 36px |
| `m-5` | `ix-m-xl` | 40px | 32px | 36px |
| `m-6` | `ix-m-2xl` | 48px | 46px | 52px |
| `m-8` | | 64px | | |
| `m-10` | `ix-m-3xl` | 80px | 66px | 74px |
| | `ix-m-4xl` | | 105px | 118px |
| `m-20` | | 160px | | |
### Gap[](#gap "Direct link to Gap")
| Tailwind-token | Indeks Util-klasse | FFE/Tailwind verdi | Indeks verdi mobil | Indeks desktop |
| -------------- | ------------------ | ------------------ | ------------------ | -------------- |
| `gap-0` | `ix-gap-0` | 0px | 0px | 0px |
| `gap-0.5` | `ix-gap-2xs` | 4px | 4px | 4px |
| `gap-1` | `ix-gap-xs` | 8px | 7px | 8px |
| | `ix-gap-sm` | | 11px | 13px |
| `gap-2` | `ix-gap-md` | 16px | 16px | 18px |
| `gap-3` | `ix-gap-lg` | 24px | 23px | 26px |
| `gap-4` | `ix-gap-xl` | 32px | 32px | 36px |
| `gap-5` | `ix-gap-xl` | 40px | 32px | 36px |
| `gap-6` | `ix-gap-2xl` | 48px | 46px | 52px |
| `gap-8` | | 64px | | |
| `gap-10` | `ix-gap-3xl` | 80px | 66px | 74px |
| | `ix-gap-4xl` | | 105px | 118px |
| `gap-20` | | 160px | | |
Ta gjerne kontakt med oss om du har andre behov enn det Indeks tilbyr.
---
# Z Index
Z-index er en CSS-egenskap som styrer stablingsrekkefølgen til elementer på en nettside. Med z-index kan du bestemme hvilke elementer som skal ligge over eller under andre, spesielt når de overlapper hverandre. For å sikre konsistens og forutsigbarhet i designet, har vi definert en rekke z-index tokens som dekker vanlige brukstilfeller i SpareBank 1 sitt designsystem.
Hver token representerer en CSS custom property, som gjør det enkelt å bruke og vedlikeholde z-index-verdier på tvers av prosjekter. Tokenene er navngitt etter formålet de skal dekke, og verdiene er nøye valgt for å unngå konflikter mellom ulike komponenter og overlays.
Ved å bruke disse tokenene sikrer du at grensesnittet oppfører seg konsistent, og at viktige elementer alltid vises i riktig rekkefølge.
| CSS custom property | Verdi | Beskrivelse |
| ------------------- | ----- | -------------------------------------------------------------------------------------------------------------------- |
| `--ix-z-background` | -1 | Bakgrunnselementer som alltid skal ligge bak alt annet. |
| `--ix-z-default` | 0 | Standard z-index for vanlige komponenter og innhold. |
| `--ix-z-elevated` | 1 | Brukes for elementer som skal ligge over standard innhold. |
| `--ix-z-overlay` | 20 | Overlay som skal ligge over innholdet på siden. |
| `--ix-z-dialog` | 60 | Dialoger som skal ligge over alt annet. |
| `--ix-z-max` | 100 | For når du har noe som må ligge øverst uansett hva. Vi annbefaler å bruke denne like mye som !important. Dvs. aldri. |
---
# Typografi
## Våre fonter[](#våre-fonter "Direct link to Våre fonter")
Vår egenutviklede skrifttype er en viktig del av identiteten vår. Den gjør at vi skiller oss tydelig fra konkurrentene, bygger personlighet og gir oss en gjenkjennelig stemme på tvers av flater. Skrifttypene er basert på vårt sirkulære formspråk og bidrar til å knytte identiteten tettere sammen.
Vi bruker to fonter: SpareBank 1 Title til de største overskriftene og SpareBank 1 til all øvrig tekst.
### SpareBank 1 Title[](#sparebank-1-title "Direct link to SpareBank 1 Title")
Brukes på de største overskriftene og er derfor ekstra distinkt. Fonten kjennetegnes av tydelige, sirkulære former som skaper kontrast mot de smalere bokstavene og gir et sterkt visuelt uttrykk. SpareBank 1 Title skal ikke brukes i lengre brødtekster, da den ikke er optimalisert for lesbarhet i mengdetekst.
### SpareBank 1[](#sparebank-1 "Direct link to SpareBank 1")
I brødtekst og lengre tekster bruker vi en mindre distinkt font som er optimalisert for lesbarhet i mengdetekst.
Begge fontene er tilgjengelige i Figma og kan brukes direkte, uten behov for lokal installasjon.
## Store bokstaver og kursiv[](#store-bokstaver-og-kursiv "Direct link to Store bokstaver og kursiv")
Unngå å bruke tekst med kun store bokstaver, da dette gir dårligere lesbarhet. Det samme gjelder kursiv, som ikke bør brukes i overskrifter eller i større tekstmengder, ettersom det kan gjøre teksten vanskeligere å lese.
## Responsiv[](#responsiv "Direct link to Responsiv")
Typografien er responsiv og tilpasser seg ulike skjermstørrelser. Basestørrelsen er 18 px på desktop og 16 px på mobil, og skalerer automatisk mellom breakpoints for å sikre god lesbarhet på tvers av enheter og kontekster.
## Størrelse på overskrifter og semantikk[](#størrelse-på-overskrifter-og-semantikk "Direct link to Størrelse på overskrifter og semantikk")
Du står fritt til å velge størrelse på overskrifter basert på behov og kontekst. Semantikk og visuell utforming er bevisst holdt adskilt, slik at riktig HTML-struktur kan brukes uavhengig av ønsket uttrykk.
## Linjelengde[](#linjelengde "Direct link to Linjelengde")
WCAG anbefaler å begrense linjelengden for å sikre god lesbarhet og tilgjengelighet. Både for lange og for korte linjer kan ha negativ effekt på leseflyten.
Optimal linjelengde for brødtekst på større skjermer er mellom 50 og 75 tegn per linje, inkludert mellomrom. Dette gir en god balanse mellom flyt og lesbarhet, og gjør det enklere for øyet å finne starten på neste linje. Linjer som er for korte kan gjøre teksten hakkete, mens for lange linjer kan gjøre det mer krevende å følge teksten over tid.
På mobil anbefales kortere linjelengder, typisk 35–50 tegn per linje, for å sikre god lesbarhet på små skjermer. Unngå linjer med færre enn 20 tegn, da dette fører til mange linjeskift og gjør teksten mer krevende å lese.
## Linjehøyde[](#linjehøyde "Direct link to Linjehøyde")
Standard linjehøyde i Indeks er 1.2. Brødtekst som er lengre enn noen få linjer trenger større linjehøyde for bedre lesbarhet, og kan overstyres til 1.4 med henholdsvis `Text/Body long/md - regular` i Figma, `long`-propen i `Text`-komponenten, eller CSS-klassen `.ix-text--long`.
## Venstrestilt tekst er standard[](#venstrestilt-tekst-er-standard "Direct link to Venstrestilt tekst er standard")
Venstrestilt tekst gir best lesbarhet. Midtstilt tekst kan på lengre tekster gjør det vanskeligere å lese, men kan brukes varsomt på korte tekstmengder, for eksempel i overskrifter med enkel støttetekst.
## Farge på tekst[](#farge-på-tekst "Direct link to Farge på tekst")
Bruk ix-color-foreground-main-emphasis på overskrifter for tydelig hierarki. Til brødtekst og vanlig tekst brukes ix-color-foreground-main-default, mens For mindre fremtredende tekst, som støttetekst eller sekundær informasjon, kan ix-color-foreground-main-subtle benyttes.
## Stiler[](#stiler "Direct link to Stiler")
I Indeks bruker vi fire typografiske stiler: Heading, BodyLong, BodyShort og Label. Beskrivelse av når og hvordan de ulike stilene brukes, finner du under typografikomponentene.
---
# Indeks
Indeks er SpareBank 1 sitt designsystem - et verktøy for å lage helhetlige, brukervennlige og inkluderende løsninger.
## Tilpass dokumentasjonen
Velg teknologi og andre innstillinger så tilpasser vi eksemplene til stacken din.
Åpne innstillinger
[Utility-klasser](/docs/utility-klasser/oversikt.md)
[Spacing-tokens](/docs/grunnleggende/tokens/spacing.md)
[Farge-tokens og -utils](/docs/retningslinjer/farger/.md)
## Kom i gang[](#kom-i-gang "Direct link to Kom i gang")
[Designer](/docs/kom-i-gang/designer.md)
[Utvikler](/docs/kom-i-gang/utvikler.md)
## Bruk Indeks med AI-assistenter[](#bruk-indeks-med-ai-assistenter "Direct link to Bruk Indeks med AI-assistenter")
Hele dokumentasjonen er tilgjengelig som ren tekst som kan limes direkte inn i Claude, ChatGPT, Cursor eller andre LLM-verktøy:
* [`llms-full.txt`](/llms-full.txt) — hele dokumentasjonen i én fil, klar til å limes inn som kontekst
* [`llms.txt`](/llms.txt) — hierarkisk indeks hvis du vil at AI-en skal slå opp enkeltsider
Hver dokumentasjonsside finnes også som `.md`-variant — legg `.md` etter URL-en, for eksempel [`/docs/komponenter/textfield.md`](/docs/komponenter/textfield.md).
---
# Bidra
Enten du mangler en komponent, har forslag til forbedringer, eller har funnet noe som ikke fungerer som det skal, vil vi gjerne høre fra deg.
## Registrer feil eller mangler[](#registrer-feil-eller-mangler "Direct link to Registrer feil eller mangler")
Bruk én av disse malene i GitHub:
* [Kodefeil](https://github.com/SpareBank1/indeks/issues/new?template=kodefeil.yml) — feil i en komponent, token eller stil
* [Dokumentasjonsfeil](https://github.com/SpareBank1/indeks/issues/new?template=dokumentasjonsfeil.yml) — noe er feil, utdatert eller uklart i dokumentasjonen
* [Ny komponent](https://github.com/SpareBank1/indeks/issues/new?template=ny-komponent.yml) — foreslå en ny komponent eller større utvidelse
Du kan også bruke "Rapporter feil på denne siden"-lenken nederst på hver dokumentasjonsside for å åpne et forhåndsutfylt skjema.
## Ny komponent[](#ny-komponent "Direct link to Ny komponent")
Når vi vurderer nye bidrag til Indeks ser vi på hvordan de kan støtte arbeidet ditt og hvordan de passer inn i helheten av systemet. Målet er å gi deg fleksible og pålitelige byggeklosser som gjør det enklere å lage gode løsninger, både nå og over tid.
Med Atomic Design som utgangspunkt bygger vi Indeks slik at du kan sette sammen det du trenger, på en måte som fungerer godt sammen med resten av systemet.
Ved vurdering av nye komponenter ser vi på:
* **Gjenbrukbarhet**: Er det flere som vil ha nytte av den?
* **Verdi**: Hvilket problem løser den, og kan det løses av en annen komponent?
* **Fleksibilitet**: Kan den tilpasses ulike behov?
* **Konsistens**: Stemmer den overens med våre designprinsipper og helheten i systemet?
Huskeliste:
* Kan komponentene brukes i flere kontekster?
* Er komponenten navigerbar med tastatur og i tråd med WCAG-krav?
* Har alle states god nok kontrast?
* Hvordan blir opplevelsen på mobil vs desktop? Er det best med andre løsninger på mobil, som f.eks sheets eller haptic feedback?
## Mønstre og retningslinjer[](#mønstre-og-retningslinjer "Direct link to Mønstre og retningslinjer")
God dokumentasjon og tydelige retningslinjer hjelper oss å trekke i samme retning og redusere usikkerhet i hverdagen. Derfor setter vi stor pris på bidrag også her, enten det er noe som er uklart, mangler, eller kan forklares bedre.
## Slik bidrar du[](#slik-bidrar-du "Direct link to Slik bidrar du")
Du trenger ikke å komme med et ferdig forslag. En tidlig idé eller et spørsmål er mer enn nok til å starte en god dialog.
* **Ta kontakt med oss**: Send oss en melding på Slack eller kom bort og prat med oss når et behov, en idé eller et problem dukker opp.
* **Beskriv situasjonen**: Fortell oss hva du prøver å løse for brukerne dine, eller hva som ikke fungerer som forventet.
* **Vi ser på det sammen**: Sammen vurderer vi hvordan behovet best kan løses og hvordan det passer inn i helheten av Indeks.
* **Vi blir enige om veien videre**: Vi avklarer om det betyr en justering, ny funksjonalitet, bedre dokumentasjon og hvem som gjør hva.
* **Vi følger det til mål**: Når vi er enige om retningen, sørger vi for at arbeidet blir tatt videre på en god måte.
Vi vil at Indeks skal være så nyttig og relevant som mulig, og det får vi bare til sammen med dere!
---
# Designer
## Før du begynner[](#før-du-begynner "Direct link to Før du begynner")
1. Les [merkevaren og vår visuelle identitet](https://merkevare.sparebank1.no/portal) for å forstå SpareBank 1s designprinsipper
2. [Sett opp Figma](/docs/kom-i-gang/designer.md) og få tilgang til designsystembiblioteket
3. Bli med i Slack-kanalene `#ext-design` og `#ext-designsystem`
## Viktig dokumentasjon[](#viktig-dokumentasjon "Direct link to Viktig dokumentasjon")
Før du begynner å designe, anbefaler vi at du setter deg inn i følgende:
* **[Tokens](/docs/grunnleggende/tokens/introduksjon.md)** - farger, spacing, typografi og andre designtokens
* **[Mønstre og maler](/docs/monstre-og-maler/layout.md)** - vanlige designmønstre og layoutmaler
## Verktøy[](#verktøy "Direct link to Verktøy")
### Figma[](#figma "Direct link to Figma")
I SpareBank 1 bruker vi Figma til å designe for digitale flater. Designsystemet og illustrasjonsbiblioteket er tilgjengelig som standard i alle Figma-filer.
### Slack[](#slack "Direct link to Slack")
Vi bruker Slack til kommunikasjon på tvers av team. Viktige kanaler for designere:
* **`#ext-design`** - felleskanal for alle designere
* **`#ext-designsystem`** - tilbakemeldinger og hjelp fra designsystemteamet
* **`#sb1u-restefest`** - bli med i kampen mot matsvinn
### Ønskeliste[](#ønskeliste "Direct link to Ønskeliste")
Vi har laget en ønskeliste i Figma hvor du kan komme med forslag og ønsker om forbedringer på komponenter.
## Samarbeid og møter[](#samarbeid-og-møter "Direct link to Samarbeid og møter")
### Felles designmøter[](#felles-designmøter "Direct link to Felles designmøter")
* **DesignLab** (hver 4. uke) - en lavterskel møteplass for å styrke dialogen, bryte ned siloer og sikre en rød tråd i våre flater. Ta med egne oppgaver og utfordringer knyttet til teamet ditt, og få hjelp eller diskuter dem etter egne behov.
* **Designsystem-forum** (hver 4. uke) - felles møteplass for designere og utviklere sammen med designsystemteamet. Vi tar opp både konkrete komponentspørsmål og større strategiske temaer. Meld gjerne inn saker på forhånd i `#ext-designsystem`.
### Fagtid[](#fagtid "Direct link to Fagtid")
På torsdager har alle fast ansatte i SpareBank 1 Utvikling fagtid. Før lunsj samles designerne til avdelingsmøte, hvor vi deler erfaringer fra teamene våre og tar opp andre fagrelaterte temaer. Resten av dagen kan brukes til kompetansebygging eller deltakelse i fagrupper, for eksempel faggruppen for universell utforming.
---
# Introduksjon
Visuell identitet
---
# Kontakt
Indeks blir best når vi snakker sammen. Vi setter stor pris på alle innspill, spørsmål og bidrag fra dere som bruker systemet.
## Slack[](#slack "Direct link to Slack")
Vi kan nås på: [#ext-designsystem](slack://channel?team=\&id=ext-designsystem)
Her kan du stille spørsmål, dele erfaringer, rapportere bugs, eller diskutere nye ideer og forbedringer. Vi svarer gjerne på spørsmål om bruk av komponenter, konvensjoner og hjelper til med utfordringer du måtte ha.
## Epost[](#epost "Direct link to Epost")
**E-post**:
## Designsystemforum[](#designsystemforum "Direct link to Designsystemforum")
Designsystemforum er et tverrfagelig møtested hver fjerde uke, hvor vi diskuterer fremtidige planer, tar opp utfordringer og deler erfaringer på tvers av team og fagfelt. Gi bedskjed om du ikke har fått invitasjon, så fikser vi det!
## Teamet[](#teamet "Direct link to Teamet")
Team Designsystem består av
* **Martin Gaard**: Design Lead
* **Dag Frode Solberg**: Tech lead, utvikler
* **Anders Johnsen**: Utvikler
* **Tuva Ødegård**: Utvikler
* **Karina Hammermark Holme**: Produktleder
Det er bare å ta kontakt hvis det er noe, eller slå av en prat hvis du ser oss i gangene.
---
# Migrering fra FFE til Indeks
Indeks er et helt nytt designsystem, bygget opp fra grunnen med en annen arkitektur og struktur enn FFE. For deg som skal migrere fra FFE betyr dette at enkelte ting må gjøres litt annerledes enn før.
## Atomic design[](#atomic-design "Direct link to Atomic design")
Atomic design er en metodikk for å bygge brukergrensesnitt ved å dele dem opp i små, gjenbrukbare deler. Metoden ble introdusert av Brad Frost og tar inspirasjon fra hvordan ting bygges opp i naturen. I atomic design organiseres komponenter i ulike nivåer:
* **Atoms** er de minste byggesteinene i et grensesnitt, som for eksempel knapper, input-felt, labels eller ikoner.
* **Molecules** er kombinasjoner av flere atoms, for eksempel et søkefelt som består av et input-felt og en knapp.
* **Organisms** er større og mer sammensatte komponenter, som for eksempel et navigasjonsfelt eller et kort med flere elementer.
Tanken er at små, enkle deler kan kombineres til mer komplekse komponenter og til slutt komplette brukergrensesnitt.
I Indeks bygger vi komponenter etter prinsippene i atomic design. Atomic design er en metode for å strukturere komponenter der små, enkle byggeklosser settes sammen til større og mer komplekse løsninger
I praksis betyr dette at Indeks primært tilbyr grunnleggende basekomponenter. Disse kan settes sammen til mer avanserte komponenter etter behov. Designsystemet tar ansvar for å utvikle og vedlikeholde disse basekomponentene, mens produktteamene selv har ansvar for å bygge og forvalte større og mer komplekse komponenter.
En viktig grunn til denne tilnærmingen er å gi teamene større fleksibilitet og kreativ frihet. Samtidig bidrar det til å hindre at designsystemet blir en flaskehals i produktutviklingen. Dersom designsystemteamet også skulle vedlikeholde alle komplekse komponenter som ulike team trenger, ville det raskt kunne skape avhengigheter og redusere tempoet i utviklingen for produktteamene.
Ved å holde designsystemet fokusert på stabile og gjenbrukbare byggeklosser, kan produktteamene jobbe mer selvstendig og utvikle løsninger raskere.
## Webstandarder fremfor rammeverk[](#webstandarder-fremfor-rammeverk "Direct link to Webstandarder fremfor rammeverk")
Indeks er bygget på webstandarder i stedet for å baseres på et spesifikt rammeverk som React eller Vue. Dette betyr at du kan bruke Indeks-komponenter i hvilken som helst frontend-teknologi du foretrekker, uten å måtte bekymre deg for kompatibilitet eller avhengigheter.
Komponentene er i utgangspunktet skrevet som ren HTML og CSS, og utvidet i form av web components der det er nødvendig. Likevel tilbyr Indeks også React-komponenter for de som ønsker å bruke det, men det er ikke et krav for å kunne bruke designsystemet. React-komponentene er i praksis tynne wrapper-komponenter som gjør det enklere å bruke Indeks i React-prosjekter.
## Utility-klasser[](#utility-klasser "Direct link to Utility-klasser")
Indeks tilbyr et omfattende sett med utility-klasser i Tailwind-stil for å hjelpe deg med å bygge og tilpasse komponenter raskt og effektivt. Disse klassene dekker alt fra layout og spacing til farger og typografi, og kan brukes direkte i HTML for å justere utseendet og oppførselen til elementene dine uten behov for egendefinert CSS. For en fullstendig oversikt over tilgjengelige utility-klasser, se [Utility-dokumentasjonen](/docs/utility-klasser/oversikt.md).
## CDN og NPM-pakker[](#cdn-og-npm-pakker "Direct link to CDN og NPM-pakker")
Indeks tilbyr både CDN og NPM-pakker for å gjøre det enkelt å integrere designsystemet i dine prosjekter. CDN-alternativet lar deg raskt inkludere styling, fonter og ikoner i prosjektet ditt med en enkel ``-tag, mens NPM-pakkene gir deg mer kontroll og fleksibilitet ved å la deg installere og administrere Indeks som en avhengighet i prosjektet ditt på samme måte som i FFE.
Styling, utilities, komponenter og tokens er samlet i hver sin NPM-pakke, i motsetning til i FFE der alle komponenter ble distribuert i egne pakker. I Indeks trenger du for eksempel kun å installere én pakke for å bruke alle React-komponentene. Dette forenkler installasjon og bruk av designsystemet, og gjør det mindre sårbart for endringer som påvirker avhengigheter frem og tilbake mellom pakkene og eksternt.
Disse pakkene er tilgjengelige i Indeks:
* [Indeks-CSS](https://www.npmjs.com/package/@sb1/indeks-css)
* [Indeks-Utils](https://www.npmjs.com/package/@sb1/indeks-utils)
* [Indeks-React](https://www.npmjs.com/package/@sb1/indeks-react)
* [Indeks-Tokens](https://www.npmjs.com/package/@sb1/indeks-tokens)
## Farger[](#farger "Direct link to Farger")
Indeks har en mer begrenset og konsistent fargepalett enn FFE. Dette er gjort for å sikre en mer helhetlig og gjenkjennelig visuell identitet på tvers av alle produkter som bruker Indeks. Ved å bruke et standardisert sett med farger, kan vi skape en sterkere merkevare og forbedre brukeropplevelsen ved å gi en mer sammenhengende og profesjonell visuell stil. For mer informasjon om tilgjengelige farger i Indeks, se [Farge-dokumentasjonen](/docs/retningslinjer/farger/.md).
---
# Utvikler
Kom i gang med Indeks i prosjektet ditt. Velg teknologi under, så tilpasser guiden seg.
## Velg teknologi[](#velg-teknologi "Direct link to Velg teknologi")
Bruk Indeks med ReactNår av vises HTML og web component-eksempler (\).\[x]Vis kodeeksemplerNår av kollapses koden under live-eksemplet. Du kan alltid åpne 'Kode'.\[ ]Mobilbank-modusSlå på hvis du utvikler for mobilbanken eller andre MBC-apper.\[ ]
## Installasjon[](#installasjon "Direct link to Installasjon")
### 1. Fonter[](#1-fonter "Direct link to 1. Fonter")
Legg til SB1-fontene i `` i HTML-dokumentet ditt. Monorepo-generatoren gjør dette automatisk.
```
```
### 2. Styling[](#2-styling "Direct link to 2. Styling")
Importer CSS-en fra CDN inn i hoved-CSS-filen din, og legg `ix-body`-klassen på ``. CDN-URL-en er den samme på tvers av SB1-applikasjoner, så nettleseren kan gjenbruke samme cachede CSS.
```
@import url('https://cdn.sparebank1.no/indeks/css/0.4.0/index.css');
```
```
```
Du får komponentstyling, [utility-klasser](/docs/utility-klasser/oversikt.md) og [designtokens](/docs/grunnleggende/tokens/introduksjon.md) i samme pakke.
### 3. Web components[](#3-web-components "Direct link to 3. Web components")
Last inn web components-scriptet fra CDN i `index.html`.
```
```
Komponentene er nå tilgjengelige som HTML-elementer:
```
```
### 3. Web components[](#3-web-components-1 "Direct link to 3. Web components")
Last inn web components-scriptet fra CDN i `index.html`. `@sb1/indeks-react` er et tynt lag oppå web components og rendrer ``-elementer internt, så scriptet må være lastet for at React-komponentene skal virke.
```
```
### 3a. TypeScript-typer (valgfritt)[](#3a-typescript-typer-valgfritt "Direct link to 3a. TypeScript-typer (valgfritt)")
Bruker du TypeScript? Installer `@sb1/indeks-web` som `devDependency` for å få TS-kjennskap til `` og andre `ix-*`-elementer. Runtime lastes fortsatt fra CDN (steg 3), så pakken havner ikke i produksjonsbundlen.
```
npm install --save-dev @sb1/indeks-web
```
Aktiver typene ved å legge pakken i `tsconfig.json`:
```
{
"compilerOptions": {
"types": ["@sb1/indeks-web"]
}
}
```
Pakken bruker `declare global` for å utvide `HTMLElementTagNameMap` og `JSX.IntrinsicElements`. TypeScript plukker bare opp dette hvis pakken er listet i `types` eller importert.
### 3b. Autocomplete i editor (valgfritt)[](#3b-autocomplete-i-editor-valgfritt "Direct link to 3b. Autocomplete i editor (valgfritt)")
Få forslag på klassenavn og CSS-variabler når du skriver. VSCode-utvidelser gir dette — men krever to utvidelser (ingen enkelt-utvidelse dekker begge):
* [HTML CSS Support](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css) — autocomplete på `className="ix-..."` i HTML, JSX og TSX.
* [CSS Variable Autocomplete](https://marketplace.visualstudio.com/items?itemName=vunguyentuan.vscode-css-variables) — autocomplete på `var(--ix-*)`.
Legg til workspace-konfig som peker til CSS-filen i `@sb1/indeks-css`. Siden tokens og utils er inlinet i `index.css`, er det bare én fil å peke til:
```
// .vscode/settings.json
{
"css.styleSheets": [
"node_modules/@sb1/indeks-css/dist/npm/index.css"
],
"cssVariables.lookupFiles": [
"node_modules/@sb1/indeks-css/dist/npm/index.css"
]
}
```
Anbefal utvidelsene for alle team-medlemmer:
```
// .vscode/extensions.json
{
"recommendations": [
"ecmel.vscode-html-css",
"vunguyentuan.vscode-css-variables"
]
}
```
Reload VSCode-vinduet etter `npm install` for at utvidelsene skal plukke opp filen. Autocomplete virker på rene string-literaler — `clsx(...)` og template-strings mister delvis støtte. Andre editorer (Cursor, WebStorm, Zed) har tilsvarende utvidelser fra sine markedsplasser.
### 4. React-komponenter[](#4-react-komponenter "Direct link to 4. React-komponenter")
Installer React-pakken:
```
npm install @sb1/indeks-react
```
Importer komponentene der du skal bruke dem:
```
import { Button, Text } from '@sb1/indeks-react';
```
```
function App() {
return (
Innhold
);
}
```
### 5. Hold CDN-URL-er i takt[](#5-hold-cdn-url-er-i-takt "Direct link to 5. Hold CDN-URL-er i takt")
`@sb1/indeks-css` og `@sb1/indeks-web` versjonslåses til samme versjon som `@sb1/indeks-react`. Når Dependabot bumper React-pakken i `package.json`, må CDN-URL-ene i `index.html` og CSS-filene dine oppdateres til samme versjon — ellers får du drift mellom det React-komponentene forventer og det som faktisk er lastet i nettleseren.
Scriptet `indeks-react sync-cdn` oppdaterer URL-ene til å matche versjonen du har installert. Legg til to scripts i `package.json`:
```
{
"scripts": {
"prebuild": "indeks-react sync-cdn --check",
"sync-indeks": "indeks-react sync-cdn"
}
}
```
* `prebuild` kjører før hver `npm run build` og **feiler** hvis URL-ene ikke matcher installert versjon. Dette er med vilje: hvis builden auto-fikser driften, vil det som deployes kunne bruke andre klasser enn det du har testet lokalt. La utvikleren se feilen og kjøre sync eksplisitt.
* `sync-indeks` kjører du selv etter en dependency-bump — eller når `prebuild` feiler. Den oppdaterer filene, du commit-er endringene og kjører builden på nytt.
Typisk flyt etter en Dependabot-bump:
```
npm install # ny indeks-react-versjon låst i package-lock
npm run build # prebuild feiler: drift funnet
npm run sync-indeks # URL-ene oppdateres
git add -A && git commit -m "sync CDN til "
npm run build # passer nå
```
Vi anbefaler `npm install --ignore-scripts` av sikkerhetsgrunner, og det hopper over alle lifecycle-hooks — derfor kan vi ikke sette dette opp som `postinstall`. CDN-sync må hektes på en kommando du eksplisitt kjører.
## Installere via npm i stedet for CDN[](#installere-via-npm-i-stedet-for-cdn "Direct link to Installere via npm i stedet for CDN")
`@sb1/indeks-css` og `@sb1/indeks-web` finnes også på npm, men vi anbefaler CDN. Med CDN deler alle SB1-applikasjoner samme URL, så nettleseren kan gjenbruke cachen på tvers av apper — brukerne slipper å laste ned CSS og web components på nytt når de bytter mellom SB1-tjenester.
Hvis du likevel vil bundle det selv (f.eks. intern app uten CDN-tilgang):
```
npm install @sb1/indeks-css @sb1/indeks-web
```
## Hva nå?[](#hva-nå "Direct link to Hva nå?")
* Lær om [designtokens](/docs/grunnleggende/tokens/introduksjon.md) for å lage egne komponenter
* Bruk [utility-klasser](/docs/utility-klasser/oversikt.md) for rask styling
* Se [mønstre og maler](/docs/monstre-og-maler/layout.md) for vanlige bruksområder
* Migrering: [spacing fra FFE](/docs/grunnleggende/tokens/spacing.md#migrere-fra-ffe), [spacing fra Tailwind](/docs/grunnleggende/tokens/spacing.md#migrere-fra-tailwind), [farger fra FFE](/docs/retningslinjer/farger/.md#migrere-fra-ffe)
## Teknisk struktur[](#teknisk-struktur "Direct link to Teknisk struktur")
De fleste trenger ikke å forholde seg til dette, men du kan lese videre hvis du er spesielt interessert.
Indeks er bygget opp av 5 pakker:
* indeks-tokens
* indeks-utils
* indeks-css
* indeks-web
* indeks-react
Vi har også en mappe med dokumentasjonen og en eksempel-app vi bruker til å teste.
---
# Stack
Stack er en layout-primitiv for å stable innhold i én dimensjon — vertikalt eller horisontalt. Den fungerer både som custom element (``) og som CSS-klasse (`.ix-stack`).
## Egnet til[](#egnet-til "Direct link to Egnet til")
* Stable seksjoner, kort eller elementer loddrett med jevnt mellomrom
* Plassere ikoner, etiketter og knapper side om side horisontalt
* Bygge opp sammensatte layout-strukturer ved å neste stacks
## Uegnet til[](#uegnet-til "Direct link to Uegnet til")
* Todimensjonal layout — bruk CSS Grid og [grid-utilities](/docs/utility-klasser/oversikt.md#grid)
* Komplekst innholdsoppsett som artikler og dashboard-views
## Kom i gang[](#kom-i-gang "Direct link to Kom i gang")
`ix-stack` har `md` gap som standard. Bruk `gap`-attributtet (eller prop) for å overstyre.
Result
Loading...
Kode
Live Editor
Reset
```
Element 1
Element 2
Element 3
```
Result
Loading...
Kode
Live Editor
Reset
```
Element 1
Element 2
Element 3
```
Stack finnes i to bruksformer i HTML:
| Form | Eksempel | Styring |
| ------------------ | --------------------------------------------- | ---------------------------------------------- |
| **Custom element** | `` | Attributter direkte på elementet |
| **CSS-klasse** | `
` | Modifier-klasser — attributter virker ikke her |
`` bruker attributter:
Result
Loading...
Kode
Live Editor
Reset
```
Element 1
Element 2
Element 3
```
Result
Loading...
Kode
Live Editor
Reset
```
Element 1
Element 2
Element 3
```
På vanlige elementer bruker du CSS-klasser — se [CSS-klasser](#css-klasser) i API-seksjonen.
## Eksempler[](#eksempler "Direct link to Eksempler")
### Vertikal — align[](#vertikal--align "Direct link to Vertikal — align")
Result
Loading...
Kode
Live Editor
Reset
```
start (standard)
Smal
Bred
Smal
center
Smal
Bred
Smal
end
Smal
Bred
Smal
```
Result
Loading...
Kode
Live Editor
Reset
```
Smal
Bred
Smal
```
Result
Loading...
Kode
Live Editor
Reset
```
Smal
Bred
Smal
```
Result
Loading...
Kode
Live Editor
Reset
```
Smal
Bred
Smal
```
### Horisontal — align[](#horisontal--align "Direct link to Horisontal — align")
Result
Loading...
Kode
Live Editor
Reset
```
center (standard)
Lav
Høy
Lav
start
Lav
Høy
Lav
end
Lav
Høy
Lav
```
Result
Loading...
Kode
Live Editor
Reset
```
Lav
Høy
Lav
```
Result
Loading...
Kode
Live Editor
Reset
```
Lav
Høy
Lav
```
Result
Loading...
Kode
Live Editor
Reset
```
Lav
Høy
Lav
```
### Gap[](#gap "Direct link to Gap")
Standard gap er `md`. Bruk `gap`-prop/-attributt for å overstyre.
Result
Loading...
Kode
Live Editor
Reset
```
A
B
C
A
B
C
A
B
C
A
B
C
```
Result
Loading...
Kode
Live Editor
Reset
```
A
B
C
```
Result
Loading...
Kode
Live Editor
Reset
```
A
B
C
```
Result
Loading...
Kode
Live Editor
Reset
```
A
B
C
```
Tilgjengelige størrelser for `gap`-attributt: `none`, `2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`
## Universell utforming[](#universell-utforming "Direct link to Universell utforming")
### Hva du selv må sørge for[](#hva-du-selv-må-sørge-for "Direct link to Hva du selv må sørge for")
* **Bruk semantiske elementer når konteksten krever det** — `ix-stack` er et ukjent HTML-element uten semantisk rolle. Nettleseren behandler det som generisk blokkinnhold, på samme måte som `
`. Bruk `as`-prop i React (f.eks. ``) eller CSS-klasser direkte på et native element når innholdet krever semantikk.
På native elementer (ikke ``) virker **ikke** attributter — bruk modifier-klasser:
```
Seksjonstittel
Innhold her.
...
```
### WCAG-kriterier[](#wcag-kriterier "Direct link to WCAG-kriterier")
Sist gjennomgått: 2026-05-11 — alle 56 WCAG 2.2-kriterier vurdert
WCAG-kriterier3 ditt ansvar · 0 håndtert · 53 ikke relevant · 0 ikke på plass
Ditt ansvar (3)
| Kriterium | Nivå | Hva du må gjøre |
| ------------------------------------------- | ---- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **1.3.1** Informasjon og relasjoner | A | **Bruk semantiske elementer når konteksten krever det.** ix-stack er et ukjent HTML-element uten semantisk rolle — tilsvarende \
. Nettleseren injiserer ingen ARIA. Bruk et semantisk native element med ix-stack-\*-klasser (eller as-prop i React) når innholdet krever det — f.eks. \