# Footer

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

## Playground

```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

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

## Acessibilidade

-   É 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.