CSS: testimonial

div[class~="instui-testimonial"] — Exibição de citação ou depoimento com atribuição e imagem opcional.

✅ Use Testimonial quando:

• Exibir depoimentos e citações de clientes ou usuários

• Quiser destacar uma declaração com ênfase visual

• A atribuição e o contexto (nome, cargo, imagem) forem importantes 🚫 Não use Testimonial quando:

• Exibir citações inline no corpo do texto — use um elemento blockquote em vez disso

• A declaração for o foco principal — use Hero ou Card em vez disso

Acessibilidade

• Use <blockquote> semanticamente para a citação
• Garanta que a atribuição esteja clara e associada à citação
• Se usar imagens, forneça texto alternativo

Uso

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

Exemplos

Partes

Parte	Descrição
.instui-author	Nome do autor para atribuição.
.instui-avatar	Imagem de perfil do autor (opcional).
.instui-content	Contêiner para citação e atribuição.
.instui-quote	O texto citado.
.instui-title	Título ou afiliação do autor (opcional).

Estados

Estado	Descrição
: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	—	—

Relacionados

• card