Pricing
O Pricing mostra os planos de um produto ou serviço, cada um com preço, o que está incluído e um botão. Com um plano
só, ele vira uma oferta larga, com o preço à esquerda e o que vem incluso à direita. Com dois a quatro planos, eles
viram cartões de mesma largura.
As variantes:
simple: os planos com preço fixo. É a padrão.toggle: um seletor de dois períodos (por exemplo, mensal e anual). Cada plano tem um preço por período. O rótulo do seletor é «Período do plano» por padrão, e a propriedadelegendo troca.
O preço de cada plano é price: { amount, currency, period }. O amount é em reais, com até duas casas decimais:
amount: 49 aparece como R$ 49,00, e amount: 49.9 como R$ 49,90. Um valor negativo, infinito ou com mais de duas
casas é recusado na composição (ui/sections/pricing/pricing.ts:148-158). Só um plano pode ter highlight: se você
marcar dois, a composição falha dizendo qual é o segundo (pricing.ts:164-169).
Pricing
Pasta: ui/sections/pricing
Variantes
| Id | Variante | Tom |
|---|---|---|
pricing-simple-light | simple | light |
pricing-simple-gray | simple | gray |
pricing-simple-dark | simple | dark |
pricing-simple-accent | simple | accent |
pricing-simple-light-3-plans | simple | light |
pricing-toggle-light-3-plans | toggle | light |
Propriedades
| Propriedade | Tipo | Obrigatória | Descrição |
|---|---|---|---|
variant | "simple" | "toggle" | Não | — |
plans | readonly PricingPlan[] | readonly PricingTogglePlan[] | Sim | — |
title | string | Sim | — |
intro | string | Não | — |
guarantee | PricingGuarantee | Não | — |
buttonStyle | ButtonStyle | Não | One style for every plan button; without it, a highlight leaves the other plans `secondary`. |
tone | Tone | Não | — |
density | Density | Não | — |
width | Width | Não | — |
id | string | Não | — |
periods | PricingPeriods | Não | — |
Onde aparece nos templates
Seção intitulada “Onde aparece nos templates”toggle:templates/landing-page/models/produto/files/src/data/content.ts:132.simple:templates/landing-page/models/lancamento/files/src/data/content.ts:96.- Também em
templates/landing-page/models/evento/files/src/data/content.ts:117, com a variante padrão.
Captura da primeira variante do catálogo (simple, tom claro, em 1280 px):
A mesma variante em 360 px:
