Skip to content

CSS: testimonial

div[class~="instui-testimonial"] — Visualització de cita o testimoni amb atribució i imatge opcional.

✅ Utilitza Testimonial quan:

  • Mostrar testimonis i cites de clients o usuaris

  • Vols destacar una declaració amb èmfasi visual

  • L'atribució i el context (nom, càrrec, imatge) són importants 🚫 No facis servir Testimonial quan:

  • Mostrar cites en línia dins del text — utilitza en canvi un element blockquote

  • La declaració és el focus principal — utilitza en canvi Hero o Card

Accessibilitat

  • Utilitza <blockquote> semànticament per a la cita
  • Assegura't que l'atribució sigui clara i estigui associada a la cita
  • Si s'utilitzen imatges, proporciona text alternatiu

Ús

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

Parts

PartDescripció
.instui-authorNom de l'autor per a l'atribució.
.instui-avatarImatge de perfil de l'autor (opcional).
.instui-contentContenidor per a la cita i l'atribució.
.instui-quoteEl text citat.
.instui-titleCàrrec o afiliació de l'autor (opcional).

Estats

EstatDescripció
:optional

Tokens consumits

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

Relacionat