CSS: testimonial ​

div[class~="instui-testimonial"] — Quote or testimonial display with attribution and optional imagery.

✅ Use Testimonial when:

  • Displaying customer or user testimonials and quotes

  • You want to highlight a statement with visual emphasis

  • Attribution and context (name, title, image) are important 🚫 Don't use Testimonial when:

  • Displaying inline quotes in body text — use a blockquote element instead

  • The statement is the main focus — use Hero or Card instead

Accessibility ​

  • Use <blockquote> semantically for the quote
  • Ensure attribution is clear and associated with the quote
  • If using images, provide alt text

Usage ​

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

Parts ​

PartDescription
.instui-authorAttribution author name.
.instui-avatarOptional author profile image.
.instui-contentContainer for quote and attribution.
.instui-quoteThe quoted text.
.instui-titleOptional author title or affiliation.

States ​

StateDescription
:optional—

Tokens consumed ​

TokenTypeValue
--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——