Pular para o conteúdo
Faculdade PhorteDesign System

Testimonials

Em andamento

Seção de depoimentos: três cartões escuros de foto, citação, nome e cargo — com o play quando o depoimento tem videoUrl, e o vídeo tocando dentro do cartão (E159) —, setas no celular, e embaixo três depoimentos em texto. Os cartões vêm por depoimentos (E75); os de texto estão no arquivo.

Função
Institucional
Também chamado de
depoimentos, avaliações, prova social, o que dizem
Mora em
app/components/organisms/Testimonials.tsx
Última mudança
2026-10-01
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

1280px, em tamanho real

Pular a prévia
Variante Padrao, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Padrao
  2. Sem vídeo

Quando usar

Na página inicial ou de um curso, como vitrine do bloco de depoimentos.

Faça

  • Passe depoimentos, com videoUrl em quem tiver vídeo: só esses ganham o play. YouTube e Vimeo tocam no cartão; o vertical do Vimeo precisa de formato: "vertical" (o Shorts é reconhecido pelo endereço).

Evite

  • Publicar os depoimentos em texto como estão: nomes e cargos são de exemplo.

Quando não usar. Para depoimentos em vídeo de campanha, use o VideoTestimonialCarousel. Para uma grade só de texto, em campanha, o TestimonialCarousel (que, apesar do nome, não é carrossel).

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  1. Título — Um SectionTitle: "Assista os depoimentos:" quando há vídeo, "Depoimentos" quando não há (E75).
  2. Setas — Só abaixo de 768px: dois CarouselNavButton `tonal` (E65), "Depoimento anterior" e "Próximo depoimento", com `aria-controls` na fileira, que rolam 300px.
  3. Cartão com foto — `figure`: foto escurecida (`alt=""`), o play (só com `videoUrl`, botão de 64px; o vídeo ocupa o cartão, E159b), a citação em `blockquote` e, na `figcaption`, o autor pelo PessoaResumo no escuro (nome em `h3` e cargo). A citação inteira, sem corte: o cartão tem 384px no mínimo (420px a partir de 768px) e cresce com o texto (E139, testado a 320px com o espaçamento do SC 1.4.12).
  4. Depoimentos em texto — Três `figure` escuras: citação em `blockquote`, nome (`h4`) e cargo na `figcaption`.

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
CelularOs cartões rolam na horizontal, com encaixe, e as setas aparecem.
ComputadorOs três cartões em grade; sem setas.
Hover no cartãoA foto aproxima e clareia; o play, quando há, cresce no hover dele.
TocandoO player do YouTube ou do Vimeo ocupa o cartão inteiro, sobre o fundo escuro (E159b, como o depoimento da home da EBAC): o provedor encaixa o vertical e o horizontal. A foto, a citação e o nome saem da tela, sem mudar o tamanho do cartão; o "×" (Fechar vídeo), numa faixa própria em cima, sem cobrir os controles do player.
Sem vídeoSem play, sem cursor-pointer e sem o ícone de link que ficava junto do autor (E75).

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
PlayO vídeo toca dentro do cartão (E159, o mesmo mecanismo do VideoTestimonialCarousel): nada do provedor carrega antes do clique, o player sai pelo youtube-nocookie.com ou com o dnt=1 do Vimeo, e o foco vai para ele — testado na ficha.
Fechar vídeoO player sai, a capa, a citação e o nome voltam, e o foco volta ao play — testado na ficha.
Vídeo de outro lugarSem player para incorporar: o play vira link em nova aba, e diz isso no nome.
Clique no resto do cartãoNada, e o cartão não finge o contrário: o cursor-pointer saiu.
Setas (celular)Rolam a fileira 300px para cada lado.

Relacionados