DokumentationHeros

Hero Standard

{{> layout/hero-default btn1Text="Termin buchen" btn1IconLeft="hwki-kalender" btn2Text="Anrufen" btn2Type="btn-light" btn2IconLeft="hwki-kontakt" }} {{> layout/hero-default variant="bg-blue-400" btn1Text="Termin buchen" btn1IconLeft="hwki-kalender" btn2Text="Anrufen" btn2Type="btn-light" btn2IconLeft="hwki-kontakt" }} {{> layout/hero-default variant="bg-green-dark-400" btn1Text="Termin buchen" btn1IconLeft="hwki-kalender" btn2Text="Anrufen" btn2Type="btn-light" btn2IconLeft="hwki-kontakt" }} {{> layout/hero-default variant="bg-orange-400" btn1Text="Termin buchen" btn1IconLeft="hwki-kalender" btn2Text="Anrufen" btn2Type="btn-light" btn2IconLeft="hwki-kontakt" }}

Topline
Headline
Text
Buttons
Hintergrund: weiß, Hellblau 400, Orange 400, Dunkelgrün 400

Html Struktur Hero Default


 <div class="hero hero-default container-fluid pb-8">
    <div class="container-fluid bg-blue-400">
        <div class="container">
            <div class="row align-items-center">
                <div class="hero-image col-xl-7 order-xl-last">
                    <figure class="figure mb-0 mb-xl-n8">
                        <img class="img-7x6" src="..." alt="...">
                        <figcaption class="figure-caption caption-inside text-end top-1 top-xl-auto">...</figcaption>
                    </figure>
                </div>
                <div class="hero-content bg-blue-400 col-12 col-xl-5 p-4">
                    <h2 class="display-1"><span class="topline">...</span>...</h2>
                    <p>...</p>
                    <div class="d-flex gap-4 flex-column flex-md-row flex-md-wrap">
                        <a href="#" class="btn btn-default">... <i class="hwki hwki-pfeil-rechts" aria-hidden="true"></i></a>
                        <a href="#" class="btn btn-light"><i class="hwki hwki-kontakt" aria-hidden="true"></i> ... </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Die Klasse .hero bewirkt, dass auf kleineren Geräten, der Text in .hero-content auf einem weißen Kasten unterhalb des Bildes erscheint. Das Bild selbst bekommt dann einen anderen Ratio zugewiesen.

Um den Farbwechsel auf allen Geräten zu ermöglichen, benötigen wir die bg-color Klasse an zwei Stellen.

Hero Fullscreen

Ausrichtung links / rechts

{{!--hero image fullscreen / text left --}} {{> layout/hero-img-full-text image="./uploads/hero-fullscreen.jpg" imgClass="object-position-right object-position-xl-center" caption="© Gusen Fertelmann" topline="Topline" title="Viele Roseren schlonderad" text="Das unschma schausig Passklavor gerindert, dann manche paalenpa Roseren jessenbert ein Fras. Viele Destenmatten instolert das ulano Mosengast." btn1Text="Termin buchen" btn1IconLeft="hwki-kalender" btn2Text="Anrufen" btn2Type="btn-light" btn2IconLeft="hwki-kontakt" arrowDown="#content" }}
{{!--hero image fullscreen / text right --}} {{> layout/hero-img-full-text image="./uploads/placeholder-workshop-21-9.jpg" caption="© Gusen Fertelmann" topline="Topline" title="Viele Roseren schlonderad" text="Das unschma schausig Passklavor gerindert, dann manche paalenpa Roseren jessenbert ein Fras. Viele Destenmatten instolert das ulano Mosengast." alignX="justify-content-end" alignY="align-content-center" btn1Text="Termin buchen" btn1IconLeft="hwki-kalender" btn2Text="Anrufen" btn2Type="btn-light" btn2IconLeft="hwki-kontakt" arrowDown="#content" }}

Topline
Headline
Text
Buttons

Bild
optional: Verschattung unter Schrift

Ausrichtung zentriert

{{> layout/hero-img-full-text-center btn1Text="Termin buchen" btn1IconLeft="hwki-kalender" btn2Text="Anrufen" btn2Type="btn-light" btn2IconLeft="hwki-kontakt" arrowDown="#content" }}

Topline
Headline
Text
Buttons

Bild
optional: Verschattung unter Schrift

Html Struktur für Hero Image Fullscreen mit Text


    <div class="hero ratio ratio-21x9">
        <div class="container-fluid image-fullscreen">
            <figure class="figure">
                <img src="./.." alt="...">
                <figcaption class="figure-caption caption-inside text-end">...</figcaption>
            </figure>
            <div class="container align-content-center">
                <div class="row justify-content-end">
                    <div class="hero-content col-xl-6 col-xxl-5 p-4 p-md-5 p-lg-6">
                        <h2 class="display-1"><span class="topline">...</span>...</h2>
                        <p class="lead">...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

Die Klasse .hero bewirkt, dass auf kleineren Geräten, der Text in .hero-content auf einem weißen Kasten unterhalb des Bildes erscheint. Das Bild selbst bekommt dann einen anderen Ratio zugewiesen.

Über die .align-content-[start|center|end] und .justify-content-[start|center|end] Klassen kann der Text auf dem Bild unterschiedlich platziert werden.

Headerbilder

Einfaches Bild ohne text

{{> docu/components/image-full-bs }}

Html Struktur für Image Fullscreen ohne Text


<div class="hero container-fluid px-0">
    <figure class="figure z-n1">
        <img src="..." class="img-21x9 z-n1" alt="...">
        <figcaption class="figure-caption text-end">...</figcaption>
    </figure>
</div>

Das ist die einfache Bootstrap Variante. Der Ratio wird direkt am <img> gesetzt.
Die Klasse .z-n1 lässt dann noch eine weiße Textbox über das Bild laufen. Mit z.B. folgendem Aufbau:


<div class="container mt-n6 mt-md-n9">
    <div class="row mx-0">
        <div class="col-md-8 bg-white p-4 p-md-5 p-lg-6">
            <h2><span class="topline">xxx</span> xxx</h2>
            <p>xxx</p>
        </div>
    </div>
</div>
{{> docu/components/image-fullscreen }}

Alternatives Html

Alternativ kann auch der Aufbau mit der .image-fullscreen Klasse benutzt werden. Ohne die Klasse .hero bleibt der Ratio des Bildes auf allen Gerätegrößen erhalten.


<div class="ratio ratio-21x9">
    <div class="container-fluid image-fullscreen">
        <figure class="figure">
            <img src="..." alt="...">
            <figcaption class="figure-caption caption-inside text-end">...</figcaption>
        </figure>
    </div>
</div>