Use Chamadas para ação quando a interface precisar de blocos de conversão para produto, conteúdo, comunidade e relacionamento.
Chamadas para ação
Blocos de conversão para produto, conteúdo, comunidade e relacionamento. A documentação abaixo separa composição, comportamento e adaptação visual de cada variante.
Evite a família quando uma composição semântica mais simples comunicar a mesma ação com menos carga visual.
O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
WIDE · stable
#Base
Blocos de conversão para produto, conteúdo, comunidade e relacionamento.
HTML e exemplo
<article class="sc-showcase-cta">Chamadas para ação</article>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Usar HTML semântico e foco visível.
- Fornecer rótulo acessível quando não houver texto visível.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
WIDE · stable
#Conversion
Conversion, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<section class="sc-showcase-cta sc-showcase-cta-1"><div><span class="sc-badge">Conversion</span><h2>Pronto para transformar interface em produto?</h2><p>Comece com os componentes que precisa e evolua sem refazer a base.</p></div><div><button class="sc-btn sc-btn-primary" type="button">Começar agora</button><button class="sc-btn sc-btn-outline" type="button">Ver documentação</button></div></section>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Mantém contraste de texto e foco visível.
- Conteúdo e ações permanecem disponíveis sem animação.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Possui fallback para prefers-reduced-motion.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
WIDE · stable
#Product
Product, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<section class="sc-showcase-cta sc-showcase-cta-2"><div><span class="sc-badge">Product</span><h2>Pronto para transformar interface em produto?</h2><p>Comece com os componentes que precisa e evolua sem refazer a base.</p></div><div><button class="sc-btn sc-btn-primary" type="button">Começar agora</button><button class="sc-btn sc-btn-outline" type="button">Ver documentação</button></div></section>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Mantém contraste de texto e foco visível.
- Conteúdo e ações permanecem disponíveis sem animação.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Possui fallback para prefers-reduced-motion.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
WIDE · stable
#Newsletter
Newsletter, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<section class="sc-showcase-cta sc-showcase-cta-3"><div><span class="sc-badge">Newsletter</span><h2>Pronto para transformar interface em produto?</h2><p>Comece com os componentes que precisa e evolua sem refazer a base.</p></div><div><button class="sc-btn sc-btn-primary" type="button">Começar agora</button><button class="sc-btn sc-btn-outline" type="button">Ver documentação</button></div></section>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Mantém contraste de texto e foco visível.
- Conteúdo e ações permanecem disponíveis sem animação.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Possui fallback para prefers-reduced-motion.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
WIDE · stable
#Download
Download, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<section class="sc-showcase-cta sc-showcase-cta-4"><div><span class="sc-badge">Download</span><h2>Pronto para transformar interface em produto?</h2><p>Comece com os componentes que precisa e evolua sem refazer a base.</p></div><div><button class="sc-btn sc-btn-primary" type="button">Começar agora</button><button class="sc-btn sc-btn-outline" type="button">Ver documentação</button></div></section>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Mantém contraste de texto e foco visível.
- Conteúdo e ações permanecem disponíveis sem animação.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Possui fallback para prefers-reduced-motion.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
WIDE · stable
#Demo
Demo, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<section class="sc-showcase-cta sc-showcase-cta-1"><div><span class="sc-badge">Demo</span><h2>Pronto para transformar interface em produto?</h2><p>Comece com os componentes que precisa e evolua sem refazer a base.</p></div><div><button class="sc-btn sc-btn-primary" type="button">Começar agora</button><button class="sc-btn sc-btn-outline" type="button">Ver documentação</button></div></section>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Mantém contraste de texto e foco visível.
- Conteúdo e ações permanecem disponíveis sem animação.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Possui fallback para prefers-reduced-motion.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
WIDE · stable
#Contact
Contact, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<section class="sc-showcase-cta sc-showcase-cta-2"><div><span class="sc-badge">Contact</span><h2>Pronto para transformar interface em produto?</h2><p>Comece com os componentes que precisa e evolua sem refazer a base.</p></div><div><button class="sc-btn sc-btn-primary" type="button">Começar agora</button><button class="sc-btn sc-btn-outline" type="button">Ver documentação</button></div></section>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Mantém contraste de texto e foco visível.
- Conteúdo e ações permanecem disponíveis sem animação.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Possui fallback para prefers-reduced-motion.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
WIDE · stable
#Trial
Trial, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<section class="sc-showcase-cta sc-showcase-cta-3"><div><span class="sc-badge">Trial</span><h2>Pronto para transformar interface em produto?</h2><p>Comece com os componentes que precisa e evolua sem refazer a base.</p></div><div><button class="sc-btn sc-btn-primary" type="button">Começar agora</button><button class="sc-btn sc-btn-outline" type="button">Ver documentação</button></div></section>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Mantém contraste de texto e foco visível.
- Conteúdo e ações permanecem disponíveis sem animação.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Possui fallback para prefers-reduced-motion.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
WIDE · stable
#Upgrade
Upgrade, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<section class="sc-showcase-cta sc-showcase-cta-4"><div><span class="sc-badge">Upgrade</span><h2>Pronto para transformar interface em produto?</h2><p>Comece com os componentes que precisa e evolua sem refazer a base.</p></div><div><button class="sc-btn sc-btn-primary" type="button">Começar agora</button><button class="sc-btn sc-btn-outline" type="button">Ver documentação</button></div></section>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Mantém contraste de texto e foco visível.
- Conteúdo e ações permanecem disponíveis sem animação.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Possui fallback para prefers-reduced-motion.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
WIDE · stable
#Community
Community, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<section class="sc-showcase-cta sc-showcase-cta-1"><div><span class="sc-badge">Community</span><h2>Pronto para transformar interface em produto?</h2><p>Comece com os componentes que precisa e evolua sem refazer a base.</p></div><div><button class="sc-btn sc-btn-primary" type="button">Começar agora</button><button class="sc-btn sc-btn-outline" type="button">Ver documentação</button></div></section>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Mantém contraste de texto e foco visível.
- Conteúdo e ações permanecem disponíveis sem animação.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Possui fallback para prefers-reduced-motion.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
WIDE · stable
#Launch
Launch, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<section class="sc-showcase-cta sc-showcase-cta-2"><div><span class="sc-badge">Launch</span><h2>Pronto para transformar interface em produto?</h2><p>Comece com os componentes que precisa e evolua sem refazer a base.</p></div><div><button class="sc-btn sc-btn-primary" type="button">Começar agora</button><button class="sc-btn sc-btn-outline" type="button">Ver documentação</button></div></section>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Mantém contraste de texto e foco visível.
- Conteúdo e ações permanecem disponíveis sem animação.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Possui fallback para prefers-reduced-motion.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.