Skip to content

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

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

Partes

ParteDescrição
.instui-authorNome do autor para atribuição.
.instui-avatarImagem de perfil do autor (opcional).
.instui-contentContêiner para citação e atribuição.
.instui-quoteO texto citado.
.instui-titleTítulo ou afiliação do autor (opcional).

Estados

EstadoDescrição
:optional

Tokens consumidos

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