LeadParagraph
Grosser Einstiegstext mit generoesem Zeilenabstand und kontrollierbarer Zeilenlänge. Drop-Cap via ::first-letter für redaktionellen Charakter. Drei Größen, drei Breitenoptionen, helles und gedaempftes Farbschema.
Drei Größen
Von Artikel-Standard (md) bis zum Hero-Lead (xl).
Größen md / lg / xl
size="md"
Die Mobilitätswende beginnt vor der eigenen Haustür. Wer heute auf das Fahrrad oder den OEPNV umsteigt, spart nicht nur CO2 – er investiert in die Lebensqualität seines Quartiers.
size="lg"
KfW-Förderung 2026: Bis zu 35 % Zuschuss für klimafreundliche Mobilität in Wohnquartieren und Gewerbegebieten.
size="xl"
Klimaschutz ist keine Frage des Koenners — sondern des Wollens.
<LeadParagraph size="md">
Die Mobilitätswende beginnt vor der eigenen Haustür. Wer heute auf
das Fahrrad oder den OEPNV umsteigt, spart nicht nur CO2 – er investiert
in die Lebensqualität seines Quartiers.
</LeadParagraph>
<LeadParagraph size="lg">
KfW-Förderung 2026: Bis zu 35 % Zuschuss für klimafreundliche Mobilität
in Wohnquartieren und Gewerbegebieten.
</LeadParagraph>
<LeadParagraph size="xl">
Klimaschutz ist keine Frage des Koenners — sondern des Wollens.
</LeadParagraph> Drop-Cap
Der erste Buchstabe wird gross und farbig dargestellt — klassisches Stilmittel aus dem Redaktionslayout.
Mit Drop-Cap
Die Verkehrswende in deutschen Staaedten ist keine Utopie mehr. Immer mehr Kommunen setzen auf integrierte Mobilitaetskonzepte, die Bus, Bahn, Fahrrad und Fussweg sinnvoll verknüpfen — gefördert durch Bundes- und Landesfoerderprogramme.
<LeadParagraph dropCap size="lg" width="comfortable">
Die Verkehrswende in deutschen Staaedten ist keine Utopie mehr. Immer
mehr Kommunen setzen auf integrierte Mobilitaetskonzepte, die Bus,
Bahn, Fahrrad und Fussweg sinnvoll verknüpfen — gefördert durch
Bundes- und Landesfoerderprogramme.
</LeadParagraph> Breiten-Varianten
narrow (45ch) für Sidebars, comfortable (62ch) für optimalen Lesefluss, wide (80ch) für breite Layouts.
Textbreiten narrow / comfortable / wide
width="narrow" (45ch)
Förderantrag in 10 Minuten — mit unserem digitalen Assistent.
width="comfortable" (62ch)
Das Deutschlandticket hat die Nutzung des OEPNV revolutioniert. Taeglich nutzen Millionen Menschen die Vorteile eines einheitlichen, guenstigen Nahverkehrstickets.
width="wide" (80ch)
Klimafreundliche Mobilität bedeutet mehr als Elektroautos: Sie umfasst den Ausbau des öffentlichen Nahverkehrs, sichere Radwege, kurze Wege durch durchdachte Stadtplanung und eine Kultur des Teilens.
<LeadParagraph width="narrow">
Förderantrag in 10 Minuten — mit unserem digitalen Assistent.
</LeadParagraph>
<LeadParagraph width="comfortable">
Das Deutschlandticket hat die Nutzung des OEPNV revolutioniert.
Taeglich nutzen Millionen Menschen die Vorteile eines einheitlichen,
guenstigen Nahverkehrstickets.
</LeadParagraph>
<LeadParagraph width="wide">
Klimafreundliche Mobilität bedeutet mehr als Elektroautos: Sie umfasst
den Ausbau des öffentlichen Nahverkehrs, sichere Radwege, kurze Wege
durch durchdachte Stadtplanung und eine Kultur des Teilens.
</LeadParagraph> Tone-Variante: muted
Gedaempfte Farbe für ergänzende Einstiegstexte, die nicht die volle Aufmerksamkeit erhalten sollen.
tone='muted'
Stand: April 2026. Alle Angaben ohne Gewaehr. Änderungen der Förderbedingungen vorbehalten.
<LeadParagraph tone="muted" size="md">
Stand: April 2026. Alle Angaben ohne Gewaehr. Änderungen der
Förderbedingungen vorbehalten.
</LeadParagraph> Redakteur-Hinweise
LeadParagraph ist der erste Absatz nach dem Seitentitel — er fasst den Kerninhalt zusammen und zieht die Lesenden in den Text.
| Element | Empfehlung | Beispiel |
|---|---|---|
| Länge | 15–60 Wörter. Ein LeadParagraph pro Seite, direkt nach der H1. | ✓ 2–3 praegnante Sätze ✕ Mehr als ein Absatz |
| Drop-Cap | Nur bei redaktionellen Artikeln, nicht auf Service- oder Formularseiten. Erstes Zeichen darf kein Sonderzeichen sein. | ✓ Beginnt mit Grossbuchstabe ✕ Beginnt mit Ziffer oder Symbol |
| Breite | comfortable für Standard-Artikel. narrow in engen Layouts. wide nur in explizit breiten Spalten. | |
| Ton | muted nur für Metainfos (Datum, Quellenangabe). Kein Kerninhalt in muted. | ✕ Hauptaussage in muted ✓ "Stand: Mai 2026" in muted |
Installation
cp-components add leadparagraph