Hauptüberschrift (h1) – erste Überschrift auf jeder Seite
Diesen Schriftstil kann man als Einleitung für Blogartikel oder statische Seiten verwenden. Er ist etwas größer dargestellt, als der Fließtext, ist aber keine Headline. Er nennt sich Leadtext und kann immer dann eingesetzt werden, wenn zu Anfang einer Seite eine Hervorhebung geplant ist.
Inhalt
- Erste H2-Überschrift
- Zweite H2-Überschrift mit einer längeren Headline, die über mehrere Zeilen geht – Lorem ipsum dolor sit amet
- Dritte, sogar etwas längere H2-Überschrift
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
- Consetetur sadipscing elitr
- Lorem diam nonumy eirmod tempor invidunt ut
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien, leben die Dummytexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans.
Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Textlink Textlink hover Nicht einmal von der allmächtigen Interpunktion werden die Dummytexte beherrscht – ein geradezu unorthographisches Leben.
Überschrift 2 (h2) – für mehrere Zwischenüberschriften pro Seite
Lorem ipsum dolor sit amet, consectetur 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam voluptua.
Überschrift 3 (h3) – für Zwischenüberschriften dritter Ebene bei längeren Texten
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien, leben die Dummytexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans.
Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Textlink Textlink hover Nicht einmal von der allmächtigen Interpunktion werden die Dummytexte beherrscht – ein geradezu unorthographisches Leben.
Überschrift 4 (h4) – für Zwischenüberschriften vierter Ebene bei langen Texten
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien, leben die Dummytexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans.
So sieht ein Satz aus, wenn er fett ist.
Und so sieht er kursiv aus.
Und so sieht er fett und kursiv aus.
Kleinste Schriftgröße: Dieser Text wird unter Bildern, für Rechtstexte an Formularen und überall dort eingesetzt, wo es eine sehr kleine Schriftgröße braucht!
Links
Lorem ipsum dolor sit amet, Linktext sadipscing elitr, sed diam Linktext sadipscing elitr, sed diam Linktext Hover 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Liste
- Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg.
- die Headline vom Alphabetdorf
- die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rethorische Frage über die Wange, dann setzte es seinen Weg fort.
Unterwegs traf es eine Copy. Die Copy warnte Lorem Ipsum, da, wo sie herkämme, wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort „und“, und das Dummytextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren.
Zitat
Eines Tages aber beschloss eine kleine Zeile Dummytext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Dummytextchen ließ sich nicht beirren.
Vorname Nachname, Background
Buttons
Button 1 ist der Default Button. Er wird meistens eingesetzt, wenn eine Handlung klar ausgewiesen ist. Er ist unser Haupt-CTA-Button.
Button 2 ist weniger auffällig als Button 1. Er kann dann genutzt werden, wenn mehrere Handlungen nebeneinander stehen, um eine Hierarchie zu schaffen.
Akkordeon
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volup.
Akkordeon / FAQ-Element
Akkordeon / FAQ-Element
Unterwegs traf es eine Copy. Die Copy warnte Lorem Ipsum, da, wo sie herkämme, wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort „und“, und das Dummytextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren.
Unterwegs traf es eine Copy. Die Copy warnte Lorem Ipsum, da, wo sie herkämme, wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort „und“, und das Dummytextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren.
Bild im Content mit Credits
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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing

Handlungsaufrufe / Boxen
Sektion mit bunten Rändern – consetetur sadipscing elitr
Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse …
Sektion zweispaltig in Blau – Lorem ipsum dolor sit amet, consetetur elitr
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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
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
Sektion zweispaltig in Gelb – Lorem ipsum dolor sit amet, consetetur elitr
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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
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
Sektion zweispaltig Grau mit Bild – Lorem ipsum dolor sit amet, consetetur elitr

Blog-Teaser
Farben
Dialogblau
#0068BD
Primäre Klickfarbe
Gedenken
#000000
Sekundäre Klickfarbe
Debatte
#F5F6EF
Auffällige Hintergrundfarbe
Perspektive
#ADC6D8
Alternative Hintergrundfarbe
Einladung
#EDB845
Alternative Hintergrundfarbe
Still
#FFFFFF
Alternative Hintergrundfarbe
Wendepunkt
#FF4F00
Farbakzente