Hero Area

Als Hero-Areas werden die großen werbewirksamen Bereiche direkt unter dem Header bezeichnet. Meist großflächige Bilder mit Text und CTA darauf.

Zurück zur Übersicht

Variante 1 (Homepage)

Einfache Hero Area mit Text auf Hintergrund Bild und farbigen Overlay

Homepage Hero Area Title

Ich bin die Beschreibung. Der Hero Area Titel ist zwar sehr groß aber keine h1.
Die Formatierung ist nicht gleichzusetzen mit der Auszeichnung.

Mehr erfahren

Variante 2 (Homepage)

Large Hero Area für transparente Header (Header mit Logo und navi überlagert die Hero Area) mit Text auf Hintergrund Bild und farbigen Overlay Verlauf. Hier zur Veranschaulichung auch mit nachfolgender farblich passender Intro Section.

Homepage Hero Area Title

Ich bin die Beschreibung. Der Hero Area Titel ist zwar sehr groß aber keine h1.
Die Formatierung ist nicht gleichzusetzen mit der Auszeichnung.

Mehr erfahren

Ich bin eine h2 mit Icon-Line-Separator darunter

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Variante 3 (Homepage)

Hero Area im boxed Design mit doppeltem Rahmen (Custom CSS)

Info Box

Enter description text here. Lorem ipsum dolor sit amet, consectetur adipiscing. Quo incidunt ullamco.

Hinweis Varianten:

Ab hier folgen die Hero-Area Varianten die primär für den Einsatz auf Unterseiten angedacht sind.
Diese zeichnen sich in der Regel durch eine geringere Gesamthöhe aus.

Variante 1 (Unterseiten)

Einfache Hero Area mit Text auf Hintergrund Bild und farbigen Overlay

Unterseite Hero Area Title

Ich bin die Beschreibung. Der Hero Area Titel ist zwar sehr groß aber keine h1.

Mehr erfahren

Variante 2 (Unterseiten)

Unterseite Hero Area Title

Ich bin die Beschreibung. Der Hero Area Titel ist zwar sehr groß aber keine h1.

Mehr erfahren

Ich bin eine h2 mit Icon-Line-Separator darunter

Variante 3 (Unterseiten)

Hero Area im boxed Design mit doppeltem Rahmen (Custom CSS). Dies ist ebenfalls die Variante 3 jedoch mit einem flachen Seitenverhältnis in den Zeileneinstellungen

Info Box

Enter description text here. Lorem ipsum dolor sit amet, consectetur adipiscing. Quo incidunt ullamco.

Hinweise für Entwickler:

.arc-hero-area | Allg. Klasse für alle Variationen dieses Moduls.

.arc-hero-area--var-{n} | {n} wird hier jeweils durch die Nummer der Variante ersetzt und bezeichnet die Hero Areas für Homepages

.arc-hero-area--sub-var-{n} | {n} wird hier jeweils durch die Nummer der Variante ersetzt und bezeichnet die Hero Areas für Unterseiten

Hinweis: Layout CSS muss exportiert werden.