<lm-card> – Innholdskort / Card

Om komponenten

Kanonisk navn: <lm-card>
Synonymer: kort, panel, content card, summary card, tile
Kategori: innhold, layout
ARIA-mønster: Ikke aktuelt - Generisk innholdswrapper uten egen interaksjonsmodell eller APG-dekket widgetoppførsel.
Parts: kort, media, innhold, sideinnhold
Native-first-vurdering: HTML har ingen egen card-primitiv. Komponenten er derfor en tynn wrapper rundt vanlig markup, mens forbrukeren beholder semantiske elementer som overskrifter, lenker og tekst.
Nettleserstøtte: Ingen spesielle forbehold - kun bredt støttede, stabile plattform-API-er.
Design-tokens: var(--border-color, ...), var(--radius-medium, ...), var(--radius-small, ...), var(--font-headline, ...), var(--opacity-muted, ...)
Sist endret: 20. september 2026
Brukt: 4 steder

Formål

Generisk innholdskort: en bordet, avrundet boks med valgfritt bilde, hovedinnhold og valgfritt trailing-innhold. Komponenten styrer bare layouten; forbrukeren leverer vanlig markup som barn.

Egner seg for

Oppsummeringskort med tittel-lenke, sekundærtekst, valgfritt miniatyrbilde og trailing-status eller handling.
Situasjoner der forbrukeren vil beholde full kontroll over markupen og bare trenger delt kortlayout og styling.

Egner seg ikke for

Kort der hele flaten skal være én samlet lenke eller knapp; bare de faktiske interaktive barna er klikkbare.
Kort der tittelstilen må treffe innhold pakket inn i ekstra wrappere; spesialstilen gjelder bare en direkte slottet <a>.

Bruk

<script type="module" src="/designsystem/komponenter/innhold/card/card.js"></script>

<ul>
    <li>
        <lm-card>
            <img slot="media" src="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27320%27 height=%27180%27%3E%3Crect width=%27100%25%27 height=%27100%25%27 fill=%27%23c9ced6%27/%3E%3C/svg%3E" alt="">
            <a href="trip.html?id=123">Japan 2026</a>
            <br>
            <small>1. jun 2026 – 20. jun 2026</small>
            <lm-tag slot="trailing">Arkivert</lm-tag>
        </lm-card>
    </li>
</ul>

Prøv selv

Rediger koden under - resultatet oppdateres live.

Slots

Slot	Beskrivelse
`media`	Valgfritt - typisk et `<img>`, vist til venstre i kortet.
(standard)	Hovedinnhold - typisk en `<a>` (kortets tittel/lenke) og eventuelt mer tekst.
`trailing`	Valgfritt - vises til høyre i kortet (en `<lm-tag>`, en knapp, e.l.).

Parts

Part	Beskrivelse
`kort`	Selve kortbeholderen.
`media`	Navngitt slot for medieområdet til venstre.
`innhold`	Wrapper rundt hovedinnholdet i midten.
`sideinnhold`	Navngitt slot for trailing-innhold til høyre.

Styling med ::part()

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

lm-card::part(kort) {
    /* egne stiler for "Selve kortbeholderen." */
}

lm-card::part(media) {
    /* egne stiler for "Navngitt slot for medieområdet til venstre." */
}

lm-card::part(innhold) {
    /* egne stiler for "Wrapper rundt hovedinnholdet i midten." */
}

lm-card::part(sideinnhold) {
    /* egne stiler for "Navngitt slot for trailing-innhold til høyre." */
}

Tilgjengelighet

Komponenten setter ingen ARIA-roller eller aria-*-attributter; semantikken kommer fra det slottede innholdet. Interaktive barn beholder native fokus- og tastaturoppførsel. Ytre struktur endres ikke, så kort i lister må fortsatt ligge i et vanlig <li>. Komponenten animerer ikke.

Komponenten setter ingen ARIA-roller eller aria-*-attributter; semantikken kommer fra det slottede innholdet.
Interaktive barn beholder native fokus- og tastaturoppførsel.
Kort i lister må fortsatt ligge i et vanlig <li>; komponenten endrer ikke liste-semantikk.
Komponenten har ingen egen animasjon eller høy-kontrastlogikk.

Detaljer

En direkte slottet <a> i standardslotten styles som korttittel; pakkes den inn i et ekstra element, uteblir denne stilen.
Komponenten gjør ikke hele kortet klikkbart; bruk ekte <a>- eller <button>-elementer for handlinger.
Er kortet ett element i en liste, pakk det inn i et vanlig <li> slik at skjermlesere fortsatt får korrekt listeinformasjon.

Referanser

Se også:

../../layout/grid/index.html - brukes ofte som ytre layout når flere kort skal vises i et responsivt rutenett.
../tag/index.html - er et typisk trailing-innhold i kortet når et kort skal merkes med status eller type.

Brukes av:

turer/js/pages/dashboard.js - tur-kortene i oversikten over aktive og arkiverte turer.
okonomi/formue/index.html - hver aktiva-/gjeldspost og hver lønnsforhandling.
slides/index.html - kort for hver presentasjon/eksempel på forsiden.
index.html (rot) - kort for Turer/Slides/Økonomi/Designsystem på forsiden.

Avhengigheter: Ingen