PageShell & PageHeader
@/components/PageShell
Sidebeholderen (marg, toppluft, maks-bredde) og sidetoppen (tittel, «i»-popover, handling) brukt på så godt som hver dashbord-side.
Når brukes den
PageShell som rot på hver innlogget side — ÉN definisjon av sidemarg (24→32px), toppluft (32→40px) og maks-bredde.
PageHeader som sidetopp: `title` er sidens offisielle navn (regel/sidetittel-er-kanonisk-navn), `children` er den synlige formålslinjen, `info` er for DYPERE detalj (metodikk/lovhjemler) i en «i»-popover.
`width="narrow"` for innstillinger/enkle skjema, `"content"` (standard) for skjema/lister, `"wide"` for tabeller/grids, `"full"` for dashbord-grid.
Håndrull aldri PageHeaders `flex-wrap` + `flex-1 min-w-[16rem]`-mønster lokalt — se toppkommentaren i PageHeader.tsx for hvorfor akkurat den kombinasjonen er bevisst (en lang formålslinje kunne ellers dytte handlingen til feil side ved linjebrudd).
Eksempler
width="narrow"
Smal kolonne for innstillinger og enkle skjema (maks 2xl).
Vedlikeholdsplan
Kort formålslinje som forklarer hva siden er til.
Sideinnhold …
width="content"
Standard: lesbar kolonne for skjema og lister (maks 4xl).
Vedlikeholdsplan
Kort formålslinje som forklarer hva siden er til.
Sideinnhold …
width="wide"
Bredere innhold med tabeller/grids (maks 5xl).
Vedlikeholdsplan
Kort formålslinje som forklarer hva siden er til.
Sideinnhold …
width="full"
Ingen maks-bredde — dashbord-grid som fyller flaten.
Vedlikeholdsplan
Kort formålslinje som forklarer hva siden er til.
Sideinnhold …
Uten info og handling
PageHeader fungerer også bart — kun tittel og formålslinje, uten «i»-popover eller handlingsknapp.
Innstillinger
Administrer varsler, roller og integrasjoner.
<PageShell width="content">
<PageHeader title="Innstillinger">
<Text variant="copy-14" tone="secondary">Formålslinje …</Text>
</PageHeader>
</PageShell>Props
Sveip tabellen for å se hele innholdet