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.

.organisms-herounit-image-with-aside

Pagetitle

@copyright

Sectiontitle

Blocktitle

<div class="herounit-image-with-aside fullwidth">
    <div class="mainbar">
        <div class="mainbar__left">
            <div class="image">
                <div class="image__image">
                    <img src="../../dummy/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</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="myInputField5225" class="form-label ">
            Label
        </label> 
        <input class="form-control" id="myInputField5225" type="text" name="myInputField5225">
    </div>
<div class="form-group"> 
    <label for="mySelect8630" class="form-label">
        Label        
    </label>
    <select class="form-control" id="mySelect8630" name="mySelect8630">
        <option value="">Bitte wählen</option>
        <option value="option1">Option1</option>
        <option value="option2">Option2</option>
    </select>
</div> 
<div class="form-group"> 
    <label for="mySelect172" class="form-label">
        Label        
    </label>
    <select class="form-control" id="mySelect172" name="mySelect172">
        <option value="">Bitte wählen</option>
        <option value="option1">Option1</option>
        <option value="option2">Option2</option>
    </select>
</div> 
    <div class="form-actions">
        <div class="form-actions__right">
            
            <button type="submit" class="button">Submit</button>
        </div>
    </div>
</form>
                </div>

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

Menü