Preços
Página de preços com uma chave mensal ou anual que muda todos os valores, três planos com o mais escolhido em destaque, tabela comparativa e perguntas sobre cobrança.
Feito com
Comportamento
- Mensal ou anual. A chave de cobrança é um
ToggleGroupcom um valor só. Clicar de novo na opção ativa não a desliga, então a página nunca fica sem preço. No anual, aparece o valor por mês e, embaixo, o total do ano. - Um plano em destaque. O plano mais escolhido ganha contorno na cor de destaque, botão sólido e um selo; os outros dois têm botões de contorno, para haver um próximo passo óbvio.
- Tabela comparativa. As linhas são recursos e as colunas são planos. Abaixo de 560px, uma escolha de plano mostra um plano por vez ao lado dos recursos, então nenhuma coluna fica escondida fora da tela.
- Layout. A página mede a própria largura: três planos lado a lado a partir de 700px e um por linha abaixo disso. Nunca dois mais um sobrando, que parece um plano faltando.
Acessibilidade
- Uma região viva, escondida da tela, diz "Mostrando preços anuais" quando a chave muda, porque os preços mudam em outro ponto da página.
- Cada botão de plano lê o nome do plano ("Testar por 14 dias, Equipe"), então uma lista de botões ainda faz sentido.
- Os ícones de check e traço da tabela ficam escondidos dos leitores de tela e levam o texto "Incluído" ou "Não incluído"; os nomes dos recursos são cabeçalhos de linha.
- Os gatilhos das perguntas são títulos
h3abaixo doh2"Dúvidas sobre cobrança", definidos comAccordionTrigger level.
Esta página foi útil? · Editar esta página no GitHub