<lm-empty-state> – Tom tilstand / Empty state

Om komponenten

Kanonisk navn: <lm-empty-state>
Synonymer: onboarding-kort, tom tilstand, empty state, oppfordringskort, call to action, velkomstkort
Kategori: innhold
ARIA-mønster: Ikke aktuelt - Ren visuell layout-primitiv uten egen interaksjon eller tilstand - innholdet (overskrift, avsnitt, lenke/knapp) beholder sin egen native semantikk uendret.
Parts: flate, illustrasjon, tittel, innhold, handling
Native-first-vurdering: HTML har ingen egen "oppfordringskort"-primitiv. Komponenten tilfører kun delt kort-styling og -plassering rundt vanlig, forbrukervalgt markup i tre navngitte slots.
Nettleserstøtte: Ingen spesielle forbehold - kun bredt støttede, stabile plattform-API-er.
Design-tokens: var(--space-small, ...), var(--space-2xs, ...), var(--space-large, ...), var(--radius-medium, ...), var(--color-surface-muted, ...), var(--color-surface-text, ...)
Sist endret: 20. september 2026
Brukt: 2 steder

Formål

Fremhevet, sentrert kort som forklarer hvorfor en flate er tom og hva brukeren kan gjøre for å fylle den (f.eks. "Du har ikke importert noen transaksjoner ennå" + en importer-handling), med en tydelig illustrasjon øverst. Rent presentasjons-/layoutansvar - komponenten kjenner ikke domenet, kun hvordan illustrasjon, tittel, beskrivelse og handling arrangeres.

Egner seg for

Onboarding-oppfordringer på en side som ellers ville vært helt tom, med én tydelig neste handling.
Førstegangsbruker-flyter der en handling (import, oppsett, registrering) må gjøres før resten av siden gir mening.

Egner seg ikke for

En midlertidig, sentrert plassholdertekst inni et fast panel/rutenett (f.eks. en presentasjonsvisning uten innhold ennå) - det er en annen, mer nøytral "ingenting å vise"-tilstand uten kort-bakgrunn eller handling, og løses bedre med enkel, lokal styling der den faktisk trengs.
Feilmeldinger eller valideringsstatus - bruk <lm-inline-message variant="feil"> for det i stedet.

Bruk

<script type="module" src="/designsystem/komponenter/innhold/empty-state/empty-state.js"></script>
<script type="module" src="/designsystem/komponenter/handling/link-button/link-button.js"></script>

<lm-empty-state>
    <lm-ikon slot="illustrasjon" navn="kvittering"></lm-ikon>
    <h2 slot="tittel">Velkommen!</h2>
    <p>Du har ikke importert noen transaksjoner ennå - start med å laste opp en CSV-eksport fra nettbanken din.</p>
    <lm-link-button slot="handling"><a href="/okonomi/forbruk/importer/index.html">Importer transaksjoner</a></lm-link-button>
</lm-empty-state>

Prøv selv

Rediger koden under - resultatet oppdateres live.

Slots

Slot	Beskrivelse
`illustrasjon`	Valgfritt ikon/illustrasjon øverst i kortet. Har et standard `<lm-ikon navn="eske">` som vises til forbrukeren gir sitt eget `<lm-ikon slot="illustrasjon" navn="...">` tilpasset konteksten (f.eks. `navn="kvittering"` for en import-oppfordring).
`tittel`	Overskrift, typisk en `<h2>`/`<h3>` tilpasset sidens nivå.
(standard)	Kort forklarende tekst, typisk ett `<p>`-avsnitt, om hvorfor flaten er tom og hva brukeren kan gjøre.
`handling`	Valgfri handling, typisk en lenke eller knapp, som løser den tomme tilstanden (f.eks. "Importer transaksjoner").

Parts

Part	Beskrivelse
`flate`	Den ytre, bakgrunnsfargede kortflaten.
`illustrasjon`	Wrapper rundt den slottede (eller standard) illustrasjonen.
`tittel`	Wrapper rundt den slottede tittelen.
`innhold`	Wrapper rundt standard-slotten (beskrivelsen).
`handling`	Wrapper rundt den slottede handlingen.

Styling med ::part()

Hver part over kan restyles direkte fra et vanlig, ytre stilark - uten å måtte endre selve komponenten eller duplisere den:

lm-empty-state::part(flate) {
    /* egne stiler for "Den ytre, bakgrunnsfargede kortflaten." */
}

lm-empty-state::part(illustrasjon) {
    /* egne stiler for "Wrapper rundt den slottede (eller standard) illustrasjonen." */
}

lm-empty-state::part(tittel) {
    /* egne stiler for "Wrapper rundt den slottede tittelen." */
}

lm-empty-state::part(innhold) {
    /* egne stiler for "Wrapper rundt standard-slotten (beskrivelsen)." */
}

lm-empty-state::part(handling) {
    /* egne stiler for "Wrapper rundt den slottede handlingen." */
}

Tilgjengelighet

Setter ingen egne ARIA-roller eller aria-*-attributter; skjermlesere leser det slottede innholdet (overskrift, avsnitt, lenke/knapp) med sin egen, uendrede native semantikk.

Standard-illustrasjonen er dekorativ og har ingen etikett (skjules dermed for skjermlesere via <lm-ikon> sin egen tilgjengelighetslogikk); gi et forbrukervalgt illustrasjons-ikon etikett kun hvis det formidler informasjon utover det tittel/beskrivelse allerede sier.
Slottet innhold beholder sin egen, native semantikk uendret (overskrift forblir overskrift, lenke forblir lenke).
Komponenten legger ikke til noen fokusfelle, live-region eller egen tastaturlogikk.

Detaljer

Erstatter den tidligere prosjektspesifikke CSS-klassen .onboarding-kort i okonomi/styles.css.
Illustrasjonen har et standard <lm-ikon navn="eske"> som <slot>-fallback - vises automatisk til forbrukeren gir sitt eget <lm-ikon slot="illustrasjon">, uten at komponenten trenger egen JS-logikk for dette.
Hele kortet (illustrasjon, tittel, beskrivelse, handling) er sentrert - dette er et bevisst designvalg for onboarding-/oppfordringskort, ikke en generell tekstjustering brukt andre steder i designsystemet.

Referanser

Se også:

../card/index.html - for et generisk innholdskort med media/trailing-innhold, i stedet for en spesifikk onboarding-oppfordring.
../../tilbakemelding/inline-message/index.html - for løpende status-/feilmeldinger i stedet for en fremhevet oppfordring.

Brukes av:

okonomi/index.html - onboarding-kortet på Hjem-fanen, vist til brukeren har importert minst én transaksjon.
okonomi/formue/index.html - vist til minst én aktiva-/gjeldspost er registrert.

Avhengigheter: designsystem/komponenter/ikon/ikon/