Card CSS

O que é

Bloco com borda/sombra que agrupa conteúdo relacionado. O TIPO vem como token (prd, prf, stt…), combinável com comportamento, destaque de cor e efeito visual — tudo no mesmo atributo sw-card. As partes internas (.sw-card-hdr/-bdy/-ftr) são opcionais e independentes.

Como funciona

100% CSS. O padding de cada parte interna muda junto quando você escolhe um tamanho (pp/p/g/xg) no card — não precisa ajustar cada parte na mão. Destaque "topo" (pri solto) pinta uma borda de 3px em cima; "lateral" (lft-pri) na esquerda; "preenchido" (fil-pri) tinge o card inteiro.

Exemplos

<div sw-card="sha">
  <div class="sw-card-hdr">Título</div>
  <div class="sw-card-bdy">Conteúdo.</div>
  <div class="sw-card-ftr">Rodapé.</div>
</div>

<div sw-card="pri">borda colorida em cima</div>
<div sw-card="lft-suc">borda colorida na lateral</div>
<div sw-card="fil-pri">card inteiro tingido, texto claro</div>
<div sw-card="per">destaque de perigo/erro</div>

<a sw-card="sha int" href="#">clicável, levanta no hover</a>
<div sw-card="aura">halo de brilho ao redor</div>
<div sw-card="grd">borda com degradê que gira</div>

<!-- glass: só sobre imagem/vídeo de fundo -->
<div style="background:url('/foto.jpg') center/cover">
  <div sw-card="glass">painel de vidro fosco</div>
</div>

<div sw-card="prd int">
  <div class="sw-card-img"><img src="/produto.jpg" alt=""></div>
  <div class="sw-card-bdy">
    <h3 class="sw-card-ttl">Nome do produto</h3>
    <p class="sw-card-txt">Descrição curta.</p>
    <strong>R$ 129,00</strong>
  </div>
  <div class="sw-card-ftr"><button sw-btn="pri">Comprar</button></div>
</div>

<!-- outros tipos prontos: med (mídia/blog) prf (perfil) stt (estatística)
     prc (preço) hor (horizontal) ftr (feature) tst (depoimento)
     ntf (notificação) tsk (tarefa) neo (futurista) -->

Atributos

Nenhum.

Variantes

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

Nenhuma.

Limitações — o que ele não faz

Nenhuma.