Skip to content

CSS: testimonial

div[class~="instui-testimonial"] — Visualizzazione di citazione o testimonianza con attribuzione e immagini opzionali.

✅ Usare Testimonial quando:

  • Visualizzare testimonianze e citazioni di clienti o utenti

  • Vuoi evidenziare una dichiarazione con enfasi visiva

  • L'attribuzione e il contesto (nome, ruolo, immagine) sono importanti 🚫 Non usare Testimonial quando:

  • Visualizzare citazioni inline nel testo del corpo — usa invece un elemento blockquote

  • La dichiarazione è il punto focale principale — usa invece Hero o Card

Accessibilità

  • Usa <blockquote> semanticamente per la citazione
  • Assicurati che l'attribuzione sia chiara e associata alla citazione
  • Se usi immagini, fornisci il testo alternativo

Uso

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

Parti

ParteDescrizione
.instui-authorNome dell'autore per l'attribuzione.
.instui-avatarImmagine del profilo dell'autore (opzionale).
.instui-contentContenitore per la citazione e l'attribuzione.
.instui-quoteIl testo citato.
.instui-titleTitolo o affiliazione dell'autore (opzionale).

Stati

StatoDescrizione
:optional

Token consumati

TokenTipoValore
--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

Correlati