Opener: Image with Aside

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.

Fullwidth with image left and pagetitle as imageoverlay

.organisms-herounit-image-with-aside.image--left.fullwidth

Pagetitle

@Copyright by photograph

Sectiontitle

Blocktitle

<div class="herounit-image-with-aside fullwidth image--left">
    <div class="mainbar">

        <div class="mainbar__left">
            <div class="image">
                <div class="image__image">
                    <img src="../../styleguide/static/placeholder_2x1.jpg" alt="Alternative Bildbeschreibung" >
                </div>
                <div class="image__overlay">
                    <div class="inner">
                        <h1 class="title">Pagetitle</h1>
                    </div>
                    <p class="image__copyright">@Copyright by photograph</p>
                </div>
            </div>
        </div> 

        <div class="mainbar__right">
            <div class="panel--heavy panel--remove-inner-panels flex--stretch-inner __py-0__">
                <!-- hier kann irgendwas kommen -->
                <h2>Sectiontitle</h2>
                <div class="block ich-bin-der-content">
                    <h3 class="title">Blocktitle</h3>
                    <form class="form--base panel--heavy">
    <div class="form-group">
        <label for="myInputField2975" class="form-label ">
            Label
        </label> 
        <input class="form-control" id="myInputField2975" type="text" name="myInputField2975">
    </div>
<div class="form-group"> 
    <label for="mySelect716" class="form-label">
        Label        
    </label>
    <select class="form-control" id="mySelect716" name="mySelect716">
        <option value="">Bitte wählen</option>
        <option value="option1">Option1</option>
        <option value="option2">Option2</option>
    </select>
</div> 
<div class="form-group"> 
    <label for="mySelect2703" class="form-label">
        Label        
    </label>
    <select class="form-control" id="mySelect2703" name="mySelect2703">
        <option value="">Bitte wählen</option>
        <option value="option1">Option1</option>
        <option value="option2">Option2</option>
    </select>
</div> 
<div class="row">
    <fieldset class="span6">

        <legend >
                Frage
        </legend>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" id="myCheckbox7183" name="exampleRadios1">
                <label class="form-check-label" for="myCheckbox7183">Ja</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" id="myCheckbox1511" name="exampleRadios1">
                <label class="form-check-label" for="myCheckbox1511">Nein</label>
            </div>
    </fieldset>
    <div class="form-actions span6">        <div class="form-actions__right">
            
            <button type="submit" class="button">Submit</button>
        </div>
    </div>
</div></form>
                </div>

            </div>
        </div> 
    </div> </div>

Fullwidth with Image right and pagetitle as imageoverlay

.organisms-herounit-image-with-aside.image--right.fullwidth

Pagetitle

@Copyright by photograph

Sectiontitle

Blocktitle

Not fullwidth, image left and pagetitle inside textbox

.organisms-herounit-image-with-aside.image--left
.image.no-darken

@Copyright by photograph

Pagetitle

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.

Not fullwidth, image right and pagetitle inside textbox and buttons inside footer element

.organisms-herounit-image-with-aside.image--right
.image.no-darken
.mainbar__right .footer

@Copyright by photograph

Pagetitle

<div class="herounit-image-with-aside image--right">
    <div class="mainbar">

        <div class="mainbar__left">
            <div class="image no-darken">
                <div class="image__image">
                    <img src="../../styleguide/static/placeholder_2x1.jpg" alt="Alternative Bildbeschreibung" >
                </div>
                <div class="image__overlay">
                    <p class="image__copyright">@Copyright by photograph</p>
                </div>
            </div>
        </div> 

        <div class="mainbar__right">
                        <h1 class="title">Pagetitle</h1>
                        <p>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.</p>
                            <div class="footer">
            <div class="actions">
        <button type="button" class="button button--extern">extern</button>
        <button type="button" class="button">intern</button>
    </div>    </div>        </div> 
    </div> </div>