Heroes
Corekit bietet zwei Hero-Module für großflächige Einstiegs-Bereiche. Hero Variant A zeigt ein Split-Layout mit Bild und Text nebeneinander, als Einzelslide oder Slider mit Navigation. Hero Variant B setzt auf Full-Size-Hintergründe oder 50/50-Layouts mit Bild, Video oder reinem Text, in verschiedenen Theme- und Overlay-Kombinationen.
Hero Variant A
Hero Variant B
Full Size (Theme 0)
Heller Hintergrund mit dunklem Text. Optionaler Slot für kundenspezifische Animationen.
Full Size (Theme 1)
Dunkler Hintergrund mit hellem Text. Optionaler Slot für kundenspezifische Animationen.
Full Size Image (Light)
Ganzflächiges Hintergrundbild ohne Abdunklung mit dunklem Text.
Full Size Image (Dark)
Ganzflächiges Hintergrundbild mit Overlay-Abdunklung und hellem Text.
Full Size Video (Light)
Vollbild-Video ohne Abdunklung mit dunklem Text. Für helle Video-Hintergründe.
Full Size Video (Dark)
Vollbild-Video mit Overlay-Abdunklung und hellem Text. Für emotionale Einstiege.
50/50 Image
Bild und Text teilen sich den Viewport hälftig. Für Produkt-Intros und Feature-Seiten.
50/50 Video
Video auf einer Hälfte, Text auf der anderen. Ideal für Erklär-Einstiege und Demos.
Häufige Fragen zu den Hero Modulen
Die Headline kann als h1, h2, h3 oder h4 im HTML gesetzt werden. Unabhängig davon wird sie visuell immer im Stil von h1 dargestellt. So bleibt die Semantik korrekt (nur ein h1 pro Seite), während die Optik einheitlich groß bleibt.
Beide Varianten unterstützen optional bis zu 2 CTAs pro Slide. Die Button-Klasse ist frei wählbar: Primary, Secondary, Outline, Ghost oder Link. Bei Hero Variant B gibt es zusätzlich einen CTA-Separator, ein Trenntext (z.B. „oder“) zwischen den beiden Buttons.
Die Show Animation ist ein optionaler Slot für kundenspezifische Animationen, der nur beim Display Type Full Size (ohne Bild/Video) verfügbar ist. Pro Projekt kann über das Override-System eine individuelle Animation hinterlegt werden, z.B. animierte Illustrationen, Partikel-Effekte oder Lottie-Animationen. In den Modulen ist keine Animation aktiv.
Das Overlay steuert die Abdunklung über dem Hintergrundbild oder -video. Es sorgt dafür, dass der Text lesbar bleibt. Overlay ist nur bei den Display Types Full Size Image, Full Size Video, 50/50 Image und 50/50 Video verfügbar, nicht beim reinen Full Size (Text only).
Theme 0 ist das helle Theme: heller Hintergrund mit dunklem Text. Theme 1 ist das dunkle Theme: dunkler Hintergrund (Primary Color) mit hellem Text. Die konkreten Farben hängen von den Design Tokens des jeweiligen Projekts ab.
Variant A ist ein Split-Layout: Bild und Text stehen nebeneinander, mit vier Layout-Optionen (Bild links/rechts, oben/unten auf Mobile). Unterstützt Richtext, Subline und bis zu 2 CTAs pro Slide.
Variant B setzt auf großflächige Hintergründe (Bild, Video oder reine Farbe) mit überlagerndem Text. Kein Richtext, dafür Overlay, Theme-Steuerung und optionale kundenspezifische Animationen.