Typografie

ÜBERSCHRIFTEN

H1 Überschrift

H2 ÜBERSCHRIFT

H3 Überschrift

H4 Überschrift

H5 Überschrift
H6 Überschrift
<h1>H1 Überschrift</h1>
<h2>H2 Überschrift</h2>
<h3>H3 Überschrift</h3>
<h4>H4 Überschrift</h4>
<h5>H5 Überschrift</h5>
<h6>H6 Überschrift</h6>

H1 Überschrift / Hauptfarbe dunkel

H2 ÜBERSCHRIFT / HAUPTFARBE DUNKEL

H3 Überschrift / Hauptfarbe dunkel

H4 Überschrift / Hauptfarbe dunkel

H5 Überschrift / Hauptfarbe dunkel
H6 Überschrift / Hauptfarbe dunkel
<h1 class="primary-color-dark">H1 Überschrift</h1>
<h2 class="primary-color-dark">H2 Überschrift</h2>
<h3 class="primary-color-dark">H3 Überschrift</h3>
<h4 class="primary-color-dark">H4 Überschrift</h4>
<h5 class="primary-color-dark">H5 Überschrift</h5>
<h6 class="primary-color-dark">H6 Überschrift</h6>

H1 Überschrift / Hauptfarbe hell

H2 ÜBERSCHRIFT / HAUPTFARBE HELL

H3 Überschrift / Hauptfarbe hell

H4 Überschrift / Hauptfarbe hell

H5 Überschrift / Hauptfarbe hell
H6 Überschrift / Hauptfarbe hell
<h1 class="primary-color-light">H1 Überschrift</h1>
<h2 class="primary-color-light">H2 Überschrift</h2>
<h3 class="primary-color-light">H3 Überschrift</h3>
<h4 class="primary-color-light">H4 Überschrift</h4>
<h5 class="primary-color-light">H5 Überschrift</h5>
<h6 class="primary-color-light">H6 Überschrift</h6>

H1 Überschrift / mit Punkten

H2 ÜBERSCHRIFT / MIT PUNKTEN

H3 Überschrift / mit Punkten

H4 Überschrift / mit Punkten

H5 Überschrift / mit Punkten
<h1 class="headline-dotted">H1 Überschrift / mit Punkten</h1>
<h2 class="headline-dotted">H2 Überschrift / mit Punkten</h2>
<h3 class="headline-dotted">H3 Überschrift / mit Punkten</h3>
<h4 class="headline-dotted">H4 Überschrift / mit Punkten</h4>
<h5 class="headline-dotted">H5 Überschrift / mit Punkten</h5>
<h6 class="headline-dotted">H6 Überschrift / mit Punkten</h6>

H2 ÜBERSCHRIFT/ große Überschrift

H3 Überschrift/ große Überschrift

<h2 class="large-headline">H2 Überschrift / Schriftgröße 35px</h2>
<h3 class="large-headline">H3 Überschrift / Schriftgröße 35px</h3>

H2 ÜBERSCHRIFT / MIT PUNKTEN UND ZENTRIERT

H2 ÜBERSCHRIFT / ZENTRIERT

H2 ÜBERSCHRIFT / ZENTRIERT / HAUPTFARBE DUNKEL

H2 ÜBERSCHRIFT / ZENTRIERT / HAUPTFARBE HELL

H2 ÜBERSCHRIFT / ZENTRIERT / HAUPTFARBE DUNKEL / 35PX

<h2 class="text-center headline-dotted">H2 ÜBERSCHRIFT / MIT PUNKTEN UND ZENTRIERT</h2>
<h2 class="text-center">H2 ÜBERSCHRIFT / ZENTRIERT</h2>
<h2 class="text-center primary-color-dark">H2 ÜBERSCHRIFT / ZENTRIERT / HAUPTFARBE DUNKEL</h2>
<h2 class="text-center primary-color-light">H2 ÜBERSCHRIFT / ZENTRIERT / HAUPTFARBE HELL</h2>
<h2 class="text-center primary-color-dark large-headline">H2 ÜBERSCHRIFT / ZENTRIERT / HAUPTFARBE DUNKEL / 35PX</h2>

LINKS/BUTTONS

Weitere Textelemente

Übersicht von weiteren Textelementen, wie Listen und Textblöcke.

TEXTE

Dieser Text wird nur in Großbuchstaben ausgegeben.

<div class="text-uppercase">
  Dieser Text wird in Großbuchstaben ausgegeben.
</div>

Dieser Text wird nur in Kleinbuchstaben ausgegeben.

<div class="text-lowercase">
  Dieser Text wird in Kleinbuchstaben ausgegeben.
</div>

Jeder Anfangsbuchstabe wird großgeschrieben.

<div class="text-capitalize">
  Jeder Anfangsbuchstabe wird großgeschrieben.
</div>

LISTEN

Nummerierte Liste

  1. Informationen reduzieren
  2. Code mehrfach verwenden
  3. Vorhandene Materialien nutzen

Unnummerierte Liste

  • Informationen reduzieren
  • Code mehrfach verwenden
  • Vorhandene Materialien nutzen