Typography

Die Webgau Typografie hilft ihnen schnell einen Text zu formatieren und somit hervorzuheben. Kopieren sie lediglich die Tags, Klassen oder Container in ihren Quelltext.

Überschriften

Überschrift in h1

<h1>h1 Überschrift</h1>

Überschrift in h2

<h2>h2 Überschrift</h2>

Überschrift in h3

<h3>h3 Überschrift</h3>

Überschrift in h4

<h4>h4 Überschrift</h4>

Überschrift in h5

<h5>h5 Überschrift</h5>

Überschriften mit Icon

help

<h2 class="help">h2 Überschrift</h2>

info

<h2 class="info">h2 Überschrift</h2>

light

<h2 class="light">h2 Überschrift</h2>

ok

<h2 class="ok">h2 Überschrift</h2>

star

<h2 class="star">h2 Überschrift</h2>

stop

<h2 class="stop">h2 Überschrift</h2>

Trennlinien

<hr />

<hr class="red" />

<hr class="blue" />

<hr class="black" />

Drop Cap

D orem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.

<span class="drop">D</span>orem ipsum dolor sit amet, consectetuer 
adipiscing elit.Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus.....

Icons

<div class="help"> Schöner Text </div>

<div class="info"> Schöner Text </div>

<div class="light"> Schöner Text </div>

<div class="ok"> Schöner Text </div>

<div class="star"> Schöner Text </div>

<div class="stop"> Schöner Text </div>

Infoboxen

<div class="infobox">Infobox in Blau</div>

<div class="warnbox">Infobox in Rot</div>

<div class="noticebox">Infobox in Gelb</div>

<div class="boxblue">Infobox in Blau</div>

<div class="boxred">Infobox in Rot</div>

<div class="boxyel">Infobox in Gelb</div>

Listen

• Link
• Text
• Link
• Text

<ul class="listdoc">...</ul>

• Link
• Text
• Link
• Text

<ul class="listok">...</ul>

• Link
• Text
• Link
• Text

<ul class="listright">...</ul>

• Link
• Text
• Link
• Text

<ul class="liststar">...</ul>

Links

Link

<a class="linkdown">...</a>

Link

<a class="linkimg">...</a>

Link

<a class="linklink">...</a>

Link

<a class="linkmusik">...</a>

Link

<a class=linkpdf"">...</a>

Link

<a class="linkvideo">...</a>

Zitate

Zitat

<blockquote>...</blockquote>

Spalten Layouts

<div class="cols-two">
<div>Text Links</div><div>Text Rechts</div>
</div>

<div class="cols-three">
<div>Text Links</div><div>Text Mitte</div><div>Text Rechts</div>
</div>

Spezieller Text

Info LinksEr hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte! Hatte einer seiner zahllosen Kollegen dieselbe Idee gehabt, ihn beobachtet und abgewartet, um ihn nun um die Früchte seiner Arbeit zu erleichtern? Oder gehörten die Schritte hinter ihm zu einem der unzähligen Gesetzeshüter dieser Stadt, und die stählerne Acht um seine Handgelenke würde gleich zuschnappen?

<span class="title_left">Info Links</span>Haupttext...

Info RechtsEr hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte! Hatte einer seiner zahllosen Kollegen dieselbe Idee gehabt, ihn beobachtet und abgewartet, um ihn nun um die Früchte seiner Arbeit zu erleichtern? Oder gehörten die Schritte hinter ihm zu einem der unzähligen Gesetzeshüter dieser Stadt, und die stählerne Acht um seine Handgelenke würde gleich zuschnappen?

<span class="title_right">Info Rechts</span>Haupttext...

Zuletzt aktualisiert am Sonntag, den 21. November 2010 um 13:05 Uhr
Geschrieben von: Administrator