P6 · Padrões

Sticky Card

Card lateral persistente para contexto contínuo (incidente em progresso, sessão ao vivo, item em foco). Largura máxima 36rem para garantir legibilidade.

01

Comportamento

  • position: sticky; top: var(--sp-7); — gruda no topo do scroll local.
  • Permanece visível enquanto a coluna principal rola.
  • Em mobile (≤ 768px), vira card no topo da página (não sticky).
  • Sombra --e1 para separar do background.
02

Estrutura

<aside class="sticky-card" role="complementary"
  aria-label="Live atual">
  <header>
    <span class="badge live">Live</span>
    <h3>Live #042 · GPT-5 Demos</h3>
  </header>
  <p class="meta">ID 042 · 1h restante</p>
  <p>Apresentação ao vivo das novas capacidades.</p>
  <footer>
    <a class="btn-secondary">Entrar</a>
    <a class="btn-outline">Adiar</a>
  </footer>
</aside>
03

Diretrizes

Faça

  • Use role='complementary' para anunciar como marco lateral.
  • Conteúdo focado: título + 1 parágrafo + 1–2 ações.
  • Largura máxima 36rem — sticky card largo perde contexto.

Não faça

  • Não use sticky card como sidebar de navegação (isso é app-shell).
  • Não acumule múltiplos sticky cards na mesma coluna.
  • Não esconda informação crítica que deveria estar inline.