Opener: Fullwidth Image with Overlay

Hinweis

Für die Eröffnung einer Seite eines Auftritts, empfiehlt sich ein auffälliges und einnehmendes Element, das den Zweck oder Inhalt der Seite vermittelt. Hierfür gibt es verschiedene Möglichkeiten (Opener), die abhängig von dem bezweckten Kommunikationsauftrag der Seite gewählt werden können. Es darf jeweils nur ein Opener auf einer Seite verwendet werden und das Element muss das erste Inhaltselement der Seite sein.

.organisms-herounit-image-with-overlay

Alternative Bildbeschreibung

Pagetitle

(No patterns found. Show searchslot and title as default fallback.)

  <div class="herounit-homepage herounit-image-with-overlay fullwidth">
    <div class="image image--herounit-coverall-with-overlay">
        <div class="image__image">
            <img src="../../dummy/placeholder_16x9.jpg" alt="Alternative Bildbeschreibung" >
        </div>
        <div class="image__overlay">
            <div class="inner"> 
                <h1 class="title">Pagetitle</h1>
                <form >
                    <div class="searchform-slot ">
                        <div class="form-group">
                            <label class="aural" for="myInputField">Suchbegriff</label> 
                            <div class="searchterm">
                                <div class="input-wrapper">
                                    <i class="bicon bicon-search lens" aria-hidden="true"></i>
                                    <input type="search" class="form-control search" value="" placeholder="Suchbegriff" name="myInputField" id="myInputField" >
                                </div>
                                <button class="submit " type="submit" title="Suchen">
                                    <span class="aural">Suchen</span><i class="bicon bicon-arrow-right icon" aria-hidden="true"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
                <p class="text">(No patterns found. Show searchslot and title as default fallback.)</p>
            </div>
        </div>
    </div>
  </div>
 

Opener ohne abgedunkelten Hintergrund

Mit der .image-Klasse .no-darken kann die Abdunklung des Bildes deaktiviert werden. Bitte genug Kontrast zum Text sicherstellen.

Alternative Bildbeschreibung

Pagetitle

Opener mit Teasern (optional)

Drei optionale Teaser im unteren .tiles Bereich des Bildes.

Alternative Bildbeschreibung

Pagetitle

(No patterns found. Show searchslot and title as default fallback.)

  • Teasertile Bühne

    Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into.

    Mehr lesen
  • Teasertile Bühne

    Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into.

    Mehr lesen
  • Teasertile Bühne

    Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into.

    Mehr lesen
  <div class="herounit-homepage herounit-image-with-overlay fullwidth">
    <div class="image image--herounit-coverall-with-overlay">
        <div class="image__image">
            <img src="../../dummy/placeholder_16x9.jpg" alt="Alternative Bildbeschreibung" >
        </div>
        <div class="image__overlay">
            <div class="inner"> 
                <h1 class="title">Pagetitle</h1>
                <form >
                    <div class="searchform-slot ">
                        <div class="form-group">
                            <label class="aural" for="myInputField">Suchbegriff</label> 
                            <div class="searchterm">
                                <div class="input-wrapper">
                                    <i class="bicon bicon-search lens" aria-hidden="true"></i>
                                    <input type="search" class="form-control search" value="" placeholder="Suchbegriff" name="myInputField" id="myInputField" >
                                </div>
                                <button class="submit " type="submit" title="Suchen">
                                    <span class="aural">Suchen</span><i class="bicon bicon-arrow-right icon" aria-hidden="true"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
                <p class="text">(No patterns found. Show searchslot and title as default fallback.)</p>
            </div>
        </div>
    </div>
    <div class="tiles">
        <ul class="flexgrid grid--3">
            <li>
                <div class="modul-teasertile_buehne" data-add-clickable-area="full" >
                    <h2 class="title">Teasertile Bühne</h2>
                        <p class="text">
                            Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into.
                        </p>
                        <span class="action">
                            <a href="#" class="more" aria-label="Teaser" title="Teaser">Mehr lesen</a> 
                        </span>
                </div>
            </li>
            <li>
                <div class="modul-teasertile_buehne" data-add-clickable-area="full" >
                    <h2 class="title">Teasertile Bühne</h2>
                        <p class="text">
                            Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into.
                        </p>
                        <span class="action">
                            <a href="#" class="more" aria-label="Teaser" title="Teaser">Mehr lesen</a> 
                        </span>
                </div>
            </li>
            <li>
                
                <div class="modul-teasertile_buehne" data-add-clickable-area="full" >
                    <h2 class="title">Teasertile Bühne</h2>
                        <p class="text">
                            Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into.
                        </p>
                        <span class="action">
                            <a href="#" class="more" aria-label="Teaser" title="Teaser">Mehr lesen</a> 
                        </span>
                </div>
            </li>
        </ul>
    </div>
  </div>