Card Plan
Serve como seleção de planos da assinatura do produto.
Uso
Há dois locais atualmente em que ele é mais utilizado: no módulo de oferta (uma sheet/modal que pode aparecer como interstitial ou no consumo de um produto) e na Landing Page de venda da assinatura.
Em ambos os cenários, o card exibe o plano e o preço para convencer o usuário a assinar.
Anatomia
❖. Container
Agrupamento e área de clique do componente.
1. Tag (Opcional)
Utilizado para destacar uma informação pequena e importante, como por exemplo a porcentagem de desconto no momento da assinatura.
2. Radio button (Contextual)
É aplicado quando há mais de um plano para o usuário escolher. Caso exista apenas um plano, o radio button não é exibido e o card já vem pré-selecionado (estado 'Active').
3. Plan name
Slot de texto para colocar o nome do plano. Espera-se um texto curto (ex: 'Anual') que não quebre a linha.
4. Price
Slot de texto para colocar o preço do plano. Espera-se um texto curto que não quebre a linha.
5. Disclamer
Slot de texto para colocar um disclamer contextual daquele plano. Este texto pode quebrar para uma nova linha se necessário, mas deve ser mantido conciso (ex: "À vista com desconto").
Variantes
Horizontal
Utilizada para exibir os planos em um layout de lista, empilhados verticalmente (um abaixo do outro). Comum em bottom sheets ou modais onde o espaço vertical é priorizado.
Nesta variante, o 'Radio button' (Item 2) é posicionado à esquerda dos slots de texto.
Vertical
Utilizada quando há restrição de espaço vertical (como em modais interstitial) e os planos precisam ser exibidos lado a lado.
Nesta variante, o 'Radio button' (Item 2) é posicionado à direita dos slots de texto.
Comportamento
O clique em qualquer área do 'Container' (Item ❖) seleciona o plano, o que ativa o 'Radio button' (Item 2) correspondente (se houver múltiplos planos).
Esta seleção (estado 'Active') atualiza o estado visual do 'Container' (ex: borda) e da 'Tag' (Item 1), se houver. As cores exatas do estado 'Active' são contextuais e definidas pelo tema ou comunicação de marketing.
Histórico de Atualizações
Atualizado