Testimonial

Preview Available in release assets

Attribute a short endorsement without manufacturing interactive carousel behavior.

Testimonial in context

<figure class="thin-testimonial">
  <blockquote>
    <p>“We changed the theme, not the reading order or the markup. The publication finally feels like ours without becoming fragile.”</p>
  </blockquote>
  <figcaption>Marisol Vega, editorial director at a deliberately long organization name</figcaption>
</figure>

Show code

<figure class="thin-testimonial">
  <blockquote>
    <p>“We changed the theme, not the reading order or the markup. The publication finally feels like ours without becoming fragile.”</p>
  </blockquote>
  <figcaption>Marisol Vega, editorial director at a deliberately long organization name</figcaption>
</figure>

Anatomy

Figure
Blockquote
Quoted paragraph
Figcaption attribution

Variants and sizes

Text attribution
Attribution with portrait
Linked case study

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

States and difficult content

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Long localized quotation
Missing portrait
Anonymous attribution
Narrow container
High contrast

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

A standalone testimonial is static; collections use native Reel or Carousel only when user-controlled navigation is justified.

Accessibility

Use blockquote for the quotation, figcaption for its source, meaningful portrait alternatives, and typographic quotation marks without reading duplicate punctuation.

Contract: COMPOSE
Basis: Composition of native landmarks, headings, lists, links, and forms; no APG widget

API

Use figure.thin-testimonial with blockquote and figcaption.

Behavior tier: css-only

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Landmarks, headings, links, media, disclosure, and native forms remain useful in normal document flow without CSS or JavaScript.

Assets and dependencies

/foundation.css
/layouts.css
/components.css
/patterns/marketing.css
/icons/sprite.svg

Dependencies: None

Source: packages/ui/src/items/marketing/style.ts