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:

  • hero
  • hero--full
  • hero--small

Für die Elemente stehen dir folgende Klassen zur Verfügung:

  • hero__image
  • hero__text
  • hero__text--left
  • hero__text--right
  • hero__text--top
  • hero__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.