Pular para o conteúdo
Faculdade PhorteDesign System

NewsletterStrip

Em andamento

Faixa escura de campanha para captar e-mails: a partir de 1024px, o título e a frase à esquerda e o formulário à direita — o campo de e-mail (rótulo só para o leitor), o botão e a linha de privacidade. Ligada por onSubmit (E73, decisão de 2026-09-28); estrutura refeita na revisão 3 (E131).

Função
Campanha (marketing)
Também chamado de
newsletter de campanha, captação de e-mail, inscrição por e-mail
Mora em
app/components/organisms/marketing/NewsletterStrip.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 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. Sem envio
  3. Com textos próprios

Quando usar

No fim de uma página de campanha, para captar a inscrição.

Faça

  • Passe onSubmit: ele recebe o e-mail. Sem ele, o formulário não aparece — só a chamada.
  • Faça o onSubmit lançar erro quando o serviço falhar: o componente diz que não conseguiu.
  • Troque os textos pela campanha: titulo, descricao, rotuloDoBotao e avisoDePrivacidade (E131). A linha de privacidade diz a frequência e que dá para cancelar.

Evite

  • Tirar o rótulo escondido: o desenho não mostra rótulo, e o placeholder some ao digitar.

Quando não usar. Na página inicial, com consentimento e ilustração, use a Newsletter. Para um contato com mensagem, o ContactForm.

Anatomia

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

  1. Chamada — Título (h2) claro e a frase em `--ink-inverse-muted`: centrados no celular, à esquerda a partir de 1024px. A faixa sobe 20px ao entrar (só com movimento liberado).
  2. E-mail — FormField com a legenda "E-mail" `sr-only` e o Input claro sobre o escuro, `autocomplete="email"`.
  3. Inscrever-se — Button primário grande, com o texto de `rotuloDoBotao`.
  4. Privacidade — A linha embaixo do campo, 14px, `--ink-inverse-muted`.
  5. Retorno — Parágrafo `role="status"`, claro, que recebe o foco depois do envio.

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
Sem `onSubmit`Só a chamada, centrada — testado na ficha.
A partir de 1024pxDuas colunas: o texto à esquerda, o formulário à direita — até a revisão 3 o texto ficava à esquerda e o formulário no centro.
ErroE-mail vazio ou sem @: o erro embaixo do campo, que fica aria-invalid — conferido no teste da ficha.
EnviandoO botão em isLoading ("Enviando inscrição…").
Enviado"Inscrição feita! As novidades vão chegar em <e-mail>." com o foco.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Inscrever-se com e-mail válidoChama onSubmit com o e-mail e leva o foco ao retorno — conferido no teste da ficha.

Relacionados