Use Pricing quando a interface precisar de comparação de planos, valor e decisão.
Pricing
Comparação de planos, valor e decisão. 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
Comparação de planos, valor e decisão.
HTML e exemplo
<article class="sc-pricing">Pricing</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.
CONTAINER · stable
#Starter
Starter, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<article class="sc-card sc-showcase-price "><span class="sc-badge">Starter</span><h3>R$ 49</h3><p>por mês · cancele quando quiser</p><ul><li>Componentes completos</li><li>Temas e modo escuro</li><li>Atualizações contínuas</li></ul><button class="sc-btn sc-btn-outline" type="button">Escolher</button></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
- 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.
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.
CONTAINER · stable
#Recommended
Recommended, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<article class="sc-card sc-showcase-price is-featured"><span class="sc-badge">Recommended</span><h3>R$ 79</h3><p>por mês · cancele quando quiser</p><ul><li>Componentes completos</li><li>Temas e modo escuro</li><li>Atualizações contínuas</li></ul><button class="sc-btn sc-btn-primary" type="button">Escolher</button></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
- 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.
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.
CONTAINER · stable
#Enterprise
Enterprise, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<article class="sc-card sc-showcase-price "><span class="sc-badge">Enterprise</span><h3>R$ 109</h3><p>por mês · cancele quando quiser</p><ul><li>Componentes completos</li><li>Temas e modo escuro</li><li>Atualizações contínuas</li></ul><button class="sc-btn sc-btn-outline" type="button">Escolher</button></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
- 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.
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.
CONTAINER · stable
#Usage
Usage, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<article class="sc-card sc-showcase-price "><span class="sc-badge">Usage</span><h3>R$ 139</h3><p>por mês · cancele quando quiser</p><ul><li>Componentes completos</li><li>Temas e modo escuro</li><li>Atualizações contínuas</li></ul><button class="sc-btn sc-btn-outline" type="button">Escolher</button></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
- 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.
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.
CONTAINER · stable
#Annual
Annual, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<article class="sc-card sc-showcase-price "><span class="sc-badge">Annual</span><h3>R$ 169</h3><p>por mês · cancele quando quiser</p><ul><li>Componentes completos</li><li>Temas e modo escuro</li><li>Atualizações contínuas</li></ul><button class="sc-btn sc-btn-outline" type="button">Escolher</button></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
- 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.
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.
CONTAINER · stable
#Comparison
Comparison, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<article class="sc-card sc-showcase-price "><span class="sc-badge">Comparison</span><h3>R$ 199</h3><p>por mês · cancele quando quiser</p><ul><li>Componentes completos</li><li>Temas e modo escuro</li><li>Atualizações contínuas</li></ul><button class="sc-btn sc-btn-outline" type="button">Escolher</button></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
- 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.
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.
CONTAINER · stable
#Compact
Compact, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<article class="sc-card sc-showcase-price "><span class="sc-badge">Compact</span><h3>R$ 229</h3><p>por mês · cancele quando quiser</p><ul><li>Componentes completos</li><li>Temas e modo escuro</li><li>Atualizações contínuas</li></ul><button class="sc-btn sc-btn-outline" type="button">Escolher</button></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
- 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.
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.
CONTAINER · stable
#Feature-rich
Feature-rich, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<article class="sc-card sc-showcase-price "><span class="sc-badge">Feature-rich</span><h3>R$ 259</h3><p>por mês · cancele quando quiser</p><ul><li>Componentes completos</li><li>Temas e modo escuro</li><li>Atualizações contínuas</li></ul><button class="sc-btn sc-btn-outline" type="button">Escolher</button></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
- 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.
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.
CONTAINER · stable
#Custom
Custom, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<article class="sc-card sc-showcase-price "><span class="sc-badge">Custom</span><h3>Sob consulta</h3><p>por mês · cancele quando quiser</p><ul><li>Componentes completos</li><li>Temas e modo escuro</li><li>Atualizações contínuas</li></ul><button class="sc-btn sc-btn-outline" type="button">Escolher</button></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
- 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.
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.