Seitenkopf (Page Header)
App-Seitenkopf (Untitled-UI-Muster): Titel + Beschreibung links, Aktions-Buttons rechts (Varianten wie Nav-Aktionen), optionale Trennlinie
Beispiele
App-Seitenkopf mit Beschreibung und zwei Aktionen
Aufträge
Verwalte offene und abgeschlossene Aufträge deines Teams.
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| title * | string | — | Titel |
| description | string | "" | Beschreibung |
| actions | array | [] | Aktionen rechts |
| divider | boolean | true | Trennlinie unten |
| spacing | string: default | none | sm | md | lg | xl | "default" | Eigenabstand |
* Pflicht-Prop
Stellschrauben (Komponenten-Tokens)
Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.
| Token | Default |
|---|---|
--header-action-bg | var(--color-action-secondary) |
--header-action-bg-hover | var(--color-action-secondary-hover) |
--header-action-text | var(--color-action-on-secondary) |
--header-action-border | var(--color-action-secondary-border, transparent) |
Genutzte Design-Tokens
border.hairlinecolor.action.on-primarycolor.action.on-secondarycolor.action.primarycolor.action.primary-hovercolor.action.secondarycolor.action.secondary-bordercolor.action.secondary-hovercolor.border.defaultcolor.text.defaultcolor.text.mutedelevation.controlfont.family.defaultfont.family.displayleading.tightradius.controlsize.12size.2size.4size.5size.6size.8text.2xltext.mdtext.smweight.semibold