Typografisches Highlight mitten im Artikel — gross, ruhig, mit dezentem Akzent. Kein klassisches Zitat mit Author-Block (das macht Quote), sondern ein editorialer Pull-Effekt.
Akzent-Stile
Drei Varianten: Linie links (default), dekoratives Anführungszeichen, oder ohne Akzent.
Vertikale Akzentlinie (default)
Wenn wir die Mobilitätswende ernst meinen, beginnt sie im Quartier.
—Marie Luise Koerber, Klimaschutzbeauftragte
<PullQuote size="lg" accent="line" attribution="Marie Luise Koerber, Klimaschutzbeauftragte">
Wenn wir die Mobilitätswende ernst meinen, beginnt sie im Quartier.
</PullQuote>
Dekoratives Anführungszeichen
Klimaschutz ist Alltag — nicht Ausnahme.
—Stadt Muenster, Klimaschutzkonzept 2030
<PullQuote size="lg" accent="mark" attribution="Stadt Muenster, Klimaschutzkonzept 2030">
Klimaschutz ist Alltag — nicht Ausnahme.
</PullQuote>
Ohne Akzent — minimalistisch
Der OEPNV ist das Rueckgrat der Verkehrswende.
<PullQuote size="xl" accent="minimal" align="center">
Der OEPNV ist das Rueckgrat der Verkehrswende.
</PullQuote>
Oversize-Mark — riesiges Anführungszeichen als Hintergrund-Deko
Klimaschutz ist keine Kostenfrage — es ist eine Zukunftsfrage.
<PullQuote size="xl" accent="oversize-mark">
Klimaschutz ist keine Kostenfrage — es ist eine Zukunftsfrage.
</PullQuote>
Oversize-Mark — zentriert
Der OEPNV ist das Rueckgrat der Verkehrswende.
—Klimaschutzkonzept 2030
<PullQuote size="lg" accent="oversize-mark" align="center" attribution="Klimaschutzkonzept 2030">
Der OEPNV ist das Rueckgrat der Verkehrswende.
</PullQuote>
Float-Variante
Eingebettet in den Artikel — auf Desktop schwebend rechts oder links neben dem Lauftext. Auf Mobile (Container-Query) wird die Quote vollbreit.
accent=editorial-aside ist die neue explizite Schreibweise. embed=float-right bleibt für Backwards-Compat.
Die Mobilitätswende beginnt vor der eigenen Haustür. Wer den Bus nimmt, statt das Zweitauto zu starten, entscheidet im Kleinen über den Klimaeffekt im Großen. Aber die Infrastruktur muss mitziehen — Radwege, sichere Abstellanlagen, dichter Takt im OePNV.
Jeder zweite Weg unter fünf Kilometern ist ein potenzieller Radweg.
Förderprogramme wie das Quartiers-Klima-Konzept setzen genau hier an: Sie bündeln Mittel für Radinfrastruktur, Lastenrad-Sharing und Quartiersgaragen. Wichtig ist die Reihenfolge — erst die Alternative, dann die Verdraengung des Verkehrs.
Das geht nur mit den Menschen vor Ort, nicht über sie hinweg. Die Beteiligung der Anwohner:innen ist mindestens so wichtig wie das Projektbudget.
<article class="max-w-2xl">
<p>Die Mobilitätswende beginnt vor der eigenen Haustür. ...</p>
<PullQuote size="lg" accent="editorial-aside">
Jeder zweite Weg unter fünf Kilometern ist ein potenzieller Radweg.
</PullQuote>
<p>... entscheidet anders über das Zweitauto.</p>
</article>
embed=float-right bleibt unterstützt. Bevorzuge accent=editorial-aside für neue Implementierungen.
Die Mobilitätswende beginnt vor der eigenen Haustür. Wer den Bus nimmt, statt das Zweitauto zu starten, entscheidet im Kleinen über den Klimaeffekt im Großen.
Jeder zweite Weg unter fünf Kilometern ist ein potenzieller Radweg.
Förderprogramme wie das Quartiers-Klima-Konzept setzen genau hier an. Wichtig ist die Reihenfolge — erst die Alternative, dann die Verdraengung des Verkehrs.
<PullQuote size="lg" embed="float-right" accent="line">
Jeder zweite Weg unter fünf Kilometern ist ein potenzieller Radweg.
</PullQuote>
Redakteurshinweise
Wann einsetzen
Editoriale Artikel, Reportagen, Blog-Beiträge
Eine Kernaussage typografisch hervorheben
Strukturierung langer Texte als visueller Anker
NICHT bei klassischen Personenzitaten — dafür ist Quote
Inhalts-Empfehlungen
Maximal 18 Worte — sonst nicht "pull"-fähig
Eigenständiger Satz — keine Halb-Sätze
Attribution nur wenn die Quelle gehört
Nicht in jeden Absatz — eine pro 600-900 Worte
Mobile & A11y
Float-Varianten via Container-Query — Mobile = vollbreit
Schriftgröße skaliert per cqi mit dem Container
Markup ist <figure> + <blockquote> — semantisch korrekt
Nutzt Display-Font wenn vorhanden, sonst Sans-Fallback
Pitfalls
Nicht zur Headline machen — dafür gibt es DisplayHeading
Keine zwei PullQuotes nebeneinander — wirkt als Layout-Pause
Float-Variante nicht in schmalen Sidebars — wird quetschend