Footer

O rodapé: a marca com os anos, quem fez e os links que valem para o site inteiro.

Nesta página

Playground

Desde

Fundo

HTML

<footer class="feitio-footer"><div class="inner"><span class="who"><strong>Feitio</strong><span>© <span data-since="2026">2026</span></span></span><ul><li><a href="#playground">Mudanças</a></li><li><a href="#playground">Licença MIT</a></li><li><a href="#playground">GitHub</a></li></ul></div></footer>

Quando usar

No fim de toda página de um site de documentação ou institucional.

Quando não usar

Numa tela de trabalho: o que ficaria no rodapé vai para o rodapé do Drawer.
Como um segundo menu, repetindo todas as páginas.

Exemplos

O rodapé

A marca e os anos, à esquerda; os links, à direita. No mobile, um embaixo do outro.

Mostrar código

HTML

<footer class="feitio-footer">
  <div class="inner">
    <span class="who">…<strong>Feitio</strong> © <span data-since="2026">2026</span></span>
    <ul><li><a href="/mudancas">Mudanças</a></li>…</ul>
  </div>
</footer>

Os anos

O ano vem do atributo data-since: enquanto for o mesmo ano, mostra só ele ("2026"); quando o ano vira, mostra o intervalo ("2026–2027"), sozinho, sem ninguém editar.

Anatomia

Quem: a marca, o nome e os anos.
Links: poucos, os que valem para o site inteiro.

É um <footer>: o leitor de tela anuncia a região.

Atributos

Atributo	Valores	Para quê
`class="feitio-footer"`	no `<footer>`	O rodapé, com a linha fina em cima.
`data-since`	o primeiro ano	Mostra o ano, ou o intervalo quando o ano vira.