Pular para o conteúdo
Faculdade PhorteDesign System

TestimonialCarousel

Em andamento

Seção "Experiências Reais": três depoimentos em cartões lado a lado — aspas, citação, nome e cargo. Apesar do nome, não é carrossel: é uma grade parada (o nome ficou, E78 — renomear quebraria quem já importa). Os depoimentos vêm por depoimentos.

Função
Campanha (marketing)
Também chamado de
depoimentos, avaliações, o que dizem
Mora em
app/components/organisms/marketing/TestimonialCarousel.tsx
Última mudança
2026-09-30
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 Padrão, 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. Padrão
  2. Outros depoimentos

Quando usar

Em página de campanha, como vitrine de depoimentos em texto.

Faça

  • Passe depoimentos (name, role, quote) reais.

Evite

  • Contar com o comportamento de carrossel: não há setas nem rolagem.

Quando não usar. Para depoimentos em vídeo, o VideoTestimonialCarousel. Para a seção de depoimentos da página inicial, com fotos e vídeo, o Testimonials — as duas continuam separadas (decisão de 2026-09-28), e as duas usam figure e blockquote.

Anatomia

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

  1. Título — Typography `h2` e a frase.
  2. Depoimento — Um Card com uma `figure` (E78): ícone de aspas (decorativo), a citação em `blockquote` e, na `figcaption`, o nome (`h3`) e o cargo.

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
PadrãoUma coluna no celular, três a partir de 768px.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Entrada na telaAbaixo da dobra, sobe 20px e aparece ao entrar na tela, uma vez. O HTML do servidor já sai visível, e o que está à vista ao abrir não é escondido — sem JavaScript, nada some (E138, testado). Com movimento reduzido, não anima.

Relacionados