Card Subscription Offer
Um card que é utilizado para ofertar a assinatura do produto de forma nativa. O layout desse card é feito para mesclar elementos nativos de UI e ser ao mesmo tempo uma chamada de assinatura como seria
Uso
Este componente deve ser exibido apenas para usuários não-assinantes.
Os locais de aplicação dependem da variante utilizada (Small ou Large), que são definidas pelo espaço disponível na interface.
Anatomia
❖. Container
Agrupamento dos elementos.
Serve como área de clique principal do card. O destino do clique (URL) pode variar conforme a estratégia de marketing.
O hover no container tem um tratamento especial (aplicado em ambas as variantes): a borda (outline) com a cor do produto se torna mais espessa.
1. Title (Obrigatório)
Título do card.
Conteúdo de texto variável definido pela estratégia de marketing.
Sem quantidade máxima de linhas. O card irá crescer verticalmente para acomodar o texto (recomenda-se bom senso na redação).
2. Description (Obrigatório)
Descrição do card.
Conteúdo de texto variável definido pela estratégia de marketing.
Sem quantidade máxima de linhas. O card irá crescer verticalmente para acomodar o texto (recomenda-se bom senso na redação).
3. Botão "Assine" (Obrigatório)
Um botão pré-definido (padronização de aplicações) que é aplicado internamente.
O texto do botão é variável e definido pela estratégia de marketing (ex: "Assine", "Saiba mais").
Funciona como um reforço visual, pois toda a área do "Container" já é clicável.
A ação de clique do botão é a mesma do "Container".
4. Main image (Obrigatório)
Uma imagem ilustrativa para o card (conteúdo variável).
Não contém BG, pois o BG é colocado em outra área (Background).
5. Background (Obrigatório)
Um slot para aplicação de uma imagem de fundo (ex: colagem).
A imagem utilizada é definida pela estratégia de marketing.
Variantes
Small
Esta variante é aplicada em contextos onde o espaço horizontal é limitado.
Mobile: Usado em locais como o Footer ou em telas de menu (ex: Side Sheet) que ocupam a tela inteira.
Desktop: Usado em locais de largura restrita, como uma Side Sheet de menu de usuário no canto da tela.
Large
Esta variante é usada apenas em contextos com grande espaço horizontal.
Desktop: Aplicada em áreas largas, como o Footer do desktop, onde a variante Small não seria adequada.
Histórico de Atualizações
Atualizado