Hero
Mit dem Hero-Element kannst du Text und Links auf einem Pseudo-Hintergrundbild platzieren.
Wichtig: Du musst dem Artikel die Klasse .hero hinzufügen, damit sich das Bild über die gesamte Breite erstreckt.
Im Hero-Element stehen dir folgende Optionen/Varianten zur Verfügung, die teilweise miteinander kombiniert werden können.
- ohne Option: Text steht auf der linken Hälfte des Bildes
- Hero Text rechts: Text steht auf der rechten Hälfte des Bildes
- Hero Text dunkel: Text wird in Textfarbe (Standardmäßig schwarz) dargestellt
- Hero SM: Die Höhe des Hero-Elements wird ausschließlich durch den Inhalt definiert
- Hero DM: wie Hero SM, nur mit erhöhten Abstand zur oberen und unteren Kante.
Hero
Standardmäßig wird der Text im linken Bereich des Hero-Elements ausgerichtet. Es gibt aber auch die Möglichkeit, den Text auf der rechten Seite zu platzieren.
Hero mit Text rechts
Hier wird der Text auf dem Desktop im rechten Bereich dargestellt.
Hero Text rechts + dunkle Textfarbe
Hier wird der Text auf dem Desktop im rechten Bereich dargestellt und hat außerdem die normale Textfarbe.
Hero SM
Mit der Option Hero SM (hero--sm) bestimmt die Höhe des Bildes nicht länger die Höhe des Elements. Stattdessen wird Höhe ausschließlich auf Basis des Textes berechnet. Bei der Option Hero MD (hero--md) wird zusätzlich der Abstand des Textes zur oberen und unteren Kante erhöht.
Hero MD
Mit der Option Hero SM (hero--sm) bestimmt die Höhe des Bildes nicht länger die Höhe des Elements. Stattdessen wird Höhe ausschließlich auf Basis des Textes berechnet. Bei der Option Hero MD (hero--md) wird zusätzlich der Abstand des Textes zur oberen und unteren Kante erhöht.