DokumentationTypography
Headlines
Headlines strukturieren die Inhalte einer Seite und bilden eine klare semantische Hierarchie von H1 bis H6. Ihre Größe und Gestaltung orientieren sich an der jeweiligen Bedeutung innerhalb der Seitenstruktur.
Desktop
Das ist die Topline h1-h3Das ist die Überschrift H1 [44]
Das ist die Topline h1-h3Das ist die Überschrift H2 [32]
Das ist die Topline h1-h3Das ist die Überschrift H3 [28]
Das ist die Topline h4-h6Das ist die Überschrift H4 [24]
Das ist die Topline h4-h6Das ist die Überschrift H5 [20]
Das ist die Topline h4-h6Das ist die Überschrift H6 [16]
Mobile
Das ist die Topline h1-h3Das ist die Überschrift H1
Das ist die Topline h1-h3Das ist die Überschrift H2
Das ist die Topline h1-h3Das ist die Überschrift H3
Das ist die Topline h4-h6Das ist die Überschrift H4
Das ist die Topline h4-h6Das ist die Überschrift H5
Das ist die Topline h4-h6Das ist die Überschrift H6
Topline und Design-Klassen
Die Topline ist in die Überschrift eingebunden.
<h2><span class="topline">Das ist die Topline</span>Das ist die Überschrift</h2>
Um die Größe und Gestaltung unabhängig von der semantischen Hierarchie anpassen zu können, stehen Klassen von h1 bis h6 zur Verfügung.
// .h1 .h2 .h3 .h4 .h5 .h6
<h2 class="h3">Das ist die Überschrift H2 im Design von H3</h2>
Display Headlines
Display Headlines sind besonders große, aufmerksamkeitsstarke Überschriften für prägnante Botschaften und visuell hervorgehobene Bereiche. Anders als Headlines bilden sie keine eigene inhaltliche Hierarchie, sondern dienen vor allem der gestalterischen Inszenierung.
Desktop
Das ist die Topline h1-h3 [56]Das ist die Display 1
Das ist die Topline h1-h3 [44]Das ist die Display 2
Das ist die Topline h1-h3 [32]Das ist die Display 3
Das ist die Topline h4-h6 [28]Das ist die Display 4
Das ist die Topline h4-h6 [24]Das ist die Display 5
Das ist die Topline h4-h6 [20]Das ist die Display 6
Anwendung
Die Display 1 wird in den Header Heros verwendet.
// .display-1 .display-2 ...
<div class="hero-content [...]">
<h2 class="display-1"><span class="topline">Topline </span>[...]</h2>
Text
Fließtexte vermitteln die zentralen Inhalte einer Seite und sind auf eine gute Lesbarkeit am Bildschirm ausgelegt. Absätze sollten klar gegliedert und in einer angenehmen Länge gehalten werden..
Dies ist der Leadtext 20px bold. Viele Roseren schlonderad prasterwan der nildersentar Instrop. Die ziemlich kraaster Kopf Saumen unschma hulloper sesemal der zerschlosen Laspaab
Dies ist der Fließtext 20px. Viele Roseren schlonderad prasterwan der nildersentar Instrop. Die ziemlich kraaster Kopf Saumen unschma hulloper sesemal der zerschlosen Laspaab. Manche ziemlich hansig Kapfens qualimat ein Destement. Manche ulano Jopf hemeder jessenbert eine faulenske Maosenhast.
Ein schresseltelhaft Bessent ein unschma zerschlosen Talopsche prasterwan. Ein hola maximal Chuster behaggelt manche Talopeschn. Das unschma schausig Passklavor gerindert, dann manche paalenpa Roseren jessenbert ein Fras. Viele Destenmatten instolert das ulano Mosengast. Die Filster riebe fangert manche Notschaft, huder Masko jessenbert ein kalimber
- Gusen Fertelmann in Tellopersch verbasen kalänter Verlungen tonnsten. Das unschma schausig Passklavor gerindert, dann manche paalenpa Roseren jessenbert ein Fras
- Mehr togen in Rullewarn senst in Gerungen vertannen linst
- Manche ziemlich hansig Kapfens qualimat ein Destement
<p class="lead">[...]</p>
- Gusen Fertelmann in Tellopersch verbasen kalänter Verlungen tonnsten
- Mehr togen in Rullewarn senst in Gerungen vertannen linst
- Manche ziemlich hansig Kapfens qualimat ein Destement
<ul class="check">
<li>[...]</li>
</ul>
Dies ist der Fließtext klein. Viele Roseren schlonderad prasterwan der nildersentar Instrop. Die ziemlich kraaster Kopf Saumen unschma hulloper sesemal der zerschlosen Laspaab. Manche ziemlich hansig Kapfens qualimat ein Destement. Manche ulano Jopf hemeder jessenbert eine faulenske Maosenhast.
Ein schresseltelhaft Bessent ein unschma zerschlosen Talopsche prasterwan. Ein hola maximal Chuster behaggelt manche Talopeschn. Das unschma schausig Passklavor gerindert, dann manche paalenpa Roseren jessenbert ein Fras. Viele Destenmatten instolert das ulano Mosengast. Die Filster riebe fangert manche Notschaft, huder Masko jessenbert ein kalimber.
<p class="fs-small">[...]</p>
Links
Ein schresseltelhaft Bessent ein unschma zerschlosen Talopsche prasterwan. Ein Link im Text mit viele Destenmatten instolert das ulano Mosengast.
<a class="text-link" href="[...]">[...]</a>
Das ist die Überschrift H1
Viele Roseren schlonderad prasterwan der nildersentar Instrop. Die ziemlich kraaster Kopf Saumen unschma hulloper sesemal der zerschlosen Laspaab. Manche ziemlich hansig Kapfens qualimat ein Destement. Manche ulano Jopf hemeder jessenbert eine faulenske Maosenhast.
Das ist die Überschrift H2
Viele Roseren schlonderad prasterwan der nildersentar Instrop. Die ziemlich kraaster Kopf Saumen unschma hulloper sesemal der zerschlosen Laspaab. Manche ziemlich hansig Kapfens qualimat ein Destement. Manche ulano Jopf hemeder jessenbert eine faulenske Maosenhast.
Viele Roseren schlonderad prasterwan der nildersentar Instrop. Die ziemlich kraaster Kopf Saumen unschma hulloper sesemal der zerschlosen Laspaab.
Das ist die Überschrift H3
Viele Roseren schlonderad prasterwan der nildersentar Instrop. Die ziemlich kraaster Kopf Saumen unschma hulloper sesemal der zerschlosen Laspaab. Manche ziemlich hansig Kapfens qualimat ein Destement. Manche ulano Jopf hemeder jessenbert eine faulenske Maosenhast.
Das ist die Überschrift H4
Viele Roseren schlonderad prasterwan der nildersentar Instrop. Die ziemlich kraaster Kopf Saumen unschma hulloper sesemal der zerschlosen Laspaab. Manche ziemlich hansig Kapfens qualimat ein Destement. Manche ulano Jopf hemeder jessenbert eine faulenske Maosenhast.
Das ist die Überschrift H5
Viele Roseren schlonderad prasterwan der nildersentar Instrop. Die ziemlich kraaster Kopf Saumen unschma hulloper sesemal der zerschlosen Laspaab. Manche ziemlich hansig Kapfens qualimat ein Destement. Manche ulano Jopf hemeder jessenbert eine faulenske Maosenhast.
Das ist die Überschrift H6
Viele Roseren schlonderad prasterwan der nildersentar Instrop. Die ziemlich kraaster Kopf Saumen unschma hulloper sesemal der zerschlosen Laspaab. Manche ziemlich hansig Kapfens qualimat ein Destement. Manche ulano Jopf hemeder jessenbert eine faulenske Maosenhast.