In this article, I show you possible typographic elements. All the following elements can be used in an article. To use them you often have to insert a CSS class. This depends on the editor only if you disable the editor and make the change directly using HTML view.
Accordion
Earlier versions of all-rounder had their own accordion solution using the lvacc class. In the current version, this is deactivated by default, but can be reactivated in the "Advanced Template Options" by activating "Load deprecated features".
Bootstrap has an integrated solution to create an accordion. How to do this can be read in their documentation. But there are also great plugins like sliders which help to make it quite easy. If you use the sliders plugin, you should deactivate its loading of the Stylesheets
Horizontal Line
<hr />
<hr class="black" />
<hr class="red" />
<hr class="blue" />
<hr class="green" />
Headline 1-6
This text is a heading h1
This text is a heading h2
This text is a heading h3
This text is a heading h4
This text is a heading h5
This text is a heading h6
Section heading 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
Sections
The styles work securely for both
and
<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.
Quote
<blockquote>TEXT HIER...</blockquote>
This is a citation block with text content. Quotes often form a nice addition to a website.
List style
<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>
- 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
Links
<a href="#" title="normaler Hyperlink">Ein normaler Hyperlink</a>
<a class="information" href="#" title="normaler Hyperlink">Ein normaler Hyperlink</a>
<a class="extern" href="#" title="normaler Hyperlink">Ein normaler Hyperlink</a>
<a class="www" href="#" title="normaler Hyperlink">Ein normaler Hyperlink</a>
<a class="download" href="#" title="normaler Hyperlink">Ein normaler Hyperlink</a>
<a class="run" href="#" title="normaler Hyperlink">Ein normaler Hyperlink</a>
<a class="image" href="#" title="normaler Hyperlink">Ein normaler Hyperlink</a>
<a class="user" href="#" title="normaler Hyperlink">Ein normaler Hyperlink</a>
<a class="pdf" href="#" title="normaler Hyperlink">Ein normaler Hyperlink</a>
<a class="zip" href="#" title="normaler Hyperlink">Ein normaler Hyperlink</a>
<a class="text" href="#" title="normaler Hyperlink">Ein normaler Hyperlink</a>
<a class="sound" href="#" title="normaler Hyperlink">Ein normaler Hyperlink</a>
<a class="video" href="#" title="normaler Hyperlink">Ein normaler Hyperlink</a>
Tables
<table>
<tbody>
<tr>
<th>Tabellenplatz 1</th>
<th>Tabellenplatz 2</th>
</tr>
<tr>
<td>Tabellenplatz 3</td>
<td>Tabellenplatz 4</td>
</tr>
<tr>
<td>Tabellenplatz 5</td>
<td>Tabellenplatz 6</td>
</tr>
<tr>
<td>Tabellenplatz 7</td>
<td>Tabellenplatz 8</td>
</tr>
<tr>
<td>Tabellenplatz 9</td>
<td>Tabellenplatz 10</td>
</tr>
</tbody>
</table>
| Tabellenplatz 1 | Tabellenplatz 2 |
|---|---|
| Tabellenplatz 3 | Tabellenplatz 4 |
| Tabellenplatz 5 | Tabellenplatz 6 |
| Tabellenplatz 7 | Tabellenplatz 8 |
| Tabellenplatz 9 | Tabellenplatz 10 |
<table class="gray"> ....
</table>
| Tabellenplatz 1 | Tabellenplatz 2 |
|---|---|
| Tabellenplatz 3 | Tabellenplatz 4 |
| Tabellenplatz 5 | Tabellenplatz 6 |
| Tabellenplatz 7 | Tabellenplatz 8 |
| Tabellenplatz 9 | Tabellenplatz 10 |
<table class="blue"> ...
</table>
| Tabellenplatz 1 | Tabellenplatz 2 |
|---|---|
| Tabellenplatz 3 | Tabellenplatz 4 |
| Tabellenplatz 5 | Tabellenplatz 6 |
| Tabellenplatz 7 | Tabellenplatz 8 |
| Tabellenplatz 9 | Tabellenplatz 10 |
<table class="red"> ... </table>
| Tabellenplatz 1 | Tabellenplatz 2 |
|---|---|
| Tabellenplatz 3 | Tabellenplatz 4 |
| Tabellenplatz 5 | Tabellenplatz 6 |
| Tabellenplatz 7 | Tabellenplatz 8 |
| Tabellenplatz 9 | Tabellenplatz 10 |
<table class="yellow"> ... </table>
| Tabellenplatz 1 | Tabellenplatz 2 |
|---|---|
| Tabellenplatz 3 | Tabellenplatz 4 |
| Tabellenplatz 5 | Tabellenplatz 6 |
| Tabellenplatz 7 | Tabellenplatz 8 |
| Tabellenplatz 9 | Tabellenplatz 10 |
<table class="white"> ... </table>
| Tabellenplatz 1 | Tabellenplatz 2 |
|---|---|
| Tabellenplatz 3 | Tabellenplatz 4 |
| Tabellenplatz 5 | Tabellenplatz 6 |
| Tabellenplatz 7 | Tabellenplatz 8 |
| Tabellenplatz 9 | Tabellenplatz 10 |
Images
<img class="featured pull-left" alt="Cooles Bild" src="images/1.png" /><p>Irgendein Text...</p>
Ausrichten
Mittels der zusätzlichen Klasse pull-left kann man das Bild links ausrichten sodass der Text das Bild rechts umfliesst.
Fülltext
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.
<img class="featured-dark pull-right" alt="Cooles Bild" src="images/1.png" /><p>Irgendein Text...</p>
Ausrichten
Mittels der zusätzlichen Klasse pull-right kann man das Bild rechts ausrichten sodass der Text das Bild links umfliesst.
Fülltext
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.
<img class="border-dark" alt="Cooles Bild" src="images/1.png" />
<img class="border-light" alt="Cooles Bild" src="images/1.png" />
