CONTAINER · stable
#Media cards (altura consistente)
Media cards (altura consistente), preservado do laboratório original e isolado para uso e teste independente.
HTML e exemplo
<div class="sc-grid sc-cols-3 sc-gap-3" style="align-items:stretch;">
<div class="sc-card sc-card-media sc-card-outline sc-card-shine">
<img src="/assets/slide (1).svg" alt="Imagem">
<div class="sc-card-body">
<strong>Blog/Portfolio</strong>
<p class="doc-muted" style="margin: 8px 0 0;">Imagem + texto em card compacto.</p>
</div>
</div>
<div class="sc-card sc-card-media sc-card-outline sc-card-shine">
<img src="/assets/slide (2).svg" alt="Imagem">
<div class="sc-card-body">
<strong>Case Study</strong>
<p class="doc-muted" style="margin: 8px 0 0;">Shine no hover (optin).</p>
</div>
</div>
<div class="sc-card sc-card-media sc-card-outline sc-card-shine">
<img src="/assets/slide (3).svg" alt="Imagem">
<div class="sc-card-body">
<strong>Galeria</strong>
<p class="doc-muted" style="margin: 8px 0 0;">Use com grid responsivo.</p>
</div>
</div>
</div>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
- 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.