Skip to content

CSS: testimonial

div[class~="instui-testimonial"] — відображення цитати або відгуку з вказанням автора та опціональним зображенням.

✅ Використовуйте Testimonial коли:

  • Показуєте відгуки або цитати клієнтів чи користувачів

  • Потрібно виділити висловлювання візуально

  • Важливі вказівка авторства та контекст (ім'я, посада, зображення) 🚫 Не використовуйте Testimonial коли:

  • Показуєте вбудовані цитати в основному тексті — використовуйте елемент blockquote

  • Висловлення є основним фокусом — використовуйте Hero або Card замість цього

Доступність

  • Використовуйте <blockquote> семантично для цитати
  • Переконайтеся, що авторство чітке і пов’язане з цитатою
  • Якщо використовуєте зображення, додайте alt-текст

Використання

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

Частини

ЧастинаОпис
.instui-authorІм'я автора (вказівка авторства).
.instui-avatarОпціональне зображення профілю автора.
.instui-contentКонтейнер для цитати та вказівки авторства.
.instui-quoteЦитований текст.
.instui-titleОпціональна посада автора або його приналежність.

Стані

СтанОпис
:optional

Використано токенів

TokenТипЗначення
--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

Пов'язані