In diesem Artikel zeig ich euch mögliche Typografie Elemente. Alle folgenden Elemente können in einem Artikel verwendet werden. Um sie zu benutzen muss man oft eine CSS Klasse einfügen. Das geht je nach Editor nur wenn man den Editor deaktiviert und mittels HTML Ansicht direkt die Änderung macht.

Akkordeon

Frühere Versionen von Allrounder hatten eine eigene Akkordeon Lösung mittels der lvacc Klasse. In der aktuellen Version ist dies standardmässig deaktiviert, kann aber in den "Advanced Template Options" wieder aktiviert werden indem man "Load deprecated features" aktiviert.

Bootstrap hat eine integrierte Lösung um ein Akkordeon zu erstellen. Wie das geht kann man in deren Dokumentation nachlesen. Es gibt aber auch tolle Plugins wie Sliders welche helfen das ganz einfach zu machen. Wenn man das Sliders Plugin nutzt, sollte man in dessen Einstellungen das Laden des Stylesheets deaktivieren, sonst siehts doof aus.

Horizontale Linie

<hr />

<hr class="black" />

<hr class="red" />

<hr class="blue" />

<hr class="green" />

Überschrift 1-6

<h1>Dieser Text ist eine Überschrift 1</h1>
<h2>Dieser Text ist eine Überschrift 2</h2>
<h3>Dieser Text ist eine Überschrift 3</h3>
<h4>Dieser Text ist eine Überschrift 4</h4>
<h5>Dieser Text ist eine Überschrift 5</h5>
<h6>Dieser Text ist eine Überschrift 6</h6>

Dieser Text ist eine Überschrift 1

Dieser Text ist eine Überschrift 2

Dieser Text ist eine Überschrift 3

Dieser Text ist eine Überschrift 4

Dieser Text ist eine Überschrift 5
Dieser Text ist eine Überschrift 6

Sektionsüberschrift 1-6

<h1 class="section">Sektionsüberschrift 1</h1>
<h2 class="section">Sektionsüberschrift 2</h2>
<h3 class="section">Sektionsüberschrift 3</h3>
<h4 class="section">Sektionsüberschrift 4</h4>
<h5 class="section">Sektionsüberschrift 5</h5>
<h6 class="section">Sektionsüberschrift 6</h6>

Sektionsüberschrift 1

Sektionsüberschrift 2

Sektionsüberschrift 3

Sektionsüberschrift 4

Sektionsüberschrift 5
Sektionsüberschrift 6

Abschnitte

Die Style funktionieren jeweils sicher für <p> sowie <div> Tags.
Siehe auch Bootstrap Dokumentation für weitere Möglichkeiten.

<p class="alert">TEXT HIER...</p>
<p class="alert alert-error">TEXT HIER...</p>
<p class="alert alert-success">TEXT HIER...</p>
<p class="alert alert-info">TEXT HIER...</p>
<p class="alert alert-block">TEXT HIER...</p>

Ein allgemeiner Warntext mit der Klasse alert

Ein Fehlertext mit den Klassen alert alert-error

Ein Erfolgstext mit den Klassen alert alert-success

Ein Informationstext mit den Klassen alert alert-info

Ein allgemeiner Warntext mit etwas grösserem Abstand oben und unten. Ideal für grössere Textblöcke. Gemacht mit den Klassen alert alert-block


Bitte beachtet dass die folgenden Klassen neu ein Prefix typo- benötigen. Dies weil einige davon mit Bootstrap Sachen wie Tooltips und Popovers Probleme machten.

<p class="typo-tip">TEXT HIER...</p>
<p class="typo-alert">TEXT HIER...</p>

Ein Tip Text welcher dazu verwendet werden kann um speziell gut sichtbare Tips zu markieren. Klasse: typo-tip

Ein Alarm Text welcher dazu verwendet werden kann um speziell gut sichtbare Alarmmeldungen zu markieren. Klasse: typo-alert


<p class="typo-info">TEXT HIER...</p>
<p class="typo-right">TEXT HIER...</p>
<p class="typo-alarm">TEXT HIER...</p>
<p class="typo-tell">TEXT HIER...</p>
<p class="typo-content">TEXT HIER...</p>
<p class="typo-note">TEXT HIER...</p>

<p> Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem <p> den Klassennamen typo-info mitgibt, wird es so formatiert wie in dieser Demo.

<p> Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem <p> den Klassennamen typo-right mitgibt, wird es so formatiert wie in dieser Demo.

<p> Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem <p> den Klassennamen typo-alarm mitgibt, wird es so formatiert wie in dieser Demo.

<p> Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem <p> den Klassennamen typo-tell mitgibt, wird es so formatiert wie in dieser Demo.

<p> Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem <p> den Klassennamen typo-content mitgibt, wird es so formatiert wie in dieser Demo.

<p> Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem <p> den Klassennamen typo-note mitgibt, wird es so formatiert wie in dieser Demo.


<p class="contenthead">TEXT HIER...</p>
<p class="contenthead-dark">TEXT HIER...</p>
<p class="contenthead-blue">TEXT HIER...</p>
<p class="contenthead-red">TEXT HIER...</p>
<p class="contenthead-green">TEXT HIER...</p>

<p> Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem <p> den Klassennamen contenthead mitgibt, wird es so formatiert wie in dieser Demo.

<p> Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem <p> den Klassennamen contenthead-dark mitgibt, wird es so formatiert wie in dieser Demo.

<p> Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem <p> den Klassennamen contenthead-blue mitgibt, wird es so formatiert wie in dieser Demo.

<p> Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem <p> den Klassennamen contenthead-red mitgibt, wird es so formatiert wie in dieser Demo.

<p> Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem <p> den Klassennamen contenthead-green mitgibt, wird es so formatiert wie in dieser Demo.


<p class="typo-hot">TEXT HIER...</p>
<p class="typo-new">TEXT HIER...</p>
<p class="typo-top">TEXT HIER...</p>

<p> Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem <p> den Klassennamen typo-hot mitgibt, wird es so formatiert wie in dieser Demo.

<p> Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem <p> den Klassennamen typo-new mitgibt, wird es so formatiert wie in dieser Demo.

<p> Tags eignen sich hervoragend um innerhalb von Beiträgen um die Blöcke anzugrenzen. Sofern man dem <p> den Klassennamen typo-top mitgibt, wird es so formatiert wie in dieser Demo.

Code

<code>TEXT HIER...</code>

Dies ist ein Code Text. Damit kann man innerhalb von Webseiten einen Code auszeichnen und diesen darstellen.

Blockquote

<blockquote>TEXT HIER...</blockquote>
Dies ist ein Zitat Block mit Textinhalt. Zitate bilden des öfteren eine schicke Bereicherung für eine Webseite. So kann man Zitate sehr gut nutzen um andere Quellen zu zitieren oder einfach den eigenen Beitrag etwas aufbessern indem man seinen verfassten Text mit einem blockquote Tag umschließt.

Listen

Unsortierte Liste

<ul>
  <li>....</li>
  <li>....</li>
</ul>
  • Listenpunkt 1.1
  • Listenpunkt 1.2
  • Listenpunkt 1.3
    • Listenpunkt 1.3.1
    • Listenpunkt 1.3.2
    • Listenpunkt 1.3.3
      • Listenpunkt 1.3.3.1
      • Listenpunkt 1.3.3.2
      • Listenpunkt 1.3.3.3
      • Listenpunkt 1.3.3.4
      • Listenpunkt 1.3.3.5
    • Listenpunkt 1.3.4
    • Listenpunkt 1.3.5
  • Listenpunkt 1.4
  • Listenpunkt 1.5

<ulclass="arrow"
  <li>....</li>
  <li>....</li>
</ul>
  • Listenpunkt 1.1
  • Listenpunkt 1.2
  • Listenpunkt 1.3
    • Listenpunkt 1.3.1
    • Listenpunkt 1.3.2
    • Listenpunkt 1.3.3
      • Listenpunkt 1.3.3.1
      • Listenpunkt 1.3.3.2
      • Listenpunkt 1.3.3.3
      • Listenpunkt 1.3.3.4
      • Listenpunkt 1.3.3.5
    • Listenpunkt 1.3.4
    • Listenpunkt 1.3.5
  • Listenpunkt 1.4
  • Listenpunkt 1.5

<ul class="folder">
  <li>....</li>
  <li>....</li>
</ul>
  • Listenpunkt 1.1
  • Listenpunkt 1.2
  • Listenpunkt 1.3
    • Listenpunkt 1.3.1
    • Listenpunkt 1.3.2
    • Listenpunkt 1.3.3
      • Listenpunkt 1.3.3.1
      • Listenpunkt 1.3.3.2
      • Listenpunkt 1.3.3.3
      • Listenpunkt 1.3.3.4
      • Listenpunkt 1.3.3.5
    • Listenpunkt 1.3.4
    • Listenpunkt 1.3.5
  • Listenpunkt 1.4
  • Listenpunkt 1.5

<ul class="ok">
  <li>....</li>
  <li>....</li>
</ul>
  • Listenpunkt 1.1
  • Listenpunkt 1.2
  • Listenpunkt 1.3
    • Listenpunkt 1.3.1
    • Listenpunkt 1.3.2
    • Listenpunkt 1.3.3
      • Listenpunkt 1.3.3.1
      • Listenpunkt 1.3.3.2
      • Listenpunkt 1.3.3.3
      • Listenpunkt 1.3.3.4
      • Listenpunkt 1.3.3.5
    • Listenpunkt 1.3.4
    • Listenpunkt 1.3.5
  • Listenpunkt 1.4
  • Listenpunkt 1.5

<ul class="star">
  <li>....</li>
  <li>....</li>
</ul>
  • Listenpunkt 1.1
  • Listenpunkt 1.2
  • Listenpunkt 1.3
    • Listenpunkt 1.3.1
    • Listenpunkt 1.3.2
    • Listenpunkt 1.3.3
      • Listenpunkt 1.3.3.1
      • Listenpunkt 1.3.3.2
      • Listenpunkt 1.3.3.3
      • Listenpunkt 1.3.3.4
      • Listenpunkt 1.3.3.5
    • Listenpunkt 1.3.4
    • Listenpunkt 1.3.5
  • Listenpunkt 1.4
  • Listenpunkt 1.5

<ul class="cross">
  <li>....</li>
  <li>....</li>
</ul>
  • Listenpunkt 1.1
  • Listenpunkt 1.2
  • Listenpunkt 1.3
    • Listenpunkt 1.3.1
    • Listenpunkt 1.3.2
    • Listenpunkt 1.3.3
      • Listenpunkt 1.3.3.1
      • Listenpunkt 1.3.3.2
      • Listenpunkt 1.3.3.3
      • Listenpunkt 1.3.3.4
      • Listenpunkt 1.3.3.5
    • Listenpunkt 1.3.4
    • Listenpunkt 1.3.5
  • Listenpunkt 1.4
  • Listenpunkt 1.5

An ordered list

<ol>
  <li>....</li>
  <li>....</li>
</ol>
  1. Listenpunkt 1.1
  2. Listenpunkt 1.2
  3. Listenpunkt 1.3
    1. Listenpunkt 1.3.1
    2. Listenpunkt 1.3.2
    3. Listenpunkt 1.3.3
      1. Listenpunkt 1.3.3.1
      2. Listenpunkt 1.3.3.2
      3. Listenpunkt 1.3.3.3
      4. Listenpunkt 1.3.3.4
      5. Listenpunkt 1.3.3.5
    4. Listenpunkt 1.3.4
    5. Listenpunkt 1.3.5
  4. Listenpunkt 1.4
  5. Listenpunkt 1.5