Pular para o conteúdo
Faculdade PhorteDesign System

PromoMarquee

Em andamento

Faixa promocional que rola sozinha, com mensagens em caixa alta separadas por pontos, e um botão de pausa. Recebe as mensagens, o tema (primário, secundário ou escuro) e o rotulo da região.

Função
Campanha (marketing)
Também chamado de
faixa promocional, letreiro, marquee, barra de aviso
Mora em
app/components/organisms/marketing/PromoMarquee.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. Em verde
  3. Escura

Quando usar

No topo de uma página de campanha, para uma chamada curta de oferta.

Faça

  • Passe messages curtas e verdadeiras.
  • Escolha a superfície por tema: primario (padrão), secundario ou escuro — as três passam em contraste (E75; eram duas props de classe livre).

Evite

  • Urgência inventada ("ÚLTIMAS 10 VAGAS") que a página não sustenta.
  • Cor por className: a superfície é do tema, que só oferece as que passam.

Quando não usar. Para logotipos, use o LogoMarquee. Para um aviso que a pessoa precisa ler com calma, o Alert.

Anatomia

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

  1. Faixa — Região com nome ("Faixa promocional"), no fundo do `tema`, com bordas claras em cima e embaixo.
  2. Mensagens — Em caixa alta, negrito, separadas por um ponto; a lista se repete três vezes para o laço.
  3. Pausa — Botão redondo de 44px à direita.

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; o botão diz "Pausar a rolagem da faixa promocional".
PausadaA faixa para; "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
LaçoAs mensagens são repetidas três vezes no DOM; as duas cópias ficam aria-hidden.

Relacionados