Card Offer
É um componente de card feito especificamente para o 'Módulo de Oferta', onde adquire uma aparência específica para esse contexto.
Uso
Este card deve ser usado exclusivamente dentro do 'Módulo de Oferta' (que se apresenta como uma sheet ou modal).
O Módulo de Oferta é usado para ofertar a assinatura ao usuário em dois contextos principais:
Ao tentar consumir um conteúdo bloqueado pela assinatura.
Durante o fluxo de consumo do produto (ex: como um interstitial).
❌ Don't
Não usar este card fora do contexto do 'Módulo de Oferta'
Variantes
Main content
Um card que mostra o conteúdo que a pessoa tentou acessar. Como o modulo de venda tampa o conteúdo anterior que foi clicado, mostramos ele aqui de novo para servir como um lembrete com o pensamento de "Isso foi o que você tentou consumir. Assine e terá acesso".
❖. Container
Agrupamento geral do componente.
1. Title box (Opcional)
Área opcional do componente para aplicar um mini título do card. É usado para contextualizar o card quando múltiplos cards estão presentes (ex: "Inclui este conteúdo"). No módulo default (onde apenas o card 'Bulletpoints' é exibido), este 'Title box' não é mostrado.
2. Thumbnail
Slot para colocar a imagem do conteúdo que o usuário tentou abrir.
3. Label Tertiary
Local para aplicação da informação de texto com menor prioridade do conteúdo. Não possui truncamento de texto.
4. Label Primary
Local para aplicação da informação de texto com maior prioridade do conteúdo. Não possui truncamento de texto.
More content
Esse card acompanha a aplicação do Main content. Com a gente aplicando o conteúdo que o usuário tentou abrir no Main content, teremos um card abaixo que mostra quais outros conteúdos são similares a esse e podem ser interessantes para o usuário. E isso é feito na variante "More content" em que tem 3 componentes de Lista para colocar esses conteúdos a mais.
❖. Container
Agrupamento geral do componente.
1. Title box (Opcional)
Área opcional do componente para aplicar um mini título do card. É usado para contextualizar o card quando múltiplos cards estão presentes (ex: "Mais para explorar"). No módulo default (onde apenas o card 'Bulletpoints' é exibido), este 'Title box' não é mostrado.
2. List itens
Conjunto fixo de 3 listas para aplicar os conteúdos similares ao conteúdo que houve tentativa de consumo.
Bulletpoints
Por ultimo a variante do card que sempre estará sempre no módulo de venda. Inclusive o modo default do módulo de venda mostra apenas esse card. Ele é uma lista de bulletpoints que é usado para falar de forma abrangente o que o produto oferece na assinatura.
❖. Container
Agrupamento geral do componente.
1. Title box (Opcional)
Área opcional do componente para aplicar um mini título do card. É usado para contextualizar o card quando múltiplos cards estão presentes (ex: "Assine e desbloqueie"). No módulo default (onde apenas o card 'Bulletpoints' é exibido), este 'Title box' não é mostrado.
2. Bulletpoints
Conjunto bulletpoints para listar as principais features do produto. Utiliza um ícone fixo de 'check' (✓).
3. Button (Opcional)
Link de navegação, geralmente "Saiba mais", usado para direcionar o usuário à Landing Page de venda da assinatura para mais informações.
Posicionamento
Quando o 'Módulo de Oferta' está no modo "Contextual ao conteúdo" (exibindo as 3 variantes), os cards devem seguir uma ordem de informação do micro para o macro:
Main content (O que você clicou)
More content (O que é similar)
Bulletpoints (O que o produto oferece)
Layout responsivo
O componente possui adaptações de tipografia (tamanho de fonte) entre a versão Mobile e Desktop, conforme especificado no Figma.
Comportamento
O componente não possui scroll ou transições internas. Ele acompanha o scroll nativo da 'sheet' (Módulo de Oferta) onde está contido.
Histórico de Atualizações
Atualizado