Como ele é
Três cartões brancos ficam lado a lado, com um seletor Mensal e Anual centralizado acima; a opção anual traz um selo verde com o desconto. O plano em destaque tem borda colorida, sombra suave e uma faixa Mais escolhido no topo. Cada cartão mostra nome, descrição, preço grande por mês e, no anual, quanto será cobrado por ano e a economia em verde. Ao trocar o período, os números correm até o novo valor. Os recursos têm sinal de confere verde, e alguns trazem um ponto de interrogação que abre uma dica escura. Embaixo, um botão abre a comparação completa, organizada por categorias que abrem e fecham.
Você pode estar procurando isto se pediu algo assim
- tabela de planos com botão de mensal e anual
- página de preços do meu SaaS com o plano mais vendido em destaque
- mostrar quanto a pessoa economiza pagando por ano
- comparar os recursos de cada plano numa tabela
- cards de preço que ficam bonitos no celular
- seção de assinatura com três planos lado a lado
- preço que muda com animação quando troco para anual
- deixar a página de planos com cara de SaaS profissional
Também chamado de
- tabela de preços
- tabela de planos
- comparativo de planos
- pricing table
- pricing cards
- plan comparison
- monthly yearly toggle
Quando usar
- Página de planos de SaaS com cobrança mensal e anual
- Propostas comerciais que apresentam pacotes de serviço
- Lojas e assinaturas que querem destacar o plano mais escolhido
- Páginas em que o cliente precisa comparar recursos antes de decidir
Quando evitar
- Mais ou menos de três planos sem ajustar o layout, que é montado em três colunas
- Preços em outras moedas sem adaptar o código, que formata tudo em reais
Como pedir para a sua IA
Crie uma tabela de preços para a página de planos com três cartões, alternância entre mensal e anual com selo de economia, plano em destaque, dicas acessíveis nos recursos, comparação completa por categoria, layout em coluna no celular e cores da minha marca.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Pódio
Como coloco meus planos e preços em Pódio?
Passe a prop planos com nome, descrição, preço mensal, total anual, recursos com dica opcional, texto do botão e qual plano fica em destaque, e a prop comparacao com categorias e linhas de valores. Pódio calcula automaticamente a economia do anual. Sem essas props, aparecem planos fictícios; o selo de demonstração do topo deve sair na versão final.
Como sei qual plano a pessoa escolheu em Pódio?
Cada botão de plano de Pódio emite o evento select com o id do plano, o período escolhido e o preço mensal equivalente, pronto para levar ao checkout. O período funciona com v-model:periodo, então dá para sincronizar o seletor mensal e anual com a URL ou com outra parte da página.
Pódio funciona no celular?
Funciona. Quando o espaço fica abaixo de 680 pixels, Pódio empilha os cartões numa coluna, e a comparação completa vira um acordeão em que cada recurso lista o valor de cada plano. As dicas abrem ao passar o mouse ou ao focar pelo teclado, e com movimento reduzido os preços trocam sem animação.
