CSS: testimonial

div[class~="instui-testimonial"] — Zitat- oder Testimonial-Anzeige mit Namensnennung und optionalen Bildern.

✅ Testimonial verwenden, wenn:

• Kunden- oder Nutzer-Testimonials und Zitate anzeigen

• Sie möchten eine Aussage visuell hervorheben

• Quellenangabe und Kontext (Name, Titel, Bild) sind wichtig 🚫 Testimonial nicht verwenden, wenn:

• Inline-Zitate im Fließtext anzeigen — verwenden Sie stattdessen ein Blockzitat-Element

• Die Aussage ist der Hauptfokus — verwenden Sie stattdessen Hero oder Card

Barrierefreiheit

• Verwenden Sie <blockquote> semantisch für das Zitat
• Stellen Sie sicher, dass die Quellenangabe klar ist und dem Zitat zugeordnet ist
• Wenn Bilder verwendet werden, geben Sie Alt-Text an

Verwendung

@import "@pantoken/plugin-layouts/layouts.css";

Beispiele

Teile

Teil	Beschreibung
.instui-author	Name des Autors (Quellenangabe).
.instui-avatar	Optionales Profilbild des Autors.
.instui-content	Container für Zitat und Quellenangabe.
.instui-quote	Der zitierte Text.
.instui-title	Optionaler Titel oder Zugehörigkeit des Autors.

Zustände

Zustand	Beschreibung
:optional	—

Verbrauchte Tokens

Token	Typ	Wert
--instui-color-background	—	—
--instui-color-primary	—	—
--instui-color-surface	—	—
--instui-color-text-primary	—	—
--instui-color-text-secondary	—	—
--instui-font-size-small	<length>	—
--instui-font-weight-semibold	—	—
--instui-radius-medium	—	—
--instui-space-large	—	—
--instui-space-medium	—	—
--instui-space-small	—	—

Verwandt

• card