Quote
Semantisches Blockzitat für Kundenaussagen, Pressestimmen oder interne Zitate. Rendert als <blockquote> mit <cite> für korrekte HTML-Semantik. Unterstützt Autor, Rolle und optionalen Avatar.
Mit Autor und Rolle
Der vollständige Anwendungsfall: Ein Zitat mit Namen und Berufsbezeichnung – ideal für Kundenstimmen, Testimonials oder Mitarbeiter-Features auf der Website.
Kundenstimme mit vollstaendiger Attribution
Mit der Solar-Förderung der Stadt war der Weg auf unser Dach finanzierbar. Die Förderberatung war freundlich und unkompliziert – ich würde jederzeit wieder beantragen.
<Quote author="Brigitte Hoffmann" role="Förder-Antragstellerin 2024">
<p>
Mit der Solar-Förderung der Stadt war der Weg auf unser
Dach finanzierbar. Die Förderberatung war freundlich und
unkompliziert – ich würde jederzeit wieder beantragen.
</p>
</Quote>Ohne Autor
Ein anonymes Zitat ohne Attribution – zum Beispiel für allgemeine Aussagen, Slogans oder wenn kein konkreter Verfasser bekannt ist.
Anonymes Zitat
Klimaschutz ist keine Option mehr – er ist unsere gemeinsame Verantwortung gegenüber kommenden Generationen.
<Quote>
<p>
Klimaschutz ist keine Option mehr – er ist unsere
gemeinsame Verantwortung gegenüber kommenden Generationen.
</p>
</Quote>Nur Name (ohne Rolle)
Wenn eine Rollenbeschreibung fehlt oder nicht relevant ist, genügt der Name allein. Typisch für Pressezitate oder Aussagen von Persoenlichkeiten.
Pressestimme
Das Klima-Werk Musterstadt ist ein Vorzeigebeispiel dafür, wie kommunale Stellen die Klima- und Mobilitätswende aktiv gestalten können – ohne auf Wirtschaftlichkeit zu verzichten.
<Quote author="Dr. Klaus Bergmann">
<p>
Das Klima-Werk Musterstadt ist ein Vorzeigebeispiel dafür,
wie kommunale Stellen die Klima- und Mobilitätswende aktiv
gestalten können – ohne auf Wirtschaftlichkeit zu verzichten.
</p>
</Quote>Featured mit Bild
Die featured-Variante zeigt ein großes Bild neben dem Zitat – ideal für Testimonials und Key-Visuals auf Landing Pages. Das Bild nimmt 40% ein, der Text wird größer dargestellt.
Featured Zitat (Bild links)
Mit der Solar-Förderung der Stadt war der Weg auf unser Dach finanzierbar. Die Förderberatung war freundlich und unkompliziert – ich würde jederzeit wieder beantragen.
<Quote
author="Brigitte Hoffmann"
role="Förder-Antragstellerin 2024"
variant="featured"
image="/images/portrait.jpg"
imageAlt="Brigitte Hoffmann"
>
<p>Mit der Solar-Förderung war das Dach finanzierbar.</p>
</Quote>Featured mit Bild rechts
Über imagePosition="right" wird das Bild auf der rechten Seite angezeigt.
Featured Zitat (Bild rechts)
Das Klima-Werk Musterstadt ist ein Vorzeigebeispiel dafür, wie kommunale Stellen die Klima- und Mobilitätswende aktiv gestalten können – ohne auf Wirtschaftlichkeit zu verzichten.
<Quote
author="Dr. Klaus Bergmann"
role="Geschäftsführer"
variant="featured"
image="/images/portrait-2.jpg"
imageAlt="Dr. Klaus Bergmann"
imagePosition="right"
>
<p>Klimaschutz ist keine Option, sondern Verantwortung.</p>
</Quote>Redakteur-Hinweise
Empfehlungen für glaubwuerdige, wirkungsvolle Zitate.
| Element | Empfehlung |
|---|---|
| Zitat-Text | 1–3 Sätze, max. 200 Zeichen. Kurze, praegnante Aussagen wirken stärker als lange Absätze. |
| Autor | Vollständiger Name. Keine Abkuerzungen oder nur Vornamen — das wirkt unserioes. |
| Rolle/Position | Titel oder Funktion der Person. „Geschäftsführerin“, „Kundin seit 2018“, „Bürgermeister Musterstadt“. |
| Featured-Bild | Portraetfoto, min. 400×400px, quadratisch. Person erkennbar, freundlicher Ausdruck. Kein Logo. |
| Einsatz | Max. 2–3 Zitate pro Seite. Zwischen anderen Content-Blöcken platzieren, nicht am Seitenende häufen. |
Installation
cp-components add quote