← Biblioteca componentes/rodape/quatro-colunas/ficha.md CódigoTela cheia
rodape/quatro-colunas

Rodapé de quatro colunas com texto legal

🟢 estavel complexidade baixa prefixo foot- rodape footer legal compliance css-puro sem javascript

Incluir · as linhas que se colam num site novo, depois do core (CLAUDE.md §10)

<link rel="stylesheet" href="componentes/rodape/quatro-colunas/estilo.css">

markup.html · 65 linhas · 2,6 KB

<!-- ==========================================================================
     RODAPÉ — quatro colunas, texto legal e barra final
     Prefixo: foot-
     Requer: core/tokens.css, core/base.css + este estilo.css
     Sem JavaScript.
     Coluna 1 é a marca e é mais larga (1.3fr). As outras três são listas.
     O bloco .foot-legal é opcional — existe para setor regulado.
     ========================================================================== -->

<footer class="foot sec-dark">
  <div class="wrap foot-body">
    <div class="foot-grid">

      <div class="foot-brand">
        <a href="#topo" class="foot-logo" aria-label="Início">
          <img src="../../../showroom/demo/marca.svg" alt="Nome da marca">
        </a>
        <p>Consultoria de investimentos independente, registrada e autorizada pela CVM.</p>
        <div class="foot-social">
          <a href="#" aria-label="Instagram">IG</a>
          <a href="#" aria-label="LinkedIn">IN</a>
        </div>
      </div>

      <div class="foot-col">
        <b>Unidades</b>
        <span>São Paulo — Matriz</span>
        <span>Porto Alegre</span>
      </div>

      <div class="foot-col">
        <b>Documentos</b>
        <a href="#">Código de Ética</a>
        <a href="#">Controles Internos</a>
        <a href="#">Política de PLDFT</a>
        <a href="#">Política de Suitability</a>
        <a href="#">Formulário de Referência</a>
        <a href="#">Política de Privacidade</a>
        <!-- O gancho do overlay/aviso-cookies. A ficha dele diz que este link
             mora AQUI, e que sem ele o consentimento deixa de ser revogável —
             e consentimento que não se revoga não vale. O rodapé é o lugar
             certo porque é a única parte da página que existe em todas elas.
             Se o site não usar o aviso de cookies, apague esta linha: um link
             que não abre nada é pior que link nenhum. -->
        <a href="#" data-lgpd-reabrir>Preferências de cookies</a>
      </div>

      <div class="foot-col">
        <b>Atendimento</b>
        <a href="tel:+550000000000">(00) 0000-0000</a>
        <a href="https://wa.me/5500000000000" target="_blank" rel="noopener">WhatsApp</a>
        <span>Rua Exemplo, 100 — Sala 192</span>
        <span>Bairro, Cidade — UF</span>
      </div>

    </div>

    <p class="foot-legal">Texto legal obrigatório do setor: razão social, CNPJ, registro no órgão regulador e as ressalvas exigidas. Em setor não regulado, apague este parágrafo inteiro.</p>

    <div class="foot-bottom">
      <span>© 2026 Nome da marca</span>
      <span>Assinatura ou tagline curta.</span>
    </div>
  </div>
</footer>

estilo.css · 48 linhas · 2,1 KB

/* ==========================================================================
   RODAPÉ — quatro colunas, texto legal e barra final
   Prefixo: foot-
   Tokens usados: --dark --fg-muted --rule --rule-2 --accent --display
   ========================================================================== */

.foot{background:var(--dark);border-top:1px solid var(--rule)}
.foot-body{padding-block:clamp(44px,7vh,68px) clamp(24px,4vh,32px)}

/* A coluna da marca é mais larga que as outras três — ela carrega logo,
   descrição e social; as demais carregam listas curtas. */
.foot-grid{
  display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px;
  padding-bottom:32px;border-bottom:1px solid var(--rule);
}

.foot-logo{line-height:0;display:block}
.foot-logo img{height:20px;width:auto;display:block}
.foot-brand p{font-size:13px;color:var(--fg-muted);margin-top:14px;line-height:1.75;max-width:28ch}

.foot-col b{
  display:block;font-family:var(--display);font-weight:700;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;
}
/* line-height 1.95 e não 1.6: aqui cada linha é alvo de clique, e o
   espaçamento é o que separa um alvo do outro no toque. */
.foot-col a,.foot-col span{
  display:block;font-size:12.5px;line-height:1.95;color:var(--fg-muted);transition:color .2s;
}
.foot-col a:hover{color:var(--accent)}

.foot-social{display:flex;gap:10px;margin-top:16px}
.foot-social a{
  width:30px;height:30px;border:1px solid var(--rule-2);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--fg-muted);font-size:10px;letter-spacing:.06em;transition:.25s;
}
.foot-social a:hover{border-color:var(--accent);color:var(--accent)}

.foot-legal{padding-top:24px;font-size:11.5px;line-height:1.8;color:var(--fg-muted);max-width:100ch;opacity:.8}

.foot-bottom{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;
  padding-top:20px;font-size:11.5px;color:var(--fg-muted);opacity:.8;
}

@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;row-gap:28px}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}

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

Quando não usar

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

Gotchas

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.