Bloco que se adapta (sw-caixa) CSS

O que é

Imagine o cartão de um serviço (foto, nome, preço, botão "Agendar"). Na barra lateral estreita ele deve ficar em pé; no meio da página, deitado; numa faixa larga, com o botão ao lado. Com sw-caixa no bloco de fora e sw-caixa-lado no cartão, isso acontece sozinho — o mesmo HTML serve para os três lugares.

É só CSS (o recurso se chama "container query": o bloco vira a régua e o que está dentro se ajusta a ela). O sw-caixa-lado já vem com três formatos: coluna quando o bloco tem menos de 36rem de largura; foto + texto lado a lado a partir de 36rem; e foto + texto + ação (três colunas) a partir de 60rem. Também dá para escrever as suas próprias regras dentro de um sw-caixa.

Quando usar

• Cartão que aparece em lugares diferentes: na página inicial (largo), na lateral do blog (estreito), dentro de um modal.
• Lista de serviços ou produtos que precisa ficar boa em grade de 3 colunas e em lista de 1 coluna.
• Blocos de painel que o usuário pode abrir em tamanhos diferentes.
• Se o que muda é a página inteira (menu, colunas do site), continue usando as larguras de tela normais — o sw-caixa é para o componente.

Comece aqui

1. 1

   Coloque o SW Core no <head>. É só CSS: não precisa do arquivo de JavaScript.

   <link rel="stylesheet" href="swcore/swcore.min.css">

2. 2

   Envolva o cartão com sw-caixa e marque o cartão com sw-caixa-lado. Coloque três coisas dentro: a foto, o texto e a ação.

   <div sw-caixa>
     <article sw-caixa-lado>
       <img src="corte-barba.webp" alt="Corte e barba">
       <div>
         <strong>Corte + barba</strong>
         <p class="t-mut t-pp">R$ 70 · 50 minutos</p>
       </div>
       <a href="/agendar" sw-btn="pri p">Agendar</a>
     </article>
   </div>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<div class="l l-1-3">
  <aside sw-caixa>
    <article sw-caixa-lado>
      <img src="hidratacao.webp" alt="Hidratação">
      <div><strong>Hidratação</strong><p class="t-mut t-pp">R$ 90 · 1 hora</p></div>
      <a href="/agendar" sw-btn="pri p">Agendar</a>
    </article>
  </aside>
  <section sw-caixa>
    <!-- o MESMO article aqui fica deitado -->
  </section>
</div>

<div class="l l-2">
  <div sw-caixa>
    <article sw-caixa-lado sw-card="p" class="p-3">
      <img src="limpeza.webp" alt="Limpeza de pele">
      <div><strong>Limpeza de pele</strong><p class="t-mut t-pp">R$ 120</p></div>
      <a href="/servicos/limpeza" sw-btn="out p">Detalhes</a>
    </article>
  </div>
  <!-- no celular a grade vira 1 coluna larga e os cartões deitam sozinhos -->
</div>

Precisa de quê

• swcore.min.css.
• Nenhum JavaScript.

Cuidados — erros comuns

• O sw-caixa-lado sozinho não faz nada: ele precisa estar dentro de um sw-caixa.
• O sw-caixa não cresce pelo conteúdo. Dentro de uma linha flex (class="flx") ele pode sumir com largura zero — dê largura a ele (class="w-fl") ou use grade (class="l l-2").
• O cartão espera três partes nessa ordem: foto, texto, ação. Com duas partes, no formato largo a terceira coluna fica vazia (não quebra, só sobra espaço).
• A régua é a largura do bloco, não da tela: um cartão largo num celular deitado pode continuar em coluna se o bloco for estreito — é esse o objetivo.

O que ele não faz

• O sw-caixa-lado tem só esses três formatos e as larguras 36rem / 60rem são fixas. Para outros pontos de virada, escreva seu @container.