Zitat

Zitate können mit oder ohne Bild eingesetzt werden, dürfen aber nur untereinander, nie nebeneinander platziert werden.

Varianten

Zitat ohne Bild

Vorschau

Nur wenn wir als Stadt gemeinsam unseren Blick auf ein klimaneutrales Wien 2040 richten und sparsam mit unseren Ressourcen umgehen, können wir die hohe Wiener Lebensqualität erhalten und steigern.

Code

<wm-quote source="Maria Magistrati" caption="Bereichsleiterin für Klimaangelegenheiten" type="small">
  Nur wenn wir als Stadt gemeinsam unseren Blick auf ein klimaneutrales Wien 2040 richten und sparsam mit unseren
  Ressourcen umgehen, können wir die hohe Wiener Lebensqualität erhalten und steigern.
</wm-quote>

Zitat mit Bild

Vorschau

Das ist doch mal ein super tolles Zitat!

Code

<wm-quote source="Maria Magistrati" caption="Bereichsleiterin für Klimaangelegenheiten">
  <img
    src="/images/pattern/sonstige/avatar/maria-magistrati.svg"
    alt="Foto Maria Magistrati"
    slot="image"> Das ist doch mal ein super tolles Zitat!
</wm-quote>

Zitat mit großem Bild

Vorschau

Das ist doch mal ein super tolles Zitat!

Code

<wm-quote type="large" source="Maria Magistrati" caption="Bereichsleiterin für Klimaangelegenheiten">
  <img
    src="/images/pattern/sonstige/avatar/maria-magistrati.svg"
    alt="Foto Maria Magistrati"
    slot="image"> Das ist doch mal ein super tolles Zitat!
</wm-quote>

Dev

Interaktive Demo

Vorschau

Portrait von Markus Plainer in Schwarz-Weiss.

Das ist doch mal ein super tolles Zitat!

Code

<wm-quote data-demo-pattern="wm-quote-preview" source="Vorname Familienname" caption="Berufsbeschreibung">
  <img
    src="/images/pattern/sonstige/markus_portrait_cv.jpg"
    alt="Portrait von Markus Plainer in Schwarz-Weiss."
    slot="image"> Das ist doch mal ein super tolles Zitat!
</wm-quote>

API

Abhängigkeiten

HTML

<script src="https://assets.wien.gv.at/theme/latest/js/components/Quote/Quote.js" type="module"></script>

JavaScript

import { Quote } from './wienermelange/assets/js/components/Quote/Quote.js';

Eigenschaften

Eigenschaften
Eigenschaft	Beschreibung	Werte	Default
`type`	Größe des Bildes	`'large'\|'small'`	`"small"`
`source`	Die Quelle des Zitats (unterstützt HTML-Tags)	`String`	leer
`caption`	Untertitel der Quelle (unterstützt HTML-Tags)	`String`	leer

Slots

Name	Beschreibung
`image`	Optionales Bild
`default`	Zitat

Kontakt

Haben Sie noch Fragen, Feedback oder brauchen Sie ein Element, das die Pattern Library noch nicht bietet?

handbuch@ma53.wien.gv.at