Element Text

# Text

#
Text mit Hervorhebungen 
<div class="ce_text block">
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed <strong>diam nonumy eirmod</strong> tempor invidunt ut labore et dolore <em>magna</em> aliquyam erat, <em>sed diam</em> voluptua. At vero eos et <a href="#">accusam et</a> justo <span style="text-decoration: underline;">duo dolores et ea r.</span></p>  
</div>

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 r.

# Überschrift + Text

#
H1 + Text 
<div class="ce_text">
	<h1>Überschrift 1</h1>
	<p>Lorem …</p>
</div>

Überschrift 1

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 r

#
H2 + Text 
<div class="ce_text">
	<h2>Überschrift 2</h2>
	<p>Lorem …</p>
</div>

Überschrift 2

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 r

#
H3 + Text 
<div class="ce_text">
	<h3>Überschrift 3</h3>
	<p>Lorem …</p>
</div>

Überschrift 3

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 r

# Text + Überschrift

Ein häufiges Problem bei Text + Überschrift - Kombination sind unterschiedliche Abstände, je nachdem, ob man Einzelelemente pro Überschrift verwendet oder alle Überschriften und Texte in einem Text-Element verwendet. Im besten Fall, sollte es keinen Unterschied machen, ob es 1 oder mehrere Text-Elemente sind.

#
3 Text-Elemente mit Überschriften 
Egal, ob 3 Text-Elemente oder 1 Text-Element mit 3 Überschriften, der Abstand zwischen Paragraph und Überschrift sollte immer gleich sein.

Überschrift H1

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 r

Überschrift H2

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 r

Überschrift H3

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 r

#
1 Text-Element mit 3 Absätzen 
Egal, ob 3 Text-Elemente oder 1 Text-Element mit 3 Überschriften, der Abstand zwischen Paragraph und Überschrift sollte immer gleich sein.

Überschrift H1

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 r

Überschrift H2

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 r

Überschrift H3

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 r

# Text mit Liste

#
Ungeordnete Liste (Standard) 
<div class="ce_text">
	<p>Listen innerhalb von Textelementen sind heute Standard, denn Sie …</p>
	<ul>
		<li>Punkt 1</li>
		<li>Punkt 2</li>
		<li>Punkt 3</li>
	</ul>
	<p>Deswegen sollten Listen zu jedem längeren Text gehören.</p>
</div>

Listen innerhalb von Textelementen sind heute Standard, denn Sie …

  • Punkt 1
  • Punkt 2
  • Punkt 3

Deswegen sollten Listen zu jedem längeren Text gehören.

#
Ungeordnete Liste (List-Items als Blockelemente) 
Listenelemente durch die Klasse .li--block ergänzen, um einen Abstand nach jedem <li> zu erzeugen.

<div class="ce_text">
	<p>Längere Listenelemente …</p>
	<ul>
		<li class="li--block">Lorem ipsum …</li>
		<li class="li--block">Stet clita …</li>
		<li class="li--block">At vero …</li>
	</ul>
	<p>So wie hier (s. oben) zu sehen.</p>
</div>

Längere Listenelemente sollten einen Abstand zwischen den Listen-Punkten haben, um die Lesbarkeit zu erhöhen:

  • 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. 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.

So wie hier (s. oben) zu sehen.

#
Geordnete Liste (Standard) 
<div class="ce_text">
	<p>Listen innerhalb von Textelementen sind heute Standard, denn Sie …</p>
	<ol>
		<li>Punkt 1</li>
		<li>Punkt 2</li>
		<li>Punkt 3</li>
	</ol>
<p>Deswegen sollten Listen zu jedem längeren Text gehören.</p>
</div>

Listen innerhalb von Textelementen sind heute Standard, denn Sie …

  1. Punkt 1
  2. Punkt 2
  3. Punkt 3

Deswegen sollten Listen zu jedem längeren Text gehören.

#
Geordnete Liste (List-Items als Blockelemente) 
Listenelemente durch die Klasse .li--block ergänzen, um einen Abstand nach jedem <li> zu erzeugen.

<div class="ce_text">
	<p>Längere Listenelemente …</p>
<ol>
<li class="li--block">Lorem ipsum …</li>
<li class="li--block">Stet clita …</li>
<li class="li--block">At vero …</li>
</ol>
<p>So wie …</p>
</div>

Längere Listenelemente sollten einen Abstand zwischen den Listen-Punkten haben, um die Lesbarkeit zu erhöhen:

  1. 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.
  2. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  3. 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.

So wie hier (s. oben) zu sehen.

siehe auch Listen als eigene Elemente

# Text mit Links

#
Link innerhalb eines Text-Elements 
Standard-Verlinkung, wenn keine zusätzlichen Klassen hinzugefügt werden

<div class"ce_text">
	<p>Ein Text, in dem <a href="#">ein Link</a> innerhalb des Textes eingefügt ist, siehst du in diesem Beispiel.</p>
	<p><a href="#">Normaler Link</a></p>
</div>

Ein Text, in dem ein Link innerhalb des Textes eingefügt ist, siehst du in diesem Beispiel.

Normaler Link

#
Button innerhalb eines Text-Elements 
Durch die zusätzliche Klassen .btn .btn--primary wird aus einem Link ein Button

<div class="ce_text">
	<p>Kurze Teaser werden häufig mit Buttons versehen, die zum Weiterlesen animieren sollen.</p>
	<div class="btn btn--primary"><a href="#">Weiterlesen</a></div>
</div>

Kurze Teaser werden häufig mit Buttons versehen, die zum Weiterlesen animieren sollen.

Weiterlesen

siehe auch Link-Elemente