Use Efeitos para cards quando a interface precisar de profundidade, brilho, borda e revelação aplicados a superfícies de conteúdo.
Efeitos para cards
Profundidade, brilho, borda e revelação aplicados a superfícies de conteúdo. 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.
A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.
CONTAINER · stable
#Base
Profundidade, brilho, borda e revelação aplicados a superfícies de conteúdo.
HTML e exemplo
<article class="sc-card sc-card-effect-demo sc-card-effect-2"><span>CARD FX</span><div aria-hidden="true"></div><h3>Glow responsivo</h3><p>Profundidade visível antes e durante a interação.</p><a href="/examples/">Explorar →</a></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.
- A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.
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
#Lift
Lift, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<article class="sc-card sc-card-effect-demo sc-card-effect-1"><span>CARD FX 01</span><div aria-hidden="true"></div><h3>Lift</h3><p>Efeito de superfície com foco visível e conteúdo estável.</p><a href="/docs/components/">Explorar →</a></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.
- A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.
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
#Glow
Glow, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<article class="sc-card sc-card-effect-demo sc-card-effect-2"><span>CARD FX 02</span><div aria-hidden="true"></div><h3>Glow</h3><p>Efeito de superfície com foco visível e conteúdo estável.</p><a href="/docs/components/">Explorar →</a></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.
- A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.
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
#Border trace
Border trace, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<article class="sc-card sc-card-effect-demo sc-card-effect-3"><span>CARD FX 03</span><div aria-hidden="true"></div><h3>Border trace</h3><p>Efeito de superfície com foco visível e conteúdo estável.</p><a href="/docs/components/">Explorar →</a></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.
- A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.
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
#Spotlight
Spotlight, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<article class="sc-card sc-card-effect-demo sc-card-effect-4"><span>CARD FX 04</span><div aria-hidden="true"></div><h3>Spotlight</h3><p>Efeito de superfície com foco visível e conteúdo estável.</p><a href="/docs/components/">Explorar →</a></article>Classes, JavaScript e API
Inicialize cardPointerFX após o DOM. Os atributos data-* do exemplo são a API declarativa.
- Plugin
- cardPointerFX
- Dependências
- smart-ui.js
- 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.
- A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.
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
#Tilt
Tilt, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<article class="sc-card sc-card-effect-demo sc-card-effect-5"><span>CARD FX 05</span><div aria-hidden="true"></div><h3>Tilt</h3><p>Efeito de superfície com foco visível e conteúdo estável.</p><a href="/docs/components/">Explorar →</a></article>Classes, JavaScript e API
Inicialize cardPointerFX após o DOM. Os atributos data-* do exemplo são a API declarativa.
- Plugin
- cardPointerFX
- Dependências
- smart-ui.js
- 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.
- A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.
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
#Flip
Flip, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<article class="sc-card sc-card-effect-demo sc-card-effect-6"><span>CARD FX 06</span><div aria-hidden="true"></div><h3>Flip</h3><p>Efeito de superfície com foco visível e conteúdo estável.</p><a href="/docs/components/">Explorar →</a></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.
- A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.
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
#Reveal CTA
Reveal CTA, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<article class="sc-card sc-card-effect-demo sc-card-effect-7"><span>CARD FX 07</span><div aria-hidden="true"></div><h3>Reveal CTA</h3><p>Efeito de superfície com foco visível e conteúdo estável.</p><a href="/docs/components/">Explorar →</a></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.
- A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.
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
#Image zoom
Image zoom, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<article class="sc-card sc-card-effect-demo sc-card-effect-8"><span>CARD FX 08</span><div aria-hidden="true"></div><h3>Image zoom</h3><p>Efeito de superfície com foco visível e conteúdo estável.</p><a href="/docs/components/">Explorar →</a></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.
- A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.
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
#Sheen
Sheen, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<article class="sc-card sc-card-effect-demo sc-card-effect-9"><span>CARD FX 09</span><div aria-hidden="true"></div><h3>Sheen</h3><p>Efeito de superfície com foco visível e conteúdo estável.</p><a href="/docs/components/">Explorar →</a></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.
- A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.
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
#Gradient border
Gradient border, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<article class="sc-card sc-card-effect-demo sc-card-effect-10"><span>CARD FX 10</span><div aria-hidden="true"></div><h3>Gradient border</h3><p>Efeito de superfície com foco visível e conteúdo estável.</p><a href="/docs/components/">Explorar →</a></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.
- A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.
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
#Stack
Stack, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<article class="sc-card sc-card-effect-demo sc-card-effect-11"><span>CARD FX 11</span><div aria-hidden="true"></div><h3>Stack</h3><p>Efeito de superfície com foco visível e conteúdo estável.</p><a href="/docs/components/">Explorar →</a></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.
- A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.
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
#Depth
Depth, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<article class="sc-card sc-card-effect-demo sc-card-effect-12"><span>CARD FX 12</span><div aria-hidden="true"></div><h3>Depth</h3><p>Efeito de superfície com foco visível e conteúdo estável.</p><a href="/docs/components/">Explorar →</a></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.
- A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.
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
#Soft shadow
Soft shadow, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<article class="sc-card sc-card-effect-demo sc-card-effect-13"><span>CARD FX 13</span><div aria-hidden="true"></div><h3>Soft shadow</h3><p>Efeito de superfície com foco visível e conteúdo estável.</p><a href="/docs/components/">Explorar →</a></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.
- A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.
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
#Glass
Glass, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<article class="sc-card sc-card-effect-demo sc-card-effect-14"><span>CARD FX 14</span><div aria-hidden="true"></div><h3>Glass</h3><p>Efeito de superfície com foco visível e conteúdo estável.</p><a href="/docs/components/">Explorar →</a></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.
- A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.
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
#Signal pulse
Signal pulse, composição própria do Smart UI para produtos e experiências digitais.
HTML e exemplo
<article class="sc-card sc-card-effect-demo sc-card-effect-15"><span>CARD FX 15</span><div aria-hidden="true"></div><h3>Signal pulse</h3><p>Efeito de superfície com foco visível e conteúdo estável.</p><a href="/docs/components/">Explorar →</a></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.
- A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.
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.