Contentbreite
Grundgerüst Element

temp-ID

Jedes neue Element erhält eine Klasse: temp-ID

Backend und Frontend

<we:ifEditmode>
	<div class="row">
		
	</div>
<we:else />
	<div class="row temp-ID">
			
	</div>
</we:ifEditmode>

Editmode

<div class="row">
	
</div>

Frontend

<div class="row temp-ID">
		
</div>

Browserbreite
Grundgerüst Element

temp-ID

Jedes neue Element erhält eine Klasse: temp-ID

Backend und Frontend

<we:ifEditmode>
	<div class="flex-wrap">
		
	</div>
<we:else />
	<div class="flex-wrap temp-ID<we:include type="template" id="136" comment="einzug" />">
			
	</div>
</we:ifEditmode>

Editmode

<div class="flex-wrap">
	
</div>

Frontend

<div class="flex-wrap temp-ID<we:include type="template" id="136" comment="einzug" />">
		
</div>

Rechts auslaufend
Grundgerüst Element

temp-ID

Jedes neue Element erhält eine Klasse: temp-ID

Backend und Frontend

<we:ifEditmode>
	<div class="full-right">
		<div class="content-full">
			<div class="row-full-right">

			</div>
		</div>
	</div>
<we:else />
	<div class="full-right">
		<div class="content-full">
			<div class="row-full-right temp-ID<we:include type="template" id="136" comment="einzug" />">

			</div>
		</div>
	</div>
</we:ifEditmode>

Editmode

<div class="full-right">
	<div class="content-full">
		<div class="row-full-right">
			
		</div>
	</div>
</div>

Frontend

<div class="full-right">
	<div class="content-full">
		<div class="row-full-right temp-ID<we:include type="template" id="136" comment="einzug" />">
			
		</div>
	</div>
</div>

Links auslaufend
Grundgerüst Element

temp-ID

Jedes neue Element erhält eine Klasse: temp-ID

Backend und Frontend

<we:ifEditmode>
	<div class="full-left">
		<div class="content-full">
			<div class="row-full-left">

			</div>
		</div>
	</div>
<we:else />
	<div class="full-left">
		<div class="content-full">
			<div class="row-full-left temp-ID<we:include type="template" id="136" comment="einzug" />">

			</div>
		</div>
	</div>
</we:ifEditmode>

Editmode

<div class="full-left">
	<div class="content-full">
		<div class="row-full-left">
			
		</div>
	</div>
</div>

Frontend

<div class="full-left">
	<div class="content-full">
		<div class="row-full-left temp-ID<we:include type="template" id="136" comment="einzug" />">
			
		</div>
	</div>
</div>

box-
ohne Innenabstand

.box-8

Editmode

<div class="box-00">

</div>

Frontend

<div class="box-00" <we:include type="template" id="104" comment="animation"/>>

</div>

box-
mit Innenabstand

.box-7

Editmode

<div class="box-00 pad">

</div>

Frontend

<div class="box-00 pad" <we:include type="template" id="104" comment="animation"/>>

</div>

Button

.button

<a href="#" class="button">VALUE></a>

<input type="submit" class="button" value="VALUE">

.arrow-back

<div class="arrow-back"><span></span><span></span></div>

<a href="#" class="arrow-back"><span></span><span></span></a>

.arrow-next

<div class="arrow-next"><span></span><span></span></div>

<a href="#" class="arrow-next"><span></span><span></span></a>

#burger

<div id="burger"><span></span><span></span><span></span></div>

.plus

<div class="plus"><span></span><span></span></div>

<a href="#" class="plus"><span></span><span></span></a>

.to-overview

<div class="to-overview">
<span></span><span></span><span></span>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>

<a href="LIINK" class="to-overview">
<span></span><span></span><span></span>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</a>

(id | for) Variabel

<label for="vorname">VALUE</label>
<input type="text" id="vorname" name="Vorname">

(id | for) Variabel

<label for="telefon">VALUE</label>
<input type="tel" id="telefon" name="Telefon">

(id | for) Variabel

<label for="anzahl">VALUE</label>
<input type="number" id="anzahl" name="Anzahl">

.plz-ort

<div class="plz-ort">
<div>
<label>PLZ</label>
<input type="text" name="PLZ">
</div>
<div>
<label>Ort</label>
<input type="text" name="Ort">
</div>
</div>

.label-input

<div class="label-input">
<input type="checkbox" name="VALUE" id="checkbox">
<label for="checkbox">VALUETEXT</label>
</div>

.label-input

(id | for) Variabel

<label for="anrede">Anrede</label>
<select name="Anrede" id="anrede">
<option>auswählen</option>
<option>Frau</option>
<option>Herr</option>
</select>

Raster

Navigationselemente

Formularfelder