Als Grundlage für einen Hero wird ein Section Element mit der Klasse hero benötigt. Das Hintegrundbild hat ein Format von 4:3 und idealerweise mindestens eine Auflösung von 1800px Breite (1200px Höhe). Über dem Hintergrund liegt ein Verlauf, durch den der Hintergrund zusätzlich für bessere Lesbarkeit abgedunkelt werden kann.
Die Inhalte werden in der Div Box hero__content zusammen gefasst. Das Element ist eine Flexbox, die maximale Positionierungsmöglichkeiten für alle Child Elemente ermöglicht.
Am unteren Rand kann durch hero--arrow ein Schmuckelement als Übergang zum Inhaltsbereich eingefügt werden.
Die Headline kann mit hero__headline--bg-light oder hero__headline--bg-dark mit einem halbtransparenten Hintergrund abgesetzt werden.
Wenn man überlappenden Content im Anschluss an den Hero möchte, verwendet man den hero-overlap. Die Höhe der Überlappung kann über die Höhe der Div-Box hero__overlap eingestellt werden. Es genügt den direkt nachfolgenden Content innerhalb der Div-Box hero zu platzieren. Der Content der anschließend folgt, sollte außerhalb des Heros platziert werden.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Ein zusätzliches Bild kann in der Div Box hero__image hinzugefügt werden. hero__image wird absolut, relativ zum hero, positioniert und kann dadurch beliebig verschoben werden.
Ein Formular kann z.B. für ein Newsletter Signup auf dem Hero platziert werden.