WIDE · stable
#Spotlight (cards com foco)
Spotlight (cards com foco), preservado do laboratório original e isolado para uso e teste independente.
HTML e exemplo
<div class="sc-carousel sc-carousel--peek sc-carousel--spotlight" data-autoplay="0" data-slides="1">
<div class="sc-carousel-track">
<div class="sc-carousel-slide"><div class="sc-carousel-card"><span class="sc-badge">Destaque</span><h3 style="margin:12px 0 6px;">Card 1</h3><p class="doc-muted" style="margin:0;">Slide ativo “cresce”.</p></div></div>
<div class="sc-carousel-slide"><div class="sc-carousel-card"><span class="sc-badge sc-badge-secondary">UI</span><h3 style="margin:12px 0 6px;">Card 2</h3><p class="doc-muted" style="margin:0;">Mais contraste e legibilidade.</p></div></div>
<div class="sc-carousel-slide"><div class="sc-carousel-card"><span class="sc-badge sc-badge-success">UX</span><h3 style="margin:12px 0 6px;">Card 3</h3><p class="doc-muted" style="margin:0;">Sem ficar “quadradão”.</p></div></div>
</div>
<div class="sc-carousel-controls">
<div class="sc-carousel-buttons">
<button class="sc-btn sc-btn-glass sc-btn-icon" type="button" data-carousel-prev="" aria-label="Anterior"><i class="sc-icon" data-smart-icon="chevrons-left"></i></button>
<button class="sc-btn sc-btn-primary sc-btn-icon" type="button" data-carousel-next="" aria-label="Próximo"><i class="sc-icon" data-smart-icon="chevrons-right"></i></button>
</div>
</div>
</div><div class="doc-muted" style="margin: 18px 0 10px;">Extra • Carousel 3D (Featured Cards)</div><div class="sc-carousel-3d" data-autoplay="4500" aria-roledescription="carousel" aria-label="Featured cards">
<div class="sc-carousel-3d-viewport" tabindex="0">
<div class="sc-carousel-3d-track">
<article class="sc-carousel-3d-slide" role="group" aria-roledescription="slide">
<div class="sc-feature-card" style="--sc-feature-bg:url('/assets/slide (1).svg');">
<header class="sc-feature-head">
<h3 class="sc-feature-title">Edge Visuals</h3>
<p class="sc-feature-kicker">Design systems que respiram</p>
</header>
<p class="sc-feature-text">Tokens, motion e acessibilidade: base forte sem perder personalidade. Rápido de aplicar, consistente de manter.</p>
<footer class="sc-feature-actions"><button class="sc-btn sc-btn-primary" type="button">Ver case</button></footer>
</div>
</article>
<article class="sc-carousel-3d-slide" role="group" aria-roledescription="slide">
<div class="sc-feature-card" style="--sc-feature-bg:url('/assets/slide (2).svg');">
<header class="sc-feature-head">
<h3 class="sc-feature-title">Realtime Dashboards</h3>
<p class="sc-feature-kicker">Sinal acima do ruído</p>
</header>
<p class="sc-feature-text">Destaque deltas, suavize picos e deixe o olho encontrar o que importa primeiro. UI como instrumento, não decoração.</p>
<footer class="sc-feature-actions"><button class="sc-btn sc-btn-glass" type="button">Ver demo</button></footer>
</div>
</article>
<article class="sc-carousel-3d-slide" role="group" aria-roledescription="slide">
<div class="sc-feature-card" style="--sc-feature-bg:url('/assets/slide (3).svg');">
<header class="sc-feature-head">
<h3 class="sc-feature-title">Brand Motion</h3>
<p class="sc-feature-kicker">Identidade em movimento</p>
</header>
<p class="sc-feature-text">Easing, timing e contraste com intenção. Quando a animação é parte da marca, ela vira memória.</p>
<footer class="sc-feature-actions"><button class="sc-btn sc-btn-outline" type="button">Explorar</button></footer>
</div>
</article>
<article class="sc-carousel-3d-slide" role="group" aria-roledescription="slide">
<div class="sc-feature-card" style="--sc-feature-bg:url('/assets/slide (4).svg');">
<header class="sc-feature-head">
<h3 class="sc-feature-title">E-commerce UX</h3>
<p class="sc-feature-kicker">Caminhos sem atrito</p>
</header>
<p class="sc-feature-text">Escolha mais curta, confiança mais alta. Checkout em um sopro (com acessibilidade e estados claros).</p>
<footer class="sc-feature-actions"><button class="sc-btn sc-btn-success" type="button">Ver padrões</button></footer>
</div>
</article>
<article class="sc-carousel-3d-slide" role="group" aria-roledescription="slide">
<div class="sc-feature-card" style="--sc-feature-bg:url('/assets/slide (5).svg');">
<header class="sc-feature-head">
<h3 class="sc-feature-title">Content Engines</h3>
<p class="sc-feature-kicker">Escalar sem virar sludge</p>
</header>
<p class="sc-feature-text">Conteúdo estruturado, defaults inteligentes e visual limpo. Publique com consistência, sem “quebrar tema”.</p>
<footer class="sc-feature-actions"><button class="sc-btn sc-btn-danger" type="button">Ler playbook</button></footer>
</div>
</article>
</div>
</div>
<div class="sc-carousel-3d-controls" aria-label="Controles">
<button class="sc-btn sc-btn-glass sc-btn-icon sc-carousel-3d-prev" data-3d-prev="" aria-label="Anterior" type="button">
<i class="sc-icon" data-smart-icon="chevrons-left"></i>
</button>
<button class="sc-btn sc-btn-glass sc-btn-icon sc-carousel-3d-next" data-3d-next="" aria-label="Próximo" type="button">
<i class="sc-icon" data-smart-icon="chevrons-right"></i>
</button>
</div>
<div class="sc-carousel-3d-pagination" role="tablist" aria-label="Navegação"></div>
<div class="sc-carousel-3d-progress" aria-hidden="true"><span class="sc-carousel-3d-progressBar"></span></div>
</div>Classes, JavaScript e API
Inicialize carousels após o DOM. Os atributos data-* do exemplo são a API declarativa.
- Plugin
- carousels
- Dependências
- smart-ui.js
- 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.
- 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.