Pular para o conteúdo
Faculdade PhorteDesign System

PricingCards

Em andamento

Seção "Planos Transparentes": três planos lado a lado — Básico, Pro (em destaque, "Mais Popular") e Empresarial —, cada um com preço, período, benefícios e, com href, "Assinar Agora". Os planos vêm por planos (E74).

Função
Campanha (marketing)
Também chamado de
planos, preços, tabela de preços, pricing
Mora em
app/components/organisms/marketing/PricingCards.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 Padrao, 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. Padrao
  2. Sem destino

Quando usar

Em página de campanha com mais de um plano para comparar.

Faça

  • Passe planos, cada um com o href da assinatura; sem href, o plano fica sem botão.

Evite

  • Publicar com os planos de exemplo (os que vêm sem prop).

Quando não usar. Para uma oferta só, com contagem regressiva, use o FloatingPricingCard. Para o preço de um curso, o CourseCard com preco.

Anatomia

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

  1. Título — Typography `h2` e a frase.
  2. Plano — Um Card: nome (`CardTitle`, `h3`), preço (Typography `h2` como `<p>`, E74) e período, benefícios com visto e, com `href`, o Button.
  3. Destaque — No plano popular: Card `elevated`, borda vermelha e o Badge "Mais Popular" no topo.

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
Plano popularMaior (avança sobre os vizinhos), borda vermelha, Badge e Button primary.
Outros planosCard padrão e Button outline.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
"Assinar Agora"Leva ao href do plano; sem ele, não aparece (E74) — testado na ficha.

Relacionados