Hero-Element
Das Hero-Element ermöglicht es dir, Text und Bild in unterschiedlichen Variationen zu kombinieren. Optional kannst du dem Element bis zu 2 Buttons hinzufügen, um die Aufmerksamkeit des Benutzers gezielt zu steuern.
Folgende Varianten stehen dir zur Verfügung, die auch miteinander kombiniert werden können:
- Hero mit Text links (Standard), zentriert oder rechts
- Hero mit Text vertikal mittig (Standard), oben oder unten
- Hero mit großen Text
- Hero mit dunklem Text
- Hero mit Text in Box
- Hero mit dunklem oder hellem Hintergrund
- Hero mit Hintergrund in Primärfarbe oder Sekundärfarbe
Wichtig:
Damit das Bild über die komplette Breite geht, muss der übergeordnete Artikel entweder die Klasse .article--hero haben oder im Layout-Bereich #hero eingefügt werden.
Nachfolgend ein paar Möglichkeiten, wie das Hero-Element aussehen kann:
Hero-Element - Text links (Standard)
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Hero mit großem Text
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Hero-Element - Text links + Text in Box
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Hero-Element - Text rechts + Text in Box
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Hero-Element - Text rechts + Text dunkel
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Hero-Element - Text oben + Hintergrund dunkel
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Hero-Element - Text unten rechts + Text dunkel + Hintergrund hell
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Hero-Element - Text unten + Hintergrund Primärfarbe
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Hero-Element - Text in Box + Hintergrund Primärfarbe
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Hero-Element - Text zentriert + Hintergrund Sekundärfarbe
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Hero-Element - mit Video als Hintergrund und Text in Box
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.