DisplayHeading

Oversized Editorial-Headline mit fluider Container-Typografie. Vier Größen-Stufen — alle über cqi, also relativ zur Container-Breite (nicht der Viewport). Optionaler Eyebrow mit Akzent-Linie, Accent-Slot via <em> und text-wrap: balance. Brand-Tokens, optical-sizing.

Vier Größen

Von md bis hero — alle fluid skalierend ohne Media Queries.

Alle Größen im Vergleich

hero: clamp(3rem, 16cqi, 8.5rem) — xl: bis 6rem — lg: bis 4.25rem — md: bis 2.75rem. Alle über cqi, nicht vw.

Mobilitätswende 2030

Klimaschutz im Quartier

Förderung beantragen

Nächste Schritte

<DisplayHeading size="hero">Mobilitätswende 2030</DisplayHeading>
<DisplayHeading size="xl">Klimaschutz im Quartier</DisplayHeading>
<DisplayHeading size="lg">Förderung beantragen</DisplayHeading>
<DisplayHeading size="md" as="h3">Nächste Schritte</DisplayHeading>

Tracking-Varianten

Letter-Spacing beeinflusst die Lesbarkeit bei großen Schriften stark. tight wirkt moderner, wide klassischer.

Tracking tight / normal / wide

tracking="tight"

KfW-Förderung 2026

tracking="normal"

KfW-Förderung 2026

tracking="wide"

KfW-Förderung 2026

<DisplayHeading size="lg" tracking="tight">KfW-Förderung 2026</DisplayHeading>
<DisplayHeading size="lg" tracking="normal">KfW-Förderung 2026</DisplayHeading>
<DisplayHeading size="lg" tracking="wide">KfW-Förderung 2026</DisplayHeading>

Hero-Variante mit Eyebrow und Accent

Eyebrow gibt dem Heading Kontext. Das Accent-<em> hebt ein einzelnes Wort farblich hervor.

Hero — Landingpage-Einstieg

Klimaschutzkonzept 2030

Mobilitätswende. Jetzt.

<DisplayHeading size="hero" eyebrow="Klimaschutzkonzept 2030" balance>
  Mobilitätswende. <em>Jetzt.</em>
</DisplayHeading>

text-wrap: balance Vergleich

Ohne balance kann ein einzelnes Wort in die nächste Zeile rutschen. Mit balance werden die Zeilen gleichmäßig verteilt.

balance true vs. false

balance= (Standard)

Nachhaltige Mobilität für alle Stadtteile und Quartiere

balance=true

Nachhaltige Mobilität für alle Stadtteile und Quartiere

<!-- Ohne balance -->
<DisplayHeading size="xl" balance={false}>
  Nachhaltige Mobilität für alle Stadtteile und Quartiere
</DisplayHeading>

<!-- Mit balance -->
<DisplayHeading size="xl" balance>
  Nachhaltige Mobilität für alle Stadtteile und Quartiere
</DisplayHeading>

Visuelle Variants

Fünf Variants steuern die visuelle Behandlung des Heading-Texts. default ist das Bestandsverhalten. Die anderen vier sind für editoriale Statement-Momente gedacht — sparsam einsetzen.

variant="outline" — Hollow-Stroke

-webkit-text-stroke mit color: transparent. Fallback auf solide Farbe für Browser ohne Support. prefers-contrast: more setzt auf solide Farbe zurück.

Klimaneutral bis 2040

<DisplayHeading size="xl" variant="outline" balance>
  Klimaneutral bis 2040
</DisplayHeading>

variant="stencil" — Cutout-Effekt

mask-image: linear-gradient schneidet einen diagonalen Streifen aus dem Schriftzug. Solid-Füllung bleibt sichtbar. Kein JS, kein SVG.

Mobilitätswende. Jetzt.

<DisplayHeading size="xl" variant="stencil" balance>
  Mobilitätswende. Jetzt.
</DisplayHeading>

variant="gradient" — Gradient-Fill

background-clip: text mit linear-gradient von --color-brand-primary zu --color-brand-foreground. Fallback auf solide Farbe ohne @supports background-clip.

Förderprogramm 2026

Erneuerbar. Regional. Wirksam.

<DisplayHeading size="hero" variant="gradient" eyebrow="Förderprogramm 2026" balance>
  Erneuerbar. Regional. Wirksam.
</DisplayHeading>

variant="gradient-animated" — Animierter Gradient

Wie gradient, aber der Winkel rotiert via @property --dh-gradient-angle (8s, linear, infinite). prefers-reduced-motion: reduce hält den Gradient statisch. Nur für Hero-Moments — nicht für Zwischen-Headlines.

Klimaziele 2030

<DisplayHeading size="hero" variant="gradient-animated" balance>
  Klimaziele 2030
</DisplayHeading>

View-Transition-Prop

Mit transitionName wird ein view-transition-name auf das Heading-Element gesetzt — für seitenübergreifende Heading-Übergänge. Nur nutzen, wenn der Inhalt auf der Zielseite semantisch denselben Kontext hat.

transitionName — View-Transition-Anker

Setzt view-transition-name als inline style. Kein visueller Unterschied im Normalbetrieb — wirkt erst bei page-transition.

KfW-Förderung beantragen

<DisplayHeading size="lg" transitionName="foerderung-heading">
  KfW-Förderung beantragen
</DisplayHeading>

Redakteur-Hinweise

DisplayHeading ist für prominente Seiteneinleitung gedacht — nicht für Zwischenüberschriften im Fließtext.

Element	Empfehlung	Beispiel
Größe	hero/xl nur einmal pro Seite. lg für Section-Opener. md für Sub-Sections.	✓ hero nur im Seitenkopf ✕ hero mitten im Artikel
Eyebrow	1–5 Wörter, gibt Kontext. Nicht als Ersatz für Breadcrumbs verwenden.	✓ "Förderprogramm 2026" ✕ "Hier können Sie mehr erfahren"
Heading-Level	`as`-Prop immer an die Dokument-Hierarchie anpassen. Seitenhauptthema = h1, Abschnitt = h2.	✓ as="h1" für den Seitentitel ✕ Mehrere h1 pro Seite
Text	2–10 Wörter, praegnant. Mit `balance` bei mehrzeiligen Headings arbeiten.	✓ "Mobilitätswende. Jetzt." ✕ Mehr als zwei Zeilen Text

Installation

cp-components add displayheading