CSS: testimonial

div[class~="instui-testimonial"] — Visualización de cita o testimonio con atribución e imágenes opcionales.

✅ Usar Testimonial cuando:

• Mostrar testimonios y citas de clientes o usuarios

• Deseas resaltar una declaración con énfasis visual

• La atribución y el contexto (nombre, título, imagen) son importantes 🚫 No uses Testimonial cuando:

• Mostrar citas en línea dentro del texto — usa un elemento blockquote en su lugar

• La declaración es el enfoque principal — usa Hero o Card en su lugar

Accesibilidad

• Usa <blockquote> semánticamente para la cita
• Asegura que la atribución sea clara y esté asociada a la cita
• Si usas imágenes, proporciona texto alternativo (alt)

Uso

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

Ejemplos

Partes

Parte	Descripción
.instui-author	Nombre del autor de la atribución.
.instui-avatar	Imagen de perfil del autor (opcional).
.instui-content	Contenedor para la cita y la atribución.
.instui-quote	El texto citado.
.instui-title	Título o afiliación del autor (opcional).

Estados

Estado	Descripción
:optional	—

Tokens consumidos

Token	Tipo	Valor
--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	—	—

Relacionado

• card