Überschrift Ebene 1 (H1)
Hinweis: Pro Seite sollte es nur eine echte H1 geben – diese wird normalerweise automatisch durch den Seitentitel erzeugt. Diese H1 hier dient nur dazu, die Typografie im Vergleich zu sehen.
Überschrift Ebene 2 (H2) – Der Beginn eines Abschnitts
Dies ist ein einleitender Absatz mit fett gesetztem Text, kursivem Text, einem Link zu einer anderen Seite, Inline-Code und durchgestrichenem Text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Überschrift Ebene 3 (H3) – Ein Unterabschnitt
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Dieser Absatz ist etwas länger, um den Zeilenfall und die Lesbarkeit über mehrere Zeilen zu prüfen, besonders bei schmalen Spalten auf mobilen Geräten.
Überschrift Ebene 4 (H4)
Kurzer Absatz unter einer H4, z. B. für Detailinformationen innerhalb eines größeren Abschnitts.
Überschrift Ebene 5 (H5)
Noch eine Ebene tiefer – wird selten gebraucht, sollte aber im Stylesheet definiert sein.
Überschrift Ebene 6 (H6)
Die kleinste Überschriftenebene, z. B. für Meta-Labels oder Tabellenköpfe.
Listen
- Erster Punkt einer ungeordneten Liste
- Zweiter Punkt mit etwas mehr Text, um den Zeilenumbruch innerhalb eines Listenelements zu testen
- Dritter Punkt
- Verschachtelter Punkt A
- Verschachtelter Punkt B
- Erster Schritt einer Anleitung
- Zweiter Schritt
- Dritter und letzter Schritt
Zitate
Design ist nicht nur, wie es aussieht und sich anfühlt. Design ist, wie es funktioniert.
Steve Jobs
Weniger, aber besser.
Dieter Rams
Bild
Medien und Text
Bild und Text nebeneinander
Dieser Block eignet sich gut für Leistungsbeschreibungen oder Case-Study-Teaser: links ein Bild, rechts erklärender Text mit eigener Überschrift.
Spalten
Spalte eins
Kurzer Beschreibungstext in der ersten Spalte. Gut geeignet für Leistungs-Kacheln oder Vorteile in einer Übersicht.
Spalte zwei
Zweite Spalte mit ähnlichem Aufbau, um Abstände und Ausrichtung im Grid zu prüfen.
Spalte drei
Dritte Spalte – bei drei Spalten zeigt sich, wie sich das Layout auf Tablet (768px) umbricht.
Buttons
Tabelle
| Leistung | Beschreibung | Dauer |
|---|---|---|
| Konzeption | Struktur, Wireframes, Content-Planung | 1–2 Wochen |
| Design | Visuelles Design, Designsystem | 2–3 Wochen |
| Entwicklung | Theme- und Block-Entwicklung | 3–5 Wochen |
Code und Vorformatierter Text
.hero {
display: flex;
gap: 1.5rem;
}Dies ist vorformatierter Text.
Zeilenumbrüche und Leerzeichen
bleiben erhalten.
Vers
Zeile eins eines Gedichts oder Zitats, eingerückte zweite Zeile, Zeile drei.
Akkordeon / FAQ (Details-Block)
Was ist im Leistungsumfang enthalten?
Hier steht die ausführliche Antwort auf die Frage. Der Details-Block erzeugt ein natives, zugängliches Akkordeon-Element ohne zusätzliches JavaScript.
Wie lange dauert ein typisches Projekt?
Auch hier eine Beispielantwort, die testet, wie Fließtext innerhalb eines aufklappbaren Bereichs aussieht.