<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

Parts

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/