# Entur Linje Design System

> Entur Linje is the official React component library and design system for Entur — Norway's national public transport data platform. Published as `@entur/*` npm packages.

> Full documentation: https://linje.entur.no | GitHub: https://github.com/entur/design-system

## Resources

### Workshopmaler

- [Pre Mortem](https://linje.entur.no/ressurser/workshopmaler/pre-mortem): Et verktøy for å oppdage og håndtere risiko før man leverer et initiativ.
- [OODA-loop](https://linje.entur.no/ressurser/workshopmaler/ooda-loop): En modell for å ta raske og informerte beslutninger i komplekse situasjoner.
- [Retro](https://linje.entur.no/ressurser/workshopmaler/retro): En retro er et fast møte der teamet reflekterer over det som har fungert bra og hva som kan forbedres.
- [Brukerhistoriekart](https://linje.entur.no/ressurser/workshopmaler/brukerhistoriekart): En metode for å planlegge leveranser og prioritere funksjoner basert på brukerverdi.
- [Team Canvas](https://linje.entur.no/ressurser/workshopmaler/team-canvas): En metode å støtte et team i å snakke om samarbeid og i å sette et felles mål.
- [Aktørkart](https://linje.entur.no/ressurser/workshopmaler/aktorkart): En metode for å kartlegge aktører som blir berørt av et prosjekt
- [Tjenestekart](https://linje.entur.no/ressurser/workshopmaler/tjenestekart): En metode for å kartlegge hele tjenestereisen – fra brukerens handlinger til interne ledd.
- [Forretningsmodell](https://linje.entur.no/ressurser/workshopmaler/forretningsmodell): En metode for å sette opp en forretningsmodell for hva teamet/området/bedriften din skal gjøre i en matrise.
- [MoSCoW-analyse](https://linje.entur.no/ressurser/workshopmaler/moscow-analyse): En metode for å kartlegge aktører som blir berørt av et prosjekt
- [Intervjukort](https://linje.entur.no/ressurser/workshopmaler/intervjukort): Et verktøy for rask oppsummering av brukerinnsikt
- [Hypotesekort](https://linje.entur.no/ressurser/workshopmaler/hypotesekort): Et verktøy for å formulere, teste og måle hypoteser i produktutvikling.
- [Verdiforslag](https://linje.entur.no/ressurser/workshopmaler/verdiforslag): En metode for å avdekke kundebehov og utvikle produkter/tjenester som skaper verdi.
- [Brukerreisekart](https://linje.entur.no/ressurser/workshopmaler/brukerreisekart): Et verktøy for å formulere, teste og måle hypoteser i produktutvikling.

### Metoder

- [Relasjonssortering](https://linje.entur.no/ressurser/metoder/relasjonssortering): En metode for å organisere ideer og informasjon i grupper.
- [Hvordan kan vi?](https://linje.entur.no/ressurser/metoder/hvordan-kan-vi): En metode for å omformulere problemer til inspirerende spørsmål og muligheter.

### Insights

- [Designsysteminnsikt 2024](https://linje.entur.no/ressurser/innsikt/designsysteminnsikt-2024): Hvordan teamene opplever og bruker designsystemet i praksis

### Oversikt

- [Metoder og maler](https://linje.entur.no/ressurser): Entur Linje samler metoder og maler for enklere samarbeid og bedre produktutvikling.

## Brand Identity

### Verktøykassen

- [Foto](https://linje.entur.no/identitet/verktoykassen/foto): Dette er vår overordnet bildestil som skal kommunisere våre verdier og Enturs personlighet.
- [Ikoner](https://linje.entur.no/identitet/verktoykassen/ikoner): Gir visuell kontekst og forbedrer brukervennligheten
- [Co-branding](https://linje.entur.no/identitet/verktoykassen/co-branding): Her finner du info om hvordan du kan kombinere en partner sitt brand med Entur sitt.
- [EN … TUR](https://linje.entur.no/identitet/verktoykassen/en-tur): Vi åpner logoen for å gi plass til innholdet.
- [Grafiske elementer](https://linje.entur.no/identitet/verktoykassen/grafiske-elementer): Typografi, strek og mønster er de bærende grafiske elementene i identiteten.
- [Logo](https://linje.entur.no/identitet/verktoykassen/logo): Streken i logoen setter fokus på EN og det som gjør oss unike. Streken er et symbol på innholdet i sin mest minimalistiske form.

### Introduction

- [Stil og tone](https://linje.entur.no/identitet/introduksjon/stil-og-tone)
- [Våre verdier](https://linje.entur.no/identitet/introduksjon/vare-verdier)
- [Merkevareplattform](https://linje.entur.no/identitet/introduksjon/merkevareplattform): Vi ønsker at mål, visjon og verdier til Entur skal være synlige og tilstede i brukeropplevelsen til våre kunder.
- [Et gjenkjennelig uttrykk](https://linje.entur.no/identitet): En merkevare kommer først til live når den skaper meningsfulle og minneverdige opplevelser.

### Maler

- [E-post signatur](https://linje.entur.no/identitet/maler/e-post-signatur): Her ser du hvordan signaturer skal se ut i e-postutsendelser.
- [Word-maler](https://linje.entur.no/identitet/maler/word-maler): Her finner du Entur's dokumentmaler som skal brukes ved opprettelse av ny dokument som brevark, møtereferat, notat, rapport og rutine.
- [Visittkort ](https://linje.entur.no/identitet/maler/visittkort-): Her finner du malen som inneholder det du trenger for å lage nye visittkort.
- [Skjermbakgrunn](https://linje.entur.no/identitet/maler/skjermbakgrunn): Tilpass skrivebordsbakgrunnen (bakgrunnsbilde) med et bilde av Enturs visuelle profil.
- [Presentasjon](https://linje.entur.no/identitet/maler/presentasjon): Her finner du Entur's powerpointmal som skal brukes til presentasjoner i Entur.

### Verktoykassen

- [Animasjon](https://linje.entur.no/identitet/verktoykassen/animasjon): Animasjon brukes som et historiefortellende virkemiddel i identiteten. Vi åpner logoen, viser kontrastene i kollektiv-Norge og lar innholdet stå sentralt.
- [Datavisualisering](https://linje.entur.no/identitet/verktoykassen/datavisualisering): En introduksjon til fargepaletten som skal benyttes i datavisualisering.
- [Farger](https://linje.entur.no/identitet/verktoykassen/farger): Fargepaletten er et viktig grafisk virkemiddel i identiteten vår. Det er viktig at fargene brukes riktig og med omhu, for å oppnå et gjenkjennelig uttrykk.
- [Illustrasjoner](https://linje.entur.no/identitet/verktoykassen/illustrasjoner): Det er utviklet et eget illustrasjonsbibliotek for Entur i samarbeid med SDG. Illustrasjonene kan brukes på alle type flater i Entur.
- [Typografi](https://linje.entur.no/identitet/verktoykassen/typografi): Typografi er en essensiell del av Enturs identitet og brukergrensesnitt for sikre god lesbarhet og skape gode brukeropplevelser.

## Kom i gang

### Introduction

- [Introduksjon](https://linje.entur.no/kom-i-gang): Entur Linje er et system for å opprettholde visuell konsistens og kvalitet i Entur sine løsninger. Det inneholder alt som er felles på tvers av team og produkter og som gir verdi å dele i Entur.
- [Arbeidskultur](https://linje.entur.no/kom-i-gang/introduksjon/arbeidskultur): Entur består av mange team som utvikler løsninger for ulike typer kunder – og ikke minst for hverandre. Derfor er det viktig med retningslinjer for hvordan vi ønsker å jobbe.

### For designere

- [Designprosess](https://linje.entur.no/kom-i-gang/for-designere/designprosess): I denne guiden viser vi deg vår designprosess og hvordan vi jobber med følgende verktøy når vi designer til digitale flater.
- [Brukerhistorier](https://linje.entur.no/kom-i-gang/for-designere/brukerhistorier): Brukerhistorier er et format for å beskrive oppgaver som vektlegger oppgavens verdi og akseptkriterier. De vil gi designere, produkteiere, utviklere og testere en felles forståelse av oppgaven.

## Components

### Oversikt

- [Komponenter](https://linje.entur.no/komponenter): Entur Linje har et komplett komponentbibliotek som lar deg lage brukergrensesnitt på en rask og universelt utformet måte.

### Buttons

- [Icon button](https://linje.entur.no/komponenter/knapper/icon-button) (`@entur/button`): Ikonknapp er en knapp med ikon, og bør som hovedregel kombineres med tekst/label for å sikre universell utforming. Ikon-only skal kun brukes med aria-label og i tilfeller der ikonet er tydelig og allment forstått.
- [Button](https://linje.entur.no/komponenter/knapper/button) (`@entur/button`): Knapper lar brukerne gjøre handlinger og ta valg med et klikk.
- [Chip](https://linje.entur.no/komponenter/knapper/chip) (`@entur/chip`): Chips er små avrundede knapper som eksisterer i ulike typer; Action chips og Choice chips (med eller uten ikon), samt Filter chips og tags.
- [FloatingButton](https://linje.entur.no/komponenter/knapper/floatingbutton) (`@entur/button`): En flytende handlingsknapp (FAB) er en sirkulær form med et ikon i midten som flyter over brukergrensesnittet.
- [SquareButton](https://linje.entur.no/komponenter/knapper/squarebutton) (`@entur/button`): Kvadratiske knapper består av et ikon og et tilhørende label. Knappen kan benyttes til handlinger som Legg til, Last ned, Last opp osv.

### Ressurser

- [Typography](https://linje.entur.no/komponenter/ressurser/typography/beta) (`@entur/typography`): Komplett guide til Entur sine nye typografiske komponenter. Nå med et fleksibelt og fremtidsrettet API.
- [Grid](https://linje.entur.no/komponenter/ressurser/grid) (`@entur/grid`): Grid hjelper deg og plassere elementer med jevn rytme, og forenkler responsivitet på forskjellige flater.
- [Changelog](https://linje.entur.no/komponenter/ressurser/changelog): Vi gjør kontinuerlige forbedringer i EDS. Her vil du finne en oppsummering av hva som har blitt lansert oppført etter dataoen vi fullførte hver endring.
- [Typography](https://linje.entur.no/komponenter/ressurser/typography) (`@entur/typography`): Oversikt over Entur sine typografiske komponenter
- [Tilgjengelighet](https://linje.entur.no/komponenter/ressurser/tilgjengelighet) (`@entur/a11y`): Entur Linje er utviklet for å være universelt utformet. Det betyr at det skal kunne fungere for alle. Her finner du noen ekstra komponenter for å forenkle dette arbeidet i løsningene våre også.
- [Icons](https://linje.entur.no/komponenter/ressurser/icons) (`@entur/icons`): Ikoner gir visuell kontekst som blir brukt for å representere handlinger og forbedrer brukervennligheten.

### Feedback

- [Alert](https://linje.entur.no/komponenter/feedback/alert) (`@entur/alert`): Varsler brukes for å fange brukerens oppmerksomhet og inneholder korte viktige meldinger som de bør ta hensyn til.
- [Badge](https://linje.entur.no/komponenter/feedback/badge) (`@entur/layout`): Badge brukes for å indikere status eller informere om elementer som kan kreve brukerens oppmerksomhet og som de bør ta hensyn til.
- [Copyable text](https://linje.entur.no/komponenter/feedback/copyable-text) (`@entur/alert`): Copyable text er en knapp som kopierer innholdet dens til utklippstavlen.
- [Loader](https://linje.entur.no/komponenter/feedback/loader) (`@entur/loader`): Loader er en visuell tilbakemelding som indikerer at lasting av innhold og data er i prosess.
- [Popover](https://linje.entur.no/komponenter/feedback/popover) (`@entur/tooltip`): Popover er en flytende boks for å vise ekstra kontekstuell informasjon, interaksjoner eller innhold på flere linjer.
- [Skeleton](https://linje.entur.no/komponenter/feedback/skeleton) (`@entur/loader`): Skeletons er placeholdere som visuelt kommuniserer at deler av innholdet er i ferd med å laste inn og hvordan innholdsoppsettet vil se ut.
- [Tooltip](https://linje.entur.no/komponenter/feedback/tooltip) (`@entur/tooltip`): Tooltip brukes for å beskrive eller legge til tilleggsinformasjon til brukeren ved hover eller fokus på elementer.

### Layout & Surfaces

- [Card](https://linje.entur.no/komponenter/layout-og-flater/card) (`@entur/layout`): Cards er flater som viser innhold og handlinger om et emne som man ønsker å fremheve på en side.
- [Contrast](https://linje.entur.no/komponenter/layout-og-flater/contrast) (`@entur/layout`): Contrast er en invertert versjon av profilen vår og kan brukes for å skape et visuelt hierarki på siden.
- [Drawer](https://linje.entur.no/komponenter/layout-og-flater/drawer) (`@entur/modal`): Drawer er et panel som glir inn fra siden. Den skal benyttes til å gi tilleggsinformasjon som man trenger der og da, uten å avbryte flyten.
- [Expandable](https://linje.entur.no/komponenter/layout-og-flater/expandable) (`@entur/expand`): Expandables er komponenter for å kollapse og ekspandere innhold.
- [MediaCard](https://linje.entur.no/komponenter/layout-og-flater/mediacard) (`@entur/layout`): MediaCard er en skyggefull boks som gir et kort sammendrag av innnhold og som støtter video, bilde eller grafikk for å forsterke innholdet.
- [Modal](https://linje.entur.no/komponenter/layout-og-flater/modal) (`@entur/modal`): Modal benyttes ofte til spørsmål som brukeren må ta stilling til før han kan gå videre, de avbryter flyten men beholder konteksten delvis. De kan også vise tilleggsinfo som brukeren har etterspurt på en fokusert måte.
- [Tab](https://linje.entur.no/komponenter/layout-og-flater/tab) (`@entur/tab`): Tabs lar oss designe grupperte brukergrensesnitt på en enkel måte.
- [Table](https://linje.entur.no/komponenter/layout-og-flater/table) (`@entur/table`): Tabeller brukes for å vise frem strukturert data
- [Tag](https://linje.entur.no/komponenter/layout-og-flater/tag) (`@entur/layout`): Tags brukes for å kategorisere eller organisere elementer ved hjelp av nøkkelord som beskriver dem.

### Navigation

- [BreadcrumbNavigation](https://linje.entur.no/komponenter/navigasjon/breadcrumbnavigation) (`@entur/menu`): Brødsmulesti (breadcrumbs) er et navigasjonselement som viser hvor man er i navigasjonshierarkiet, og hvordan man navigerer seg tilbake.
- [OverflowMenu](https://linje.entur.no/komponenter/navigasjon/overflowmenu) (`@entur/menu`): Overflow menu består av en ikonknapp som åpner en liste med handlinger når man klikker på den.
- [Pagination](https://linje.entur.no/komponenter/navigasjon/pagination) (`@entur/menu`): Pagination brukes for å fordele innhold på over flere sider, for å unngå for mange elementer i én og samme visning.
- [Stepper](https://linje.entur.no/komponenter/navigasjon/stepper) (`@entur/menu`): En stepper tar deg stegvis gjennom et visst løp.
- [SideNavigation](https://linje.entur.no/komponenter/navigasjon/sidenavigation) (`@entur/menu`): Side navigation brukes som en global meny for å vise et navigasjons-hierarki med ett til to nivåer.
- [Top navigation](https://linje.entur.no/komponenter/navigasjon/top-navigation) (`@entur/menu`): Top navigation brukes som en global navigasjonsmeny som ligger horisontalt på toppen av en side eller applikasjon.

### Travel

- [TravelLeg](https://linje.entur.no/komponenter/reise/travelleg) (`@entur/travel`): Travel leg benyttes til å illustrere reisestrekningen mellom to destinasjoner, og benytter transportfargen og Enturs mønster til det aktuelle transportmidlet.
- [TravelSwitch](https://linje.entur.no/komponenter/reise/travelswitch) (`@entur/travel`): Travel Switch er en variant av Switch for å skru av/på modaliteter.
- [TravelHeader](https://linje.entur.no/komponenter/reise/travelheader) (`@entur/travel`): Travel header viser destinasjonene som man reiser fra og til på en visuell måte. Vi benytter den røde streken fra logoen for å understreke identiteten til Entur.
- [TravelTag](https://linje.entur.no/komponenter/reise/traveltag) (`@entur/travel`): TravelTag er en komponent for å vise noe om en reise

### Form Elements

- [CheckboxPanel](https://linje.entur.no/komponenter/skjemaelementer/checkboxpanel) (`@entur/form`): Checkbox panel fungerer som checkbox button, men med en større trykkflate og muligheter for å vise ekstra informasjon.
- [DatePicker](https://linje.entur.no/komponenter/skjemaelementer/datepicker) (`@entur/datepicker`): DatePicker, DateField, Calendar og NativeDatePicker er komponenter for å velge datoer.
- [Dropdown](https://linje.entur.no/komponenter/skjemaelementer/dropdown) (`@entur/dropdown`): Dropdown presenterer en liste over valg der brukeren kan velge ett av dem.
- [FileUpload](https://linje.entur.no/komponenter/skjemaelementer/fileupload) (`@entur/fileupload`): FileUpload en komponent for å ta imot filer fra brukeren.
- [MultiSelect](https://linje.entur.no/komponenter/skjemaelementer/multiselect) (`@entur/dropdown`): MultiSelect lar brukeren velge ett eller flere elementer fra en liste med valg
- [Radio button](https://linje.entur.no/komponenter/skjemaelementer/radio-button) (`@entur/form`): Radio buttons lar brukerne velge kun ett alternativ fra en liste over valg.
- [RadioPanel](https://linje.entur.no/komponenter/skjemaelementer/radiopanel) (`@entur/form`): Radio panel fungerer som radio button, men med en større trykkflate, og muligheter for å vise ekstra informasjon.
- [SegmentedControl](https://linje.entur.no/komponenter/skjemaelementer/segmentedcontrol) (`@entur/form`): SegmentedControl lar brukeren velge mellom nært beslektede alternativer som påvirker innhold eller visning. Den består av en gruppe knapper hvor nøyaktig ett alternativ kan være valgt om gangen.
- [Switch](https://linje.entur.no/komponenter/skjemaelementer/switch) (`@entur/form`): Switch fungerer som en fysisk bryter som lar brukerne slå på eller av en funksjon.
- [Checkbox](https://linje.entur.no/komponenter/skjemaelementer/checkbox) (`@entur/form`): Checkboxes lar brukerne velge ett eller flere alternativer fra en liste over valg.
- [TextArea](https://linje.entur.no/komponenter/skjemaelementer/textarea) (`@entur/form`): TextArea brukes når brukeren skal fylle ut lengre tekster, som et avsnitt eller to.
- [TextField](https://linje.entur.no/komponenter/skjemaelementer/textfield) (`@entur/form`): TextField en komponent for å ta imot tekst fra brukeren.
- [TimePicker](https://linje.entur.no/komponenter/skjemaelementer/timepicker) (`@entur/datepicker`): TimePicker er en komponent for å velge et tidspunkt.

## Mønster

### Mønster

- [Portal Sidebar B2B](https://linje.entur.no/monster/monster/portal-sidebar-b2b): Sidebaren gir brukeren oversikt over tilgjengelige sider og gjør det enkelt å navigere effektivt i komplekse B2B-produkter.
- [Topbar B2B](https://linje.entur.no/monster/monster/topbar-b2b/beta): Topbar står øverst i B2B-produktet for produktidentitet, navigasjon, søk og globale brukerhandlinger. Mønsteret er responsivt og tilpasser seg desktop, tablet og mobil.
- [Navbar B2B](https://linje.entur.no/monster/monster/navbar-b2b/beta): Navigasjonspanelet gir brukeren oversikt over tilgjengelige sider og gjør det enkelt å navigere effektivt i portaler og B2B-produkter. Panelet finnes i to varianter: sidebar (vertikal) og topbar-navigasjon (horisontal).

### Oversikt

- [Mønstre og maler](https://linje.entur.no/monster): Retningslinjer og ferdige oppsett for å bygge helhetlige løsninger med komponenter fra designsystemet.

### Maler

- [Portal B2B](https://linje.entur.no/monster/maler/portal-b2b/beta) (`@entur/layout`): Mal for B2B-portaler med valgfri statuslinje, sidefelt og hovedinnhold.

## Design Tokens

- [Tokens](https://linje.entur.no/tokens) (`@entur/tokens`): Designsystemet er et system for å opprettholde frontend kode og visuell konsistens. Det inneholder alt som er felles på tvers av team og produkter og som gir verdi å dele i Entur.

### Ovrige Tokens

- [Border](https://linje.entur.no/tokens/ovrige-tokens/border): Border-tokens brukes til å definere grensene til et element i CSS.
- [Breakpoints](https://linje.entur.no/tokens/ovrige-tokens/breakpoints): Breakpoints er de punktene der designet "bryter" eller tilpasses for å passe til ulike skjermstørrelser, fra små mobilenheter til store skjermer.
- [PX vs REM](https://linje.entur.no/tokens/ovrige-tokens/px-vs-rem): Pixel er faste størrelser som ikke endrer seg. Rem, derimot, tilpasser seg automatisk fontstørrelsen på root i HTML, og derfor er den ofte best for responsivt design.
- [Shadows](https://linje.entur.no/tokens/ovrige-tokens/shadows): Shadows brukes til å definere skyggeeffekter i CSS, som legger til dybde og dimensjon på elementer.
- [Spacing](https://linje.entur.no/tokens/ovrige-tokens/spacing): Spacing brukes konsekvent på margin og padding for å oppnå konsistens på tvers av komponenter og UI.
- [Timings](https://linje.entur.no/tokens/ovrige-tokens/timings): Timing-tokens brukes til å definere overgangseffekter (transitions) i CSS.
- [Z-index](https://linje.entur.no/tokens/ovrige-tokens/z-index): Z-index kontrollerer rekkefølgen der elementer overlapper hverandre, elementer med høyere z-indeks verdier blir plassert foran elementer med lavere z-indeks verdier.
- [Typografi](https://linje.entur.no/tokens/ovrige-tokens/typografi): Ved å definere tydelige tokens for font weights, størrelser og linjehøyder, blir det enklere å innføre konsistent typografi.

### Fargetokens

- [Dark mode](https://linje.entur.no/tokens/fargetokens/dark-mode): Fargetokens gjør det mulig å implementere en strukturert dark mode for en sømløs overgang mellom lys og mørk modus i både Figma og kode.
- [Generelt om fargetokens](https://linje.entur.no/tokens/fargetokens/generelt-om-fargetokens): Hvorfor har vi egentlig fargetokens? Er du usikker på hvordan komme i gang? Her kommer en kort introduksjon.
- [Oversikt](https://linje.entur.no/tokens/fargetokens/oversikt): Oversikt over Entur Linje sine fargetokens

### Storrelsetokens

- [Oversikt](https://linje.entur.no/tokens/storrelsetokens/oversikt): Oversikt over Entur Linje sine størrelsetokens

## Accessibility

### Hvem Designer Vi For

- [Hvem designer vi for?](https://linje.entur.no/universell-utforming/hvem-designer-vi-for): Vi ønsker å tilby en god brukeropplevelse for alle, også de som har en funksjonsnedsettelse.

- [Introduksjon](https://linje.entur.no/universell-utforming): Universell utforming (UU) bygger på tanken om at tjenester skal være tilgjengelige for alle, uavhengig av alder, funksjonsevne og utdanningsnivå.

### Kontrastsjekker

- [Kontrastsjekker](https://linje.entur.no/universell-utforming/kontrastsjekker): For å sikre god lesbarhet i våre applikasjoner er det viktig å opprettholde kontrastkrav for farger på nett.

### Nyttige Verktoy

- [Nyttige verktøy](https://linje.entur.no/universell-utforming/nyttige-verktoy): Her har vi samlet et knippe lenker for mer informasjon. Tilsynet for universell utforming av IKT har mange bra forklaringer, sjekklister og løsningsforslag.

### Testguide

- [Testguide](https://linje.entur.no/universell-utforming/testguide): UU-tilsynet har satt sammen en guide til hvordan man selv kan teste løsningen sin, som vi her gjengir i korte trekk.

## Getting Started

### For Designers

- [Brukergrupper](https://linje.entur.no/kom-i-gang/for-designere/brukergrupper): Enturs tjenester har to hovedbrukergrupper; reisetilbydere på den ene siden og de reisende på den andre. I mange tilfeller vil situasjon være en faktor som spisser behovsbeskrivelsen.
- [Brukertesting](https://linje.entur.no/kom-i-gang/for-designere/brukertesting): Hvordan skal man finne ut hva som virkelig betyr noe – og gjør en forskjell i ulike situasjoner - for de som anvender ens produkt?

### For Developers

- [Bidra med kode](https://linje.entur.no/kom-i-gang/for-utviklere/bidra-med-kode): Har du funnet en bug i designsystemet? Vil du legge til en ny feature eller fikse noe i dokumentasjonen? Eller kanskje bare utforske repoet? Da er dette guiden for deg.
- [Komponentbibliotek](https://linje.entur.no/kom-i-gang/for-utviklere/komponentbibliotek): Linje designsystem gjør det enklere for deg som utvikler å lage gode, universelt utformede brukeropplevelser som er like på tvers av appene våre. Denne guiden viser deg hvordan du kan starte å bruke det!

### Introduction

- [Designprinsipper](https://linje.entur.no/kom-i-gang/introduksjon/designprinsipper): De fem designprinsippene skal fungere som guidelines som vi skal rette oss etter når vi designer og utvikler de digitale tjenestene til Entur.

## Patterns

### Monster

- [Statusbeskjeder](https://linje.entur.no/monster/monster/statusbeskjeder): Statusbeskjeder informerer brukeren når noe går galt, så hvordan gjør vi det i Entur?