Pular para o conteúdo
Faculdade PhorteDesign System

LogoMarquee

Em andamento

Faixa de logotipos que rola sozinha, em laço, com título em cima e um botão de pausa; a segunda cópia da faixa (que faz o laço) fica fora da árvore de acessibilidade.

Função
Campanha (marketing)
Também chamado de
faixa de logos, marcas, parceiros, logos rolando
Mora em
app/components/organisms/marketing/LogoMarquee.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

Quando usar

Para mostrar marcas, parceiros ou selos numa faixa, em página de campanha ou institucional.

Faça

  • Passe marcas com nome e logo: o nome é o alt do logotipo.
  • Mantenha o botão de pausa: a faixa se move sozinha por mais de cinco segundos (WCAG 2.2.2).

Evite

  • Marca sem logo na lista padrão sem avisar: a faixa mostra só o nome em texto, e o desenho fica desigual.

Quando não usar. Para uma frase promocional rolando, use o PromoMarquee. Para logos parados, uma lista comum de imagens.

Anatomia

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

  1. Título — `tiny` centrado ("Faculdade Phorte" por padrão).
  2. Faixa — Duas cópias da lista de logotipos (48px de altura), em laço de 40s.
  3. Pausa — Botão redondo de 44px no canto.

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
RolandoA faixa corre em laço; o botão diz "Pausar a rolagem das marcas".
PausadaA faixa para; o botão vira "Retomar…" com aria-pressed="true" — medido.
Movimento reduzidoA faixa não corre e o botão some; os itens quebram linha, cada um uma vez (E145). Era uma rolagem manual sem nada focável dentro — o teclado não chegava ao que ficava fora da largura.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Marca sem logotipoMostra o nome da marca em texto.

Relacionados