C9 · Componentes
Call-to-Action
Link visualmente proeminente que direciona o usuário ao próximo passo. Um CTA primário por seção. Três variantes: default, primary, brick.
Variantes
| Variante | Visual | Uso |
|---|---|---|
| Default | Texto + seta '→' à direita. | CTA inline em texto. |
| Primary | Texto peso 600 + seta, cor de acento. | Ação principal de seção. |
| Brick | Botão sólido retangular, fundo de acento. | Hero, landing, banner. |
Em superfícies escuras
Sobre --brand-ink, troque texto para branco e mantenha seta na cor --accent-line.
RegraCTA fala uma única promessa. 'Saiba mais' é genérico — prefira 'Ver drop completo' ou 'Entrar na live'.
Faça e não faça
Faça
- Verbo + objeto concreto. ('Baixar pacote de marca', 'Assistir Live #042').
- Use seta '→' para indicar progressão linear.
- Brick CTA: largura mínima 240px para presença visual.
Não faça
- Não empilhe dois CTAs primários no mesmo bloco.
- Não use ícones decorativos além da seta.
- Não inclua mais de 5 palavras no label.