← CardsVARIANTE / cards

Cards em grid (não “banner”)

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

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

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.