Hero

Großflächiger Seiteneinstieg für Startseiten und Landingpages. Unterstützt Hintergrundbilder mit automatischem Kontrast-Overlay, Links- und Zentrierausrichtung sowie eine kompakte Variante für Unterseiten. Bilder werden mit fetchpriority="high" priorisiert geladen.

Links ausgerichtet (Standard)

Startseite Klima-Werk Musterstadt

Standardmäßige Ausrichtung: Headline und Buttons links, Bild füllt den gesamten Hintergrund.

Klimaschutz für Musterstadt – fair und verlässlich

Förderprogramme, ÖPNV und Mobilitätswende aus einer Hand. Als kommunale Stelle seit 1948 fest verwurzelt in Ihrer Region.

Förderprogramme entdecken Persönlich beraten lassen

<Hero
  title="Klimaschutz für Musterstadt – fair und verlässlich"
  subtitle="Förderprogramme, ÖPNV und Mobilitätswende aus einer Hand. Als kommunale Stelle seit 1948 fest verwurzelt in Ihrer Region."
>
  <Button slot="actions" href="/foerderung">Förderprogramme entdecken</Button>
  <Button slot="actions" variant="outline" href="/kontakt">Persönlich beraten lassen</Button>
</Hero>

Zentriert

Zentrierter Hero für Kampagnen

Alle Elemente werden mittig ausgerichtet – ideal für Aktions- und Landingpages.

Bis zu 2.000 Euro Zuschuss für Ihre Solaranlage

Jetzt Förderantrag stellen und kombinierbar mit KfW. Transparent, regional, fair.

Jetzt Antrag stellen

<Hero
  title="Bis zu 2.000 Euro Zuschuss für Ihre Solaranlage"
  subtitle="Jetzt Förderantrag stellen und kombinierbar mit KfW. Transparent, regional, fair."
  align="center"
>
  <Button slot="actions" href="/solar">Jetzt Antrag stellen</Button>
</Hero>

Kompakt (Unterseiten)

Unterseiten-Header

Reduzierte Höhe für Kategorie- und Unterseiten. headingLevel kann angepasst werden, wenn bereits ein h1 auf der Seite vorhanden ist.

Stoerungs- und Wartungsservice

Schnelle Hilfe bei Problemen mit Ihrem Anschluss – 24 Stunden, 7 Tage die Woche.

<Hero
  title="ÖPNV-Stoerungsmelder & Service"
  subtitle="Schnelle Hilfe bei Verspätungen und Störungen im ÖPNV – live, transparent, mit Fahrgastrechten."
  compact
  headingLevel={2}
/>

Redakteur-Hinweise

Empfehlungen für wirkungsvolle Hero-Bereiche.

Element	Empfehlung
Headline	5–10 Wörter. Klare Aussage, kein Marketing-Jargon. Beispiel: „Klimaschutz für Musterstadt“ statt „Willkommen auf unserer Webseite“.
Subtitle	1–2 Sätze, max. 150 Zeichen. Ergänzt die Headline mit konkretem Nutzen oder Kontext.
Buttons	Max. 2 Buttons. Primär-Button mit klarer Handlung („Förderantrag stellen“), optional ein Sekundär-Button („Mehr erfahren“).
Hintergrundbild	Min. 1920×800px, dunkel genug für weissen Text. Keine Details in der Bildmitte (wird von Text verdeckt). Max. 300KB (WebP/AVIF).
Kompakt-Variante	Für Unterseiten. Kuerzere Headline (3–6 Wörter), keine Buttons nötig.

Installation

cp-components add hero