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.

Note

For the Opener for a page of a site, you should use an eye-catching and engaging element that conveys the purpose or content of the page. There are various possibilities (Opener) for this; the choice should be made according to the communication task of the page. Only one Opener can be used on a page and the element must be the first content element on the page.

.@organisms/herounit/homepage/herounit-image-with-overlay.twig

@copyright

Pagetitle

Lorem ipsum dolor sit

  <div class="herounit-homepage herounit-image-with-overlay fullwidth">
    <div class="image image--herounit-coverall-with-overlay">
        <div class="image__image">
            <img src="../../styleguide/static/placeholder_16x9.jpg" alt="Alternative Bildbeschreibung" >
        </div>
        <p class="image__copyright">@copyright</p>
        <div class="image__overlay">
            <div class="inner"> 
                <div class="textbox">
                    <h1 class="title">Pagetitle</h1>
                    <p class="text">Lorem ipsum dolor sit</p>
                </div>
    
                                <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>
            </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.

@copyright

Pagetitle

  <div class="herounit-homepage herounit-image-with-overlay fullwidth">
    <div class="image image--herounit-coverall-with-overlay no-darken">
        <div class="image__image">
            <img src="../../styleguide/static/placeholder_16x9.jpg" alt="Alternative Bildbeschreibung" >
        </div>
        <p class="image__copyright">@copyright</p>
        <div class="image__overlay">
            <div class="inner"> 
                <div class="textbox">
                    <h1 class="title">Pagetitle</h1>
                </div>
                                        <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>
            </div>
        </div>
    </div>
  </div>

Opener mit Teasern (optional)

Drei optionale Teaser im unteren .tiles Bereich des Bildes.

@copyright

Pagetitle

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.

Teasertile Bühne

Lorem ipsum 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.

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.

  <div class="herounit-homepage herounit-image-with-overlay fullwidth">
    <div class="image image--herounit-coverall-with-overlay">
        <div class="image__image">
            <img src="../../styleguide/static/placeholder_16x9.jpg" alt="Alternative Bildbeschreibung" >
        </div>
        <p class="image__copyright">@copyright</p>
        <div class="image__overlay">
            <div class="inner"> 
                <div class="textbox">
                    <h1 class="title">Pagetitle</h1>
                </div>
    
                                <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>
            </div>
        </div>
    </div>
    <div class="tiles">
        <div class="flexgrid grid--3">

                <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.
                        </p>
                        <span class="action">
                            <a href="#" class="more" aria-label="Teaser" title="Teaser">Mehr lesen</a> 
                        </span>
                </div>

                <div class="modul-teasertile_buehne" data-add-clickable-area="full" >
                    <h2 class="title">Teasertile Bühne</h2>
                        <p class="text">
                            Lorem ipsum 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>
            
                <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>
        </div>
    </div>
  </div>

Opener mit Texthintergrund

Mit der Klasse .textbox.textbox--white kann der Hintergrund eingefärbt werden.

@copyright

Ich bin der Titel

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis.

  <div class="herounit-homepage herounit-image-with-overlay fullwidth">
    <div class="image image--herounit-coverall-with-overlay no-darken">
        <div class="image__image">
            <img src="../../styleguide/static/placeholder_16x9.jpg" alt="Alternative Bildbeschreibung" >
        </div>
        <p class="image__copyright">@copyright</p>
        <div class="image__overlay">
            <div class="inner"> 
                <div class="textbox textbox--color-white">
                    <h1 class="title">Ich bin der Titel</h1>
                    <p class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis.</p>
                </div>
            </div>
        </div>
    </div>
  </div>

Mit der Klasse .textbox.textbox--dark kann der Hintergrund eingefärbt werden.

@copyright

Ich bin der Titel

  <div class="herounit-homepage herounit-image-with-overlay fullwidth">
    <div class="image image--herounit-coverall-with-overlay no-darken">
        <div class="image__image">
            <img src="../../styleguide/static/placeholder_16x9.jpg" alt="Alternative Bildbeschreibung" >
        </div>
        <p class="image__copyright">@copyright</p>
        <div class="image__overlay">
            <div class="inner"> 
                <div class="textbox textbox--color-dark">
                    <h1 class="title">Ich bin der Titel</h1>
                    <p class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis.</p>
                </div>
            </div>
        </div>
    </div>
  </div>