Der Paragraph "Hero" besteht aus einem wirkungsstarken Bild im Hintergrund mit Titel und optionalem Untertitel.
Wenn "Hero" nicht innerhalb eines Containers verwendet wird, wird das Bild auf dem Desktop standardmässig 20% breiter als der restliche Content ausgegeben. Optional auch über die gesamte Seitenbreite. Innerhalb eines Containers wird das "Hero"-Element normal breit dargestellt. Als Bild wird üblicherweise ein hochauflösendes, speziell breites JPG verwendet.
Enthält das Hero-Hintergrundbild ein Objekt, kann dieses horizontal oder vertikal vor überlappung mit Titel geschützt werden. Auf mobilen Geräten wird dann der Titel unterhalb dem Bild ausgegeben.
Weitere Stilvarianten stehen für zur Steigerung der Wirkung mit mehr Bildhöhe und Verbesserung der Lesbarkeit von Titel durch Einsatz von Boxen / Schatten.
Bild & Titel & Untertitel
Lorem ipsum
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
Zahlreiche Darstellungs-Varianten
Die Darstellung von Hero-Elementen kann mit verschiedenen Einstellungen beeinflusst werden.
Nur Bild
Nur Bild & Titel
Die Bilder sind in der Regel speziell breit und enthalten Bereiche mit z.B. Unschärfe oder Elementen mit wenig Kontrastvariationen, welche besonders geeignet sind für die Überlagerung mit Text.
Lorem ipsum
Design Varianten
Zusätzliche Stile
Unterstützte Medienformate
Interaktive Effekte
Dies ist eine Seite mit Blindtext.
Inhalt mit dem Wortlaut "Lorem Ipsum" für rein demonstrative Zwecke.