ListRow
@/components/ui/ListRow
Den ene flate listeraden — brukes i en flat, delelinje-delt beholder, aldri ett kort per element.
Når brukes den
Bruk for en liste der raden har en tilhørende HANDLING (klikk for detaljer, rediger, slett, godkjenn).
Tittelen (label-14, vekt 500) er ALLTID tydeligere enn secondary/meta (label-13, vanlig vekt) — hovedteksten skal aldri drukne i støttetekst.
secondary for korte fakta inline etter tittelen (dempet, med «·» mellom flere), value for et høyrestilt tall/beløp/dato med tabellsifre.
subtitle er unntaket, ikke normalen: kun for lengre tekst som ikke får plass på én linje.
details+expanded for en accordion under raden — kun for å LESE mer, aldri for handlinger (bruk Modal til det).
Bruk Table i stedet når raden er en ren datacelle uten egen handling eller identitet.
Eksempler
Standard rad med verdi og handling
leading-ikon, tittel med korte fakta inline (secondary), en brikke (meta), et høyrestilt beløp (value) og en klikkbar rad.
<ListRow
leading={<Dokument size={16} />}
title="Faktura 2026-0412"
secondary={['Heisservice AS', 'Vedlikehold', 'Forfall 20. sep']}
meta={<Badge>Til godkjenning</Badge>}
value="12 480 kr"
trailing={<ChevronHoyre size={14} />}
onClick={() => apneFaktura(id)}
/>subtitle — unntaket, ikke normalen
Kun for lengre tekst som ikke er korte fakta — egen linje under tittelen, maks to linjer (line-clamp-2).
Accordion (details + expanded)
Detaljen rendres som SØSKEN under raden, kun synlig når expanded — for å LESE mer, aldri for handlinger.
Smal beholder — to linjer
Under 28rem (container query, ikke skjermbredde) faller raden til to linjer automatisk. Denne rada ligger i en 22rem-kolonne.
href — lenke-rad
Rendres som en <Link> i stedet for en klikkbar <div>. Gjensidig utelukkende med onClick.
Props
Sveip tabellen for å se hele innholdet