Skip to content

PageHeader

Überblick

mmm-page-header ist ein Seitenkopf für Überschriften, Einleitungen und optionale Rücknavigation.

Inputs

Input	Typ	Beschreibung
`eyebrow`	`string`	Kleine Überschrift oberhalb des Titels
`title`	`string`	Haupttitel
`icon`	`string`	Optionales Icon, typischerweise für Rücknavigation

Outputs

Output	Typ	Beschreibung
`icon-action`	`EventEmitter<void>`	Wird beim Klick auf das Icon ausgelost

SCSS-Variablen

Wichtige Variablen:

--mmm-page-header-gap
--mmm-page-header-margin-bottom
--mmm-page-header-eyebrow-font-size
--mmm-page-header-title-font-size
--mmm-page-header-description-font-size
--mmm-page-header-icon-width
--mmm-page-header-back-button-size
--mmm-page-header-back-button-radius

Hinweise

Der Fliesstext wird über Content Projection eingebunden.
Wird ein icon gesetzt, kann über (icon-action) eine Rücknavigation oder Sekundäraktion angebunden werden.

Beispiel

<mmm-page-header
  icon="pfeil_links_24"
  eyebrow="Antrag"
  title="Unsere grosse Überschrift"
  (icon-action)="goBack()"
>
  Beschreibungstext für die aktuelle Seite.
</mmm-page-header>