Pular para o conteúdo
Faculdade PhorteDesign System

FloatingPricingCard

Em andamento

Cartão de preço de campanha: nome do curso (o título do cartão), preço cheio riscado, "Economia de 50%", preço por mês em destaque, benefícios e, com hrefDaMatricula, "Matricular Agora". Sem contagem regressiva desde a E76. As outras props têm padrão.

Função
Campanha (marketing)
Também chamado de
cartão de preço, oferta, pricing
Mora em
app/components/organisms/marketing/FloatingPricingCard.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.

Na largura da página: 0px

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 Promocao
  3. Texto Longo
  4. Sem destino

Quando usar

Ao lado do MarketingHero na variante de conversão, ou sozinho numa página de oferta.

Faça

  • Passe courseName, originalPrice, promoPrice, installments e features reais.
  • Passe hrefDaMatricula: sem ele, "Matricular Agora" não aparece (E74).
  • Ajuste nivelDoTitulo (padrão h3) ao lugar do cartão na página.

Evite

  • Prazo de oferta no cartão: a contagem regressiva saiu (E76, decisão de 2026-09-28) porque recomeçava a cada visita — se o prazo for real, escreva a data.
  • Deixar "Economia de 50%" com preços que não dão 50%: o texto é fixo.

Quando não usar. Para comparar planos, use o PricingCards. Para o preço de um curso no catálogo, o CourseCard com preco.

Anatomia

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

  1. Curso — O título do cartão (`h3` por padrão, `nivelDoTitulo`), em `tiny`, caixa alta.
  2. Preço — "De <cheio>" riscado, "Economia de 50%", "R$", o valor em destaque (parágrafo, E76) e "/mês"; as parcelas embaixo.
  3. Benefícios — Lista com visto verde.
  4. Chamada — Com `hrefDaMatricula`: Button `lg` com `href` (48px) e a nota da garantia.

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ãoSem estados próprios além do hover do botão: nada no cartão se move sozinho.
Sem destinoSem hrefDaMatricula: o cartão só informa, sem "Matricular Agora".

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
"Matricular Agora"Leva ao hrefDaMatricula; sem a prop, não aparece (E74) — testado na ficha.

Relacionados