Story cards

Link permanente para esta variação, com prévia, código e requisitos completos.

WIDE · stable

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

TemaModo

HTML e exemplo

<div class="sc-carousel sc-showcase-carousel" data-slides="1"><div class="sc-carousel-track"><article class="sc-carousel-slide"><div class="sc-card"><span>01</span><h3>Story cards</h3><p>Slide responsivo com navegação explícita.</p></div></article><article class="sc-carousel-slide"><div class="sc-card"><span>02</span><h3>Story cards</h3><p>Slide responsivo com navegação explícita.</p></div></article><article class="sc-carousel-slide"><div class="sc-card"><span>03</span><h3>Story cards</h3><p>Slide responsivo com navegação explícita.</p></div></article></div><div class="sc-carousel-controls"><button class="sc-btn sc-btn-outline" data-carousel-prev type="button">Anterior</button><button class="sc-btn sc-btn-primary" data-carousel-next type="button">Próximo</button></div></div>

Classes, JavaScript e API

sc-carouselsc-showcase-carouselsc-carousel-tracksc-carousel-slidesc-cardsc-carousel-controlssc-btnsc-btn-outlinesc-btn-primary

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

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.