Heroes
Corekit offers two hero modules for large entry areas. Hero Variant A shows a split layout with image and text side by side, as a single slide or slider with navigation. Hero Variant B uses full-size backgrounds or 50/50 layouts with image, video or plain text, in various theme and overlay combinations.
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.
Frequently Asked Questions about the Hero Modules
The headline can be set as h1, h2, h3 or h4 in the HTML. Regardless of this it is always displayed visually in the style of h1, so the semantics remain correct (only one h1 per page) while the appearance stays consistently large.
Both variants optionally support up to 2 CTAs per slide. The button class is freely selectable: Primary, Secondary, Outline, Ghost or Link. Hero Variant B also has a CTA separator, a divider text (e.g. "or") between the two buttons.
The Show Animation is an optional slot for project-specific animations that is only available with the Full Size display type (without image/video). A custom animation can be registered per project via the override system, e.g. animated illustrations, particle effects or Lottie animations. No animation is active in the modules.
The overlay controls the darkening over the background image or video. It ensures the text remains readable. The overlay is only available with the Display Types Full Size Image, Full Size Video, 50/50 Image and 50/50 Video, not for plain Full Size (text only).
Theme 0 is the light theme: light background with dark text. Theme 1 is the dark theme: dark background (primary color) with light text. The specific colors depend on the design tokens of the respective project.
Variant A is a split layout: image and text sit side by side, with four layout options (image left/right, stacked on mobile). Supports richtext, subline and up to 2 CTAs per slide.
Variant B uses large-scale backgrounds (image, video or solid color) with overlaid text. No richtext, but overlay, theme control and optional project-specific animations.