Server-Komponente

Headline wird bevorzugt auf dem Server gerendert. Nutze den Standard-Import (z. B. @prokodo/ui/headline) — die Library erkennt die Umgebung automatisch.

Headline

Headline rendert eine typografische Überschrift (h1–h6) mit angewendeter Design-Token-Typografie. Unterstützt visuelle Größen-Overrides, die die visuelle Darstellung von der semantischen Ebene entkoppeln.

---

Übersicht

import { Headline } from "@prokodo/ui/headline"
;<Headline level={1} size="h2" animated>
  Willkommen bei prokodo UI
</Headline>

Live PreviewOpen in Storybook ↗

---

Import

import { Headline } from "@prokodo/ui/headline"

CSS:

import "@prokodo/ui/headline.css"

---

Props

Prop	Typ	Standard	Pflicht	Beschreibung
children	ReactNode	—	✅	Überschriften-Inhalt.
type	"h1" | "h2" | "h3" | "h4" | "h5" | "h6"	"h2"	—	Gerendertes HTML-Überschriften-Tag.
size	"xxl" | "xl" | "lg" | "md" | "sm" | "xs" | number	—	—	Visuelles Größen-Preset oder numerische Skala.
color	HeadlineVariant	—	—	Text-Farb-Variante.
weight	"normal" | "bold" | "light"	—	—	Schriftstärke-Override.
align	"left" | "center" | "right"	—	—	Textausrichtung.
highlight	string	—	—	Hervorgehobener Teilstring.
schema	boolean	false	—	JSON-LD-Schema-Markup ausgeben.
animationProps	AnimatedProps	—	—	Einblend-Animations-Konfiguration.
className	string	—	—	CSS-Klasse am Root-Element.

Siehe src/components/headline/Headline.model.ts für den vollständigen HeadlineProps-Typ.

---

Design-Tokens

Headline definiert keine komponentenspezifischen CSS Custom Properties. Passe das Erscheinungsbild an, indem du folgende globale Design-System-Tokens auf :root oder einem übergeordneten Element überschreibst:

Token	Beschreibung
--pk-color-fg	Textfarbe für color="inherit"
--pk-color-brand	Textfarbe für color="primary"
--pk-color-accent	Textfarbe für color="secondary"
--pk-color-muted	Textfarbe für color="info"
--pk-color-success	Textfarbe für color="success"
--pk-color-warning	Textfarbe für color="warning"
--pk-color-error	Textfarbe für color="error"
--pk-palette-white	Textfarbe für color="white"
--pk-palette-black	Textfarbe für color="black"

---

WCAG-2.2-Status

Kriterium	Bezeichnung	Status	Hinweis
1.3.1	Info und Beziehungen (A)	✅ Erfüllt	Semantische Struktur (Überschriften, Listen, Labels, Landmarks) muss programmatisch via HTML oder ARIA vermittelt werden.
1.3.2	Bedeutungsvolle Reihenfolge (A)	🔍 Manuell prüfen	Die Lesereihenfolge im DOM muss der beabsichtigten visuellen Darstellungsreihenfolge entsprechen.
1.4.3	Kontrast (Minimum) (AA)	🔍 Manuell prüfen	Text benötigt ein Kontrastverhältnis von mindestens 4,5:1 (3:1 für großen Text). Prüfung im finalen Produkt-Theme erforderlich.
2.4.6	Überschriften und Bezeichnungen (AA)	🔍 Manuell prüfen	Überschriften und Labels müssen das Thema oder den Zweck des zugehörigen Inhalts beschreiben.
4.1.2	Name, Rolle, Wert (A)	✅ Erfüllt	Name, Rolle und Zustand aller interaktiven UI-Komponenten müssen via nativer HTML-Semantik oder ARIA programmatisch bestimmbar sein.

Testabdeckung: 3 jest-axe-Assertion(s) in 1 Testdatei(en) · 1 ARIA-Attribut-Vorkommen im Quellcode-Scan. Kriterien mit 🔍 erfordern manuelle Prüfung im finalen Integrations- und Theme-Kontext.

Storybook

👉 Headline in Storybook öffnen

---

Quellcode

src/components/headline/Headline.model.ts