Page Header Layout

Die page_header Komponente zeigt einen auffälligen Kopfbereich mit geometrischen Verzierungen, einem Titel, einer optionalen Beschreibung und Aktionsschaltflächen an. Der Kopfbereich ist in der Primärfarbe gehalten, um sich vom Seiteninhalt abzuheben.

WCAG AA

Funktionen

  • Geometric decorations: Distinctive visual patterns for branding.

  • Titel und Beschreibung: Überschrift mit optionalem Begleittext.

  • Aktionsschaltflächen: Konfigurierbare Schaltflächen für Hauptaktionen.

  • Primary color theming: Uses the brand's primary color for visual impact.

HTML

Verwendung

Die Komponente wird über das page_header Tag eingebunden.

{% load insight_tags %} {% block heading %} {# With chapter for hierarchical titles #} {% page_header chapter="My App" title="Dashboard" description="Welcome to your personal dashboard." %} {# Without chapter for standalone pages #} {% page_header title="About Us" description="Learn more about our company." %} {% endblock heading %}

Parameter

Laden…

config (PageHeaderConfig oder als kwargs oder als Kombination aus beidem)

Dataclass für die Komponentenkonfiguration.

Name Typ Beschreibung Standardwert Erforderlich
title str

Der Titel der Startseite, welcher in der Primärfarbe deutlich hervorgehoben angezeigt wird.

 None True
chapter str

Optionales Kapitel, das vor dem Titel in dezenter Darstellung angezeigt wird.

 "" False
description str | list[str]

Eine optionale Beschreibung unterhalb des Titels.

 "" False
badges

Optionale Liste von Badges, welche unterhalb der Beschreibung angezeigt wird.

 [] False
buttons

Optionale Liste von Aktionsschaltflächen, welche unterhalb der Badges angezeigt wird.

 [] False
PageHeaderConfig( title="Page Header", chapter="Insight UI", description="A header component for documentation pages.", badges=[BadgeConfig(label="New", type="success")], buttons=[ButtonConfig(label="Get Started", request_url="/start")], )

Barrierefreiheit

WCAG AA WCAG AAA
Status
N/A

WCAG AA (Grundlagen)

  • Der Titel wird als semantisches <h1> Element gerendert.

  • Die Beschreibung verwendet ein <p> Element mit ausreichendem Farbkontrast.

  • Die dekorative Hintergrundgrafik wird mithilfe von aria-hidden='true' ausgeblendet.

  • CTA-Buttons sind als Link-Elemente mit klarer Beschriftung implementiert.

Verwandte Themen