Designsystemoversikt

DescriptionList

DescriptionList viser korte nøkkel-verdi-par i en semantisk struktur som er lettere enn en tabell, men tydeligere enn løs tekst.

Jøkul · Komponenter

Pakke: @fremtind/jokul

Installasjon: Se relevant guide

DescriptionList passer godt når brukeren skal lese en liten samling felter og verdier uten behov for kolonnevis sammenligning.

Jøkul eksporterer både selve listecontaineren og delkomponentene `DescriptionTerm` og `DescriptionDetail`, så docs-siden viser både overordnet kontrakt og de små byggesteinene.

Playgrounden lar deg veksle mellom alignments og separatorer for å se hvordan samme innhold oppfører seg i ulike oppsett.

Eksempel

Props

    • alignment="horizontal" · separators=false

    System
    Jøkul
    Dekning
    14 dokumenterte komponenter
    Sist oppdatert
    22. mars 2026

    Kode

    React · tsx
    import "@fremtind/jokul/styles/core/core.css";
import "@fremtind/jokul/styles/components/description-list/description-list.min.css";
import {
    DescriptionDetail,
    DescriptionList,
    DescriptionTerm,
} from "@fremtind/jokul/description-list";

export function Example() {
    return (
        <DescriptionList>
            <DescriptionTerm>System</DescriptionTerm>
            <DescriptionDetail>Jøkul</DescriptionDetail>

            <DescriptionTerm>Dekning</DescriptionTerm>
            <DescriptionDetail>14 dokumenterte komponenter</DescriptionDetail>

            <DescriptionTerm>Sist oppdatert</DescriptionTerm>
            <DescriptionDetail>22. mars 2026</DescriptionDetail>
        </DescriptionList>
    );
}

    Props

    Disse prop-tabellene gjelder rotelementet DescriptionList.

    Jøkul-props

    Props som styrer oppsettet og leserytmen i selve beskrivelseslisten.

    Prop Type Standard Beskrivelse
    alignment "horizontal" | "vertical" | "justified" "horizontal" Velger hvordan term og detalj skal stå i forhold til hverandre når listen får nok plass.
    separators boolean false Legger inn visuelle skiller mellom radene i listen.

    React-props

    React-props som styrer komposisjon og lokal layout for listen.

    Prop Type Standard Beskrivelse
    children ReactNode påkrevd Bygg opp listen med alternerende `DescriptionTerm` og `DescriptionDetail`.
    className string ingen Ekstra klasse på `<dl>`-elementet når listen må kobles til lokal layout.

    Delkomponenter

    DescriptionTerm

    API: DescriptionTerm · Selektor: dt.jkl-description-list__term

    Term-komponenten navngir hvert felt eller hver egenskap i listen.

    React-props

    React-props som styrer komposisjon og lokal layout for listen.

    Prop Type Standard Beskrivelse
    children ReactNode påkrevd Selve nøkkel- eller feltnavnet som beskriver hva detaljen på raden gjelder.
    className string ingen Ekstra klasse på termen når lokal layout trenger en avgrenset justering.

    DescriptionDetail

    API: DescriptionDetail · Selektor: dd.jkl-description-list__detail

    Detail-komponenten viser selve verdien eller forklaringen som hører til termen.

    React-props

    React-props som styrer komposisjon og lokal layout for listen.

    Prop Type Standard Beskrivelse
    children ReactNode påkrevd Verdien, statusen eller detaljteksten som hører til termen på raden.
    className string ingen Ekstra klasse på detaljeelementet når en spesifikk rad trenger lokal justering.

    Når du skal bruke DescriptionList

    Bruk DescriptionList når innholdet består av tydelige term-verdi-par og brukeren skal lese noen få felt i sammenheng.

    Hvis brukeren skal sammenligne mange rader eller kolonner systematisk, er tabell eller summary table ofte bedre.

    Tilgjengelighet

    Beskrivelsesliste gir hjelpemidler en tydelig semantisk kobling mellom term og verdi så lenge radene faktisk er reelle par.

    Ikke bruk komponenten som en generell layout-grid for vilkårlig innhold. Da blir semantikken misvisende.

    Komponentprofil

    Klient-JS
    Ingen
    Hydrering
    Ingen
    Ikoner
    Ingen
    Dekket API-props
    4
    Playground-kontroller
    2
    Delkomponenter
    2
    Anatomideler
    0
    Komposisjoner
    0
    Utfasete props
    0

    Stiler

    • @fremtind/jokul/styles/core/core.css
    • @fremtind/jokul/styles/components/description-list/description-list.min.css

    Ikonkontrakt

    Bruk: Ingen

    Komponenten krever ingen egen ikonkontrakt i grunnoppsettet.

    Propkontrakt

    Dekning: Komplett

    Scope: Pakkens offentlige props, uten generiske DOM-props

    • DescriptionList · DescriptionListProps · @fremtind/jokul/description-list · 4 props
    • DescriptionTerm · DescriptionTermProps · @fremtind/jokul/description-list · 2 props
    • DescriptionDetail · DescriptionDetailProps · @fremtind/jokul/description-list · 2 props
    • Dekningen følger offentlige props som kommer fra Jøkul-pakken og dens egne basetyper, men ikke generiske DOM-props fra React.

    Tilgjengelighet

    Tastatur: DescriptionList har ingen egen tastaturadferd utover vanlig navigasjon mellom eventuelle lenker eller kontroller du legger inn i innholdet.

    Semantikk som kreves

    • Bruk en beskrivelsesliste når hvert felt består av en term og en tilhørende verdi, og rekkefølgen mellom dem betyr noe.
    • Hold samme rytme gjennom hele listen slik at brukeren kan skanne term og detalj parvis.
    • Velg alignment ut fra hva som gjør verdiene lettest å lese i den tilgjengelige bredden.

    Automatiserte kontroller

    • Dokssiden inngår i prosjektets route smoke og a11y-kjøring.
    • Forhåndsvisningen rendres server-side uten Astro islands eller klienthydrering.

    Manuelle kontroller

    • Bekreft at termene faktisk fungerer som korte feltetiketter og ikke som hele setninger.
    • Bekreft at verdiinnholdet fortsatt er lesbart når listen bryter over flere linjer på små skjermer.

    Ytelse

    • DescriptionList er ren HTML og CSS uten klientruntime.
    • Komponenten er lett, men lange verdier kan skape tunge tekstblokker hvis listen brukes som erstatning for tabell eller kort.

    Relatert