Hero
Sogenannte Hero-Images sind eine Kombination aus Artikel, Bild- und Text-Element. Du musst dem Artikel mindestens die Klasse .hero hinzufügen, damit sich das Bild über die gesamte Breite erstreckt.
Für den Artikel stehen dir folgende Klassen zur Verfügung:
herohero--fullhero--small
Für die Elemente stehen dir folgende Klassen zur Verfügung:
hero__imagehero__texthero__text--lefthero__text--righthero__text--tophero__text--bottom
Hero Images werden in SOLO über die CSS3-Eigenschaft object-fit realisiert, um das Bild unabhängig vom eigenen Format flächenfüllend darzustellen. Es ist sozusagen eine background-size Eigenschaft für Bildelemente. Der Support für object-fit ist mittlerweile sehr gut, lediglich alte Internet Explorer unterstützen die Anweisung noch nicht. Wenn du den IE noch unterstützt, kannst du im Seitenlayout den Polyfill j_object-fit.html5 jQuery-Templates aktivieren.
Hero
Der Text wird durch die Klasse .hero__text ergänzt und besitzt weitere Optionen wie .hero__text--left, .hero__text--right, .hero__text--top und .hero__text--bottom.
Hero Hero--Full
Dieser Text wird durch die Klasse .hero__text und .hero__text--left ergänzt und ist dadurch linksbündig ausgerichtet.
Lorem Ipsum
Der Text wird durch die Klasse .hero__text ergänzt und besitzt weitere Optionen wie .hero__text--left, .hero__text--right, .hero__text--top und .hero__text--bottom.
Hero Hero--Small Hero__Text--Right
Dieser Text wird durch die Klasse .hero__text und .hero__text--right ergänzt und ist dadurch rechtsbündig ausgerichtet.