CSS: testimonial

div[class~="instui-testimonial"] — Wyświetlenie cytatu lub opinii z przypisaniem i opcjonalną grafiką.

✅ Użyj Testimonial gdy:

• Wyświetlanie referencji lub opinii klientów/użytkowników i cytatów

• Chcesz wyróżnić wypowiedź wizualnie

• Przypis i kontekst (imię, stanowisko, zdjęcie) są ważne 🚫 Nie używaj Testimonial gdy:

• Wyświetlanie cytatów inline w treści — użyj elementu blockquote zamiast tego

• Wypowiedź jest głównym punktem — użyj Hero lub Card zamiast tego

Dostępność

• Używaj <blockquote> semantycznie dla cytatu
• Upewnij się, że przypis jest czytelny i powiązany z cytatem
• Jeśli używasz obrazów, podaj tekst alternatywny

Użycie

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

Przykłady

Części

Część	Opis
.instui-author	Imię autora przypisu.
.instui-avatar	Opcjonalne zdjęcie profilowe autora.
.instui-content	Kontener dla cytatu i przypisu.
.instui-quote	Cytowany tekst.
.instui-title	Opcjonalny tytuł autora lub afiliacja.

Stany

Stan	Opis
:optional	—

Zużyte tokeny

Token	Typ	Wartość
--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	—	—

Powiązane

• card