Seitenkopf (Page Header) — component.page-header
App-Seitenkopf (Untitled-UI-Muster): Titel + Beschreibung links, Aktions-Buttons rechts (Varianten wie Nav-Aktionen), optionale Trennlinie
Componentv1.0.1Navigationweb.applicationdesktop.shellbuilder.preview
Beispiele
App-Seitenkopf mit Beschreibung und zwei Aktionen
Aufträge
Verwalte offene und abgeschlossene Aufträge deines Teams.
Eigenschaften
| Prop | Typ | Default |
|---|---|---|
title * | string | — |
description | string | "" |
actions | array | [] |
divider | boolean | true |
spacing | string: default | none | sm | md | lg | xl | "default" |
Stellschrauben (Komponenten-Tokens)
| 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.hairline color.action.on-primary color.action.on-secondary color.action.primary color.action.primary-hover color.action.secondary color.action.secondary-border color.action.secondary-hover color.border.default color.text.default color.text.muted elevation.control font.family.default font.family.display leading.tight radius.control size.12 size.2 size.4 size.5 size.6 size.8 text.2xl text.md text.sm weight.semibold