Arealdiagram
lm-chart-area
Flerserie-diagram som viser flere navngitte kategorier som fylte arealer under hver sin linje, over samme ordnede x-akse.
Om komponentene
56 delte Web Components fra designsystem/komponenter/, gruppert etter kategori. Hver komponent sin egen side har full dokumentasjon (attributter, events, slots, tilgjengelighet, kodeeksempler).
Data-visualisering
Linjediagram
lm-chart-line
Generisk linjediagram for én serie etikett/verdi-par.
Punktdiagram
lm-chart-scatter
Punktdiagram for å utforske sammenhengen (korrelasjon/spredning) mellom to numeriske variabler i et datasett.
Sektordiagram
lm-chart-pie
Generisk sektordiagram for én serie etikett/verdi-par.
Sparkline / minidiagram
lm-chart-sparkline
En svært kompakt, akseløs trendlinje uten rutenett, verdietiketter eller legende - kun selve kurven og en markør på siste (nåværende) punkt.
Stolpediagram
lm-chart-bar
Generisk stolpediagram for én serie etikett/verdi-par.
Handling
Installer app-knapp
lm-installer-knapp
Tilbyr brukeren å installere appen som en frittstående PWA, uten at hver app selv må implementere beforeinstallprompt-håndtering og iOS-spesifikk veiledning fra bunnen av.
Knappegruppe
lm-button-group
Visuell og semantisk gruppering av relaterte knapper, f.eks.
Lenkeknapp
lm-link-button
Stiler en vanlig <a href="..."> som en knapp for navigasjon eller nedlasting som bør fremheves visuelt.
Menyknapp
lm-menu-button
En knapp (ofte et "⋯"-ikon) som åpner en meny med flere handlinger for én rad/kort - f.eks.
Ikon
Innhold
Datatabell
lm-data-table
En fullt tilgjengelig, sorterbar tabell for strukturerte datasett - fra en kort liste til flere hundre rader.
Innholdskort
lm-card
Japan 2026
1. jun 2026 – 20. jun 2026
Generisk innholdskort: en bordet, avrundet boks med valgfritt bilde, hovedinnhold og valgfritt trailing-innhold.
Merkelapp
lm-tag
Generisk, pilleformet merkelapp for å klassifisere eller merke et element.
Nøkkeltall
lm-stat
Viser ett enkelt, fremtredende nøkkeltall med en valgfri, dempet etikett over - mønsteret man ser i dashboard-apper ("Denne måneden" / "12 340 kr").
Strøm
lm-feed
Kaffe
-45 kr - i går
Lønn
+32 000 kr - 1. i måneden
En kontinuerlig rullende strøm av innholdsblokker - f.eks.
Tom tilstand
lm-empty-state
Velkommen!
Du har ikke importert noen transaksjoner ennå - start med å laste opp en CSV-eksport fra nettbanken din.
Fremhevet, sentrert kort som forklarer hvorfor en flate er tom og hva brukeren kan gjøre for å fylle den (f.eks.
Trevisning
lm-tree-view
Viser en hierarkisk liste - f.eks.
Layout
Fleksrad
lm-flex
Generisk layout-primitiv for enkle rader og kolonner med CSS Flexbox.
Panel-skillelinje
lm-splitter
En flyttbar skillelinje mellom to paneler - f.eks.
Rutenett
lm-grid
Generisk layout-primitiv for rutenett med CSS Grid.
Medieinnhold
Avatar
lm-avatar
Viser et lite profil- eller enhetsbilde i en konsistent form, med automatisk fallback til initialer når bildet mangler eller ikke kan lastes.
Bildeforhåndsvisning
lm-preview-image
Generisk bildeprimitiv: viser et miniatyrbilde som åpnes i full størrelse i en dialog.
Dokumentforhåndsvisning
lm-preview-document
Generisk dokumentforhåndsvisning, i praksis for PDF-er: viser ikon og filnavn som miniatyr, og åpner dokumentet i full størrelse i en dialog.
Innebygd kart
lm-map-embed
Lite, innebygd OpenStreetMap-kart for ett punkt med kjente koordinater.
Karusell
lm-carousel
Roterer gjennom et sett med lysbilder - bilder, kort eller sitater - med forrige/neste-knapper og punktindikatorer.
Medieflis
lm-media-tile
Sentrerer et forhåndsvisningselement (bilde eller dokument) over én tilhørende handlingsknapp, typisk brukt i lister av opplastede vedlegg (kvitteringer, dokumenter) der hvert element både skal kunne forhåndsvises og fjernes.
Overlegg
Dialog
lm-dialog
Generisk modal dialog for innhold som ikke passer de mer spesialiserte dialogene i designsystemet - f.eks.
Verktøytips
lm-tooltip
Viser en kort forklaringstekst når brukeren holder musepekeren over eller fokuserer et element - typisk et ikon uten synlig tekst, eller en forkortelse som trenger utdyping.
Skjema
Av/på-bryter
lm-switch-field
En umiddelbar av/på-bryter bygget på det native switch-attributtet på <input type="checkbox"> (nyeste Chrome/Safari), med samme hjelpetekst-/feilmeldingsoppsett og form-association som resten av skjemafelt-familien - helt uten en håndbygget, egendefinert glidebryter i JS/CSS.
Avkrysningsboks
lm-checkbox-field
Én enkelt avkrysningsboks med boksen plassert før etikett-teksten (motsatt rekkefølge av resten av skjemafelt-familien, som er den etablerte konvensjonen for checkbokser), men samme hjelpetekst-/feilmeldingsoppsett og form-association som de andre feltene.
Dato-/tidsfelt
lm-date-field
Én komponent for alle native dato-/tidstyper (date/datetime-local/time/month/week) via type-attributtet, med samme etikett-/hjelpetekst-/feilmeldingsoppsett som resten av skjemafelt-familien.
Fargevelger
lm-color-field
Fargevelger basert på native <input type="color">, med samme etikett-/hjelpetekst-/feilmeldingsoppsett som resten av skjemafelt-familien.
Filopplasting
lm-file-field
Filopplastingsfelt med samme etikett-/hjelpetekst-/feilmeldingsoppsett som resten av skjemafelt-familien, samt en synlig filliste når flere filer er valgt.
Flerlinjes tekstfelt
lm-textarea-field
Flerlinjes tekstfelt for notater/beskrivelser, med samme etikett-/hjelpetekst-/feilmeldingsoppsett som resten av skjemafelt-familien, pluss en automatisk tegnteller når maxlength er satt.
Flerstegsskjema
lm-multistep-form
Deler et vanlig <form> opp i sekvensielle steg med "Neste" og "Tilbake", enkel stegindikator og native constraint validation per steg.
Glidebryter (enkelt tall)
lm-range-field
Ett-håndtaks glidebryter basert på native <input type="range">, med en live oppdatert verditekst ved siden av etiketten og samme hjelpetekst-/feilmeldingsoppsett som resten av skjemafelt-familien.
Intervallglider
lm-range-slider
Lar brukeren velge et tallintervall med to hendler langs ett spor - f.eks.
Listeboks
lm-listbox
🍽️ Mat
🚗 Transport
🏠 Bolig
En rikt stylet liste hvor brukeren velger ett eller flere elementer - f.eks.
Nedtrekksliste
lm-select-field
Nedtrekksliste med samme etikett-/hjelpetekst-/feilmeldingsoppsett som resten av skjemafelt-familien.
Pengebeløp
lm-currency-field
Beløpsfelt bygget på type="text" (siden formatert visning som "1 234,50 kr" ikke er et gyldig native tall), som viser verdien live valutaformatert via den delte formatCurrency-funksjonen når feltet ikke har fokus, og en enkel, redigerbar rå tallverdi mens brukeren skriver.
Radioknapp-gruppe
lm-radio-group-field
En gruppe native radioknapper generert fra en options-liste (samme one-liner-JSON-attributt/JS-property-mønster som <lm-select-field>), pakket i <fieldset>/<legend> for korrekt gruppe-semantikk, med felles hjelpetekst og automatisk feilmeldingsvisning.
Tallfelt
lm-number-field
Tallfelt med min/max/step-validering og en valgfri enhetstekst (kr, %, stk) rett ved siden av verdien, med samme etikett-/hjelpetekst-/feilmeldingsoppsett som resten av skjemafelt-familien.
Tekstfelt
lm-text-field
Ettlinjes tekstfelt med etikett, valgfri hjelpetekst og automatisk feilmeldingsvisning - én komponent for text/email/url/tel/password/search via type-attributtet, i stedet for å håndskrive <label>+<input>+feilmelding-oppsettet i hvert skjema.
Tilbakemelding
Bekreftelsesdialog
lm-confirm-dialog
Er du sikker på at du vil slette denne turen? Stopp, fly, hotell og kvitteringer som hører til turen slettes samtidig, og dette kan ikke angres.
Standardisert "er du sikker?"-dialog for destruktive eller uigjenkallelige handlinger.
Fremdriftslinje
lm-progress-bar
En lineær fremdriftsindikator for prosesser som tar merkbar tid, bygd rundt native <progress> i stedet for en håndrullet div-basert erstatning.
Innebygd melding
lm-inline-message
Kort status- eller feilmelding i et skjema eller en komponent, f.eks.
Skjelettplassholder
lm-skeleton
Viser en nøytral, animerbar plassholder mens ekte innhold lastes eller beregnes.
Varseltoast
lm-toast
Stablende, selvforsvinnende varsler for korte tilbakemeldinger etter en handling, f.eks.
Utvikling
Kode-lekeplass
lm-kode-lekeplass
Gjør et kodeeksempel i designsystem-dokumentasjonen kjørbart og redigerbart: brukeren ser umiddelbart hvordan en endring i markup (modus="html") eller i et funksjonskall (modus="js") påvirker resultatet, uten å måtte forlate siden eller åpne et eget verktøy.