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

Связанные