# 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): Quick Start
### komponenter
- [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. Klassenavn følger mønsteret ix-heading ix-heading--{størrelse} (ikke ix-heading-1 e.l.) — se klasseoversikten 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 klassen `ix-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 klassen `ix-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.
[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.
## Registere feil eller mangler[](#registere-feil-eller-mangler "Direct link to Registere feil eller mangler")
Registrer feil som "issues" i [GitHub-repoet](https://github.com/SpareBank1/indeks/issues/new) vårt.
## 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
## Quick Start[](#quick-start "Direct link to Quick Start")
Kom raskt i gang med Indeks:
1. **Importer styling** i CSS-filen din:
```
@import url('https://cdn.sparebank1.no/indeks/css/0.3.1/index.css')
```
2. **Legg til `ix-body`-klassen** på øverste nivå i applikasjonen din:
```
```
3. **Last inn web components** fra CDN i `index.html`:
```
```
4. Så er du klar til å bruke grunnleggende styling og designtokens! Det du kan gjøre nå er:
* Se migreringsguiden for spacing [fra FFE](/docs/grunnleggende/tokens/spacing.md#migrere-fra-ffe) eller [fra Tailwind](/docs/grunnleggende/tokens/spacing.md#migrere-fra-tailwind) for å gå over til Indeks sine [spacing-tokens](/docs/grunnleggende/tokens/spacing.md).
* Se [migreringsguiden for farger](/docs/retningslinjer/farger/.md#migrere-fra-ffe) for å gå over til Indeks sine [farge-tokens](/docs/retningslinjer/farger/.md).
* Ta i bruk [utility-klasser](/docs/utility-klasser/oversikt.md) for rask styling av margin, padding, layout og mer.
5. **Installer React-komponenter** *(kun for React/Next.js)*:
note
Bruker du Astro, Svelte, Vue eller vanilla HTML er web components fra steg 3 alt du trenger — hopp over dette steget.
React-komponentene krever at web components (steg 3) er lastet inn. `@sb1/indeks-react` er et tynt lag oppå `@sb1/indeks-web`.
```
npm install @sb1/indeks-react
npm install --save-dev @sb1/indeks-web # kun TypeScript-typer, runtime lastes fra CDN (steg 3)
```
Fonter
Hvis du ikke bruker monorepo-generatoren, må du også legge til fonter. Se [detaljert installasjon](#1-fonter) nedenfor.
CSS Reset
Indeks bruker en avart av reset.css for å sikre et konsistent utgangspunkt for styling på tvers av nettlesere, i motsetning til FFE, som bruker normalize.css. Det betyr at det kan være noen forskjeller i grunnleggende styling mellom FFE og Indeks, blant annet har ikke listeelementer bullet points som standard.
## Detaljert installasjon[](#detaljert-installasjon "Direct link to Detaljert installasjon")
For å komme i gang med Indeks er det 4 deler du trenger å sette opp i prosjektet ditt:
1. Fonter
2. Styling (tokens, utils og komponentstyling)
3. Web components (atferd som brukes på tvers, også i React)
4. Komponenter (React-pakken)
### 1. Fonter[](#1-fonter "Direct link to 1. Fonter")
For å sette opp prosjektet ditt med SB1-fonter må du sørge for at fontene lastes inn. Dette legges til automatisk ved bruk av generatoren i monorepo. Hvis appen ikke er generert opp, legg til følgende i `` i HTML-dokumentet ditt:
```
```
info
Uten fontene vil tekst vises i nettleserens standardfont i stedet for SB1s designprofil.
### 2. CSS[](#2-css "Direct link to 2. CSS")
Installer styling ved å importere CSS-filen fra vår CDN inn i hoved-CSS-filen din:
```
@import url('https://cdn.sparebank1.no/indeks/css/0.3.1/index.css')
```
info
Siste versjon er 0.3.1. Se [releases](https://github.com/SpareBank1/indeks/releases) for alle versjoner.
> Indeks tilbyr også styling via npm-pakken `@sb1/indeks-css`, men vi anbefaler CDN. CDN-URL-en er den samme på tvers av SB1-applikasjoner, slik at nettleseren kan gjenbruke samme cachede CSS — brukere som allerede har besøkt en annen SB1-app slipper å laste ned stylingen på nytt.
**Hva får du med CSS-pakken?**
* **Komponentstyling** - styling for hele komponenter. Brukes automatisk av React-komponentene, eller kan brukes direkte på HTML-elementer.
* **[Utility-klasser](/docs/utility-klasser/oversikt.md)** - nyttige hjelpeklasser for små justeringer som margin, padding og layout. Inspirert av TailwindCSS.
* **[Tokens](/docs/grunnleggende/tokens/introduksjon.md)** - designtokens for farger, spacing og border mm. Se alle tokens. Brukes når du skal lage egne komponenter.
### 3. Web components[](#3-web-components "Direct link to 3. Web components")
Web components fra Indeks er nødvendige i alle prosjekter — også React-prosjekter. `@sb1/indeks-react` er et tynt lag oppå web components (f.eks. rendrer `Field` et ``), så uten at web components er lastet inn vil React-komponentene ikke virke som forventet.
Last inn scriptet fra CDN i `index.html`:
```
```
Etter at scriptet er lastet er komponentene tilgjengelige som HTML-elementer:
```
```
Hvorfor CDN + devDependency?
Runtime-koden lastes fra CDN (deles på tvers av SB1-applikasjoner), mens npm-pakken kun brukes til TypeScript-typer ved utvikling. Det er derfor pakken installeres som `devDependency` i stedet for en vanlig `dependency` — ingenting av den havner i den bygde applikasjonen.
#### TypeScript-typer[](#typescript-typer "Direct link to TypeScript-typer")
CDN-scriptet inneholder ingen typedeklarasjoner. Installer npm-pakken som `devDependency` for å få typer:
```
npm install --save-dev @sb1/indeks-web
```
Pakken registrerer typene globalt via `HTMLElementTagNameMap` og JSX — ingen import nødvendig i koden. TypeScript og JSX-editorer vil da gi autocomplete og typesjekk for `` og de andre komponentene. Dette gjelder både for rene web component-prosjekter og for React-prosjekter (React-komponentene rendrer ``-elementer internt).
### 4. Komponenter (React)[](#4-komponenter-react "Direct link to 4. Komponenter (React)")
React-pakken krever at både CSS-en og web components-scriptet fra steg 2 og 3 er lastet inn — `@sb1/indeks-react` er et tynt lag som wrapper `@sb1/indeks-web`.
Installer pakken:
```
npm install @sb1/indeks-react
npm install --save-dev @sb1/indeks-web
```
Importer komponentene der du skal bruke dem:
```
import { Button, Text } from '@sb1/indeks-react';
```
Nå kan du begynne å bruke Indeks-komponenter i React-prosjektene dine:
```
function App() {
return (
Innhold
);
}
```
## Hva nå?[](#hva-nå "Direct link to Hva nå?")
Nå som du har satt opp Indeks kan du:
* Lær om [designtokens](/docs/grunnleggende/tokens/introduksjon.md) for å lage egne komponenter
* Bruk [util-klasser](/docs/utility-klasser/oversikt.md) for rask styling
* Se [mønstre og maler](/docs/monstre-og-maler/layout.md) for vanlige bruksområder
## 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.
---
# TextArea
TextArea lar brukeren skrive inn lengre fritekst over flere linjer, som beskrivelser, meldinger eller begrunnelser.
## Egnet til[](#egnet-til "Direct link to Egnet til")
* Lengre fritekst (flere linjer)
* Meldinger, kommentarer eller beskrivelser
* Situasjoner der brukeren trenger plass til å formulere seg
* Input uten strengt format eller fast lengde
## Uegnet til[](#uegnet-til "Direct link to Uegnet til")
* Kort og strukturert input (bruk `TextField`)
* Valg fra forhåndsdefinerte alternativer (bruk select, radio eller checkbox)
* Input med tydelig format (f.eks. dato, telefonnummer)
* Situasjoner der én linje er tilstrekkelig
## Kom i gang[](#kom-i-gang "Direct link to Kom i gang")
* React
* HTML
Live Editor
Reset
```
```
Result
Loading...
Komponenten kobler `for`/`id` og `aria-describedby` automatisk.
Live Editor
Reset
```
Fortell oss hva du synes
```
Result
Loading...
`` setter opp alle ARIA-koblinger automatisk. Error-elementet skal alltid ligge i DOM. Tomt betyr ingen feil.
## Eksempler[](#eksempler "Direct link to Eksempler")
### Med feilmelding[](#med-feilmelding "Direct link to Med feilmelding")
* React
* HTML
Live Editor
Reset
```
```
Result
Loading...
Live Editor
Reset
```
Tilbakemelding er påkrevd
```
Result
Loading...
### Deaktivert og skrivebeskyttet[](#deaktivert-og-skrivebeskyttet "Direct link to Deaktivert og skrivebeskyttet")
* React
* HTML
Live Editor
Reset
```
<>
```
Result
Loading...
Live Editor
Reset
```
<>
```
Result
Loading...
`disabled` og `readOnly` settes direkte på textarea. `ix-field` tar seg av den visuelle tilstanden automatisk. Resize-håndtaket skjules automatisk for `disabled` og `readOnly`.
### Valgfrie felt[](#valgfrie-felt "Direct link to Valgfrie felt")
Merk unntaket — ikke regelen. Legg til `(valgfritt)` i labelteksten når feltet ikke er obligatorisk.
* React
* HTML
Live Editor
Reset
```
```
Result
Loading...
Live Editor
Reset
```
```
Result
Loading...
### Antall rader[](#antall-rader "Direct link to Antall rader")
Bruk `rows`-attributtet for å styre standardhøyden på feltet. Standard nettleseratferd er 2 rader.
* React
* HTML
Live Editor
Reset
```
```
Result
Loading...
Live Editor
Reset
```
```
Result
Loading...
### Tegnteller[](#tegnteller "Direct link to Tegnteller")
Sett `maxlength` eller `minlength` på textarea — `ix-field` oppretter og oppdaterer en tegnteller automatisk. Med `maxlength` vises `0/200`, med `minlength` vises `0 tegn (minimum 20)`.
* React
* HTML
Live Editor
Reset
```
```
Result
Loading...
Live Editor
Reset
```
<>
```
Result
Loading...
Tellerens ID inkluderes automatisk i `aria-describedby` slik at skjermlesere får det med.
## Retningslinjer[](#retningslinjer "Direct link to Retningslinjer")
### Tydelige labels gir forutsigbarhet[](#tydelige-labels-gir-forutsigbarhet "Direct link to Tydelige labels gir forutsigbarhet")
Alle TextArea skal ha en synlig og beskrivende label. Labelen skal beskrive hvilken informasjon brukeren skal skrive inn, ikke hva de skal gjøre.
Skriv "Beskrivelse av hendelsen" i stedet for "Skriv en beskrivelse". Dette gjør det enklere å forstå hva som forventes og gir bedre støtte når brukeren skal formulere seg.
### Gi tydelige forventninger til innhold[](#gi-tydelige-forventninger-til-innhold "Direct link to Gi tydelige forventninger til innhold")
Når brukeren skal skrive lengre tekst, er det ekstra viktig å gi føringer for hva som forventes. Dette kan gjøres gjennom label eller hjelpetekst.
Uten tydelig retning kan brukeren bli usikker på hva de skal skrive, hvor mye som forventes, og hva som er relevant informasjon.
### Unngå placeholder som informasjonsbærer[](#unngå-placeholder-som-informasjonsbærer "Direct link to Unngå placeholder som informasjonsbærer")
Placeholder anbefales ikke brukt som bærer av viktig informasjon. Når brukeren begynner å skrive, forsvinner teksten.
Bruk heller label og hjelpetekst for å gi varig veiledning.
### Hjelpetekst gir støtte underveis[](#hjelpetekst-gir-støtte-underveis "Direct link to Hjelpetekst gir støtte underveis")
Hjelpetekst kan brukes for å gi eksempler eller forklare hva som bør inkluderes. Dette er spesielt nyttig i TextArea, der oppgaven ofte er mer åpen.
Kort og konkret veiledning kan redusere usikkerhet og forbedre kvaliteten på input. "Maks 500 tegn" er bedre enn ingen veiledning.
### Tilpass høyde til forventet innhold[](#tilpass-høyde-til-forventet-innhold "Direct link to Tilpass høyde til forventet innhold")
Høyden på TextArea bør reflektere hvor mye tekst som forventes. Bruk `rows` for å sette en passende standardhøyde.
Et for lite felt kan oppleves begrensende, mens et for stort felt kan virke overveldende. Riktig høyde gir en visuell indikasjon på omfanget av oppgaven og gjør det lettere å komme i gang.
### Resize[](#resize "Direct link to Resize")
Brukere kan endre høyden på feltet vertikalt. Horisontal resize er deaktivert for å unngå brudd i layout. `disabled` og `readOnly` skjuler resize-håndtaket.
### Håndter lange tekster på en god måte[](#håndter-lange-tekster-på-en-god-måte "Direct link to Håndter lange tekster på en god måte")
Når innholdet blir langt, må det være enkelt å lese og redigere teksten.
Dette kan løses med scrolling eller automatisk utvidelse av feltet. Dersom auto-resize brukes, må det skje på en måte som ikke bryter layout eller flytter innhold uforutsigbart.
### Validering bør ikke forstyrre skrivingen[](#validering-bør-ikke-forstyrre-skrivingen "Direct link to Validering bør ikke forstyrre skrivingen")
Siden brukeren ofte skriver sammenhengende tekst, bør validering ikke skje mens de skriver.
Valider heller ved blur eller innsending, slik at brukeren får skrive ferdig før de får tilbakemelding.
### Vurder behov for tegnbegrensning[](#vurder-behov-for-tegnbegrensning "Direct link to Vurder behov for tegnbegrensning")
Dersom det er en maksgrense for tekst, bør dette kommuniseres tydelig. Sett `maxlength` på textarea — da får brukeren automatisk en tegnteller som viser gjenværende tegn. En stille grense som kutter teksten uten tilbakemelding er forvirrende.
`minlength` kan brukes når et minimum antall tegn forventes — telleren viser da hvor mange tegn som er skrevet inn så langt.
## Universell utforming[](#universell-utforming "Direct link to Universell utforming")
Sist gjennomgått: 2026-04-13 — 54 av 56 WCAG 2.2-kriterier vurdert
#### Ditt ansvar
Disse tingene må teamet selv sørge for.
Skriv beskrivende labeltekst — WCAG 2.4.6, 3.3.2
Labelen skal forklare hva som skal fylles inn. "Tilbakemelding" er bedre enn "Skriv noe". Alle felter må ha en label, selv om den er visuelt skjult med .ix-sr-only.
Skriv gode feilmeldinger — WCAG 3.3.1, 3.3.3
Feilmeldingen må si hva som er galt og hva brukeren skal gjøre. "Meldingen kan ikke være tom" — ikke "Ugyldig verdi". Komponenten viser og annonserer meldingen, men du skriver innholdet.
Håndtert av komponenten (17 kriterier bestått)
| Kriterium | Nivå | Hva komponenten gjør |
| ----------------------------------------------------- | ---- | ---------------------------------------------------------------------------------------------------------------------- |
| **1.3.1** Informasjon og relasjoner | A | Label kobles til textarea via for/id. Hjelpetekst og feilmelding kobles via aria-describedby. |
| **1.3.2** Meningsfull rekkefølge | A | Label, textarea, hjelpetekst og feilmelding følger naturlig rekkefølge i DOM. |
| **1.3.3** Sensoriske egenskaper | A | Feiltilstand bruker tekst, farge og aria-invalid — ikke farge alene. |
| **1.4.1** Bruk av farge | A | Feiltilstand kommuniseres med farge, rammeendring og tekstlig feilmelding. |
| **1.4.4** Endre tekststørrelse | AA | Relative enheter — skalerer korrekt ved 200 % zoom. |
| **1.4.10** Omflyt | AA | Reflower korrekt ned til 320px viewport. |
| **1.4.11** Kontrast for ikke-tekstlig innhold | AA | Ramme og fokusindikator oppfyller 3:1 kontrastkrav. |
| **1.4.12** Tekstavstand | AA | Tåler økt line-height, bokstav- og ordavstand uten tap av innhold. |
| **1.4.13** Innhold ved hover eller fokus | AA | Hjelpetekst er persistent — forsvinner ikke ved fokusflytt. |
| **2.1.1** Tastatur | A | Fullt opererbart med Tab og standard textarea-oppførsel. |
| **2.1.2** Ingen tastaturfelle | A | Fokus kan navigeres ut med Tab og Shift+Tab. |
| **2.4.3** Fokusrekkefølge | A | Følger naturlig tab-rekkefølge i DOM. |
| **2.4.7** Synlig fokus | AA | Tydelig fokusindikator med god kontrast. |
| **2.5.8** Målstørrelse (minimum) | AA | Tekstområdet oppfyller minimum 24x24px klikkflate. |
| **3.2.1** Ved fokus | A | Fokus trigger ingen kontekstendring. |
| **3.2.2** Ved inndata | A | Input trigger ingen automatisk kontekstendring. |
| **4.1.2** Navn, rolle, verdi | A | Native textarea med implisitt rolle 'textbox' (multiline). Tilgjengelig navn fra label. Tilstander eksponeres korrekt. |
Ikke relevant for denne komponenten (33 kriterier)
| Kriterium | Hvorfor ikke relevant |
| ---------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **1.1.1** Ikke-tekstlig innhold | |
| **1.2.1** Bare lyd og bare video (forhåndsinnspilt) | Ingen medieelementer. |
| **1.2.2** Teksting (forhåndsinnspilt) | Ingen medieelementer. |
| **1.2.3** Synstolking eller mediealternativ (forhåndsinnspilt) | Ingen medieelementer. |
| **1.2.4** Teksting (direkte) | Ingen medieelementer. |
| **1.2.5** Synstolking (forhåndsinnspilt) | Ingen medieelementer. |
| **1.3.4** Visningsretning | Ingen fast orientering — tilpasser seg visningsretning. |
| **1.3.5** Identifiser formål med inndata | Typiske textarea-brukstilfeller (kommentarer, beskrivelser, tilbakemeldinger) samler ikke personlig informasjon og er derfor unntatt. Dersom feltet brukes til personlig informasjon (f.eks. postadresse), gjelder kravet og autocomplete bør settes. |
| **1.4.2** Styring av lyd | Ingen lydelementer. |
| **1.4.5** Bilder av tekst | Ingen bilder av tekst. |
| **2.1.4** Tastatursnarveier | Ingen egendefinerte tastatursnarveier. |
| **2.2.1** Justerbar hastighet | Ingen tidsbegrensede funksjoner. |
| **2.2.2** Pause, stopp, skjul | Ingen animasjon eller automatisk oppdatering. |
| **2.3.1** Terskelverdi på tre glimt | Ingen blinkende eller glimtende innhold. |
| **2.4.1** Hoppe over blokker | Sidekrav — gjelder ikke enkeltkomponenter. |
| **2.4.2** Sidetitler | Sidekrav — gjelder ikke enkeltkomponenter. |
| **2.4.4** Formål med lenke (i kontekst) | Ingen lenker i komponenten. |
| **2.4.5** Flere måter | Sidekrav — gjelder ikke enkeltkomponenter. |
| **2.4.11** Fokus ikke skjult (minimum) | Ingen sticky/overlappende elementer som kan skjule fokus. |
| **2.5.1** Pekerbevegelser | Ingen drag-and-drop eller sveipebevegelser. |
| **2.5.2** Avbryt peker | Native textarea — nettleseren håndterer pekerinteraksjon. |
| **2.5.4** Bevegelsesaktivering | Ingen bevegelsesbasert interaksjon. |
| **2.5.6** Samtidige inndatamekanismer | Ingen begrensning av input-type — native HTML textarea. |
| **2.5.7** Drabevegelser | Ingen drag-and-drop. |
| **3.1.1** Språk på siden | Sidekrav — gjelder ikke enkeltkomponenter. |
| **3.1.2** Språk på deler av innhold | Komponenten setter ikke lang-attributt — innhold er på sidespråket. |
| **3.2.3** Konsistent navigasjon | Sidekrav — gjelder ikke enkeltkomponenter. |
| **3.2.4** Konsistent identifikasjon | Systemkrav — gjelder konsistens på tvers av sider, ikke enkeltkomponenter. |
| **3.2.6** Konsistent hjelp | Sidekrav — gjelder plassering av hjelpefunksjon på tvers av sider. |
| **3.3.4** Forhindring av feil (juridisk, økonomisk, data) | Flytkrav — gjelder bekreftelse/reversering av transaksjoner, ikke enkeltfelter. |
| **3.3.7** Redundant oppføring | Flytkrav — gjelder at brukeren ikke skal gjenta informasjon i en prosess. |
| **3.3.8** Tilgjengelig autentisering (minimum) | Ikke en autentiseringskomponent. |
| **4.1.3** Statusmeldinger | Feilmeldinger håndteres via aria-live="polite" (dekket av 3.3.1). Ingen øvrige statusmeldinger. |
#### Tastaturnavigasjon
| Tast | Handling |
| ----------- | --------------------------------------------- |
| `Tab` | Flytter fokus til tekstområdet |
| `Shift+Tab` | Flytter fokus til forrige fokuserbare element |
| `Enter` | Setter inn linjeskift |
#### Skjermleser
* Ved fokus: "\[label], tekstområde"
* Med hjelpetekst: "\[label], tekstområde, \[hjelpetekst]"
* Ved feil: "\[label], ugyldig, tekstområde, \[feilmelding]"
* Med skjult label: "\[label], tekstområde" — labelen leses opp selv om den ikke er synlig
### Hva komponenten gjør automatisk[](#hva-komponenten-gjør-automatisk "Direct link to Hva komponenten gjør automatisk")
Når du bruker `` eller React-komponenten, settes dette opp for deg:
* **`for`/`id`**: Label kobles til textarea. Genererer en unik ID hvis textarea mangler en.
* **`aria-describedby`**: Textarea peker til description og error-elementet. Hjelpetekst leses før feilmelding.
* **`aria-live="polite"`**: Settes på error-elementet slik at skjermlesere annonserer nye feilmeldinger uten å avbryte brukeren.
* **`aria-invalid`**: Synkroniseres automatisk med innholdet i error-elementet via MutationObserver.
* **`required`**: Settes på textarea for nativ nettleservalidering. Ingen visuell indikator — merk valgfrie felt med `(valgfritt)` i labelteksten.
### Skjult label med ariaLabel[](#skjult-label-med-arialabel "Direct link to Skjult label med ariaLabel")
Synlig label er alltid anbefalt. I tilfeller der konteksten er helt åpenbar fra omgivelsene (f.eks. et kommentarfelt rett under en overskrift som allerede beskriver det), kan `ariaLabel` brukes i stedet.
Bruk synlig label
Skjult label gjør det vanskeligere for alle brukere å orientere seg i skjemaet. Bruk `ariaLabel` kun når synlig label er umulig av layoutmessige grunner, og teksten er meningsfull for skjermleserbrukere.
* React
* HTML
Live Editor
Reset
```
```
Result
Loading...
Live Editor
Reset
```
```
Result
Loading...
### Hva du selv må sørge for[](#hva-du-selv-må-sørge-for "Direct link to Hva du selv må sørge for")
Ditt ansvar
* **Meningsfull labeltekst** — komponenten kobler label til textarea, men du må skrive god tekst
* **Gode feilmeldinger** — komponenten viser dem og annonserer dem, men du skriver innholdet
## Props / API[](#props--api "Direct link to Props / API")
* React
* HTML
### TextAreaProps[](#textareaprops "Direct link to TextAreaProps")
| Prop | Type | Påkrevd | Standard | Beskrivelse |
| -------------- | -------------------------- | ------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `label` | `string` | Nei\* | | Synlig labeltekst for feltet. Anbefalt fremfor `ariaLabel` |
| `ariaLabel` | `string` | Nei\* | | Skjult label for skjermlesere. Brukes kun når synlig label ikke er mulig. \*Enten `label` eller `ariaLabel` må settes |
| `description` | `string` | Nei | | Hjelpetekst som vises under label. Kobles til textarea via `aria-describedby` |
| `errorMessage` | `string` | Nei | | Feilmelding som vises under textarea. Trigger `aria-invalid` når den har innhold |
| `placeholder` | `string` | Nei | | Placeholder-tekst. Bør ikke brukes som bærer av viktig informasjon |
| `disabled` | `boolean` | Nei | `false` | Deaktiverer feltet helt. Ingen fokus eller interaksjon |
| `readOnly` | `boolean` | Nei | `false` | Brukeren kan fokusere og kopiere, men ikke endre verdien |
| `required` | `boolean` | Nei | `false` | Setter `required` på textarea for nativ nettleservalidering |
| `ref` | `Ref` | Nei | | Ref videresendes til ` ← selve tekstområdet
← alltid i DOM, tomt = ingen feil
Tilbakemelding er påkrevd
```
| Del | Påkrevd | Beskrivelse |
| --------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------ |
| `` | Ja | Wrapper. Kobler ARIA mellom label, textarea, description og error automatisk |
| `
```
## Hva ix-field gjør med DOM-en[](#hva-ix-field-gjør-med-dom-en "Direct link to Hva ix-field gjør med DOM-en")
`` er en web component som setter opp ARIA-koblinger automatisk når den kobles til DOM. Her er hva som skjer — fra HTML du skriver til HTML etter at `ix-field` har kjørt.
**Før** (det du skriver):
```
Fortell oss hva du synes
```
**Etter** (det som er i DOM etter at `ix-field` har kjørt):
```
Fortell oss hva du synes
```
Hva som ble lagt til:
| Hva | Hvor | Hvorfor |
| ----------------------------- | ---------------- | -------------------------------------------------------------------------- |
| `for="ix-field-1"` | `