Dicas
5 min
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
Coloque o SW Core no
<head>. O card é só CSS. O segundo arquivo traz os íconesswi-*usados em alguns modelos.<link rel="stylesheet" href="swcore/swcore.min.css"> <link rel="stylesheet" href="swcore/swcore.compl.min.css"> -
2
O card mais simples: título, conteúdo e rodapé (todas as partes são opcionais).
<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
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):<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).
<div sw-card>
<div class="sw-card-bdy">Atendemos de segunda a sábado.</div>
</div>
<div sw-card>
<div class="sw-card-hdr">Horário</div>
<div class="sw-card-bdy">Conteúdo do cartão.</div>
</div>
<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.
<div sw-card="pp">
<div class="sw-card-hdr">pp</div>
<div class="sw-card-bdy">Conteúdo do cartão.</div>
</div>
<div sw-card="p">
<div class="sw-card-hdr">p</div>
<div class="sw-card-bdy">Conteúdo do cartão.</div>
</div>
<div sw-card="m">
<div class="sw-card-hdr">m</div>
<div class="sw-card-bdy">Conteúdo do cartão.</div>
</div>
<div sw-card="g">
<div class="sw-card-hdr">g</div>
<div class="sw-card-bdy">Conteúdo do cartão.</div>
</div>
<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.
<div sw-card="pri">
<div class="sw-card-hdr">Destaque</div>
<div class="sw-card-bdy">Conteúdo do cartão.</div>
</div>
<div sw-card="suc">
<div class="sw-card-hdr">Concluído</div>
<div class="sw-card-bdy">Conteúdo do cartão.</div>
</div>
<div sw-card="ale">
<div class="sw-card-hdr">Atenção</div>
<div class="sw-card-bdy">Conteúdo do cartão.</div>
</div>
<div sw-card="per">
<div class="sw-card-hdr">Vencido</div>
<div class="sw-card-bdy">Conteúdo do cartão.</div>
</div>
<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.
<div sw-card="lft-pri">
<div class="sw-card-hdr">Novidade</div>
<div class="sw-card-bdy">Conteúdo do cartão.</div>
</div>
<div sw-card="lft-suc">
<div class="sw-card-hdr">Pago</div>
<div class="sw-card-bdy">Conteúdo do cartão.</div>
</div>
<div sw-card="lft-ale">
<div class="sw-card-hdr">Pendente</div>
<div class="sw-card-bdy">Conteúdo do cartão.</div>
</div>
<div sw-card="lft-per">
<div class="sw-card-hdr">Atrasado</div>
<div class="sw-card-bdy">Conteúdo do cartão.</div>
</div>
<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.
<div sw-card="sha">
<div class="sw-card-hdr">Com sombra</div>
<div class="sw-card-bdy">Conteúdo do cartão.</div>
</div>
<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>
<div sw-card="aura">
<div class="sw-card-hdr">Aura</div>
<div class="sw-card-bdy">Conteúdo do cartão.</div>
</div>
<div sw-card="grd">
<div class="sw-card-hdr">Borda animada</div>
<div class="sw-card-bdy">Conteúdo do cartão.</div>
</div>
<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).
<div sw-card="glass">
<div class="sw-card-hdr">Vidro fosco</div>
<div class="sw-card-bdy">Conteúdo do cartão.</div>
</div>
<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
SEO
5 min
Aparecer no Google sem pagar anúncio
<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
<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.
<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.
<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.
<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.
mês
mês
mês
<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
<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
<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
<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.
<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.
Entregaram o site antes do prazo e me explicaram tudo com paciência.
<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".
<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.
<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.
<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>
<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
| Palavra | O que faz | Exemplo |
|---|---|---|
| Modelo (uma palavra no sw-card) | ||
(nenhuma) | Caixa básica ou card de blog/mídia (foto + texto). | sw-card |
full | Blog com a foto cobrindo o card inteiro e o texto por cima. | sw-card="full" |
prd | Produto: foto, selos, nome, estrelas, preço, botão. | sw-card="prd" |
prf | Perfil: capa, foto, nome, cargo, números, redes. | sw-card="prf" |
stt | Número de painel: ícone, tendência, valor, legenda. | sw-card="stt" |
prc | Plano/preço: nome, preço, itens, botão. | sw-card="prc" |
hor | Horizontal: foto à esquerda, texto à direita. | sw-card="hor" |
ftr | Recurso/serviço: ícone, título, texto, link. | sw-card="ftr" |
tst | Depoimento: estrelas, texto, autor. | sw-card="tst" |
ntf | Notificação: ícone, título, texto, hora. | sw-card="ntf" |
tsk | Tarefa (quadro Kanban): etiquetas, prioridade, progresso, prazo. | sw-card="tsk" |
neo | Futurista: vidro escuro, grade e cantoneiras. | sw-card="neo" |
| Complementos de modelo | ||
ldg | Com prd: "carregando" (nome, preço e botão viram faixas piscando). | sw-card="prd ldg" |
pop | Com prc: plano em destaque (maior, borda colorida). Com tst: fundo tingido. | sw-card="prc pop" |
ctr | Com ftr: tudo centralizado. | sw-card="ftr ctr" |
num | Com ftr: ícone redondo para número. | sw-card="ftr num" |
suc / ale / per / pri / inf | Com ntf: cor da faixa da esquerda (só ela — não pinta o topo). | sw-card="ntf suc" |
suc / ale / per / inf | Com neo: troca a cor do efeito (borda, brilho, grade e cantoneiras). Sem palavra: a primária. | sw-card="neo suc" |
new | Com ntf: pontinho de "não lida". | sw-card="ntf new" |
p / g | Com hor: foto estreita (8rem) / larga (22rem). | sw-card="hor g" |
| Tamanho | ||
pp | Bem compacto. | sw-card="pp" |
p | Compacto. | sw-card="p" |
m | Médio (padrão). | sw-card="m" |
g | Espaçoso. | sw-card="g" |
xg | Muito espaçoso. | sw-card="xg" |
| Destaque de cor | ||
pri · suc · ale · per · inf | Faixa de 3px no topo + brilho na cor. O vermelho é per. | sw-card="suc" |
lft-pri · lft-suc · lft-ale · lft-per · lft-inf | Faixa de 4px na lateral esquerda. | sw-card="lft-per" |
fil-pri | Card inteiro em degradê da cor primária do site, texto branco. | sw-card="fil-pri" |
| Efeito | ||
sha | Sombra. | sw-card="sha" |
int | Sobe 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" |
aura | Brilho colorido em volta; sobe ao passar o mouse. | sw-card="aura" |
grd | Borda em degradê que gira. | sw-card="grd" |
glass | Vidro fosco, texto branco — sobre foto. | sw-card="glass" |
| Partes gerais (classes) | ||
sw-card-hdr | Título do card, com linha embaixo. | <div class="sw-card-hdr"> |
sw-card-bdy | Conteúdo. | <div class="sw-card-bdy"> |
sw-card-ftr | Rodapé (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-cnt | Bloco de texto dos modelos (blog, produto, perfil…). | <div class="sw-card-cnt"> |
sw-card-ttl · sw-card-txt | Tí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-cat | Selo de categoria sobre a foto (canto esquerdo). | <span class="sw-card-cat">Dicas</span> |
sw-card-dur | Selo de duração sobre a foto (canto direito). | <span class="sw-card-dur">5 min</span> |
sw-card-meta · sw-card-aut | Linha de rodapé (autor, data) e o autor com avatar. | <div class="sw-card-meta"> |
sw-card-ovl | Com 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-it | Selos 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-btn | Botões redondos que aparecem no passar do mouse (precisa de int). | <button class="sw-card-qck-btn"> |
sw-card-nme | Nome do produto. | <div class="sw-card-nme"> |
sw-card-rat · -rat-stars · -rat-cnt | Linha de avaliação: estrelas e quantidade. | <span class="sw-card-rat-stars">★★★★★</span> |
sw-card-prc · -prc-cur · -prc-old · -prc-off | Preç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-cvr | Capa (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-bio | Cargo (na cor primária) e mini-biografia. | <div class="sw-card-rol"> |
sw-card-stt · -stt-it · -stt-val · -stt-lbl | Faixa de números (ex.: 86 Projetos). | <div class="sw-card-stt"> |
sw-card-soc · sw-card-soc-btn | Botões redondos de redes sociais. | <a class="sw-card-soc-btn"> |
| Partes do número de painel (stt) | ||
sw-card-top | Linha 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-sub | Número grande, legenda e comparação. | <div class="sw-card-val"> |
sw-card-ico-bg | No <i> de um ícone: vira marca d'água gigante ao fundo. | <i class="sw-card-ico-bg swi-cart"></i> |
sw-card-spk | No seu <svg> de mini-gráfico: ocupa a largura toda, 4rem de altura. | <svg class="sw-card-spk"> |
| Partes do plano (prc) | ||
sw-card-pop | Selo "Mais escolhido" no topo (use com pop). Tem que ser <span>. | <span class="sw-card-pop"> |
sw-card-pln | Nome do plano. | <div class="sw-card-pln"> |
sw-card-prc-val · -prc-sym · -prc-num · -prc-per | Preço: "R$", número grande e "por mês". | <span class="sw-card-prc-num">99</span> |
sw-card-desc | Frase 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-lnk | Link "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-qt | Texto do depoimento (itálico). | <p class="sw-card-qt"> |
sw-card-usr · -usr-nm · -usr-rl | Quem falou: avatar, nome e descrição. | <div class="sw-card-usr"> |
sw-card-tme | Hora da notificação. | <span class="sw-card-tme">2 min</span> |
sw-card-cls | O × 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-bar | Barra de progresso. A largura da barra é você que define. | <div class="sw-card-prg"><div class="sw-card-prg-bar"></div></div> |
sw-card-bot | Linha de baixo: pessoas, checklist, prazo. | <div class="sw-card-bot"> |
sw-card-avt-grp · sw-card-avt-it | Bolinhas 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.
<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>
mês
mês
mês
<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>
<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>
<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 íconesswi-*/swil-*dos modelos.- Nenhum JavaScript.
Cuidados — erros comuns
- O vermelho dos destaques é
per(perigo), nãoerr: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-ftrprecisa 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 comint. - 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
.webpleve e semprealt(vazioalt=""se for só enfeite).
O que ele não faz
fil-prié o único "preenchido": não existefil-suc,fil-aleetc. O degradê dele segue a cor primária do site.- O
glasssegue 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 comscrim) 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.

