Design

DescriptionList

@/components/ui/DescriptionList

Delt «etikett over verdi»-rutenett for et sett med korte faktafelter på en flate.

Når brukes den

  • Et sett med korte «label: verdi»-par som skal SKANNES i to eller flere kolonner — en seksjons nøkkeltall, en eiendoms data, et regnskapsårs nøkkeltall.

  • Verdien kan være tall, en Badge eller en lenke — komponenten legger ingen mening i innholdet, samme filosofi som Table sin celle.

  • Ikke bruk for en LISTE av ting som skal leses radvis — det er ListRow sin jobb.

  • Ikke bruk for tall som skal sammenlignes nedover en kolonne — det er Table sin jobb.

  • Ikke bruk for lengre fritekst — bruk Text eller Markdown.

Eksempler

Standard rutenett

Standard bruk: fire til seks faktafelt om en seksjon eller eiendom.

Seksjonsnummer

101

Etasje

3

Areal

62 m²

Eierbrøk

Ikke registrert

<DescriptionList items={[{ label: 'Areal', verdi: '62 m²' }, …]} />

Verdi som Badge

Verdien er et fritt ReactNode — her en Badge for en statusverdi i settet.

Status

Aktiv

Fornyes

1. januar 2027

Smalere kolonner

Sett `minColBredde` lavere når feltene er korte, for flere kolonner på samme bredde.

Rom

3

Bad

1

Balkong

Ja

Kjeller

Nei

Props

Sveip tabellen for å se hele innholdet

Navn
Type
Default
Beskrivelse
items *
{ label: string; verdi: ReactNode }[]
Faktafeltene som vises i rutenettet.
minColBredde
string
'10rem'
Minste kolonnebredde før rutenettet bryter til færre kolonner.
className
string
Ekstra klasser på rot-diven.

Beslektede komponenter