SW Core
SW Core / CSS / Card

Card CSS

A "caixinha" que agrupa um conteúdo — serviço, produto, post, plano, perfil, número do painel. Um atributo, 11 modelos prontos, e palavras para tamanho, cor e efeito.

O que é

Card é o bloco com borda que você vê em quase todo site: o cartão de um serviço, de um produto com preço, de um post do blog, de um plano "Mais escolhido", o número de vendas do painel. Você escreve <div sw-card> e dentro dele as partes (título, conteúdo, rodapé, foto…), que são classes (class="sw-card-bdy"). No atributo sw-card você escreve palavras para escolher o modelo (prd = produto, prc = preço…), o tamanho, a cor de destaque e o efeito: sw-card="prd int".

É só CSS — não precisa de JavaScript. Em repouso o card é só uma borda fina sobre o fundo da superfície; as palavras acrescentam sombra, cor, movimento ao passar o mouse e o layout de cada modelo. Funciona no tema claro e no escuro. Cada modelo tem as suas partes (classes) — a tabela de opções lista todas.

Quando usar

  • Site institucional: cards de serviço ou "por que nos escolher" (ftr).
  • Loja: vitrine de produtos com preço e selo de desconto (prd).
  • Blog: lista de posts com foto, categoria e autor (sem palavra de modelo, ou full).
  • Página de vendas: tabela de planos (prc) e depoimentos (tst).
  • Painel administrativo: números do mês (stt), avisos (ntf), tarefas (tsk).
  • Equipe / profissionais: cartão de perfil com capa e foto (prf).

Comece aqui

  1. 1

    Coloque o SW Core no <head>. O card é só CSS. O segundo arquivo traz os ícones swi-* usados em alguns modelos.

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

    O card mais simples: título, conteúdo e rodapé (todas as partes são opcionais).

    Manutenção mensal
    Backup, atualizações e suporte pelo WhatsApp.
    <div sw-card="sha">
      <div class="sw-card-hdr">Manutenção mensal</div>
      <div class="sw-card-bdy">Backup, atualizações e suporte pelo WhatsApp.</div>
      <div class="sw-card-ftr"><a href="/contato" sw-btn="pri p">Contratar</a></div>
    </div>
  3. 3

    Para um modelo pronto, escreva a palavra dele e use as partes daquele modelo. Exemplo: ftr (recurso/serviço) + int (sobe ao passar o mouse):

    Site rápido

    Seu site abre rápido no celular e aparece melhor no Google.
    Saiba mais →
    <div sw-card="ftr int">
      <div class="sw-card-ico is-pri"><i class="swi-rocket"></i></div>
      <h3 class="sw-card-ttl">Site rápido</h3>
      <div class="sw-card-txt">Seu site abre rápido no celular e aparece melhor no Google.</div>
      <a class="sw-card-lnk" href="/servicos/site">Saiba mais →</a>
    </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.

1. Partes do card básico

Sem palavra de modelo, o card é uma caixa com borda. Dentro, use as partes que quiser: sw-card-hdr (título), sw-card-bdy (conteúdo) e sw-card-ftr (rodapé, com fundo levemente diferente).

Atendemos de segunda a sábado.
Só o conteúdo (sw-card-bdy) <div sw-card> <div class="sw-card-bdy">Atendemos de segunda a sábado.</div> </div>
Horário
Conteúdo do cartão.
Título + conteúdo <div sw-card> <div class="sw-card-hdr">Horário</div> <div class="sw-card-bdy">Conteúdo do cartão.</div> </div>
Plano Básico
Site de 1 página.
Título + conteúdo + rodapé <div sw-card> <div class="sw-card-hdr">Plano Básico</div> <div class="sw-card-bdy">Site de 1 página.</div> <div class="sw-card-ftr"><button sw-btn="pri pp">Assinar</button></div> </div>

2. Tamanhos

O tamanho muda o espaço interno de todas as partes de uma vez e o arredondamento do canto. Sem palavra: m.

pp
Conteúdo do cartão.
pp — bem compacto <div sw-card="pp"> <div class="sw-card-hdr">pp</div> <div class="sw-card-bdy">Conteúdo do cartão.</div> </div>
p
Conteúdo do cartão.
p — compacto <div sw-card="p"> <div class="sw-card-hdr">p</div> <div class="sw-card-bdy">Conteúdo do cartão.</div> </div>
m
Conteúdo do cartão.
m — médio (padrão) <div sw-card="m"> <div class="sw-card-hdr">m</div> <div class="sw-card-bdy">Conteúdo do cartão.</div> </div>
g
Conteúdo do cartão.
g — espaçoso <div sw-card="g"> <div class="sw-card-hdr">g</div> <div class="sw-card-bdy">Conteúdo do cartão.</div> </div>
xg
Conteúdo do cartão.
xg — muito espaçoso <div sw-card="xg"> <div class="sw-card-hdr">xg</div> <div class="sw-card-bdy">Conteúdo do cartão.</div> </div>

3. Destaque de cor no topo

Uma palavra de cor sozinha pinta uma faixa de 3px em cima e um brilho leve na cor. Atenção: o vermelho aqui é per (perigo), não err.

Destaque
Conteúdo do cartão.
pri — primária <div sw-card="pri"> <div class="sw-card-hdr">Destaque</div> <div class="sw-card-bdy">Conteúdo do cartão.</div> </div>
Concluído
Conteúdo do cartão.
suc — verde <div sw-card="suc"> <div class="sw-card-hdr">Concluído</div> <div class="sw-card-bdy">Conteúdo do cartão.</div> </div>
Atenção
Conteúdo do cartão.
ale — amarelo <div sw-card="ale"> <div class="sw-card-hdr">Atenção</div> <div class="sw-card-bdy">Conteúdo do cartão.</div> </div>
Vencido
Conteúdo do cartão.
per — vermelho (perigo) <div sw-card="per"> <div class="sw-card-hdr">Vencido</div> <div class="sw-card-bdy">Conteúdo do cartão.</div> </div>
Dica
Conteúdo do cartão.
inf — azul <div sw-card="inf"> <div class="sw-card-hdr">Dica</div> <div class="sw-card-bdy">Conteúdo do cartão.</div> </div>

4. Destaque de cor na lateral

Com lft- na frente, a faixa fica à esquerda (4px). Bom para avisos e listas.

Novidade
Conteúdo do cartão.
lft-pri <div sw-card="lft-pri"> <div class="sw-card-hdr">Novidade</div> <div class="sw-card-bdy">Conteúdo do cartão.</div> </div>
Pago
Conteúdo do cartão.
lft-suc <div sw-card="lft-suc"> <div class="sw-card-hdr">Pago</div> <div class="sw-card-bdy">Conteúdo do cartão.</div> </div>
Pendente
Conteúdo do cartão.
lft-ale <div sw-card="lft-ale"> <div class="sw-card-hdr">Pendente</div> <div class="sw-card-bdy">Conteúdo do cartão.</div> </div>
Atrasado
Conteúdo do cartão.
lft-per <div sw-card="lft-per"> <div class="sw-card-hdr">Atrasado</div> <div class="sw-card-bdy">Conteúdo do cartão.</div> </div>
Informação
Conteúdo do cartão.
lft-inf <div sw-card="lft-inf"> <div class="sw-card-hdr">Informação</div> <div class="sw-card-bdy">Conteúdo do cartão.</div> </div>

5. Efeitos

Palavras que mudam o "comportamento" do card. Passe o mouse nos quadros.

Com sombra
Conteúdo do cartão.
sha — sombra <div sw-card="sha"> <div class="sw-card-hdr">Com sombra</div> <div class="sw-card-bdy">Conteúdo do cartão.</div> </div>
Passe o mouse
Conteúdo do cartão.
int — sobe e brilha ao passar o mouse (card clicável) <div sw-card="int"> <div class="sw-card-hdr">Passe o mouse</div> <div class="sw-card-bdy">Conteúdo do cartão.</div> </div>
Aura
Conteúdo do cartão.
aura — brilho colorido em volta; sobe no mouse <div sw-card="aura"> <div class="sw-card-hdr">Aura</div> <div class="sw-card-bdy">Conteúdo do cartão.</div> </div>
Borda animada
Conteúdo do cartão.
grd — borda em degradê que gira <div sw-card="grd"> <div class="sw-card-hdr">Borda animada</div> <div class="sw-card-bdy">Conteúdo do cartão.</div> </div>
Preenchido
Conteúdo do cartão.
fil-pri — cartão inteiro colorido, texto branco <div sw-card="fil-pri"> <div class="sw-card-hdr">Preenchido</div> <div class="sw-card-bdy">Conteúdo do cartão.</div> </div>

6. Vidro (glass)

Vidro fosco: desfoca o que está atrás. Só aparece sobre foto, vídeo ou fundo colorido (o fundo destes quadros representa a sua foto). Ele acompanha o tema: no escuro o texto é branco (para foto escura); no claro o vidro fica leitoso com texto escuro (para foto clara).

Vidro fosco
Conteúdo do cartão.
glass <div sw-card="glass"> <div class="sw-card-hdr">Vidro fosco</div> <div class="sw-card-bdy">Conteúdo do cartão.</div> </div>
Vidro grande
Conteúdo do cartão.
glass + g <div sw-card="glass g"> <div class="sw-card-hdr">Vidro grande</div> <div class="sw-card-bdy">Conteúdo do cartão.</div> </div>

7. Modelo blog / mídia (sem palavra de modelo, ou full)

Foto no topo (sw-card-img) com categoria e duração por cima, e o texto em sw-card-cnt. Com full a foto cobre o card inteiro e o texto fica por cima, sobre um escurecido. Nos quadros usamos uma foto de exemplo; no código aparece foto.webp.

Dicas 5 min

Como deixar seu site mais rápido

Cinco ajustes simples que deixam a página mais rápida no celular.
AN Ana Nunes 12 set
SEO 5 min

Aparecer no Google sem pagar anúncio

Cinco ajustes simples que deixam a página mais rápida no celular.
AN Ana Nunes 12 set
Blog (sw-card="int")
<div class="l l-2">
<article sw-card="int">
  <div class="sw-card-img">
    <img src="foto.webp" alt="">
    <span class="sw-card-cat">Dicas</span>
    <span class="sw-card-dur">5 min</span>
  </div>
  <div class="sw-card-cnt">
    <h3 class="sw-card-ttl">Como deixar seu site mais rápido</h3>
    <div class="sw-card-txt">Cinco ajustes simples que deixam a página mais rápida no celular.</div>
    <div class="sw-card-meta">
      <span class="sw-card-aut"><span sw-avt="pp">AN</span> Ana Nunes</span>
      <span>12 set</span>
    </div>
  </div>
</article>
<article sw-card="sha">
  <div class="sw-card-img">
    <img src="foto.webp" alt="">
    <span class="sw-card-cat">SEO</span>
    <span class="sw-card-dur">5 min</span>
  </div>
  <div class="sw-card-cnt">
    <h3 class="sw-card-ttl">Aparecer no Google sem pagar anúncio</h3>
    <div class="sw-card-txt">Cinco ajustes simples que deixam a página mais rápida no celular.</div>
    <div class="sw-card-meta">
      <span class="sw-card-aut"><span sw-avt="pp">AN</span> Ana Nunes</span>
      <span>12 set</span>
    </div>
  </div>
</article>
</div>

Guia completo do Google Meu Negócio

Apareça no mapa quando procurarem pelo seu serviço.
Ana Nunes8 min
full — foto de fundo inteira
<div class="l l-2">
<article sw-card="full int">
  <div class="sw-card-img h-fl"><img src="foto.webp" alt=""></div>
  <div class="sw-card-ovl"></div>
  <div class="sw-card-cnt">
    <h3 class="sw-card-ttl">Guia completo do Google Meu Negócio</h3>
    <div class="sw-card-txt">Apareça no mapa quando procurarem pelo seu serviço.</div>
    <div class="sw-card-meta"><span>Ana Nunes</span><span>8 min</span></div>
  </div>
</article>
</div>

8. Produto (prd)

Foto com selos (is-new, is-sal, is-hot, is-lmt), botões rápidos que aparecem ao passar o mouse (com int), nome, estrelas, preço com "de/por" e botão largo. ldg mostra o "carregando" enquanto os dados não chegam.

Tênis Corrida Pro
Novo -20%
Tênis Corrida Pro
★★★★★(128)
R$ 199 R$ 249 -20%
Mochila urbana
Mais vendido Últimas
Mochila urbana
R$ 149
Carregando
R$ 0
prd int · prd int com outros selos · prd ldg (carregando)
<div class="l l-3">
<div sw-card="prd int">
  <div class="sw-card-img">
    <img src="foto.webp" alt="Tênis Corrida Pro">
    <div class="sw-card-bdg">
      <span class="sw-card-bdg-it is-new">Novo</span>
      <span class="sw-card-bdg-it is-sal">-20%</span>
    </div>
    <div class="sw-card-qck">
      <button class="sw-card-qck-btn" aria-label="Favoritar"><i class="swi-heart"></i></button>
      <button class="sw-card-qck-btn" aria-label="Ver rápido"><i class="swi-search"></i></button>
    </div>
  </div>
  <div class="sw-card-cnt">
    <div class="sw-card-nme">Tênis Corrida Pro</div>
    <div class="sw-card-rat"><span class="sw-card-rat-stars">★★★★★</span><span class="sw-card-rat-cnt">(128)</span></div>
    <div class="sw-card-prc">
      <span class="sw-card-prc-cur">R$ 199</span>
      <span class="sw-card-prc-old">R$ 249</span>
      <span class="sw-card-prc-off">-20%</span>
    </div>
  </div>
  <div class="sw-card-act"><button sw-btn="pri">Comprar</button></div>
</div>
<div sw-card="prd int">
  <div class="sw-card-img">
    <img src="foto.webp" alt="Mochila urbana">
    <div class="sw-card-bdg">
      <span class="sw-card-bdg-it is-hot">Mais vendido</span>
      <span class="sw-card-bdg-it is-lmt">Últimas</span>
    </div>
  </div>
  <div class="sw-card-cnt">
    <div class="sw-card-nme">Mochila urbana</div>
    <div class="sw-card-prc"><span class="sw-card-prc-cur">R$ 149</span></div>
  </div>
  <div class="sw-card-act"><button sw-btn="out">Ver detalhes</button></div>
</div>
<div sw-card="prd ldg">
  <div class="sw-card-img"></div>
  <div class="sw-card-cnt">
    <div class="sw-card-nme">Carregando</div>
    <div class="sw-card-prc"><span class="sw-card-prc-cur">R$ 0</span></div>
  </div>
  <div class="sw-card-act"><button sw-btn="pri">Comprar</button></div>
</div>
</div>

9. Perfil (prf)

Capa (sw-card-cvr), foto redonda subindo sobre a capa (sw-card-avt, com is-onl = pontinho verde), nome, cargo, números e redes sociais. Tudo centralizado.

Beatriz Rocha

Beatriz Rocha

Designer de interiores
Projetos de salas e cozinhas pequenas que parecem grandes.
86
Projetos
4,9
Nota
Beatriz Rocha

Beatriz Rocha

Designer de interiores
Projetos de salas e cozinhas pequenas que parecem grandes.
86
Projetos
4,9
Nota
prf · prf com is-onl
<div class="l l-2">
<div sw-card="prf">
  <div class="sw-card-cvr"><img src="foto.webp" alt=""></div>
  <div class="sw-card-avt"><img src="foto.webp" alt="Beatriz Rocha"></div>
  <div class="sw-card-cnt">
    <h3 class="sw-card-ttl">Beatriz Rocha</h3>
    <div class="sw-card-rol">Designer de interiores</div>
    <div class="sw-card-bio">Projetos de salas e cozinhas pequenas que parecem grandes.</div>
    <div class="sw-card-stt">
      <div class="sw-card-stt-it"><div class="sw-card-stt-val">86</div><div class="sw-card-stt-lbl">Projetos</div></div>
      <div class="sw-card-stt-it"><div class="sw-card-stt-val">4,9</div><div class="sw-card-stt-lbl">Nota</div></div>
    </div>
    <div class="sw-card-soc">
      <a class="sw-card-soc-btn" href="#" aria-label="Instagram"><i class="swil-instagram"></i></a>
      <a class="sw-card-soc-btn" href="#" aria-label="WhatsApp"><i class="swil-whatsapp"></i></a>
    </div>
  </div>
</div>
<div sw-card="prf">
  <div class="sw-card-cvr"><img src="foto.webp" alt=""></div>
  <div class="sw-card-avt is-onl"><img src="foto.webp" alt="Beatriz Rocha"></div>
  <div class="sw-card-cnt">
    <h3 class="sw-card-ttl">Beatriz Rocha</h3>
    <div class="sw-card-rol">Designer de interiores</div>
    <div class="sw-card-bio">Projetos de salas e cozinhas pequenas que parecem grandes.</div>
    <div class="sw-card-stt">
      <div class="sw-card-stt-it"><div class="sw-card-stt-val">86</div><div class="sw-card-stt-lbl">Projetos</div></div>
      <div class="sw-card-stt-it"><div class="sw-card-stt-val">4,9</div><div class="sw-card-stt-lbl">Nota</div></div>
    </div>
    <div class="sw-card-soc">
      <a class="sw-card-soc-btn" href="#" aria-label="Instagram"><i class="swil-instagram"></i></a>
      <a class="sw-card-soc-btn" href="#" aria-label="WhatsApp"><i class="swil-whatsapp"></i></a>
    </div>
  </div>
</div>
</div>

10. Número do painel (stt)

Ícone colorido (sw-card-ico is-pri/sec/suc/ale/inf/per), tendência (sw-card-tnd is-up ↑ verde / is-dn ↓ vermelho), o número grande, a legenda e um ícone gigante apagado ao fundo (sw-card-ico-bg). Opcional: um mini-gráfico (sw-card-spk). Com fil-pri o card fica todo colorido.

12%
R$ 48.290
Vendas do mês
Agosto: R$ 43.100
8%
326
Clientes novos
Últimos 30 dias
3%
1.024
Pedidos
Semana passada: 1.056
stt · stt com mini-gráfico · stt fil-pri
<div class="l l-3">
<div sw-card="stt">
  <i class="sw-card-ico-bg swi-dollar-circle"></i>
  <div class="sw-card-top">
    <div class="sw-card-ico is-suc"><i class="swi-dollar-circle"></i></div>
    <span class="sw-card-tnd is-up">12%</span>
  </div>
  <div class="sw-card-val">R$ 48.290</div>
  <div class="sw-card-lbl">Vendas do mês</div>
  <div class="sw-card-sub">Agosto: R$ 43.100</div>
</div>
<div sw-card="stt">
  <i class="sw-card-ico-bg swi-user-plus"></i>
  <div class="sw-card-top">
    <div class="sw-card-ico is-inf"><i class="swi-user-plus"></i></div>
    <span class="sw-card-tnd is-up">8%</span>
  </div>
  <div class="sw-card-val">326</div>
  <div class="sw-card-lbl">Clientes novos</div>
  <div class="sw-card-sub">Últimos 30 dias</div>
  <svg class="sw-card-spk t-suc" viewBox="0 0 100 30" preserveAspectRatio="none" aria-hidden="true"><polyline points="0,24 15,20 30,22 45,14 60,16 75,8 100,4" fill="none" stroke="currentColor" stroke-width="2"/></svg>
</div>
<div sw-card="stt fil-pri">
  <i class="sw-card-ico-bg swi-cart"></i>
  <div class="sw-card-top">
    <div class="sw-card-ico is-pri"><i class="swi-cart"></i></div>
    <span class="sw-card-tnd is-dn">3%</span>
  </div>
  <div class="sw-card-val">1.024</div>
  <div class="sw-card-lbl">Pedidos</div>
  <div class="sw-card-sub">Semana passada: 1.056</div>
</div>
</div>

11. Plano / preço (prc)

Nome do plano, preço grande (sw-card-prc-val), descrição, lista de itens com ✓ (e is-no = riscado com ×) e botão. Com pop o card fica maior, com borda colorida e o selo sw-card-pop ("Mais escolhido") no topo.

Básico
R$ 49 por
mês
Para começar.
Site de 1 página
Botão de WhatsApp
Blog
Loja virtual
Mais escolhido
Profissional
R$ 99 por
mês
O mais completo para pequenas empresas.
Site de 1 página
Botão de WhatsApp
Blog
Loja virtual
Loja
R$ 189 por
mês
Para vender online.
Site de 1 página
Botão de WhatsApp
Blog
Loja virtual
prc · prc pop · prc
<div class="l l-3">
<div sw-card="prc">
  <div class="sw-card-pln">Básico</div>
  <div class="sw-card-prc-val">
    <span class="sw-card-prc-sym">R$</span>
    <span class="sw-card-prc-num">49</span>
    <span class="sw-card-prc-per">por<br>mês</span>
  </div>
  <div class="sw-card-desc">Para começar.</div>
  <div class="sw-card-fts">
    <div class="sw-card-ft-it">Site de 1 página</div>
    <div class="sw-card-ft-it">Botão de WhatsApp</div>
    <div class="sw-card-ft-it is-no">Blog</div>
    <div class="sw-card-ft-it is-no">Loja virtual</div>
  </div>
  <div class="sw-card-cta"><button sw-btn="out">Assinar</button></div>
</div>
<div sw-card="prc pop">
  <span class="sw-card-pop">Mais escolhido</span>
  <div class="sw-card-pln">Profissional</div>
  <div class="sw-card-prc-val">
    <span class="sw-card-prc-sym">R$</span>
    <span class="sw-card-prc-num">99</span>
    <span class="sw-card-prc-per">por<br>mês</span>
  </div>
  <div class="sw-card-desc">O mais completo para pequenas empresas.</div>
  <div class="sw-card-fts">
    <div class="sw-card-ft-it">Site de 1 página</div>
    <div class="sw-card-ft-it">Botão de WhatsApp</div>
    <div class="sw-card-ft-it">Blog</div>
    <div class="sw-card-ft-it is-no">Loja virtual</div>
  </div>
  <div class="sw-card-cta"><button sw-btn="pri">Assinar</button></div>
</div>
<div sw-card="prc">
  <div class="sw-card-pln">Loja</div>
  <div class="sw-card-prc-val">
    <span class="sw-card-prc-sym">R$</span>
    <span class="sw-card-prc-num">189</span>
    <span class="sw-card-prc-per">por<br>mês</span>
  </div>
  <div class="sw-card-desc">Para vender online.</div>
  <div class="sw-card-fts">
    <div class="sw-card-ft-it">Site de 1 página</div>
    <div class="sw-card-ft-it">Botão de WhatsApp</div>
    <div class="sw-card-ft-it">Blog</div>
    <div class="sw-card-ft-it">Loja virtual</div>
  </div>
  <div class="sw-card-cta"><button sw-btn="out">Assinar</button></div>
</div>
</div>

12. Horizontal (hor)

Foto à esquerda e texto à direita. p deixa a foto estreita (8rem), g larga (22rem). No celular a foto vai para cima.

Foto estreita

Foto de um lado, texto do outro. No celular (até 700px) a foto sobe.
hor p
<article sw-card="hor p">
  <div class="sw-card-img"><img src="foto.webp" alt=""></div>
  <div class="sw-card-cnt">
    <h3 class="sw-card-ttl">Foto estreita</h3>
    <div class="sw-card-txt">Foto de um lado, texto do outro. No celular (até 700px) a foto sobe.</div>
  </div>
</article>

Foto média

Foto de um lado, texto do outro. No celular (até 700px) a foto sobe.
hor
<article sw-card="hor">
  <div class="sw-card-img"><img src="foto.webp" alt=""></div>
  <div class="sw-card-cnt">
    <h3 class="sw-card-ttl">Foto média</h3>
    <div class="sw-card-txt">Foto de um lado, texto do outro. No celular (até 700px) a foto sobe.</div>
  </div>
</article>

Foto larga

Foto de um lado, texto do outro. No celular (até 700px) a foto sobe.
hor g
<article sw-card="hor g">
  <div class="sw-card-img"><img src="foto.webp" alt=""></div>
  <div class="sw-card-cnt">
    <h3 class="sw-card-ttl">Foto larga</h3>
    <div class="sw-card-txt">Foto de um lado, texto do outro. No celular (até 700px) a foto sobe.</div>
  </div>
</article>

13. Recurso / serviço (ftr)

Ícone em quadradinho colorido, título, texto e link. ctr centraliza tudo; num deixa o ícone redondo, para números (01, 02…). Com int o ícone gira um pouco no passar do mouse.

Site rápido

Seu site abre rápido no celular e aparece melhor no Google.
Saiba mais →

Feito para celular

Seu site abre rápido no celular e aparece melhor no Google.
Saiba mais →
01

Primeira conversa

Seu site abre rápido no celular e aparece melhor no Google.
Saiba mais →
ftr int · ftr ctr int · ftr num
<div class="l l-3">
<div sw-card="ftr int">
  <div class="sw-card-ico is-pri"><i class="swi-rocket"></i></div>
  <h3 class="sw-card-ttl">Site rápido</h3>
  <div class="sw-card-txt">Seu site abre rápido no celular e aparece melhor no Google.</div>
  <a class="sw-card-lnk" href="#">Saiba mais →</a>
</div>
<div sw-card="ftr ctr int">
  <div class="sw-card-ico is-pri"><i class="swi-mobile"></i></div>
  <h3 class="sw-card-ttl">Feito para celular</h3>
  <div class="sw-card-txt">Seu site abre rápido no celular e aparece melhor no Google.</div>
  <a class="sw-card-lnk" href="#">Saiba mais →</a>
</div>
<div sw-card="ftr num">
  <div class="sw-card-ico is-pri">01</div>
  <h3 class="sw-card-ttl">Primeira conversa</h3>
  <div class="sw-card-txt">Seu site abre rápido no celular e aparece melhor no Google.</div>
  <a class="sw-card-lnk" href="#">Saiba mais →</a>
</div>
</div>

14. Depoimento (tst)

Aspas grandes e apagadas no canto, estrelas (swi-star; is-off = apagada), o texto em itálico e quem falou (com avatar). Com pop ganha fundo levemente colorido e borda na cor.

Entregaram o site antes do prazo e me explicaram tudo com paciência.

AN
Ana Nunes
Dona de confeitaria

Entregaram o site antes do prazo e me explicaram tudo com paciência.

CM
Carla Melo
Dona de confeitaria
tst · tst pop
<div class="l l-2">
<div sw-card="tst">
  <div class="sw-card-rat">
    <i class="swi-star"></i><i class="swi-star"></i><i class="swi-star"></i><i class="swi-star"></i><i class="swi-star is-off"></i>
  </div>
  <p class="sw-card-qt">Entregaram o site antes do prazo e me explicaram tudo com paciência.</p>
  <div class="sw-card-usr">
    <span sw-avt>AN</span>
    <div>
      <div class="sw-card-usr-nm">Ana Nunes</div>
      <div class="sw-card-usr-rl">Dona de confeitaria</div>
    </div>
  </div>
</div>
<div sw-card="tst pop">
  <div class="sw-card-rat">
    <i class="swi-star"></i><i class="swi-star"></i><i class="swi-star"></i><i class="swi-star"></i><i class="swi-star is-off"></i>
  </div>
  <p class="sw-card-qt">Entregaram o site antes do prazo e me explicaram tudo com paciência.</p>
  <div class="sw-card-usr">
    <span sw-avt>CM</span>
    <div>
      <div class="sw-card-usr-nm">Carla Melo</div>
      <div class="sw-card-usr-rl">Dona de confeitaria</div>
    </div>
  </div>
</div>
</div>

15. Notificação (ntf)

Ícone, título, texto, hora e um × que aparece ao passar o mouse. A faixa da esquerda muda com suc, ale ou per; new põe um pontinho de "não lida".

Nova mensagem
Carlos perguntou sobre o prazo de entrega.
agora
Pagamento aprovado
Pedido #1042 — R$ 189,90.
2 min
Estoque baixo
Restam 3 unidades do Tênis Corrida Pro.
1 h
Pagamento recusado
O cartão do pedido #1043 foi negado.
ontem
ntf · ntf suc new · ntf ale · ntf per
<div class="flx f-cl gap-3">
<div sw-card="ntf">
  <div class="sw-card-ico is-inf"><i class="swi-envelope"></i></div>
  <div class="sw-card-cnt">
    <div class="sw-card-ttl">Nova mensagem</div>
    <div class="sw-card-txt">Carlos perguntou sobre o prazo de entrega.</div>
  </div>
  <span class="sw-card-tme">agora</span>
  <i class="sw-card-cls swi-x" aria-hidden="true"></i>
</div>
<div sw-card="ntf suc new">
  <div class="sw-card-ico is-suc"><i class="swi-check"></i></div>
  <div class="sw-card-cnt">
    <div class="sw-card-ttl">Pagamento aprovado</div>
    <div class="sw-card-txt">Pedido #1042 — R$ 189,90.</div>
  </div>
  <span class="sw-card-tme">2 min</span>
  <i class="sw-card-cls swi-x" aria-hidden="true"></i>
</div>
<div sw-card="ntf ale">
  <div class="sw-card-ico is-ale"><i class="swi-error"></i></div>
  <div class="sw-card-cnt">
    <div class="sw-card-ttl">Estoque baixo</div>
    <div class="sw-card-txt">Restam 3 unidades do Tênis Corrida Pro.</div>
  </div>
  <span class="sw-card-tme">1 h</span>
  <i class="sw-card-cls swi-x" aria-hidden="true"></i>
</div>
<div sw-card="ntf per">
  <div class="sw-card-ico is-per"><i class="swi-x-circle"></i></div>
  <div class="sw-card-cnt">
    <div class="sw-card-ttl">Pagamento recusado</div>
    <div class="sw-card-txt">O cartão do pedido #1043 foi negado.</div>
  </div>
  <span class="sw-card-tme">ontem</span>
  <i class="sw-card-cls swi-x" aria-hidden="true"></i>
</div>
</div>

16. Tarefa (tsk)

Etiquetas (sw-card-tg is-pri/sec/suc/ale), bolinha de prioridade (sw-card-prr is-hi/md/lo), título, barra de progresso, pessoas, checklist e prazo (is-late = atrasado, em vermelho). A largura da barra (sw-card-prg-bar) é você que define — aqui por classes no CSS.

SiteUrgente
Trocar fotos da página inicial
Revisar com o cliente antes de publicar.
ANBR
1/5 Ontem
Blog
Escrever post sobre SEO
Revisar com o cliente antes de publicar.
ANBR
3/5 Sexta
Loja
Cadastrar produtos novos
Revisar com o cliente antes de publicar.
ANBR
5/5 30 set
tsk (três estados)
<style>
  .tsk-20 { width: 20%; }
  .tsk-60 { width: 60%; }
  .tsk-100 { width: 100%; }
</style>
<div class="l l-3">
<div sw-card="tsk">
  <div class="sw-card-top">
    <div class="sw-card-tgs"><span class="sw-card-tg is-pri">Site</span><span class="sw-card-tg is-ale">Urgente</span></div>
    <span class="sw-card-prr is-hi" title="Prioridade"></span>
  </div>
  <div class="sw-card-ttl">Trocar fotos da página inicial</div>
  <div class="sw-card-txt">Revisar com o cliente antes de publicar.</div>
  <div class="sw-card-prg"><div class="sw-card-prg-bar tsk-20"></div></div>
  <div class="sw-card-bot">
    <div class="sw-card-avt-grp"><span class="sw-card-avt-it bg-pri">AN</span><span class="sw-card-avt-it bg-sec">BR</span></div>
    <span class="sw-card-chk"><i class="swi-check-square"></i> 1/5</span>
    <span class="sw-card-due is-late"><i class="swi-calendar"></i> Ontem</span>
  </div>
</div>
<div sw-card="tsk">
  <div class="sw-card-top">
    <div class="sw-card-tgs"><span class="sw-card-tg is-sec">Blog</span></div>
    <span class="sw-card-prr is-md" title="Prioridade"></span>
  </div>
  <div class="sw-card-ttl">Escrever post sobre SEO</div>
  <div class="sw-card-txt">Revisar com o cliente antes de publicar.</div>
  <div class="sw-card-prg"><div class="sw-card-prg-bar tsk-60"></div></div>
  <div class="sw-card-bot">
    <div class="sw-card-avt-grp"><span class="sw-card-avt-it bg-pri">AN</span><span class="sw-card-avt-it bg-sec">BR</span></div>
    <span class="sw-card-chk"><i class="swi-check-square"></i> 3/5</span>
    <span class="sw-card-due"><i class="swi-calendar"></i> Sexta</span>
  </div>
</div>
<div sw-card="tsk">
  <div class="sw-card-top">
    <div class="sw-card-tgs"><span class="sw-card-tg is-suc">Loja</span></div>
    <span class="sw-card-prr is-lo" title="Prioridade"></span>
  </div>
  <div class="sw-card-ttl">Cadastrar produtos novos</div>
  <div class="sw-card-txt">Revisar com o cliente antes de publicar.</div>
  <div class="sw-card-prg"><div class="sw-card-prg-bar tsk-100"></div></div>
  <div class="sw-card-bot">
    <div class="sw-card-avt-grp"><span class="sw-card-avt-it bg-pri">AN</span><span class="sw-card-avt-it bg-sec">BR</span></div>
    <span class="sw-card-chk"><i class="swi-check-square"></i> 5/5</span>
    <span class="sw-card-due"><i class="swi-calendar"></i> 30 set</span>
  </div>
</div>
</div>

17. Futurista (neo)

Vidro escuro com grade fina, cantoneiras de "tela de computador de bordo" e uma linha de luz que passa no topo. Feito para card grande (destaque de página, painel). A cor é a primária; neo suc, neo ale, neo per e neo inf trocam a cor do efeito.

Central de monitoramento
99,98%
Seu site ficou no ar nos últimos 30 dias.
neo
<div sw-card="neo">
  <div class="sw-card-hdr">Central de monitoramento</div>
  <div class="sw-card-bdy">
    <div class="sw-card-val">99,98%</div>
    <div class="sw-card-lbl">Seu site ficou no ar nos últimos 30 dias.</div>
  </div>
  <div class="sw-card-ftr"><a href="#" sw-btn="pri p">Ver relatório</a></div>
</div>
Estoque
12 itens
Produtos abaixo do mínimo.
neo ale — outra cor
<div sw-card="neo ale">
  <div class="sw-card-hdr">Estoque</div>
  <div class="sw-card-bdy">
    <div class="sw-card-val">12 itens</div>
    <div class="sw-card-lbl">Produtos abaixo do mínimo.</div>
  </div>
</div>

Tabela de opções

PalavraO que fazExemplo
Modelo (uma palavra no sw-card)
(nenhuma)Caixa básica ou card de blog/mídia (foto + texto).sw-card
fullBlog com a foto cobrindo o card inteiro e o texto por cima.sw-card="full"
prdProduto: foto, selos, nome, estrelas, preço, botão.sw-card="prd"
prfPerfil: capa, foto, nome, cargo, números, redes.sw-card="prf"
sttNúmero de painel: ícone, tendência, valor, legenda.sw-card="stt"
prcPlano/preço: nome, preço, itens, botão.sw-card="prc"
horHorizontal: foto à esquerda, texto à direita.sw-card="hor"
ftrRecurso/serviço: ícone, título, texto, link.sw-card="ftr"
tstDepoimento: estrelas, texto, autor.sw-card="tst"
ntfNotificação: ícone, título, texto, hora.sw-card="ntf"
tskTarefa (quadro Kanban): etiquetas, prioridade, progresso, prazo.sw-card="tsk"
neoFuturista: vidro escuro, grade e cantoneiras.sw-card="neo"
Complementos de modelo
ldgCom prd: "carregando" (nome, preço e botão viram faixas piscando).sw-card="prd ldg"
popCom prc: plano em destaque (maior, borda colorida). Com tst: fundo tingido.sw-card="prc pop"
ctrCom ftr: tudo centralizado.sw-card="ftr ctr"
numCom ftr: ícone redondo para número.sw-card="ftr num"
suc / ale / per / pri / infCom ntf: cor da faixa da esquerda (só ela — não pinta o topo).sw-card="ntf suc"
suc / ale / per / infCom neo: troca a cor do efeito (borda, brilho, grade e cantoneiras). Sem palavra: a primária.sw-card="neo suc"
newCom ntf: pontinho de "não lida".sw-card="ntf new"
p / gCom hor: foto estreita (8rem) / larga (22rem).sw-card="hor g"
Tamanho
ppBem compacto.sw-card="pp"
pCompacto.sw-card="p"
mMédio (padrão).sw-card="m"
gEspaçoso.sw-card="g"
xgMuito espaçoso.sw-card="xg"
Destaque de cor
pri · suc · ale · per · infFaixa de 3px no topo + brilho na cor. O vermelho é per.sw-card="suc"
lft-pri · lft-suc · lft-ale · lft-per · lft-infFaixa de 4px na lateral esquerda.sw-card="lft-per"
fil-priCard inteiro em degradê da cor primária do site, texto branco.sw-card="fil-pri"
Efeito
shaSombra.sw-card="sha"
intSobe e brilha ao passar o mouse; cursor de clique. Em prd também mostra os botões rápidos e dá zoom na foto.sw-card="int"
auraBrilho colorido em volta; sobe ao passar o mouse.sw-card="aura"
grdBorda em degradê que gira.sw-card="grd"
glassVidro fosco, texto branco — sobre foto.sw-card="glass"
Partes gerais (classes)
sw-card-hdrTítulo do card, com linha embaixo.<div class="sw-card-hdr">
sw-card-bdyConteúdo.<div class="sw-card-bdy">
sw-card-ftrRodapé (botões), com linha em cima. Filho direto do card.<div class="sw-card-ftr">
sw-card-imgÁrea da foto (proporção 16:10). Dentro: <img>.<div class="sw-card-img"><img …></div>
sw-card-cntBloco de texto dos modelos (blog, produto, perfil…).<div class="sw-card-cnt">
sw-card-ttl · sw-card-txtTítulo e texto dentro do sw-card-cnt.<h3 class="sw-card-ttl">
sw-card-ico (+ is-pri/sec/suc/ale/inf/per)Ícone em quadradinho colorido (stt, ftr, ntf).<div class="sw-card-ico is-suc">
Partes do blog
sw-card-catSelo de categoria sobre a foto (canto esquerdo).<span class="sw-card-cat">Dicas</span>
sw-card-durSelo de duração sobre a foto (canto direito).<span class="sw-card-dur">5 min</span>
sw-card-meta · sw-card-autLinha de rodapé (autor, data) e o autor com avatar.<div class="sw-card-meta">
sw-card-ovlCom full: escurecido sobre a foto para o texto ser lido.<div class="sw-card-ovl"></div>
h-fl (na sw-card-img)Com full: a foto ocupa o card inteiro.<div class="sw-card-img h-fl">
Partes do produto
sw-card-bdg + sw-card-bdg-itSelos sobre a foto: is-new (azul), is-sal (vermelho), is-hot (amarelo), is-lmt (secundária).<span class="sw-card-bdg-it is-sal">-20%</span>
sw-card-qck + sw-card-qck-btnBotões redondos que aparecem no passar do mouse (precisa de int).<button class="sw-card-qck-btn">
sw-card-nmeNome do produto.<div class="sw-card-nme">
sw-card-rat · -rat-stars · -rat-cntLinha de avaliação: estrelas e quantidade.<span class="sw-card-rat-stars">★★★★★</span>
sw-card-prc · -prc-cur · -prc-old · -prc-offPreço atual (grande), antigo (riscado) e desconto (verde).<span class="sw-card-prc-cur">R$ 199</span>
sw-card-actÁrea do botão; o botão ocupa a largura toda.<div class="sw-card-act">
Partes do perfil
sw-card-cvrCapa (9rem de altura) com <img>.<div class="sw-card-cvr">
sw-card-avt (+ is-onl)Foto redonda sobre a capa; is-onl = pontinho verde.<div class="sw-card-avt is-onl">
sw-card-rol · sw-card-bioCargo (na cor primária) e mini-biografia.<div class="sw-card-rol">
sw-card-stt · -stt-it · -stt-val · -stt-lblFaixa de números (ex.: 86 Projetos).<div class="sw-card-stt">
sw-card-soc · sw-card-soc-btnBotões redondos de redes sociais.<a class="sw-card-soc-btn">
Partes do número de painel (stt)
sw-card-topLinha de cima: ícone + tendência.<div class="sw-card-top">
sw-card-tnd (+ is-up / is-dn)Tendência: ↑ verde ou ↓ vermelho (a seta é automática).<span class="sw-card-tnd is-up">12%</span>
sw-card-val · sw-card-lbl · sw-card-subNúmero grande, legenda e comparação.<div class="sw-card-val">
sw-card-ico-bgNo <i> de um ícone: vira marca d'água gigante ao fundo.<i class="sw-card-ico-bg swi-cart"></i>
sw-card-spkNo seu <svg> de mini-gráfico: ocupa a largura toda, 4rem de altura.<svg class="sw-card-spk">
Partes do plano (prc)
sw-card-popSelo "Mais escolhido" no topo (use com pop). Tem que ser <span>.<span class="sw-card-pop">
sw-card-plnNome do plano.<div class="sw-card-pln">
sw-card-prc-val · -prc-sym · -prc-num · -prc-perPreço: "R$", número grande e "por mês".<span class="sw-card-prc-num">99</span>
sw-card-descFrase curta do plano.<div class="sw-card-desc">
sw-card-fts · sw-card-ft-it (+ is-no)Lista de itens com ✓; is-no = não incluso (riscado, com ×).<div class="sw-card-ft-it is-no">
sw-card-ctaÁrea do botão; o botão ocupa a largura toda.<div class="sw-card-cta">
Partes do recurso, depoimento e notificação
sw-card-lnkLink "Saiba mais" do ftr.<a class="sw-card-lnk">
sw-card-rat (+ swi-star / is-off)Estrelas do tst; is-off = estrela apagada.<i class="swi-star is-off"></i>
sw-card-qtTexto do depoimento (itálico).<p class="sw-card-qt">
sw-card-usr · -usr-nm · -usr-rlQuem falou: avatar, nome e descrição.<div class="sw-card-usr">
sw-card-tmeHora da notificação.<span class="sw-card-tme">2 min</span>
sw-card-clsO × da notificação (aparece no passar do mouse).<i class="sw-card-cls swi-x"></i>
Partes da tarefa (tsk)
sw-card-tgs · sw-card-tg (+ is-pri/sec/suc/ale)Etiquetas.<span class="sw-card-tg is-ale">Urgente</span>
sw-card-prr (+ is-hi / is-md / is-lo)Bolinha de prioridade: alta (vermelho), média (amarelo), baixa (verde).<span class="sw-card-prr is-hi"></span>
sw-card-prg · sw-card-prg-barBarra de progresso. A largura da barra é você que define.<div class="sw-card-prg"><div class="sw-card-prg-bar"></div></div>
sw-card-botLinha de baixo: pessoas, checklist, prazo.<div class="sw-card-bot">
sw-card-avt-grp · sw-card-avt-itBolinhas de iniciais sobrepostas (dê a cor com bg-pri, bg-sec…).<span class="sw-card-avt-it bg-pri">AN</span>
sw-card-chk · sw-card-due (+ is-late)Checklist e prazo; is-late = atrasado.<span class="sw-card-due is-late">

Receitas prontas — usos reais

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

Seção "Nossos serviços" do site Ao vivo

Sites para celular

Seu site abre rápido no celular e aparece melhor no Google.
Saiba mais →

Aparecer no Google

Seu site abre rápido no celular e aparece melhor no Google.
Saiba mais →

Loja virtual

Seu site abre rápido no celular e aparece melhor no Google.
Saiba mais →
<div class="l l-3">
<div sw-card="ftr ctr int">
  <div class="sw-card-ico is-pri"><i class="swi-mobile"></i></div>
  <h3 class="sw-card-ttl">Sites para celular</h3>
  <div class="sw-card-txt">Seu site abre rápido no celular e aparece melhor no Google.</div>
  <a class="sw-card-lnk" href="#">Saiba mais →</a>
</div>
<div sw-card="ftr ctr int">
  <div class="sw-card-ico is-pri"><i class="swi-search"></i></div>
  <h3 class="sw-card-ttl">Aparecer no Google</h3>
  <div class="sw-card-txt">Seu site abre rápido no celular e aparece melhor no Google.</div>
  <a class="sw-card-lnk" href="#">Saiba mais →</a>
</div>
<div sw-card="ftr ctr int">
  <div class="sw-card-ico is-pri"><i class="swi-cart"></i></div>
  <h3 class="sw-card-ttl">Loja virtual</h3>
  <div class="sw-card-txt">Seu site abre rápido no celular e aparece melhor no Google.</div>
  <a class="sw-card-lnk" href="#">Saiba mais →</a>
</div>
</div>
Página de preços Ao vivo
Básico
R$ 49 por
mês
Para começar.
Site de 1 página
Botão de WhatsApp
Blog
Loja virtual
Mais escolhido
Profissional
R$ 99 por
mês
O mais completo para pequenas empresas.
Site de 1 página
Botão de WhatsApp
Blog
Loja virtual
Loja
R$ 189 por
mês
Para vender online.
Site de 1 página
Botão de WhatsApp
Blog
Loja virtual
<div class="l l-3">
<div sw-card="prc">
  <div class="sw-card-pln">Básico</div>
  <div class="sw-card-prc-val">
    <span class="sw-card-prc-sym">R$</span>
    <span class="sw-card-prc-num">49</span>
    <span class="sw-card-prc-per">por<br>mês</span>
  </div>
  <div class="sw-card-desc">Para começar.</div>
  <div class="sw-card-fts">
    <div class="sw-card-ft-it">Site de 1 página</div>
    <div class="sw-card-ft-it">Botão de WhatsApp</div>
    <div class="sw-card-ft-it is-no">Blog</div>
    <div class="sw-card-ft-it is-no">Loja virtual</div>
  </div>
  <div class="sw-card-cta"><button sw-btn="out">Assinar</button></div>
</div>
<div sw-card="prc pop">
  <span class="sw-card-pop">Mais escolhido</span>
  <div class="sw-card-pln">Profissional</div>
  <div class="sw-card-prc-val">
    <span class="sw-card-prc-sym">R$</span>
    <span class="sw-card-prc-num">99</span>
    <span class="sw-card-prc-per">por<br>mês</span>
  </div>
  <div class="sw-card-desc">O mais completo para pequenas empresas.</div>
  <div class="sw-card-fts">
    <div class="sw-card-ft-it">Site de 1 página</div>
    <div class="sw-card-ft-it">Botão de WhatsApp</div>
    <div class="sw-card-ft-it">Blog</div>
    <div class="sw-card-ft-it is-no">Loja virtual</div>
  </div>
  <div class="sw-card-cta"><button sw-btn="pri">Assinar</button></div>
</div>
<div sw-card="prc">
  <div class="sw-card-pln">Loja</div>
  <div class="sw-card-prc-val">
    <span class="sw-card-prc-sym">R$</span>
    <span class="sw-card-prc-num">189</span>
    <span class="sw-card-prc-per">por<br>mês</span>
  </div>
  <div class="sw-card-desc">Para vender online.</div>
  <div class="sw-card-fts">
    <div class="sw-card-ft-it">Site de 1 página</div>
    <div class="sw-card-ft-it">Botão de WhatsApp</div>
    <div class="sw-card-ft-it">Blog</div>
    <div class="sw-card-ft-it">Loja virtual</div>
  </div>
  <div class="sw-card-cta"><button sw-btn="out">Assinar</button></div>
</div>
</div>
Topo do painel: indicadores do mês Ao vivo
12%
R$ 48.290
Vendas do mês
Agosto: R$ 43.100
5%
1.024
Pedidos
Agosto: 975
2%
326
Clientes novos
Agosto: 333
<div class="l l-3">
<div sw-card="stt">
  <i class="sw-card-ico-bg swi-dollar-circle"></i>
  <div class="sw-card-top">
    <div class="sw-card-ico is-suc"><i class="swi-dollar-circle"></i></div>
    <span class="sw-card-tnd is-up">12%</span>
  </div>
  <div class="sw-card-val">R$ 48.290</div>
  <div class="sw-card-lbl">Vendas do mês</div>
  <div class="sw-card-sub">Agosto: R$ 43.100</div>
</div>
<div sw-card="stt">
  <i class="sw-card-ico-bg swi-cart"></i>
  <div class="sw-card-top">
    <div class="sw-card-ico is-pri"><i class="swi-cart"></i></div>
    <span class="sw-card-tnd is-up">5%</span>
  </div>
  <div class="sw-card-val">1.024</div>
  <div class="sw-card-lbl">Pedidos</div>
  <div class="sw-card-sub">Agosto: 975</div>
</div>
<div sw-card="stt">
  <i class="sw-card-ico-bg swi-user-plus"></i>
  <div class="sw-card-top">
    <div class="sw-card-ico is-inf"><i class="swi-user-plus"></i></div>
    <span class="sw-card-tnd is-dn">2%</span>
  </div>
  <div class="sw-card-val">326</div>
  <div class="sw-card-lbl">Clientes novos</div>
  <div class="sw-card-sub">Agosto: 333</div>
</div>
</div>
Avisos do painel com destaque lateral Ao vivo
Seu domínio vence em 7 dias. Renove para o site não sair do ar.
Backup feito hoje às 03:00. Tudo certo.
<div class="flx f-cl gap-3">
  <div sw-card="lft-ale p"><div class="sw-card-bdy"><strong>Seu domínio vence em 7 dias.</strong> Renove para o site não sair do ar.</div></div>
  <div sw-card="lft-suc p"><div class="sw-card-bdy"><strong>Backup feito hoje às 03:00.</strong> Tudo certo.</div></div>
</div>

Precisa de quê

  • swcore.min.css — o card.
  • swcore.compl.min.css — os ícones swi-* / swil-* dos modelos.
  • Nenhum JavaScript.

Cuidados — erros comuns

  • O vermelho dos destaques é per (perigo), não err: sw-card="per", sw-card="lft-per", sw-card-ico is-per.
  • O tipo e os efeitos são palavras no atributo (sw-card="prd int"); as partes de dentro são classes (class="sw-card-bdy"). Não troque um pelo outro.
  • Uma palavra de modelo por card. sw-card="prd prc" mistura dois layouts.
  • O sw-card-ftr precisa ser filho direto do card, senão perde o espaçamento e a linha de cima.
  • Os botões rápidos do produto (sw-card-qck) só aparecem com int.
  • Card clicável inteiro: use <a sw-card="int" href="…">. Não coloque outro link ou botão dentro de um card que já é link.
  • A barra de progresso da tarefa não tem largura sozinha: defina com uma classe sua ou por JavaScript (barra.style.width = '60%').
  • Fotos: use .webp leve e sempre alt (vazio alt="" se for só enfeite).

O que ele não faz

  • fil-pri é o único "preenchido": não existe fil-suc, fil-ale etc. O degradê dele segue a cor primária do site.
  • O glass segue o tema da página inteira (no <html>). Se o site é claro mas a foto atrás do card é escura, o texto escuro perde contraste: escureça a foto (por exemplo com scrim) ou use outro modelo de card ali.
  • O × da notificação (sw-card-cls) é só visual: fechar é com o seu JavaScript.
  • O modelo horizontal vira coluna em telas de até 700px; esse ponto não é configurável.