CP Registry

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