Design

SectionHeader

@/components/ui/SectionHeader

Overskrift for en SEKSJON inne i en side — tittel, én kort forklaringssetning og en valgfri handling til høyre.

Når brukes den

  • Overskriften for en seksjon INNE i en side — ikke sidetoppen selv, det er PageHeader sin jobb.

  • En valgfri `action` til høyre (typisk en «Ny …»-knapp) — header-right-mønsteret.

  • `eyebrow` for å plassere seksjonen i en kategori eller et foreldrenivå (f.eks. hvilket bygg den hører til) uten å gjøre det til en del av selve tittelen.

  • Beskrivelsen skal være ÉN setning — lengre forklaring hører hjemme i brødtekst under, ikke i denne linjen.

Eksempler

Standard

Tittel, beskrivelse, ikon og en handling — den vanligste kombinasjonen.

HMS-kontroller

Kontrollpunkter for bygget, med siste sjekk-dato.

<SectionHeader title="HMS-kontroller" description="…" icon={Hms} action={<Button size="sm">Ny kontroll</Button>} />

Med eyebrow

Liten overline-linje over tittelen for et foreldrenivå — her hvilket bygg seksjonen hører til.

Bygg A · Sameiet Bryggen Panorama

HMS-kontroller

Kontrollpunkter for bygget, med siste sjekk-dato.

Kun tittel

Minimal bruk uten ikon, beskrivelse eller handling — for en enkel seksjonsdeling.

Andre dokumenter

Props

Sveip tabellen for å se hele innholdet

Navn
Type
Default
Beskrivelse
title *
string
Seksjonens tittel.
eyebrow
string
Liten overline-linje over tittelen (kategori/foreldrenivå).
description
string
Én kort setning som forklarer seksjonen.
icon
IconComponent
Valgfritt ledende ikon foran tittelen, i text-secondary.
action
React.ReactNode
Høyrestilt handling (knapp/lenke).
className
string
Ekstra klasser på rot-diven.

Beslektede komponenter