Grade de quatro colunas: a primeira é a marca (logo, uma frase e ícones sociais) e é mais larga; as outras três são listas curtas de links. Abaixo, um parágrafo de texto legal e uma barra final com copyright e assinatura. Sem JavaScript.
Quando usar
- Praticamente qualquer site institucional. É o rodapé padrão da biblioteca.
- Obrigatório quando o setor é regulado: o bloco
.foot-legalexiste para razão social, CNPJ, registro no órgão regulador e ressalvas.
Quando não usar
- Landing page de campanha única, onde o rodapé deve ser uma linha só. Quatro colunas ali só dão saída ao visitante.
- Quando não existem três listas reais para preencher. Duas colunas vazias parecem descuido — use a variação de três colunas.
Padrão editorial
| Slot | Regra |
|---|---|
| Frase da marca | 1 frase, 10 a 18 palavras, teto de 28ch. O que a empresa é, não o que ela promete. |
| Título de coluna | 1 palavra, caixa alta por CSS: "Unidades", "Documentos", "Atendimento". |
| Itens | 2 a 7 por coluna. Acima de 7 a coluna estica e desalinha a grade. |
| Texto legal | Parágrafo corrido. Copiado do jurídico, não reescrito — é o único texto do site que não passa por edição. |
| Barra final | Copyright à esquerda, assinatura curta à direita. |
A coluna "Documentos" é a que mais cresce em setor regulado. Passando de 7 itens, ela vira uma página própria e o rodapé aponta para ela.
Como usar
<link rel="stylesheet" href="componentes/rodape/quatro-colunas/estilo.css">
Cole antes do botão flutuante, se houver.
Variações
- Sem bloco legal — apague
.foot-legal. - Três colunas —
grid-template-columns:1.3fr 1fr 1fr. Nada mais muda.
Gotchas
line-height:1.95nas listas, não 1.6. Ali cada linha é alvo de clique; o espaçamento é o que separa um alvo do outro no toque. Reduzir quebra usabilidade no mobile, não estética.- Os ícones sociais são texto ("IG", "IN"), não SVG. Decisão de origem, para não pesar por dois ícones. Trocar por SVG é seguro — mantenha o
aria-labelno link. - O texto legal fica em
opacity:.8. De propósito: presente e legível, sem competir. Nunca esconda comdisplay:none— em setor regulado isso é problema jurídico, não de design. - Dois breakpoints, não um. 900px vai para 2 colunas, 520px para 1. Pulando o intermediário, a coluna da marca fica com 28ch de texto em 300px de largura.
Histórico
| Projeto | Onde | Data | Diferenças |
|---|---|---|---|
| Liberta Wealth | index.html e quem-somos.html |
2026-08 | Origem. .logo sem prefixo (mesma classe da nav e do drawer), cores #918e86, #6b6963, #1e1e1e e #333 cruas, margin-top inline no HTML do bloco social. |
Normalizações aplicadas na extração: .logo → .foot-logo; cores cruas → --fg-muted / --rule / --rule-2 / --accent, com opacity onde o original usava um cinza mais escuro; margin-top inline foi para o CSS; conteúdo trocado por genérico, já que endereço e CNPJ são do cliente.