Pular para o conteúdo
Faculdade PhorteDesign System

MetricsBanner

Em andamento

Faixa vermelha escura com quatro números da instituição — "+500K Alunos Impactados", "99% Satisfação Garantida"… —, com divisórias entre eles. Os números vêm por metricas (E76), e a faixa é uma região com título só para o leitor (titulo, padrão "A Phorte em números").

Função
Campanha (marketing)
Também chamado de
números, métricas, faixa de números, estatísticas
Mora em
app/components/organisms/marketing/MetricsBanner.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 números

Quando usar

Em página de campanha, entre seções, como prova de escala.

Faça

  • Passe metricas com números que a instituição sustenta.

Evite

  • Publicar os números de exemplo: "99% Satisfação Garantida" é uma promessa.

Quando não usar. Para números em cartões, use o StatCard. Para diferenciais com texto, o WhyChoose ou o FeaturesGrid.

Anatomia

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

  1. Faixa — Região com título `sr-only` (`h2`), fundo `--primary-dark`, texto branco.
  2. Métrica — Um par da lista de definição (E76): o rótulo (`dt`, `tiny`) e o valor (`dd`, com a cara do `h2`), o valor em cima na tela; divisória à esquerda.

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ãoDuas colunas no celular, quatro a partir de 1024px.

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