← Catálogocards · stable

Cards

Cards de conteúdo, produto, ação e superfícies de dados. A documentação abaixo separa composição, comportamento e adaptação visual de cada variante.

QUANDO USAR

Use Cards quando a interface precisar de cards de conteúdo, produto, ação e superfícies de dados.

QUANDO NÃO USAR

Evite a família quando uma composição semântica mais simples comunicar a mesma ação com menos carga visual.

TECLADO

O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

RESPONSIVO

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

Ver prévias

CONTAINER · stable

Cards em grid (não “banner”)

Cards em grid (não “banner”), preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div class="sc-grid sc-cols-3 sc-gap-3" style="align-items:stretch;">
                    <div class="sc-card sc-card-outline sc-card-compact sc-card-hover">
                      <div style="display:flex; align-items:center; justify-content:space-between; gap:12px;">
                        <strong>Plano Pro</strong>
                        <span class="sc-badge sc-badge-soft">-20%</span>
                      </div>
                      <p class="doc-muted" style="margin: 10px 0 0;">Base sólida para qualquer layout.</p>
                      <div style="display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px;">
                        <button class="sc-btn sc-btn-primary sc-btn-sm" type="button">Assinar</button>
                        <button class="sc-btn sc-btn-outline sc-btn-sm" type="button">Detalhes</button>
                      </div>
                    </div>
                    <div class="sc-card sc-card-outline sc-card-compact sc-card-hover">
                      <div style="display:flex; align-items:center; justify-content:space-between; gap:12px;">
                        <strong>Plano Team</strong>
                        <i class="sc-icon" data-smart-icon="users"></i>
                      </div>
                      <p class="doc-muted" style="margin: 10px 0 0;">Feito para times e dashboards.</p>
                      <div style="display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px;">
                        <button class="sc-btn sc-btn-secondary sc-btn-sm" type="button">Convidar</button>
                        <button class="sc-btn sc-btn-ghost sc-btn-sm" type="button">Ver</button>
                      </div>
                    </div>
                    <div class="sc-card sc-card-outline sc-card-compact sc-card-hover">
                      <div style="display:flex; align-items:center; justify-content:space-between; gap:12px;">
                        <strong>Plano Lite</strong>
                        <span class="sc-badge sc-badge-warning">NEW</span>
                      </div>
                      <p class="doc-muted" style="margin: 10px 0 0;">Perfeito para landing pages.</p>
                      <div style="display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px;">
                        <button class="sc-btn sc-btn-glass sc-btn-sm" type="button">Começar</button>
                        <button class="sc-btn sc-btn-outline sc-btn-sm" type="button">Docs</button>
                      </div>
                    </div>
                  </div>

Classes, JavaScript e API

sc-gridsc-cols-3sc-gap-3sc-cardsc-card-outlinesc-card-compactsc-card-hoversc-badgesc-badge-softsc-btnsc-btn-primarysc-btn-smsc-btn-outlinesc-iconsc-btn-secondarysc-btn-ghostsc-badge-warningsc-btn-glass

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

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
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

Media cards (altura consistente)

Media cards (altura consistente), preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div class="sc-grid sc-cols-3 sc-gap-3" style="align-items:stretch;">
                    <div class="sc-card sc-card-media sc-card-outline sc-card-shine">
                      <img src="/assets/slide (1).svg" alt="Imagem">
                      <div class="sc-card-body">
                        <strong>Blog/Portfolio</strong>
                        <p class="doc-muted" style="margin: 8px 0 0;">Imagem + texto em card compacto.</p>
                      </div>
                    </div>
                    <div class="sc-card sc-card-media sc-card-outline sc-card-shine">
                      <img src="/assets/slide (2).svg" alt="Imagem">
                      <div class="sc-card-body">
                        <strong>Case Study</strong>
                        <p class="doc-muted" style="margin: 8px 0 0;">Shine no hover (optin).</p>
                      </div>
                    </div>
                    <div class="sc-card sc-card-media sc-card-outline sc-card-shine">
                      <img src="/assets/slide (3).svg" alt="Imagem">
                      <div class="sc-card-body">
                        <strong>Galeria</strong>
                        <p class="doc-muted" style="margin: 8px 0 0;">Use com grid responsivo.</p>
                      </div>
                    </div>
                  </div>

Classes, JavaScript e API

sc-gridsc-cols-3sc-gap-3sc-cardsc-card-mediasc-card-outlinesc-card-shinesc-card-body

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

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
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

Gradient border + glow

Gradient border + glow, preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div class="sc-grid sc-cols-3 sc-gap-3" style="align-items:stretch;">
                    <div class="sc-card sc-card-outline sc-card-gradient sc-card-glow sc-card-compact">
                      <p class="sc-text-lg" style="margin:0; font-weight:900;">Popular do mês</p>
                      <p class="doc-muted" style="margin: 8px 0 0;">Borda viva + glow.</p>
                      <p style="margin: 10px 0 0; font-weight: 800; color: var(--sc-primary);">Smart UI</p>
                    </div>
                    <div class="sc-card sc-card-outline sc-card-gradient sc-card-glow sc-card-compact">
                      <p class="sc-text-lg" style="margin:0; font-weight:900;">Upgrade</p>
                      <p class="doc-muted" style="margin: 8px 0 0;">Destaque para planos/CTAs.</p>
                      <button class="sc-btn sc-btn-primary sc-btn-sm sc-btn-shine" data-spotlight="true" type="button" style="margin-top: 12px;">Assinar</button>
                    </div>
                    <div class="sc-card sc-card-outline sc-card-gradient sc-card-glow sc-card-compact">
                      <p class="sc-text-lg" style="margin:0; font-weight:900;">Beta</p>
                      <p class="doc-muted" style="margin: 8px 0 0;">Use como feature card.</p>
                      <span class="sc-badge sc-badge-info" style="margin-top: 12px;">Acesso</span>
                    </div>
                  </div>

Classes, JavaScript e API

sc-gridsc-cols-3sc-gap-3sc-cardsc-card-outlinesc-card-gradientsc-card-glowsc-card-compactsc-text-lgsc-btnsc-btn-primarysc-btn-smsc-btn-shinesc-badgesc-badge-info

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

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
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

Reveal CTA (animação)

Reveal CTA (animação), preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div class="sc-grid sc-cols-2 sc-gap-3" style="align-items:stretch;">
                    <div class="sc-card sc-card-reveal sc-card-hover sc-card-float sc-card-outline">
                      <div style="display:flex; align-items:center; justify-content:space-between; gap:12px;">
                        <strong>Card com CTA</strong>
                        <i class="sc-icon" data-smart-icon="arrow-up-right"></i>
                      </div>
                      <p class="doc-muted" style="margin: 10px 0 0;">No hover, o botão sobe e fica clicável.</p>
                      <div class="sc-card-cta">
                        <button class="sc-btn sc-btn-primary sc-btn-sm sc-btn-shine" data-spotlight="true" type="button">Saiba mais</button>
                      </div>
                    </div>
                    <div class="sc-card sc-card-reveal sc-card-hover sc-card-float sc-card-outline">
                      <div style="display:flex; align-items:center; justify-content:space-between; gap:12px;">
                        <strong>Assinatura</strong>
                        <i class="sc-icon" data-smart-icon="award"></i>
                      </div>
                      <p class="doc-muted" style="margin: 10px 0 0;">timo para pricing/upsell.</p>
                      <div class="sc-card-cta">
                        <button class="sc-btn sc-btn-glass sc-btn-sm" type="button">Ativar</button>
                      </div>
                    </div>
                  </div>

Classes, JavaScript e API

sc-gridsc-cols-2sc-gap-3sc-cardsc-card-revealsc-card-hoversc-card-floatsc-card-outlinesc-iconsc-card-ctasc-btnsc-btn-primarysc-btn-smsc-btn-shinesc-btn-glass

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

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
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

Notification / info

Notification / info, preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div class="sc-grid sc-cols-2 sc-gap-3" style="align-items:stretch;">
                    <div class="sc-card sc-card-notify sc-card-notify-attached sc-card-outline sc-card-compact">
                      <div style="display:flex; align-items:center; gap:10px;">
                        <span class="sc-badge">Novo</span>
                        <strong>Bem-vindo ao Smart UI</strong>
                      </div>
                      <p class="doc-muted" style="margin: 10px 0 0;">Card de aviso com barra gradiente lateral.</p>
                      <div style="display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px;">
                        <button class="sc-btn sc-btn-primary sc-btn-sm" type="button">Ativar</button>
                        <button class="sc-btn sc-btn-glass sc-btn-sm" type="button">Agora não</button>
                      </div>
                    </div>
                    <div class="sc-card sc-card-notify sc-card-notify-attached sc-card-outline sc-card-compact">
                      <div style="display:flex; align-items:center; gap:10px;">
                        <span class="sc-badge sc-badge-success">OK</span>
                        <strong>Integração pronta</strong>
                      </div>
                      <p class="doc-muted" style="margin: 10px 0 0;">Perfeito para alertas em dashboards.</p>
                      <div style="display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px;">
                        <button class="sc-btn sc-btn-outline sc-btn-sm" type="button">Ver logs</button>
                        <button class="sc-btn sc-btn-ghost sc-btn-sm" type="button">Fechar</button>
                      </div>
                    </div>
                  </div>

Classes, JavaScript e API

sc-gridsc-cols-2sc-gap-3sc-cardsc-card-notifysc-card-notify-attachedsc-card-outlinesc-card-compactsc-badgesc-btnsc-btn-primarysc-btn-smsc-btn-glasssc-badge-successsc-btn-outlinesc-btn-ghost

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

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
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

3D + Glow

3D + Glow, preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div class="sc-grid sc-cols-3 sc-gap-3" style="align-items:stretch;">
                    <div class="sc-card sc-card-3d sc-card-outline sc-card-glow sc-card-compact">
                      <strong>3D + Glow</strong>
                      <p class="doc-muted" style="margin: 10px 0 0;">Com <code>smart-ui.js</code> (tilt).</p>
                    </div>
                    <div class="sc-card sc-card-3d sc-card-outline sc-card-glow sc-card-compact">
                      <strong>Interativo</strong>
                      <p class="doc-muted" style="margin: 10px 0 0;">Bom para “feature cards”.</p>
                    </div>
                    <div class="sc-card sc-card-3d sc-card-outline sc-card-glow sc-card-compact">
                      <div style="display:flex; align-items:center; justify-content:space-between; gap:12px;">
                        <strong>Premium</strong>
                        <i class="sc-icon" data-smart-icon="star"></i>
                      </div>
                      <p class="doc-muted" style="margin: 10px 0 0;">Glow sem JS + tilt via JS.</p>
                    </div>
                  </div>

Classes, JavaScript e API

sc-gridsc-cols-3sc-gap-3sc-cardsc-card-3dsc-card-outlinesc-card-glowsc-card-compactsc-icon

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

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
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

Animações (optin)

Animações (optin), preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div class="sc-grid sc-cols-3 sc-gap-3" style="align-items:stretch;">
                    <div class="sc-card sc-card-outline sc-card-compact sc-card-float">
                      <strong>Float</strong>
                      <p class="doc-muted" style="margin: 10px 0 0;">Hover/focus levanta o card.</p>
                    </div>
                    <div class="sc-card-flip" tabindex="0" role="button" aria-pressed="false" aria-label="Virar card e ver detalhes">
                      <div class="sc-card-flip-inner">
                        <div class="sc-card sc-card-outline sc-card-compact sc-card-flip-front">
                          <strong>Flip (frente)</strong>
                          <p class="doc-muted" style="margin: 10px 0 0;">Passe o mouse ou foque.</p>
                        </div>
                        <div class="sc-card sc-card-outline sc-card-compact sc-card-flip-back">
                          <strong>Flip (verso)</strong>
                          <p class="doc-muted" style="margin: 10px 0 0;">Conteúdo alternativo.</p>
                          <button class="sc-btn sc-btn-primary sc-btn-sm" type="button" style="margin-top: 12px;">Ação</button>
                        </div>
                      </div>
                    </div>
                    <div class="sc-card sc-card-outline sc-card-compact sc-card-breathe">
                      <strong>Breathe</strong>
                      <p class="doc-muted" style="margin: 10px 0 0;">Animação suave contínua.</p>
                    </div>
                  </div><div class="doc-muted" style="margin: 18px 0 10px;"><span class="sc-badge">Extra</span> App Icon Glow (pointer)</div><div class="sc-card-app" data-card-fx="icon-glow" aria-label="Card app (glow)">
                    <button class="sc-card-app-menu" type="button" aria-label="Mais opções">
                      <i class="sc-icon" data-smart-icon="more-horizontal"></i>
                    </button>
                    <div class="sc-card-app-visual" aria-hidden="true">
                      <img class="sc-card-app-icon" src="/assets/vatse/icon.png" alt="">
                    </div>
                    <div class="sc-card-app-inner">
                      <img class="sc-card-app-icon" src="/assets/vatse/icon.png" alt="VATSE">
                      <h3 class="sc-card-app-title">VATSE OS</h3>
                    </div>
                  </div><div class="doc-muted" style="margin: 18px 0 10px;"><span class="sc-badge">Extra</span> Product Cards (grid)</div><div class="sc-product-grid" aria-label="Produtos">
                    <article class="sc-product-card" style="--sc-product-accent: var(--sc-primary);">
                      <div class="sc-product-head">
                        <h3 class="sc-product-title">VATSE OS</h3>
                        <div class="sc-product-price">Operação</div>
                      </div>
                      <div class="sc-product-thumb">
                        <img src="/assets/vatse/dashboard.png" alt="Tela do VATSE OS">
                      </div>
                      <p class="sc-product-category">Gestão de ponta a ponta</p>
                      <p class="sc-product-desc">Comercial, projetos, contratos, financeiro e equipe em uma operação conectada.</p>
                      <ul class="sc-product-tags" aria-label="Tags">
                        <li class="sc-product-tag">Projetos</li>
                        <li class="sc-product-tag">Financeiro</li>
                      </ul>
                      <button class="sc-btn sc-product-cta" type="button">
                        Ver operação <i class="sc-icon" data-smart-icon="arrow-right"></i>
                      </button>
                    </article>

                    <article class="sc-product-card" style="--sc-product-accent: var(--sc-vatse-orange);">
                      <div class="sc-product-head">
                        <h3 class="sc-product-title">Smart UI</h3>
                        <div class="sc-product-price">Biblioteca</div>
                      </div>
                      <div class="sc-product-thumb">
                        <img src="/assets/vatse/profissional.png" alt="Interface de produto VATSE">
                      </div>
                      <p class="sc-product-category">Interface proprietária</p>
                      <p class="sc-product-desc">Componentes reutilizáveis para produtos VATSE com estados, acessibilidade e identidade consistente.</p>
                      <ul class="sc-product-tags" aria-label="Tags">
                        <li class="sc-product-tag">Tokens</li>
                        <li class="sc-product-tag">Acessível</li>
                      </ul>
                      <button class="sc-btn sc-product-cta" type="button">
                        Ver biblioteca <i class="sc-icon" data-smart-icon="arrow-right"></i>
                      </button>
                    </article>

                    <article class="sc-product-card" style="--sc-product-accent: var(--sc-vatse-orange-deep);">
                      <div class="sc-product-head">
                        <h3 class="sc-product-title">API CRUD</h3>
                        <div class="sc-product-price">Integração</div>
                      </div>
                      <div class="sc-product-thumb">
                        <img src="/assets/vatse/dashboard.png" alt="Painel de operações VATSE">
                      </div>
                      <p class="sc-product-category">Base para aplicações</p>
                      <p class="sc-product-desc">Estrutura documentada para operações que precisam de dados, permissões e integrações confiáveis.</p>
                      <ul class="sc-product-tags" aria-label="Tags">
                        <li class="sc-product-tag">Endpoints</li>
                        <li class="sc-product-tag">Permissões</li>
                        <li class="sc-product-tag">Auditoria</li>
                      </ul>
                      <button class="sc-btn sc-product-cta" type="button">
                        Ver integração <i class="sc-icon" data-smart-icon="arrow-right"></i>
                      </button>
                    </article>

                    <article class="sc-product-card" style="--sc-product-accent:#b64a1d;">
                      <div class="sc-product-head">
                        <h3 class="sc-product-title">Ecossistema</h3>
                        <div class="sc-product-price">Conectado</div>
                      </div>
                      <div class="sc-product-thumb">
                        <img src="/assets/vatse/consultora.png" alt="Ecossistema de pessoas VATSE">
                      </div>
                      <p class="sc-product-category">Tecnologia aplicada</p>
                      <p class="sc-product-desc">Recursos de produto, automação e operação organizados em torno do trabalho real da VATSE.</p>
                      <ul class="sc-product-tags" aria-label="Tags">
                        <li class="sc-product-tag">Pessoas</li>
                        <li class="sc-product-tag">Dados</li>
                        <li class="sc-product-tag">Entrega</li>
                        <li class="sc-product-tag">Qualidade</li>
                      </ul>
                      <button class="sc-btn sc-product-cta" type="button">
                        Ver ecossistema <i class="sc-icon" data-smart-icon="arrow-right"></i>
                      </button>
                    </article>
                  </div>

Classes, JavaScript e API

sc-gridsc-cols-3sc-gap-3sc-cardsc-card-outlinesc-card-compactsc-card-floatsc-card-flipsc-card-flip-innersc-card-flip-frontsc-card-flip-backsc-btnsc-btn-primarysc-btn-smsc-card-breathesc-badgesc-card-appsc-card-app-menusc-iconsc-card-app-visualsc-card-app-iconsc-card-app-innersc-card-app-titlesc-product-gridsc-product-cardsc-product-headsc-product-titlesc-product-pricesc-product-thumbsc-product-categorysc-product-descsc-product-tagssc-product-tagsc-product-cta

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

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
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

Editorial

Editorial, composição própria do Smart UI para produtos e experiências digitais.

TemaModo

Link direto →

HTML e exemplo

<article class="sc-card sc-card-editorial"><header><span>DESIGN / ENSAIO</span><time>29 AGO 2026</time></header><h3>Interfaces também editam o que merece atenção.</h3><p>Uma composição tipográfica para artigos, manifestos e leituras longas.</p><a href="/docs/philosophy/">Continuar leitura →</a></article>

Classes, JavaScript e API

sc-cardsc-card-editorial

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

Metric

Metric, composição própria do Smart UI para produtos e experiências digitais.

TemaModo

Link direto →

HTML e exemplo

<article class="sc-card sc-card-metric"><div><span>RECEITA QUALIFICADA</span><i class="sc-status-dot"></i></div><strong>R$ 428 mil</strong><small>+18,4% em relação ao período anterior</small><figure aria-label="Tendência crescente"><i></i><i></i><i></i><i></i><i></i><i></i></figure></article>

Classes, JavaScript e API

sc-cardsc-card-metricsc-status-dot

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

Profile

Profile, composição própria do Smart UI para produtos e experiências digitais.

TemaModo

Link direto →

HTML e exemplo

<article class="sc-card sc-card-profile"><header><span class="sc-showcase-avatar">MC</span><div><h3>Marina Costa</h3><p>Product Operations</p></div><button type="button" aria-label="Mais opções">•••</button></header><ul><li>São Paulo, BR</li><li>12 projetos</li><li>Disponível</li></ul><footer><button class="sc-btn sc-btn-primary" type="button">Ver perfil</button><button class="sc-btn sc-btn-outline" type="button">Mensagem</button></footer></article>

Classes, JavaScript e API

sc-cardsc-card-profilesc-showcase-avatarsc-btnsc-btn-primarysc-btn-outline

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

Project

Project, composição própria do Smart UI para produtos e experiências digitais.

TemaModo

Link direto →

HTML e exemplo

<article class="sc-card sc-card-project"><header><span class="sc-badge">EM ANDAMENTO</span><small>PRJ-042</small></header><h3>Portal Atlas</h3><p>Entrega do fluxo de onboarding e painel operacional.</p><div class="sc-progress" role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100"><i style="width:68%"></i></div><dl><div><dt>Progresso</dt><dd>68%</dd></div><div><dt>Entrega</dt><dd>14 set</dd></div></dl><footer><span>AM · RC · +3</span><a href="/templates/dashboard/">Abrir projeto →</a></footer></article>

Classes, JavaScript e API

sc-cardsc-card-projectsc-badgesc-progress

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

Commerce

Commerce, composição própria do Smart UI para produtos e experiências digitais.

TemaModo

Link direto →

HTML e exemplo

<article class="sc-card sc-card-commerce"><figure><div class="sc-commerce-art" aria-hidden="true"><i></i><span></span></div><button type="button" aria-label="Salvar produto">♡</button></figure><section><small>CASA NOMA</small><h3>Luminária Alba</h3><p>Alumínio reciclado · luz quente</p><footer><b>R$ 790</b><button class="sc-btn sc-btn-primary sc-btn-sm" type="button">Adicionar</button></footer></section></article>

Classes, JavaScript e API

sc-cardsc-card-commercesc-commerce-artsc-btnsc-btn-primarysc-btn-sm

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

Glass

Glass, composição própria do Smart UI para produtos e experiências digitais.

TemaModo

Link direto →

HTML e exemplo

<article class="sc-card sc-card-glass"><div class="sc-card-glass-orb" aria-hidden="true"></div><header><span>ORBIT CLOUD</span><i>↗</i></header><h3>Capacidade disponível</h3><strong>78%</strong><p>Recursos distribuídos em quatro regiões ativas.</p><footer><span>São Paulo</span><span>Virginia</span><span>Frankfurt</span></footer></article>

Classes, JavaScript e API

sc-cardsc-card-glasssc-card-glass-orb

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.

CONTAINER · stable

Outline

Outline, composição própria do Smart UI para produtos e experiências digitais.

TemaModo

Link direto →

HTML e exemplo

<article class="sc-card sc-card-outline"><span>PLANO / SCALE</span><h3>Controle para operações maduras.</h3><dl><div><dt>Usuários</dt><dd>Ilimitados</dd></div><div><dt>Auditoria</dt><dd>Completa</dd></div><div><dt>Suporte</dt><dd>SLA 4h</dd></div></dl><a class="sc-btn sc-btn-outline" href="/templates/pricing/">Comparar plano</a></article>

Classes, JavaScript e API

sc-cardsc-card-outlinesc-btnsc-btn-outline

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

Spotlight

Spotlight, composição própria do Smart UI para produtos e experiências digitais.

TemaModo

Link direto →

HTML e exemplo

<button class="sc-card sc-card-spotlight" type="button"><span>ATALHO 04</span><div aria-hidden="true">⌘</div><strong>Criar nova automação</strong><small>Transforme uma rotina repetitiva em fluxo revisável.</small><i>→</i></button>

Classes, JavaScript e API

sc-cardsc-card-spotlight

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.

CONTAINER · stable

Stacked

Stacked, composição própria do Smart UI para produtos e experiências digitais.

TemaModo

Link direto →

HTML e exemplo

<div class="sc-card-stack" aria-label="Três atualizações recentes"><article class="sc-card"><small>AGORA</small><strong>Proposta aprovada</strong></article><article class="sc-card"><small>12:42</small><strong>Pagamento conciliado</strong></article><article class="sc-card"><small>ONTEM</small><strong>Projeto iniciado</strong></article></div>

Classes, JavaScript e API

sc-card-stacksc-card

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

Horizontal

Horizontal, composição própria do Smart UI para produtos e experiências digitais.

TemaModo

Link direto →

HTML e exemplo

<article class="sc-card sc-card-horizontal"><figure><div class="sc-case-art" aria-hidden="true"><span>ORLA</span><i></i><i></i></div></figure><section><span>CASE STUDY</span><h3>Orla reorganizou sua jornada de crédito.</h3><p>Pesquisa e produto conectados em doze semanas.</p><footer><small>Fintech · 2026</small><a href="/templates/agency/">Ver case →</a></footer></section></article>

Classes, JavaScript e API

sc-cardsc-card-horizontalsc-case-art

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

Media overlay

Media overlay, composição própria do Smart UI para produtos e experiências digitais.

TemaModo

Link direto →

HTML e exemplo

<figure class="sc-card sc-card-media"><div class="sc-media-art" aria-hidden="true"><i></i><i></i><i></i></div><figcaption><span>COLEÇÃO 02</span><h3>Matéria e movimento.</h3><a href="/templates/ecommerce/">Explorar coleção ↗</a></figcaption></figure>

Classes, JavaScript e API

sc-cardsc-card-mediasc-media-art

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.

CONTAINER · stable

Status

Status, composição própria do Smart UI para produtos e experiências digitais.

TemaModo

Link direto →

HTML e exemplo

<article class="sc-card sc-card-status"><header><div><i class="sc-status-dot"></i><span>Todos os sistemas operacionais</span></div><time>Atualizado agora</time></header><ul><li><span>API</span><b>99,99%</b></li><li><span>Dashboard</span><b>99,98%</b></li><li><span>Webhooks</span><b>99,97%</b></li></ul><footer><a href="/templates/support/">Histórico de incidentes</a></footer></article>

Classes, JavaScript e API

sc-cardsc-card-statussc-status-dot

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

Interactive

Interactive, composição própria do Smart UI para produtos e experiências digitais.

TemaModo

Link direto →

HTML e exemplo

<details class="sc-card sc-card-interactive"><summary><span><small>PERGUNTA FREQUENTE</small><strong>Posso usar somente o CSS?</strong></span><i>+</i></summary><div><p>Sim. O JavaScript é opcional e entra somente nos componentes que precisam de comportamento.</p><a href="/docs/javascript/">Entender a arquitetura →</a></div></details>

Classes, JavaScript e API

sc-cardsc-card-interactive

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.

Cards

Componentes relacionados