Hero
Mit dem Hero-Element kannst du Text, Bild 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.
NEU: Ab Version 3.1 kannst du Texte mit einem Bild kombinieren (zusätzlich zum Hintergrundbild) und dabei die Bildausrichtung (oben/links/rechts/unten) nutzen, die auch im Text-Element eingesetzt wird
Hero mit Bild links
Hier wird das Bild links und der Text im rechten Bereich des Hero-Elements ausgerichtet.
Hero mit Bild rechts
Hier wird das Bild rechts und der Text im linken Bereich des Hero-Elements ausgerichtet.
Hero mit Bild oben
Wenn keine Bildausrichtung gewählt ist, wird das Bild über dem Text angezeigt und der text zentriert ausgerichtet. Diese Darstellung könnte zum Beispiel für Produktbilder geeignet sein.
Hero mit Bild unten
Hier wird das Bild unter dem Text ausgerichtet und der Text zentriert ausgerichtet. Diese Darstellung könnte ebenfalls für Produktbilder geeignet sein.
Du kannst aber auch wie bisher den Text über die Optionen rechts anordnen, ohne ein Bild zu verwenden. Dafür 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 mit Text rechts
Hier wird der Text ohne Bild 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.