Pular para o conteúdo
Faculdade PhorteDesign System

FeaturesGrid

Em andamento

Seção de benefícios de página de campanha: título "Por que escolher a Phorte?", descrição e quatro cartões com ícone, título e frase. Os benefícios vêm por itens (o formato do WhyChoose), e o título e a descrição por titulo e descricao (E78).

Função
Campanha (marketing)
Também chamado de
benefícios, diferenciais de campanha, grade de recursos, features
Mora em
app/components/organisms/marketing/FeaturesGrid.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 benefícios

Quando usar

Em página de campanha, logo depois do topo, para os argumentos do curso ou da oferta.

Faça

  • Passe itens e o titulo da campanha — o padrão repete o título do WhyChoose.
  • Confira as promessas antes de publicar ("Mentoria 24/7", "validade imediata").

Evite

  • Usar junto com o WhyChoose na mesma página: os dois se chamam "Por que escolher a Phorte?".

Quando não usar. Na página inicial, para os diferenciais institucionais, use o WhyChoose — as duas peças continuam separadas (decisão de 2026-09-28), com os mesmos dados e as mesmas primitivas: o WhyChoose centra e arredonda o ícone; esta alinha à esquerda, sem borda no celular. Para números, o MetricsBanner.

Anatomia

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

  1. Título — Typography `h2` grande e a descrição.
  2. Benefício — Um Card com o ícone num IconBox `primary` (E78; era o ícone solto), título (`CardTitle`, `h3`) e a frase.

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
CelularCartões sem borda nem fundo, uma coluna.
A partir de 768pxCartões com borda e sombra; duas colunas, 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